如何部署 Flask / Vue.js Web 应用程序

Question

我需要一些帮助来部署我的 Flask/Vue.js Web 应用程序。

当前设置： Vue.js 前端，带有静态页面的 vue-router + Flask 后端（通过 Ajax 进行通信，只需要通过表单发送电子邮件）。

问题：

我对如何在 VPS 上部署它感到困惑：

• 两个不同端口上的两个进程，一个用于 uWsgi+Flask，一个用于 Vue，Nginx 为它们提供服务
• 一个进程 - Uswgi+Flask 为静态（构建）Vue 页面提供服务，Nginx 位于它们前面。Flask 需要以某种方式将请求重定向到适当的静态视图。
• 别的东西

我的 Flask 后端/API：

from flask_cors import CORS
from flask_mail import Message
from datetime import datetime
import pytz
from flask_mail_sendgrid import MailSendGrid
from config import confreader

app = Flask(__name__)

app.config.from_object(confreader)

curdate = str(datetime.now(pytz.timezone("Europe/Bucharest")))

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

mail = MailSendGrid(app)

@app.route('/api/sendemail', methods=['POST'])
def send_email():

    subject = '[Contact Form Message] ' + request.json['name'] + ' on ' + curdate
    template = f"""
    <h1>{request.json['name']} ({request.json['email']}) on {curdate}</h1>
    <p>{request.json['text']}</p>"""

    msg = Message(
        subject,
        recipients=[app.config['MAIL_DEFAULT_SENDER']],
        html=template,
        sender=request.json['email']
    )

    try:
      mail.send(msg)
      return jsonify(True)
    except:
      return jsonify(False)

if __name__ == '__main__':
    app.run()

谢谢！

Answer 1

Nginx 可以提供静态文件，因此您可以做的是将 Nginx 指向放置已编译的 Vue.js 应用程序的目录。同时它也应该服务于你的 Flask 应用程序。所以应该定义两个位置。

可能有不止一种方法可以做到，这是我在网上找到的一个随机示例：

server {  
    listen 80;
    server_name 123.45.67.89;

    location /api {
        include uwsgi_params;
        uwsgi_pass unix:/home/survey/flask-vuejs-survey/backend/surveyapi.sock;
    }

    location / {
        root /home/survey/flask-vuejs-survey/frontend/survey-spa/dist;
        try_files $uri $uri/ /index.html;
    }
}

https://stackabuse.com/single-page-apps-with-vue-js-and-flask-deployment/#settingupnginx