通过 Flask-Python 为 React 生产应用程序（本地服务器）提供服务

Question

我正在使用这两种技术制作一个应用程序：React-app 和 Flask-Python。它旨在运行一个反应客户端来表示从 Flask 服务器接收到的数据。 Flask 服务器和 React 客户端在同一台机器上，并通过套接字 (SocketIO) 进行通信。

在 Dev 模式下，为了运行应用程序，我必须运行使用 npm start（节点）的 React 服务器和使用 python 的 Flask 服务器。

在生产模式下，在构建反应服务器后，我必须使用节点上可用的服务选项来服务构建文件夹。否则该应用程序将无法正常工作（我认为这是因为我使用了 react-router，当我转到我的 react 应用程序的另一个地方时，浏览器找不到指定的 URL。当使用构建文件夹时服务节点的选项，没有问题出现。

所以，我的问题是：我可以使用 flask 而不是节点的服务选项来为我的 React 应用程序的构建文件夹提供服务吗？我想这样做，以消除 Node.js 依赖性，因此如果我想运行我的应用程序在另一台机器上，我将不必安装节点。

Answer 1

是的，可以在 static folder/files 的烧瓶中完成。您需要在项目中创建一个名为 static 的文件夹。想象一下这个文件夹结构：

├── server/
└── static/
    ├── css/
    ├── dist/
    ├── images/
    └── js/
        index.html

对于您的 React 应用程序，您唯一需要做的就是构建 npm run build.

在flask中你应该设置这个静态文件夹以便使用。你需要一个简化版本：

# server.py
from flask import Flask, render_template

app = Flask(__name__, static_folder="../static/dist", template_folder="../static")

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

@app.route("/hello")
def hello():
    return "Hello World!”

if __name__ == "__main__":
    app.run()

所以根路径/会显示react。 /hello 路径将显示来自 flask 的响应。

Answer 2

所以我通过这样做得到了这个工作：

-使用

构建我的 React 应用程序

npm run build

我现在的应用结构是：

├── server-flask/
    ├── ...
    ├── static/
├── react-app/
      ├── ...
      ├── build/

-将构建文件夹的内容复制到/server-flask/static。

-我的烧瓶代码如下所示：

from flask import Flask, send_from_directory
import os

app = Flask(__name__, static_folder="/static")


@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def serve(path):
    if path != "" and os.path.exists("/static/" + path):
        return send_from_directory('static', path)
    else:
        return send_from_directory('static', 'index.html')

if __name__ == "__main__":
    app.run()

通过 Flask-Python 为 React 生产应用程序（本地服务器）提供服务

Serve React production App (local server) through Flask-Python

python

node.js

reactjs

flask

production-environment