用uwsgi和nginx 部署 django和vue打造的前后端分离项目

前言

由于现在没有彻底掌握nginx的使用，部署起来有点磕磕绊绊，为了防止以后再次需要部署的时候无法快速找到适合的资料，以此文章记录简单的部署步骤。

项目部署环境

1. 阿里云 ubuntu16.04
2. python3.6.8
3. django 2.2
4. fillzilla 用于上传文件到服务器

部署步骤

1. uwsgi部署django项目。
2. nginx部署vue项目。
3. 配置nginx解决vue前端接口转发。

步骤１

uwsgi部署django项目。

django官方文档中关于用uwsgi部署django的文档：https://docs.djangoproject.com/en/2.2/howto/deployment/wsgi/uwsgi/

1. 更改django的settings.py文件

   • DEBUG=True改为DEBUG=False
   • ALLOWED_HOSTS = ['*']
     ALLOWED_HOSTS是为了限定请求中的host值，以防止黑客构造包来发送请求。只有在列表中的host才能访问。强烈建议不要使用*通配符去配置，另外当DEBUG设置为False的时候必须配置这个配置。否则会抛出异常。这里暂时以 * 设置，等正式发布之后改成对应的域名。

2. 安装uwsgi

   pip3 install uwsgi
   

3. 准备uwsgi的配置文件

   假设我项目中的wsgi.py文件的路径如下。

     /home/enoch/blog/project_name/module_name/wsgi.py
   

   找一个自己喜欢的地方创建一个文件 uwsgi.ini并配置uwsgi.ini文件如下：

   [uwsgi]
   # chdir配置项目的根目录
   chdir=/home/enoch/blog/project_name
   
   # 可以用module或者wsgi-file配置，module配置为module=[wsgi.py文件上级目录的名称].wsgi:application
   # 此处采用wsgi-file的方式: [wsgi.py文件上级目录的名称]/wsgi.py
   wsgi-file=module_name/wsgi.py
   
   # 使用的python的虚拟环境的根目录
   home=/root/.pyenv/versions/enoch_blog
   
   # 通过http协议访问8000端口，待会儿nginx会通过这里来访问到后端的数据。也可以使用socket，如果采用socket，则nginx也要对应修改配置。此处采用http。
   http=0.0.0.0:8000
   
   # 下面的暂时可以不用管
   master=true
   chmod-socket=664
   vacuum=true
   

4. uwsgi --ini uwsgi.ini 启动uwsgi服务

   进入到uwsgi.ini的所在路径中执行uwsgi --ini uwsgi.ini命令启动uwsgi服务，至此django的部署就告一段落。当然如果不进入到配置文件所在目录中也可以在命令中将路径直接写进去也可以。

5. 这个时候可以通过用postman访问一下服务器上配置的后端是否能被访问到来测试一下后端的配置是否成功。

步骤二

nginx部署vue项目

1. 先通过npm run build将vue项目打包。打包完成后会在前端项目的根目录里出现一个dist文件夹。

2. 将第一步打包产生的dist文件夹放入服务器中想放的位置。

3. 安装nginx

   sudo apt update
   sudo apt install nginx
   

4. 启动nginx查看是否安装成功

   systemctl start nginx
   

   用命令启动nginx服务后，访问服务器地址，应该可以看到 Welcome to nginx！字样。这表示安装和启动nginx服务成功。

5. 关于sites-available和sites-enabled的介绍

   在/etc/nginx路径下会有两个文件夹。一个是sites-available和sites-enabled。

   sites-available里面放的是一些nginx的配置文件，默认只有一个default。在sites-enabled中也有一个default，是sites-available中的default的软链接。放在sites-enabled中的文件是表示启用的配置文件，可以在/etc/nginx/nginx.conf文件中看到有如下的一行配置，可以看到sites-enabled中的所有配置文件都被引入进来了。

   include /etc/nginx/sites-enabled/*;
   

6. 开始配置

   我们首先将sites-enabled中的default文件删除（因为只是一个软链接如果有需要可以再建立一个）。

   在sites-available中创建一个文件，例如叫blog.conf。

   配置内容如下：

   server {
       # 监听9090端口
       listen 9090;
   
       # 这里可以暂时先忽略
       server_name  test.com;
   
       # 当访问 http://ip地址/ 的时候
       # 这里是配置的前端项目
       location / {
           # root这里写打包好的前端项目的dist文件夹的路径(包括dist)
           root  /home/enoch/blog/enoch_blog_frontend/dist;
   
           # hash模式只配置访问html就可以了
           index  index.html;
   
           # history模式下
           try_files $uri $uri/ /index.html;
       }
   }
   

7. 在sites-enabled中建立一个刚才创建的nginx配置文件的软连接到 sites-enabled文件夹中。

   cd ../sites-enabled
   ln -s ../sites-available/blog.conf
   

8. 重启nginx服务，测试vue项目是否部署成功

   systemctl restart nginx
   

   访问 http://[ip地址]:[指定端口]，如果能出现前端页面则vue项目部署成功。

步骤三

前端的接口请求转发。

经历了步骤一和步骤二之后，单独访问后端接口和单独访问前端页面都是可行的了，只是前端页面并不能拿到后端接口中的数据，这是为啥呢？因为前端的接口没有转发到后端上呀？本来这个事情在开发的时候是在vue.config.js中配置的，现在在生产环境下，就需要nginx来处理了。

我们重新打开步骤二中的blog.conf文件，添加配置location /api {...}。这个配置就是和vue项目中的vue.config.js中配置proxy是差不多的，添加完的blog.conf文件内容如下：

server {
        # 监听9090端口
        listen 9090;

        # 这里可以暂时先忽略
        server_name  test.com;

        # 当访问 http://ip地址/ 的时候
        # 这里是配置的前端项目
        location / {
            # root这里写打包好的前端项目的dist文件夹的路径(包括dist)
            root  /home/enoch/blog/enoch_blog_frontend/dist;

            # hash模式只配置访问html就可以了
            index  index.html;

            # history模式下
            try_files $uri $uri/ /index.html;
        }

        location /api {
            # 这里要对应上uwsgi中的配置
            proxy_pass http://[服务器ip地址]:[uwsgi中配置的端口]/api;
        }
}

配置完成后重启nginx服务即可

总结

这里的部署配置都是最基础的，能让项目跑起来的配置，现在的配置，在进入到django的admin中，会发现样式的丢失，关于这方面的处理以及其他的一些配置等后续再加入记录中。

其他

1. 在为django项目迁移数据库的时候可能出现编码问题，此时可以通过修改mysql的配置文件，将默认编码改成utf8，再重新创建数据库解决。详见：https://blog.csdn.net/m0_38024592/article/details/83963865。