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

Question

我尝试使用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 中是否有等效的函数来执行此操作？

Answer 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

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