Nov 28, 2020

nginx 实现 vue + flask 前后端分离部署

随着项目的进展，我们发现单靠后端托管部署 vue 构建的静态文件的方式已无法满足我们的开发需求，所以此文要讲的内容应运而生，借用 nginx 简单实现 vue 和 flask 前后端项目的分离部署。

本文将以一个简单的 web 应用例子以清晰地讲述部署方式。

准备工作

安装 nginx

网上有很多资料参考，搜索相应系统的安装方式进行安装即可。

ubuntu 可以借用包管理工具 apt 或 apt-get 进行安装，当然也可以使用 docker 进行启动，这里不做过多延伸。

前后端开发环境

以笔者使用的机器为例，描述的版本号为机器使用的各工具版本。

前端开发环境：
- node：12.16.3
- yarn: 1.22.10
后端开发环境：
- python: 3.6.10
- flask: 1.1.2

Demo

以一个简单的 demo 讲述部署，功能很简单，前端输入两个数，发给后端，后端计算后返回前端，前端页面显示结果，即一款简单的整数加法器。

前端工程

vue-flask-deploy-demo-frontend

后端工程

vue-flask-deploy-demo-backend

第一次部署

部署后端服务

后端服务启动到 10086 端口，使用 gunicorn启动：

gunciorn -b 127.0.0.1:10086 main:app

不暴露后端服务，只能 localhost 进行访问！

可以使用 systemctl 管理后端服务，需要撰写 service 文件，放置到 /etc/systemd/system 下，比如这里最终的文件是 /etc/systemd/system/demo.service，内容如下：

[Unit]
Description = vue-flask-deploy-demo
After = network.target

[Service]
User = xxx
Group = xxx

WorkingDirectory = /data/home/xxx/vue-flask-deploy-demo/vue-flask-deploy-demo-backend
ExecStart = /data/home/xxx/.local/share/virtualenvs/vue-flask-deploy-demo-backend--ctYQkX6/bin/gunicorn -b 127.0.0.1:10086 main:app
Type = simple

[Install]
WantedBy = multi-user.target

User: 改为自己的用户名；
Group: 改为自己的用户组名称；
WorkingDirectory：后端项目目录，使用绝对路径
ExecStart：后端服务启动在本地 10086 的命令，其中 gunicorn 要使用绝对路径

重载一下服务文件：

sudo systemctl daemon-reload

如果需要服务器重启后自启动服务，需要：

sudo systemctl enable demo.service

启动服务：

sudo systemctl start demo

构建前端项目

构建前端项目
```
yarn build
```

将构建后的文件全部拷到 /data/www/demo 下：

# 创建目录
mkdir -p /data/www/demo
# 拷贝构建生成的文件到目录
cp -r dist/* /data/www/demo/

其中, /data/www/demo 为要放置前端静态文件的目录，根据自身情况而定！

nginx 配置文件

自定义的 nginx 配置文件可以放在路径 /etc/nginx/conf.d 下，所以我们第一步需要先在其下添加一个配置文件，比如 demo.conf，内容如下：

upstream backend {
  	# 定义后端服务，这里为 10086
    server 127.0.0.1:10086;
}

server {
    listen  20804;

    # 前端项目build dist 文件部署
		location / {
        # 1. 前端项目构建出的文件放置位置
        root /data/www/demo;
        # 2. 解决 vue 采用 history 模式时前端路由页面刷新 404 的错误
        try_files $uri $uri/ /index.html last;
    }

    # 3. 后端 api/static文件代理，没有后端可忽略这个
    location ~/(api|static)/ {
        proxy_pass http://backend;
        # 4. 增大数据体大小限制，防止 413 错误；
        client_max_body_size 1024m;
    }

	# 5. IP 白名单
    # - 允许局域网段 192.168.xxx.xxx 机器访问
    # allow 192.168.0.0/16;
    # deny all;
}

这里解释一下配置：

其中 root 后的内容指定前端项目的构建文件存放目录，比如这里为 /data/www/demo
解决前端页面在某一个路由下人为进行页面刷新导致 404 错误的问题
后端 API 转发代理
nginx 数据体大小限制默认为 2MB，这里我们修改为 1GB，根据情况修改
配置 IP 白名单可以进行访问限制

这里这样配置的目标有两个：

对外只暴露一个端口即 20804

前后端项目的分离部署，包括静态文件目录

nginx 重新加载配置

sudo nginx -s reload

此时，我们的项目就可以访问了！

项目升级部署

后续的开发中，会经常进行升级，就非常简单了。

前端项目

只需在本机进行构建，然后把文件覆盖到服务器的前端文件目录即可

# 构建项目
yarn build
# 上传文件
scp -r -P 20800 dist/* xxx@xxx.xxx.xxx.xxx:/data/www/demo/

scp 命令将构建的前端文件拷贝到服务器的部署目录下。

前端项目更新升级，不再需要后端重启服务

后端项目

服务器拉取部署分支（develop 或 master）最新代码，然后重启服务即可。

# 拉取最新代码
git pull
# 重启后端服务
sudo systemctl restart demo