我有一个使用Flask编写的后端,其中包含API路由,可以通过使用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?
cp -rf /build/static ./static
来复制静态文件夹。请注意,这样做无需其他操作,也不会改变原意。 - Joran Beasley