通过FastAPI部署React的构建文件夹

Question

我想使用 FastAPI 为我的 React 前端提供服务。目标是用户对 Javascript 的依赖为零。用户只需下载 Python 代码、启动服务器并在本地主机上查看网站即可。

\n

我的文件夹结构是：

\n

- my-fullstack-app\n  - frontend/\n    - build/\n    - public/\n    - ...\n    - package.json\n  - backend/\n    - main.py\n    - static/\n

\n

我跑去npm run build生成frontend/build/以下内容的文件夹：

\n

build/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 asset-manifest.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 favicon.ico\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 logo192.png\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 logo512.png\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 manifest.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 robots.txt\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 static\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 css\n    \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.073c9b0a.css\n    \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 main.073c9b0a.css.map\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 js\n    \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 787.cda612ba.chunk.js\n    \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 787.cda612ba.chunk.js.map\n    \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.af955102.js\n    \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.af955102.js.LICENSE.txt\n    \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 main.af955102.js.map\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 media\n        \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg\n

\n

frontend/build/我把里面的文件夹内容复制了backend/static/。

\n

现在，我想服务这个backend/static/通过 FastAPI 提供此文件夹，而不是运行另一台服务器。

\n

在我的 FastAPI 中main.py我有：

\n

from fastapi import FastAPI\nfrom fastapi.staticfiles import StaticFiles\n\napp = FastAPI()\n\napp.mount("/", StaticFiles(directory="static/"), name="static")\n

\n

然后我使用 - 启动服务器uvicorn main:app --reload。

\n

但这不起作用。

\n

当我在浏览器中打开时http://127.0.0.1:8000/，输出是一个 JSON 文件，其中显示{"detail":"Not Found"}控制台有Content Security Policy: The page\'s settings blocked the loading of a resource at http://127.0.0.1:8000/favicon.ico ("default-src")..

\n

我该如何让它发挥作用？我见过React 和 Express 具有类似功能的示例。

\n

Answer 1

@flakes 提到的答案正是我正在寻找的。查看更多详细信息。

为了完整性，

无html=True旗。

app.mount("/", StaticFiles(directory="static/"), name="static")

导航至http://127.0.0.1:8000/index.html查看 html 文件。

带html=True旗帜。

app.mount("/", StaticFiles(directory="static/", html=True), name="static")

导航至http://127.0.0.1:8000/查看 html 文件。