如何将后端和前端放在一起 - 从 fastapi 后端端点返回 React 前端

首先，我只想说这是我的第一个 Web 应用程序项目。在过去的几天里，我一直在努力寻找如何将前端和后端放在一起的答案。我有很多问题，但我想回答的主要问题是如何从后端端点返回我的前端“最终产品”。

我的理解是这样的（如有错误请指正）：

• 前端代码由客户端（浏览器）运行。
• 当客户端与网页交互时，前端根据需要对后端进行 API 调用以检索/修改数据。
• 后端和前端通常是分开开发的，并且could托管在单独的服务器上。
• 但是，可以（并且可能更简单）将其托管在单个域/服务器上。我希望这样做，以避免 CORS 带来的一系列问题。

那么接下来的问题就来了：

当我想测试我的前端并看看它进展如何时，我只需运行npm run start。然后我转到给定的网址（通常http://localhost:8080/）并且我可以访问我开发的前端。当我想部署它时，我运行npm run build，这给了我一个dist文件夹（捆绑在一起并缩小）。

如果我想在本地运行和测试我的后端，就像我正在使用的那样FastAPI，我只是跑uvicorn main:app --reload.

如何将两者放在一起？更具体地说，在我的后端代码中，如何返回前端工作的结果（即dist文件夹？）。我尝试过以下方法（简化）：

@app.get("/", response_class=HTMLResponse)
def root():
    return open("../frontend/dist/index.html", "r").read()

但是，当然，这只给了我静态 html，没有 React 组件。

我意识到这篇文章可能包含错误的假设和糟糕的做法（在这种情况下，我很抱歉！并且我将不胜感激任何更正/建议。）但是，如果可以回答以下问题，我将不胜感激。我提出的这些问题有望帮助我在计算机上本地测试整个 Web 应用程序。

1. 我如何返回我的前端工作的产品GET在域根端点请求？
2. 如果我的网络应用程序有页面 A、页面 B 和页面 C，每个页面都有 urlwww.example.com/A, www.example.com/B, and www.example.com/C我必须创建三个独立的 React 前端项目吗？即相当于拥有三个dist文件夹？处理这个问题的标准方法是什么？

这些都是好问题，而且这当然是可能的。我会告诉你我做了什么，但警告可能有更好的方法......

我使用 Vue 而不是 React，但它的构建过程还会将静态 html、js 和 css 发送到dist/目录，因此过程应该大致相同。

首先你可以复制dist/index.html将您提到的文件写入 FastAPItemplates/目录。您将使用 FastAPI 路由将该文件作为模板提供。

然后将你的js和css复制到static/目录并确保 FastAPI 了解静态和模板。

from fastapi import FastAPI, Request
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates

app = FastAPI()

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

templates = Jinja2Templates(directory="templates")

@app.get("/")
async def serve_spa(request: Request):
    return templates.TemplateResponse("index.html", {"request": request})

您可能需要在 React 中设置一些内容，以便您的构建知道 js 和 css 将位于名为的目录中static。对于 Vue 来说，有assetsDir选项内vue.config.js

对于您关于处理不同路径的问题，例如example.com/a and example.com/b，这取决于您想要如何处理这些请求。您是否希望您的单个反应应用程序能够处理所有这些路线？

如果是这种情况，您可能还想查看：如何在FastAPI中捕获一条路径上的任意路径？ https://stackoverflow.com/questions/63069190/how-to-capture-arbitrary-paths-at-one-route-in-fastapi/64147450

一种选择是复制serve_spa()上面的路线并处理您的路线，例如/a, /b, etc.

或者使用包罗万象的路线：

@app.route("/{full_path:path}")
async def catch_all(request: Request, full_path: str):
    print("full_path: "+full_path)
    return templates.TemplateResponse("index.html", {"request": request})