Skip to main content

部署前后端分离项目

从本节开始正式部署前后端分离的电影网站项目。这个项目的部署，和我们前面介绍的纯django网站项目有很多地方非常类似，如果你是一个新手的话，可以先去学习一下前面django基础中的网站部署，例如，如何购买服务器，如何上传代码，如何安装宝塔等等。

相似的内容这里我们不再赘述，我们重点介绍前后端分离的不一样的地方。

打包前端代码​

在frontend文件夹下，有很多的vue文件和静态资源文件，我们进入到frontend路径下，使用如下命令进行打包。

pnpm build

如下所示。

图100-前端文件打包

打包后，在frontend目录下生成一个dist文件夹，如下图所示。

图100-创建dist文件夹

生成requirements.txt​

将项目中所用到的第三方包全部存储在一个requirements.txt文件中，使用如下命令:

pip freeze > requirements.txt

运行效果如下：

图100-生成requirements文件

执行完成后，会生成一个requirements.txt文件，里面显示是安装的包名。如下图所示。

图100-requirements.txt文件内容

上传代码​

小伙伴可以使用ftp或git上传代码到云服务器， 将代码上传到服务器上的/www/wwwroot/下。可以参照Django基础知识的部署小结。

接下来，在宝塔中添加python项目。如下图所示。

图100-宝塔添加项目

上面端口设置为9200， 所以我们需要在宝塔和阿里云服务都开启这个端口。

图100-宝塔开启9200端口

图100-阿里云开启9200端口

创建虚拟环境启动项目​

在服务器的项目目录下，使用virtualenv创建一个venv虚拟环境，命令如下:

virtualenv venv

如下图所示。

图100-创建虚拟环境

warning

如果提示virtualenv不可用，则需要使用命令pip install virtualenv安装

使用如下命令激活虚拟环境:

source venv/bin/activate

激活后，使用如下命令安装第三方包：

pip install -r requirements.txt

如下图所示。

图100-激活虚拟环境

添加数据库​

接下来添加数据库，小伙伴可以使用命令行的方式添加，也可以使用宝塔界面添加。宝塔界面添加如下图所示。

图100-添加数据库

配置数据库​

在settings.py中，配置mysql,修改用户名和密码。如下图所示 。

图100-配置mysql

收集静态资源文件​

将所有的静态资源全部放到collected_static路径下。如下图所示。

图100-设置静态资源

执行如下命令自动收集:

python manage.py collectstatic

图100-收集静态资源文件 新增的文件如下： 图100-新增collected_static文件夹

生成迁移文件​

使用如下命令生成迁移文件：

python manage.py migrate

如下图所示。 图100-执行迁移

启动服务​

使用如下命令启动django服务：

python manage.py runserver 127.0.0.1:9200

图100-启动服务

注意

前面我们配置的端口是9200，所以启动服务时，这里添加一个端口号。

如果启动后，服务报错，需要一一处理每一个错误，直到正确启动。

配置nginx​

在www/server/pannel/vhost/nginx目录下，创建一个drf_movie.conf文件，代码如下：

server 
{
    listen 80;
    server_name 39.99.245.7; # 修改为你的ip地址
    index  index.html;
    root  /www/wwwroot/drf_movie/dx_movie; # 修改为你自己的项目路径
    
    # 配置静态资源文件
    location /img {
        alias /www/wwwroot/drf_movie/dx_movie/collected_static/img;
    }
  
    location /js {
        alias /www/wwwroot/drf_movie/dx_movie/collected_static/js;
    }
    
  	location /css {
        alias /www/wwwroot/drf_movie/dx_movie/collected_static/css;
    }
  
    location /static {
        alias /www/wwwroot/drf_movie/dx_movie/collected_static;
    }
        
    # 将接口及后台请求转发给 Gunicorn
    location ~ (^/api|^/admin)  {
        proxy_set_header Host $host;
        proxy_pass http://127.0.0.1:9200;   # Django服务的端口
    }
    
    # 其他所有请求均直接请求 Vue 打包的 html 文件
    location / {
        try_files /collected_static/index.html =404;
    }
    
}

导入MySQL数据​

接下来，我们将本地的sql文件上传到服务器。可以使用本地的MySQL可视化工具，连接远程MySQL服务，如下图所示。

图100-连接远程数据库

连接成功以后，执行SQL语句，生成SQL数据，如下图所示。

图100-连接远程数据库

接下里我们就可以访问网址了，效果如下图所示。

图100-访问公网

修改配置支付宝​

在dx_movie/dx_movie的settings.py文件中，修改支付宝的配置。如下图所示。

图100-配置支付宝

此时，当支付成功时，将跳转到指定的ip地址。

图100-支付成功后跳转到ip地址

安装Redis​

在宝塔上安装redis, 如下图所示。

图100-安装redis

启动selery​

在服务器启动celery,如下所示。

图100-启动celery

启动flower​

接下里，启动flower, 如下图所示。

图100-启动flower

flower服务的端口号是5555， 所以，需要在宝塔和阿里云开启端口。

图100-添加flower端口

图100-阿里云添加5555端口

配置完成后，我们就可以访问flower服务了，如下图所示。

图100-flower监测

但是有一个问题，任何人都可以访问它，所以我们设置通过账号和密码才能访问flower.

图100-设置flower密码

再次访问flower, 提示需要输入用户名和密码，即使上面命令中设置的用户名andy，密码andygogo。

图100-使用账号和密码访问

安装和配置gunicorn​

使用pip命令安装gunicorn 和 supervisor, 命令如下：

pip install gunicorn supervisor

启动gunicorn，

如下图所示。

图100-启动gunicorn

配置supervisor​

生成默认的supervisor配置文件，命令如下:

echo_supervisord_conf > supervisord.conf

如下所示。

图100-生成默认的supervisor文件

配置supervisor, 打开生成的supervisord.conf， 新增如下代码：

[program:gunicorn]
command=/www/wwwroot/drf_movie/venv/bin/gunicorn dx_movie.wsgi:application -c gunicorn_conf.py
directory=/www/wwwroot/drf_movie
autostart=true
autorestart=true
stderr_logfile=/www/wwwroot/drf_movie/log/gunicorn.err.log
stdout_logfile=/www/wwwroot/drf_movie/log/gunicorn.out.log

[program:celery]
command=/www/wwwroot/drf_movie/venv/bin/celery -A yourapp worker -l info
directory=/www/wwwroot/drf_movie
autostart=true
autorestart=true
stderr_logfile=/www/wwwroot/drf_movie/log/celery.err.log
stdout_logfile=/www/wwwroot/drf_movie/log/celery.out.log

[program:flower]
command=/www/wwwroot/drf_movie/venv/bin/celery -A dx_movie flower --basic-auth=andy:andygogo
directory=/www/wwwroot/drf_movie
autostart=true
autorestart=true
stderr_logfile=/www/wwwroot/drf_movie/log/flower.err.log
stdout_logfile=/www/wwwroot/drf_movie/log/flower.out.log

最后，使用以下命令启动supervisor：

supervisord -c supervisord.conf

这样，supervisor将会启动gunicorn、celery和flower，并在需要时进行重新启动。这种方法可以确保这些进程能够一起启动和管理。

如果报错，查看错误日志： /tmp/supervisord.log

查看gunicorn，如下所示。

图100-查看gunicorn

此时，就可以项目就可以正常访问了。

至此，我们完成了整个前后端分离项目的部署工作。