我有一个带有API路由的Flask后端，由使用CreateReact应用程序创建的React单页应用程序访问。使用CreateReact应用程序开发服务器时，我的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静态实用程序结合起来。但我不明白如何配置这个。
我的解决方案足够健壮吗？有没有办法使用内置的烧瓶功能来服务于这些资产？有更好的方法来使用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)
这就是我的结局。因此，基本上捕获所有路由，测试路径是否为文件=
首先执行npm运行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')
不幸的是，我不认为你可以让它与开发热重新加载工作。
这是一个有效的解决方案。有没有想过为什么我们需要两个单独的文件夹来存放静态和模板。把混乱分开，对吗？但是，这是生产构建的一个问题，因为它有一个文件夹用于存放静态和模板类型的文件，并且所有依赖项都是这样链接的。
如果您认为代码<>静态< /COD>和<代码>模板，将提供<代码> Bug < /Cord>文件夹。
用这样的东西
from flask import Flask, render_template
app = Flask(__name__, static_url_path='',
static_folder='build',
template_folder='build')
@app.route("/")
def hello():
return render_template("index.html")
您的烧瓶应用程序将运行良好。
