序

部分童鞋经常问到部署问题，这次简单总结一下部署过程，方便大家查看，也不用重复回答。
平台跳转：https://testerhome.com/topics/14962

后台部署

关于 nginx.conf 的配置，可在项目中的 flaskapi.conf 修改完后，强制替换 nginx 的 nginx.conf

server {

    listen 80;

    server_name 192.168.6.19;

    charset utf-8;

    client_max_body_size 75M;

        location / {

        root /home/ApiTestManage/dist;

        index index.html;

            location /api{

            proxy_pass http://192.168.6.19:8080/;

            }
            location /reports/{

            alias /home/reports/;

            }

        }

    }

需要注意的有几个点，server_name 这个是配置服务器的当前地址；root 这个地址是配置前端打包后的项目在服务器的地址；proxy_pass 这个是服务器的启动服务的地址

后台服务启动命令：

gunicorn -c gun_config.py manage:app

gunicorn_config.py 里面的关键参数说明

bind = '192.168.6.19:8080'

启动服务的地址，注意：nginx 里面的 proxy_pass 需要与这个一致

前端配置&打包

配置文件：webpack.config.js

devServer: {
        host: '127.0.0.1',
        // host: '192.168.6.19',
        port: 8010,
        proxy: {
            '/api/': {
                target: 'http://127.0.0.1:8080',
                // target: 'http://192.168.6.19:8080',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }

host 访问前端的地址；target 地址，当跨域调用 api 时的地址，该地址需要与 nginx 里面的 proxy_pass 和后台启动地址一致

执行打包命令

npm run build

生成 dist 文件，将该文件存放于服务器的某个路径，该路径需要和 nginx.conf 里面的 root 一致

补充本地调试下的启动方式

前端项目启动

npm run dev

后台项目启动
直接运行

manage.py

注意前端配置文件的跨域地址和 manage.py 里面的地址要一致

终

配置完成后，执行命令启动后台：gunicorn -c gunicorn_config.py manage_linux:app，开启 nginx：service nginx start

如无意外，可在局域网内访问： http://192.168.6.19/#/login 看到登录页面 (注意：http://192.168.6.19/# 页面是没内容的)