如何将后端和前端放在一起-从fastapi后端端点返回react前端 [英] how to put backend and frontend together - returning react frontend from fastapi backend endpoint

问题描述

首先，我只想说这是我的第一个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.

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

1. How do I return the product of my frontend work for the GET request at the domain root endpoint?
2. 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?

推荐答案

传统"运行Web应用程序的一种方法是拥有一台为您的Web应用程序(即您的React应用程序)提供服务的服务器.通常，您会听说 nginx 用作现代单页应用程序使用的Web服务器.当您运行 npm run start 时，您将在计算机上启动本地服务器，它使您的应用程序可以在 http://localhost:8080 上使用(端口和主机名是当然是可配置的.

The "traditional" approach to running a web application is to have a server that serves your web application (i.e. your React app). Usually you'll hear about nginx being used as the web server being used for modern day single page applications. When you run npm run start you start up a local server on your machine and it makes your app available at http://localhost:8080 (the port and hostname are of course configurable).

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

When it comes to your API, it should be it's own server available at a different endpoint/url, and then your web app will make API calls to that endpoint/url in order to fetch data.

描述事物的方式，听起来像是您尝试使用FastAPI服务器呈现Web应用程序，但是我不确定这样做是否可行，尤其是考虑到存在

The way you're describing things, it sounds like you're trying to use FastAPI to server render your web app, but I'm not sure how feasible that is, especially considering there is an entire framework solely dedicated to server rendering react applications.

这篇关于如何将后端和前端放在一起-从fastapi后端端点返回react前端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！