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

Question

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

当前设置：Vue.js前端与VUE路由器与静态页面+瓶后端（阿贾克斯沟通，只需要方便通过表单发送电子邮件）。

问题：

我如何将其部署到一个VPS疑惑：

• 在两个不同的端口，一个用于uWsgi +瓶和一个用于Vue公司，与Nginx的服务他们两个过程
• 一个单一的过程 - Uwsgi +合剂提供静态的（内置）Vue公司的网页，Nginx的在他们面前。瓶不知何故需要请求重定向到相应的静态视图。
• 别的东西

我的瓶后端/ 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的应用程序放置的目录。同时，它也应该成为你的瓶的应用程序。所以应该有定义的两个位置。

有可能做到这一点的方法不止一种，这里是一个随便举个例子，我在网上找到：

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