在服务器上处理单页应用程序前端和 api 后端的最佳方法

Question

我已经构建了一个 API 使用 flask 和单页应用程序作为前端。端口 5000 上的后端运行，我使用 parcelJS 构建前端，它有自己的 Web 服务器，端口运行上 1234。 css、js 和静态文件都在 dist 文件夹中，可以使用包裹网络服务器从 127.0.0.1:1234 访问。

来自前端的所有请求都发送到 127.0.0.1:5000。

问题

我想在服务器上部署项目，我是否应该将两者集成并让前端和后端在同一个网络服务器上工作并启用 CORS 以及处理基于 API 的单页的最佳方法是什么应用实施？

API 服务器

API 服务器在端口 5000 上启动，设置如下。

self.app = Flask(__name__, static_folder="../../front/dist",
                         template_folder="../../front/dist")
self.api = Api(self.app)
CORS(self.app)
if __name__ == '__main__':
    app_instance.app.run(debug=True, host='127.0.0.1', port=5000)

API端点

像 /api/snippets 这样的端点对数据库进行查询并 return 一个 json 响应。

app_instance.api.add_resource(Snippets, '/api/snippets')

前端

前端的javascript向127.0.0.1:5000/api/snippets发出请求。

当我尝试使用 pythons 网络服务器为 index.html 提供服务时，我确实获得了 HTML 内容，但我无法访问 dist 文件夹中的 js、css 文件。

@app_instance.app.route('/')
def index():
    return render_template("index.html")

当我配置 NGINX 来处理路由时，我需要向域发出请求并禁用 CORS。

文件夹结构

├── back
│   └── app
│       
└── front
    ├── assets
    ├── css
    ├── dist
    └── js
        ├── components
        └── lib

Answer 1

我需要运行来自同一个网络服务器。我使用 python/flasks 开发服务器进行测试，但主要思想是相同的，应该适用于其他场景。

我添加了路由并使用 flasks 模板渲染器处理了它们

from flask import render_template
@app_instance.app.route('/')
@app_instance.app.route('/create')
@app_instance.app.route('/snippet/<path:path>') #dynamic route
def index(path=None):
    return render_template("index.html")

并配置 Nginx 来处理请求。

server {
        listen 80;
        listen [::]:80;

        server_name somedomain;

        root some/path/to_the/front/dist;
        index index.html;

        location / {
                try_files $uri /index.html;
                gzip_static on;
        }

}

结果

我现在可以从前端向 http://127.0.0.1:5000/api/snippets/api 发出请求，因为 flask 正在该端口上运行，我也可以访问我的 index.html 而无需使用 5000 端口。

在服务器上处理单页应用程序前端和 api 后端的最佳方法

Best approach to handle single page app front end and api backend on a server

javascript

python

deployment

production

flask

问题

API 服务器

API端点

前端

文件夹结构

结果