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

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

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

准备工作

安装 nginx

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

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

前后端开发环境

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

  1. 前端开发环境:
    • node12.16.3
    • yarn: 1.22.10
  2. 后端开发环境:
    • 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

构建前端项目

  1. 构建前端项目

    yarn build
    
  2. 将构建后的文件全部拷到 /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;
}

这里解释一下配置:

  1. 其中 root 后的内容指定前端项目的构建文件存放目录,比如这里为 /data/www/demo
  2. 解决前端页面在某一个路由下人为进行页面刷新导致 404 错误的问题
  3. 后端 API 转发代理
  4. nginx 数据体大小限制默认为 2MB,这里我们修改为 1GB,根据情况修改
  5. 配置 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

webnginx

1293 字

2020-11-28 15:04 +0800