如何在 FastAPI 后端提供 React 构建的前端？

Posted 2023-02-19

【中文标题】如何在 FastAPI 后端提供 React 构建的前端？

【英文标题】：How do I serve a React-built front-end on a FastAPI backend?

【发布时间】：2021-02-06 03:45:55

【问题描述】：

我尝试使用app.mount 将前端安装到/，但这会使我的所有/api 路由无效。我还尝试使用以下代码将/static 中的文件夹挂载到它们各自的路由并在/ 上提供index.html 文件：

@app.get("/")
def index():
    project_path = Path(__file__).parent.resolve()
    frontend_root = project_path / "client/build"
    return FileResponse(str(frontend_root) + '/index.html', media_type='text/html')

static_root = project_path / "client/build/static"
app.mount("/static", StaticFiles(directory=static_root), name="static")

这主要是可行的，但包含在 client/build 文件夹中的文件未安装，因此无法访问。我知道 Node.js 有一种方法可以通过 res.sendFile("index.html", root: </path/to/static/folder ); 的相对路径为前端页面提供服务。在 FastAPI 中是否有等效的函数来执行此操作？

【问题讨论】：

阅读this 代码，其中FastAPI 和React 由单个服务器提供服务。要点是 - 你需要一个运行 React 的进程和一个运行 FastAPI 的进程和一个路由调用的代理服务器（本例中为 nginx）。

【参考方案1】：

clmno的解决方案是两台服务器+路由。 Jay Jay Cayabyab 正在寻找 API 上的端点，该端点为 webpacked SPA 提供服务，你在 npm run build 之后得到的那种。我一直在寻找完全相同的解决方案，因为这就是我对 Flask 所做的事情，并且我正在尝试用 FastAPI 替换 Flask。

在 FastAPI 的文档之后，多次提到它是基于 starlette 的。搜索在 starlette 上提供 SPA 服务时，我找到了 this reply 的问题。当然，这对我来说不是现成的，因为我错过了一些在建议的解决方案中未提及的导入。

这是我的代码，它正在运行：

from fastapi.staticfiles import StaticFiles

class SPAStaticFiles(StaticFiles):
async def get_response(self, path: str, scope):
    response = await super().get_response(path, scope)
    if response.status_code == 404:
        response = await super().get_response('.', scope)
    return response

app.mount('/my-spa/', SPAStaticFiles(directory='folder', html=True), name='whatever')

注意：我更改了端点（my-spa）、目录（文件夹）和应用程序名称（无论是什么）的名称，以强调这些不必完全相同。

在这种情况下，您将构建的 SPA 放在 folder 文件夹中。为此，在 SPA 项目文件夹中，运行 npm run build 或 yarn run build，并获得一个名为 dist 的文件夹。将 dist 中的所有文件和文件夹复制到此 folder 文件夹中。

完成此操作后，运行您的 FastAPI 应用程序，然后转到 http://localhost:5000/my-spa/。为了绝对清楚起见，我使用这个特定 URL 的原因是我的应用程序有一个这样的 main：

if __name__ == "__main__":
    uvicorn.run(app, host="0.0.0.0", port=5000)

所以它从端口 5000 开始。您的情况可能会有所不同。

当这些回复中缺少导入时，我讨厌它，因为有时看起来回复甚至从未运行过。当我输入这个时，我的正在另一个屏幕上运行，所以这不会浪费你的时间。但是，假设您已经在做一些琐碎的事情，我自己可能会错过一些导入

from fastapi import FastAPI

等等。如果您尝试此操作并发现缺少任何内容，请在此处告诉我。

【讨论】：

我发现你的回答很有帮助，我还要说我最终只是按照这里的建议去做。 ***.com/a/68488252/3538107。感谢您的帮助！

这非常深入，但不幸的是我得到了`TypeError：'NoneType' object is not callable`我相信if response.status_code == 404:，但实际上只适用于404s。很奇怪，正在研究它。

嗨，迦勒。正如我所说，我发布这个答案首先是为了帮助你。请在 LinkedIn 上联系我（我的 *** 个人资料上的链接），让我们从那里开始。我们可以有一个缩放或什么的。不，这不是付费服务！