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

前言

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

项目部署环境

1. ubuntu16.04
2. python3.6.8
3. django 3.0.6

部署步骤

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

步骤１

uwsgi部署django项目。

1.更改django的settings.py文件

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

2.安装uwsgi

pip3 install uwsgi

3.收集静态资源

在django的settings.py中增加如下：

# 静态资源访问的起始url
STATIC_URL = '/static/'
# 指定静态资源所在的目录 
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static') 
 ]
# 设置收集静态资源的路径(部署时使用)
STATIC_ROOT = os.path.join(BASE_DIR, 'collect_static/')

然后在项目根目录下(manage.py同级)运行如下命令：

python manage.py collectstatic

4.准备uwsgi的配置文件

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

  /home/tk/Project/test_LP100/ThinkCloud/wsgi.py

在项目根目录下创建一个文件 uwsgi.ini并配置uwsgi.ini文件如下：

[uwsgi]
# 监听的端口
http=0.0.0.0:8080

# chdir配置项目的根目录
chdir=/home/tk/Project/test_LP100/ThinkCloud

# 主应用中的wsgi文件
wsgi-file=ThinkCloud/wsgi.py

# 代理静态资源：路径映射
# 单独使用uwsgi时可使用这个路径映射，搭配nginx的话，使用nginx
#static-map=/static=/home/tk/Project/test_LP100/ThinkCloud/collect_static

# 启动一个master进程，来管理其余的子进程
master=True
processes = 4
threads = 2

# 保存主进程的pid，用来控制uwsgi服务
pidfile=/home/tk/Project/test_LP100/ThinkCloud/uwsgi.pid

# 设置后台运行，保存日志
daemonize=/home/tk/Project/test_LP100/ThinkCloud/Logs/uwsgi.log
# deamonize=1  ; 用来配置background运行

# 设置每个工作进程处理请求的上限，达到上限时，将回收（重启）该进程。可以预防内存泄漏
max-requests=5000

# 服务停止时自动移除unix Socket和pid文件
vacuum=true

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

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

这个时候可以通过用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中创建一个文件，例如叫lp100.conf。

   配置内容如下：

   server {
       # 监听80端口
       listen 80;
   
       # 这里可以暂时先忽略
       server_name  test.com;  # 域名或IP
   
       # 当访问 http://ip地址/ 的时候
       # 这里是配置的前端项目
       location / {
           # root这里写打包好的前端项目的dist文件夹的路径(包括dist)
           root  /home/tk/Project/test_LP100/ThinkCloud/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/lp100.conf
   

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

   systemctl restart nginx
   

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

步骤三

前端的接口请求转发。

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

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

server {
    # 监听80端口
    listen 80;

    # 这里可以暂时先忽略
    server_name  192.168.4.117;  # 域名或IP
    charset     utf-8;

    # 上传文件大小的限制
    client_max_body_size 75M;
	
    # 静态文件配置
    location /static {
        alias /home/tk/Project/test_LP100/ThinkCloud/collect_static;
    }

    location / {
        root /home/tk/Project/test_LP100/ThinkCloud/dist;
        include /home/tk/Project/test_LP100/ThinkCloud/uwsgi_params;
        proxy_pass http://0.0.0.0:8080;  # 这里端口必须要和上面uwsgi.ini文件中配置的一样
        proxy_set_header Host  $host;
        proxy_set_header X-Forwarded-For  $remote_addr;
    } 
}

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