时间戳

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

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

问题描述

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

来自前端的所有请求都发送到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

标签： javascriptpythonflaskdeploymentproduction

解决方案

我需要从同一个网络服务器运行两者。我使用 python/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因为烧瓶正在该端口上运行，并且我还可以访问我的index.html而不使用 5000 端口。

推荐阅读