nginx 实现 vue + flask 前后端分离部署
随着项目的进展,我们发现单靠后端托管部署 vue 构建的静态文件的方式已无法满足我们的开发需求,所以此文要讲的内容应运而生,借用 nginx 简单实现 vue 和 flask 前后端项目的分离部署。
本文将以一个简单的 web 应用例子以清晰地讲述部署方式。
准备工作
安装 nginx
网上有很多资料参考,搜索相应系统的安装方式进行安装即可。
ubuntu 可以借用包管理工具
apt
或apt-get
进行安装,当然也可以使用 docker 进行启动,这里不做过多延伸。
前后端开发环境
以笔者使用的机器为例,描述的版本号为机器使用的各工具版本。
- 前端开发环境:
- node:
12.16.3
- yarn:
1.22.10
- node:
- 后端开发环境:
- python:
3.6.10
- flask:
1.1.2
- python:
Demo
以一个简单的 demo 讲述部署,功能很简单,前端输入两个数,发给后端,后端计算后返回前端,前端页面显示结果,即一款简单的整数加法器。
前端工程
vue-flask-deploy-demo-frontend
后端工程
第一次部署
部署后端服务
后端服务启动到 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