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

本文介绍了如何将后端和前端放在一起-从fastapi后端端点返回react前端的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

首先，我只想说这是我的第一个Web应用程序项目.在过去的几天中，我一直在寻找有关如何从本质上将前端和后端组合在一起的答案.我有很多问题，但是我想回答的主要问题是如何从后端端点返回我的前端最终产品".

Firstly, I just wanted to say that this is my first web application project. I've spent the past few days trying to find answers on how to essentially put the frontend and backend together. I have a lot of questions, but the main one I want answered is on how to return my frontend 'final product' from a backend endpoint.

这是我的理解(如果我错了，请纠正我):

This is what I understand (please correct me if I'm wrong):

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

The frontend code is run by the client (browser).
When the client interacts with the webpage, the frontend makes API calls to the backend to retrieve/modify data, as necessary.
The backend and frontend is often developed separately, and could be hosted on separate servers.
It is, however, possible (and maybe simpler) to host it on a single domain/server. I am hoping to do this, in order to avoid a whole set of issues with CORS.

然后出现以下问题:

当我想测试前端并查看其运行情况时，我只需运行 npm run start .然后，我转到给定的URL(通常为 http://localhost:8080/)，然后可以访问我开发的前端.当我要部署它时，我运行 npm run build ，这给了我一个 dist 文件夹(打包在一起并缩小).

When I want to test out my front end and see how it's coming along, I just run npm run start. I then go to the given url (usually http://localhost:8080/) and I have access to the frontend that I've developed. And when I want to deploy it, I run npm run build, which gives me a dist folder (bundled together and minified).

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

If I want to run and test my backend locally, as I am using FastAPI, I simply run uvicorn main:app --reload.

如何将两者放在一起?更具体地说，在后端代码中，如何返回前端工作的结果(即 dist 文件夹?).我已经尝试了以下(简化)操作:

How to put the two together? More specifically, in my backend code, how do I return the product of my frontend work (i.e., the dist folder?). I've tried the following (simplified):

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

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

but, of course, this only gives me the static html without the React components.

我意识到这篇文章可能充满了错误的假设和不良做法(在这种情况下，我深表歉意！对于任何更正/建议，我将不胜感激.)但是，如果可以回答以下问题，我将不胜感激.这些是我有的问题，希望可以帮助我在计算机上本地测试整个Web应用程序.

I realize this post may be loaded with incorrect assumptions and poor practices (in which case, my apologies! and I would appreciate any corrections/suggestions.) However, if the following questions could be answered, I would greatly appreciate it. These are questions I have that will hopefully help me test my whole web application locally on my computer.

如何在域根端点返回 GET 请求的前端工作产品?
如果我的Web应用程序有页面A，页面B和页面C，每个页面的URL为 www.example.com/A ， www.example.com/B 和 www.example.com/C ，我必须创建三个独立的React前端项目吗?即，相当于拥有三个 dist 文件夹?处理此问题的标准方式是什么?

How do I return the product of my frontend work for the GET request at the domain root endpoint?
If there is a page A, page B, and page C for my web app, each with url www.example.com/A, www.example.com/B, and www.example.com/C do I have to create three separate React frontend projects? I.e., equivalent of having three dist folders? What is the standard way this is handled?

后端端点返回

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

问题描述

推荐答案