如何使用Nginx和FastAPI实现前端与后端的联动

一、介绍

        我们通常会使用Nginx作为反向代理服务器，将前端静态文件与后端API服务进行结合。本文将分享一个实际的项目部署流程，展示如何通过Nginx将前端（通过http-server启动）和后端（使用FastAPI和Uvicorn）进行联动，从而实现无缝的前后端协作。

前端：我们使用静态页面托管工具 http-server 来启动前端页面，前端文件通常是通过构建工具（如Webpack、Vite等）打包生成的静态文件。

后端：FastAPI是一个现代、快速的Web框架，搭配Uvicorn作为ASGI服务器来处理请求。

反向代理：使用Nginx作为反向代理服务器来将前端和后端服务结合起来，确保用户请求能够正确路由到对应的服务。

二、部署流程

1. 启动前端服务

首先，我们需要启动前端的静态页面。cd到前端页面所在目录，使用 http-server 来启动静态文件服务器。

http-server -p 8127

2. 启动后端服务（FastAPI）

终端输入uvicorn app:app --host 0.0.0.0 --port 8088

3. 配置Nginx反向代理

为了将前端和后端服务统一管理，并通过单一的域名或IP进行访问，我们使用Nginx作为反向代理服务器。根据访问的IP地址来访问不同的目录，可以在Nginx配置。

这是我的nginx.conf配置文件

配置完成之后，启动nginx，就能通过前端页面访问本地静态资源了。

一个简单的Web应用部署流程，利用Nginx作为反向代理，将前端和后端服务进行整合。这样，用户只需要访问一个地址，就能体验到前后端的协作。