React集成Express：同端口开发部署教程

珍惜时间，勤奋学习！今天给大家带来《React集成Express API：同端口开发与部署教程》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

本文旨在指导开发者如何在不使用Next.js的情况下，将React前端应用与Express.js后端API部署在同一URL和端口上。我们将探讨生产环境中通过Express服务静态文件和API的策略，以及开发环境中利用代理解决跨域问题的方案，确保前后端在不同阶段都能无缝协作。

在现代Web开发中，将前端用户界面与后端API服务紧密结合是常见的需求。Next.js等框架通过其内置的API路由功能简化了这一过程，允许开发者在同一项目结构和端口下同时开发和部署前端和后端。然而，对于纯React应用结合Express.js后端栈的开发者而言，实现类似效果需要一些特定的配置。本文将详细阐述如何在开发和生产环境中，使React应用和Express API共享同一URL和端口。

理解React与API部署的基础

首先，需要明确React.js本身是一个客户端JavaScript库，它在浏览器中运行，不直接监听端口。React应用在构建后会生成一系列静态文件（HTML、CSS、JavaScript等），这些文件需要由一个Web服务器来提供服务。Express.js则是一个强大的Node.js框架，非常适合构建API服务，并且它也具备提供静态文件的能力。

核心思想是：一个Express服务器可以同时完成两项任务——提供React应用的静态文件，并处理所有的API请求。

生产环境下的统一部署

在生产环境中，目标是让用户通过访问同一个域名和端口（例如https://yourdomain.com）即可访问到React应用，而API请求（例如https://yourdomain.com/api/data）也由同一个Express服务器处理。

实现步骤：

1. 构建React应用： 首先，你需要将React应用打包成生产就绪的静态文件。通常，这通过运行npm run build或yarn build命令来完成。这个命令会在你的React项目根目录下创建一个build（或dist）文件夹，其中包含所有静态资源。

2. 配置Express服务器： 创建一个Express应用，使其能够：

   • 提供React应用的静态文件。
   • 定义和处理API路由。

   以下是一个基本的Express服务器示例：

   const express = require('express');
   const path = require('path'); // 用于处理文件路径
   const app = express();
   
   // 定义服务器监听的端口
   const PORT = process.env.PORT || 3000;
   
   // 1. 提供React应用的静态文件
   // 假设React应用的构建输出在项目根目录下的 'build' 文件夹中
   // 'path.join(__dirname, '..', 'build')' 确保路径正确，
   // 如果Express服务器文件在项目根目录，可以直接用 'path.join(__dirname, 'build')'
   app.use(express.static(path.join(__dirname, '..', 'build')));
   
   // 2. 定义API路由
   app.get('/api/hello', (req, res) => {
     res.json({ message: 'Hello from Express API!' });
   });
   
   // 3. 处理所有未匹配的路由，将其重定向到React应用的index.html
   // 这对于React Router等客户端路由库至关重要，确保刷新页面或直接访问深层链接时能正确加载应用
   app.get('*', (req, res) => {
     res.sendFile(path.join(__dirname, '..', 'build', 'index.html'));
   });
   
   // 启动服务器
   app.listen(PORT, () => {
     console.log(`Express server listening on port ${PORT}`);
     console.log(`React app and API accessible on http://localhost:${PORT}`);
   });

   代码说明：

   • app.use(express.static(path.join(__dirname, '..', 'build')))：这行代码告诉Express将build目录下的文件作为静态资源提供服务。当浏览器请求根路径/时，Express会查找build目录下的index.html并发送给客户端。
   • app.get('/api/hello', ...)：这是你的API路由。所有以/api/hello开头的请求都将由这个处理器响应。
   • app.get('*', ...)：这是一个“通配符”路由。它会捕获所有未被前面路由匹配的请求，并始终返回index.html。这对于单页应用（SPA）非常重要，它允许客户端路由（如React Router）接管URL，处理应用内部的导航。

通过这种配置，当用户访问http://localhost:3000时，Express会返回React应用的index.html。React应用加载后，如果它向/api/hello发出请求，该请求会发送到同一个Express服务器，并由相应的API路由处理。

开发环境下的代理配置

在开发环境中，通常React应用会运行在一个由Create React App (CRA) 或Vite等工具提供的开发服务器上（例如localhost:3000），而Express API可能运行在另一个端口（例如localhost:5000）。直接从React开发服务器向Express API发送请求会导致跨域资源共享（CORS）问题。

为了解决这个问题，我们可以利用React开发服务器的代理功能。

实现步骤：

1. 启动Express API服务器： 确保你的Express API服务器正在监听一个端口（例如localhost:5000）。

   // api-server.js
   const express = require('express');
   const app = express();
   const API_PORT = 5000;
   
   app.get('/api/hello', (req, res) => {
     res.json({ message: 'Hello from Express API (Dev Server)!' });
   });
   
   app.listen(API_PORT, () => {
     console.log(`API server listening on port ${API_PORT}`);
   });

2. 配置React开发服务器代理：

   • 对于Create React App (CRA)： 在你的React项目的package.json文件中添加一个proxy字段，指向你的Express API服务器的地址。

     // package.json
     {
       "name": "my-react-app",
       "version": "0.1.0",
       "private": true,
       "dependencies": {
         // ...
       },
       "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",
         "test": "react-scripts test",
         "eject": "react-scripts eject"
       },
       "eslintConfig": {
         // ...
       },
       "browserslist": {
         // ...
       },
       "proxy": "http://localhost:5000" // 添加这一行
     }

     现在，当你在React组件中发出请求，例如fetch('/api/hello')时，React开发服务器会自动将这个请求代理到http://localhost:5000/api/hello，从而避免了CORS问题。

   • 对于Vite或更复杂的场景（手动配置代理）： 如果你使用的是Vite或其他构建工具，或者需要更精细的代理控制，可以使用http-proxy-middleware等库。

     首先安装：npm install --save-dev http-proxy-middleware

     然后在你的开发服务器配置文件中（例如Vite的vite.config.js），配置代理：

     // vite.config.js
     import { defineConfig } from 'vite';
     import react from '@vitejs/plugin-react';
     
     export default defineConfig({
       plugins: [react()],
       server: {
         proxy: {
           '/api': { // 匹配所有以 '/api' 开头的请求
             target: 'http://localhost:5000', // 你的Express API服务器地址
             changeOrigin: true, // 改变源，使其看起来像来自目标服务器
             rewrite: (path) => path.replace(/^\/api/, '/api'), // 可选：如果API路径需要重写
           },
         },
       },
     });

     这种方式提供了更大的灵活性，你可以为不同的API路径配置不同的代理目标。

注意事项与最佳实践

• 路径管理： 确保你的React应用在发起API请求时，使用相对路径（例如/api/data），而不是绝对路径（例如http://localhost:5000/api/data）。这样，在开发环境和生产环境中，请求都会被正确地处理。
• 环境变量： 在生产环境中，端口号通常由部署环境（如Heroku、Netlify）通过process.env.PORT提供，而不是硬编码。在Express服务器中使用process.env.PORT || 3000是一个好的实践。
• 安全性： 对于生产环境，请确保你的Express服务器配置了适当的安全措施，如HTTPS、输入验证、错误处理和日志记录。
• 错误页面： 在生产环境中，除了提供index.html，你可能还需要为404错误或其他服务器错误配置自定义的错误页面。
• 部署： 部署时，你需要将React应用的build文件夹和Express服务器代码一起部署到同一个服务器上。常见的部署方式包括使用PM2管理Node.js进程，或将整个应用打包成Docker镜像。

总结

通过上述方法，你可以在不依赖Next.js的情况下，成功地将React前端应用与Express.js后端API整合到同一个URL和端口下。在生产环境中，一个Express服务器同时负责提供静态文件和处理API请求；在开发环境中，通过配置React开发服务器的代理功能，可以无缝地将API请求转发到独立的Express后端，从而实现高效的开发体验。这种分离但又统一的架构模式，为构建灵活且可扩展的Web应用提供了坚实的基础。

以上就是《React集成Express：同端口开发部署教程》的详细内容，更多关于的资料请关注golang学习网公众号！