使用Flask服务通过create-react-app创建的前端

Question

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

我想npm run build从我的Flask服务器提供内置的（使用）静态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？

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。这样，您可以从任何希望的路线重新加载react应用，并且不会中断。