烧瓶如何为反应公共文件提供服务

Question

在 react 中，我创建了一个文件夹 ./public/assets，并将图像放入 ./public/assets。当我运行npm start 时，一切正常。 在反应中运行npm run build 后，我得到一个./build 文件夹。我将./build 文件夹中的文件和文件夹复制到烧瓶文件夹中。由于index.html应该放在flask中的./templates中，所以浏览器无法获取flask./assets中的图片。

烧瓶中的文件：

.
├── app.py
├── asset-manifest.json
├── assets
│   └── Montage_of_Toronto_7.jpg
├── favicon.ico
├── manifest.json
├── precache-manifest.28e9dd49c9646209098c5bb088bdb16f.js
├── service-worker.js
├── static
│   ├── css
│   │   ├── main.2cce8147.chunk.css
│   │   └── main.2cce8147.chunk.css.map
│   ├── js
│   │   ├── 2.38e0f74c.chunk.js
│   │   ├── 2.38e0f74c.chunk.js.map
│   │   ├── main.1c5ab122.chunk.js
│   │   ├── main.1c5ab122.chunk.js.map
│   │   ├── runtime~main.a8a9905a.js
│   │   └── runtime~main.a8a9905a.js.map
│   └── media
│       └── logo.5d5d9eef.svg
└── templates
    └── index.html

react/public 中的文件夹：

.
├── assets
│   └── Montage_of_Toronto_7.jpg
├── favicon.ico
├── index.html
└── manifest.json

react/build 中的文件

.
├── asset-manifest.json
├── assets
│   └── Montage_of_Toronto_7.jpg
├── favicon.ico
├── index.html
├── manifest.json
├── precache-manifest.28e9dd49c9646209098c5bb088bdb16f.js
├── service-worker.js
└── static
    ├── css
    │   ├── main.2cce8147.chunk.css
    │   └── main.2cce8147.chunk.css.map
    ├── js
    │   ├── 2.38e0f74c.chunk.js
    │   ├── 2.38e0f74c.chunk.js.map
    │   ├── main.1c5ab122.chunk.js
    │   ├── main.1c5ab122.chunk.js.map
    │   ├── runtime~main.a8a9905a.js
    │   └── runtime~main.a8a9905a.js.map
    └── media
        └── logo.5d5d9eef.svg

有没有什么方案可以配置公用路径，让./public文件夹放入./build/static？

我在烧瓶后端使用send_from_directory 来提供./assets 中的文件。但是我想在运行npm run build时将文件放到./build/static文件夹中，包括文件favicon.ico、manifest.json等等。

Answer 1

如果你在烧瓶应用中有这样的构建目录：

.
|
|_build
|    |_static
|       |_css
|       |_js
|       |_img
|    |_index.html
|_serve.py

像这样使用serve.py：

from flask import Flask, render_template, send_from_directory


app = Flask(__name__, static_folder="build/static", template_folder="build")


@app.route("/")
def home():
    return render_template('index.html')


@app.route("/manifest.json")
def manifest():
    return send_from_directory('./build', 'manifest.json')


@app.route('/favicon.ico')
def favicon():
    return send_from_directory('./build', 'favicon.ico')


app.run(host='0.0.0.0', debug=True)

参考： https://flask.palletsprojects.com/en/1.1.x/patterns/favicon/

我认为它会起作用。

完整目录树（在此本地测试）：

.
├── README.md
├── build
│   ├── asset-manifest.json
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   ├── precache-manifest.054774adbe886ee6e3c29227ef1745b5.js
│   ├── service-worker.js
│   └── static
│       ├── css
│       │   ├── main.2cce8147.chunk.css
│       │   └── main.2cce8147.chunk.css.map
│       ├── js
│       │   ├── 2.b41502e9.chunk.js
│       │   ├── 2.b41502e9.chunk.js.map
│       │   ├── main.28647029.chunk.js
│       │   ├── main.28647029.chunk.js.map
│       │   ├── runtime~main.a8a9905a.js
│       │   └── runtime~main.a8a9905a.js.map
│       └── media
│           └── logo.5d5d9eef.svg
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── serve.py
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── serviceWorker.js
└── yarn.lock

在这种情况下，我将烧瓶和 react 应用程序合并到同一个目录中。您可以放入不同的目录，然后将 build 目录移动到烧瓶应用程序的根目录。或者喜欢这个建议like this。

编辑（另一种选择）：

您还可以将公共目录编辑为如下所示：

public/
├── index.html
└── static
    ├── favicon.ico
    └── manifest.json

请注意，您还应该将 index.html 更改为：

<link rel="manifest" href="%PUBLIC_URL%/static/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/static/favicon.ico" />

然后，当您运行yarn build 时，您将在静态目录中拥有favicon.ico 和manifest.json。不需要为此在烧瓶上设置自定义路由。

Answer 2

希望这会有所帮助：

1. react 构建文件夹

build
├── asset-manifest.json
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
├── precache-manifest.984ab282787c862e232c323b865ef221.js
├── robots.txt
├── service-worker.js
└── static\

1. 使用正则表达式提供公共资源

import flask
from werkzeug.routing import BaseConverter

class RegexConverter(BaseConverter):
    def __init__(self, url_map, *items):
        super(RegexConverter, self).__init__(url_map)
        self.regex = items[0]

app = flask.Flask(__name__, template_folder='build', static_folder='build/static')
app.url_map.converters['regex'] = RegexConverter

@app.route("/<regex(r'(.*?)\.(json|txt|png|ico|js)$'):file>", methods=["GET"])
def public(file):
    return flask.send_from_directory('./build', file)