为使用 Flask 的 create-react-app 创建的前端提供服务

Question

我有一个带有 API 路由的 Flask 后端，它由使用 create-react-app 创建的 React 单页应用程序访问。使用 create-react-app 开发服务器时，我的 Flask 后端可以正常工作。

我想从我的 Flask 服务器提供构建的（使用 npm run build ）静态 React 应用程序。构建 React 应用程序会导致以下目录结构：

 - build
  - static
    - css
        - style.[crypto].css
        - style.[crypto].css.map
    - js
        - main.[crypto].js
        - main.[crypto].js.map
  - index.html
  - service-worker.js
  - [more meta files]

[crypto] 是指在构建时随机生成的字符串。

收到 index.html 文件后，浏览器会发出以下请求：

 - GET /static/css/main.[crypto].css
- GET /static/css/main.[crypto].css
- GET /service-worker.js

我应该如何提供这些文件？我想出了这个：

 from flask import Blueprint, send_from_directory

static = Blueprint('static', __name__)

@static.route('/')
def serve_static_index():
    return send_from_directory('../client/build/', 'index.html')

@static.route('/static/<path:path>') # serve whatever the client requested in the static folder
def serve_static(path):
    return send_from_directory('../client/build/static/', path)

@static.route('/service-worker.js')
def serve_worker():
    return send_from_directory('../client/build/', 'service-worker.js')

这样，静态资产就成功提供了。

另一方面，我可以将它与内置的 Flask 静态实用程序结合起来。但是我不明白如何配置它。

我的解决方案是否足够健壮？有没有办法使用内置的 Flask 功能来为这些资产提供服务？有没有更好的方法来使用 create-react-app？

原文由 Theo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

import os
from flask import Flask, send_from_directory

app = Flask(__name__, static_folder='react_app/build')

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

if __name__ == '__main__':
    app.run(use_reloader=True, port=5000, threaded=True)

那就是我最终得到的。所以基本上捕获所有路由，测试路径是否是文件 => 发送文件 => 否则发送 index.html。这样你就可以从你希望的任何路径重新加载反应应用程序并且它不会中断。

原文由 Jodo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

首先执行 npm run build 构建上面提到的静态生产文件

from flask import Flask, render_template

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

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

print('Starting Flask!')

app.debug=True
app.run(host='0.0.0.0')

不幸的是，我不认为你可以让它与开发热重载一起工作。

原文由 Pranay Aryal 发布，翻译遵循 CC BY-SA 4.0 许可协议