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

Question

我使用 Flask 和单页应用程序作为前端构建了一个 API。后端在端口 5000 上运行，我使用 parcelJS构建前端，它有自己的网络服务器，在端口 1234 上运行。 css、js 和静态文件都位于 dist 文件夹内，可以使用 Parcels Web 服务器从 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 这样的端点对数据库进行查询并返回 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 开发服务器进行测试，但主要思想是相同的，并且应该适用于其他场景。

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

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 正在该端口上运行，并且我也可以访问我的 < strong>index.html 不使用 5000 端口。