我有一个带有 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]
By [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 吗?