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

Question

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

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

• 前端代码由客户端（浏览器）运行。
• 当客户端与网页交互时，前端根据需要对后端进行 API 调用以检索/修改数据。
• 后端和前端通常是单独开发的，并且可以托管在单独的服务器上。
• 但是，可以（并且可能更简单）将其托管在单个域/服务器上。我希望这样做，以避免 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. 如果我的 Web 应用程序有页面 A、页面 B 和页面 C，每个页面都有 url www.example.com/A、www.example.com/B、 ，www.example.com/C我是否必须创建三个单独的 React 前端项目？即，相当于拥有三个dist文件夹？处理这个问题的标准方法是什么？

Answer 1

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

我使用的是 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对于有关处理不同路径（例如和 ）的问题example.com/b，这取决于您希望如何处理这些请求。您是否希望您的单个反应应用程序能够处理所有这些路线？

如果是这种情况，您可能还想查看：如何在 FastAPI 中的一条路由中捕获任意路径？

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

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

@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})

Answer 2

运行 Web 应用程序的“传统”方法是拥有一个为您的 Web 应用程序（即您的 React 应用程序）提供服务的服务器。通常您会听说nginx被用作现代单页应用程序的 Web 服务器。当您运行时，npm run start您会在计算机上启动本地服务器，并且它使您的应用程序可用http://localhost:8080（端口和主机名当然是可配置的）。

当涉及到您的 API 时，它应该是在不同端点/url 上可用的自己的服务器，然后您的 Web 应用程序将对该端点/url 进行 API 调用以获取数据。

从你描述事物的方式来看，听起来你正在尝试使用 FastAPI 来服务器渲染你的 Web 应用程序，但我不确定这有多可行，特别是考虑到有一个专门用于服务器渲染 React 应用程序的整个框架。