Question

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

当前设置： 带有带有静态页面的vue-router的Vue.js前端+ 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

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

1 个答案: