Flask+Vue+Nginx+Gunicorn 项目部署

项目开发阶段，使用flask_restful 提供api, vue 使用axios 发送请求请求，相关跨域问题，开发阶段用的着，部署时前后端会放到一起，所以不存在跨域。可以在前端处理，在config 的index.js 中配置：

proxyTable: {
    '/': {
         target: 'http://127.0.0.1:5000/',
         changeOrigin: true,
          pathRewrite: {
         }
    }
},

也可以在后端使用flask_cors 处理跨域问题：

from flask_cors import CORS
cors = CORS(app,resources={"/api/*",{"origins": "*"}})

修改vue项目中的 config 文件下的index.js,这样打包生成的dist文件会和falsk项目文件同级。

// Template for index.html
index: path.resolve(__dirname, '../../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',

执行npm run build 打包vue 文件生成dist文件夹，将dist文件拷贝到falsk项目中
和启动文件同级目录。

然后配置启动文件：

from flask import Flask,render_template
from flask_restful import Api,Resource
import requests

app = Flask(__name__,
            static_folder="./dist/static",
            template_folder="./dist")

....中间内容省略

@app.route('/', defaults={'path': ''})
@app.route('/')
def catch_all(path):
    if app.debug:
        return requests.get('http://localhost:8080/{}'.format(path)).text
    return render_template("index.html")

这段代码会将访问5000端口的请求转到8080端口，也就是我们的vue项目默认端口。
用代码传到服务器上

安装virtualenv ,创建虚拟环境，安装项目依赖
pip install virtualenv
virtualenv venv
source venv/bin/activate
pip install -r requirements.txt

安装gunicorn
pip install gunicorn

gunicorn run:app 或者可以开启四个线程来执行 gunicorn -w 4 -b 127.0.0.1:5000 run:app 这里的run 就是启动文件，不要加.py
出现下面内容表示成功：

[2018-08-14 16:46:56 +0800] [20357] [INFO] Starting gunicorn 19.9.0
[2018-08-14 16:46:56 +0800] [20357] [INFO] Listening at: http://127.0.0.1:5000 (20357)
[2018-08-14 16:46:56 +0800] [20357] [INFO] Using worker: sync
[2018-08-14 16:46:56 +0800] [20360] [INFO] Booting worker with pid: 20360
[2018-08-14 16:46:56 +0800] [20361] [INFO] Booting worker with pid: 20361
[2018-08-14 16:46:56 +0800] [20362] [INFO] Booting worker with pid: 20362
[2018-08-14 16:46:56 +0800] [20363] [INFO] Booting worker with pid: 20363

安装nginx,自行百度

配置nginx.conf 操作前备份 cp nginx.conf nginx.conf.bak 然后vim nginx.conf
监听80端口,将请求代理到我们刚才启动的5000端口

server {
    listen 80;
    server_name localhost;
    location /{
        proxy_pass http://127.0.0.1:5000;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }

执行nginx -t 检查配置文件写的有没有问题

执行nginx -s reload 重启nginx

ok 大功告成，访问5000端口就可以看到我们的vue前端页面了。