为使用 Flask 的 create-react-app 创建的前端提供服务 [英] Serving a front end created with create-react-app with Flask

问题描述

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

I have a Flask back-end with API routes which are accessed by a React single page application created using create-react-app. When using the create-react-app dev server, my Flask back end works.

我想从我的 Flask 服务器提供构建的(使用 npm run build)静态 React 应用程序.构建 React 应用会导致以下目录结构:

I would like to serve the built (using npm run build) static React app from my Flask server. Building the React app leads to the following directory structure:

- 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]，我的意思是在构建时随机生成的字符串.

By [crypto], I mean the randomly generated strings generated at build time.

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

Having received the index.html file, the browser then makes the following requests:

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

我应该如何提供这些文件?我想出了这个:

How should I serve these files? I came up with this:

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')

这样，静态资源就成功服务了.

This way, the static assets are successfully served.

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

On the other hand, I could incorporate this with the built-in Flask static utilities. But I do not understand how to configure this.

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

Is my solution robust enough? Is there a way to use built-in Flask features to serve these assets? Is there a better way to use create-react-app?

推荐答案

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 应用程序，并且不会中断.

Thats what I ended up with. So bascially catch all routes, test if the path is a file => send file => else send the index.html. That way you can reload the react app from any route you wish and it does not break.

这篇关于为使用 Flask 的 create-react-app 创建的前端提供服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！