本文旨在指导开发者如何在不使用Next.js的情况下，将React前端应用与Express.js后端API部署在同一URL和端口上。我们将探讨生产环境中通过Express服务静态文件和API的策略，以及开发环境中利用代理解决跨域问题的方案，确保前后端在不同阶段都能无缝协作。
在现代Web开发中，将前端用户界面与后端API服务紧密结合是常见的需求。Next.js等框架通过其内置的API路由功能简化了这一过程，允许开发者在同一项目结构和端口下同时开发和部署前端和后端。然而，对于纯React应用结合Express.js后端栈的开发者而言，实现类似效果需要一些特定的配置。本文将详细阐述如何在开发和生产环境中，使React应用和Express API共享同一URL和端口。
首先，需要明确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服务器处理。
实现步骤：
构建React应用： 首先，你需要将React应用打包成生产就绪的静态文件。通常，这通过运行npm run build或yarn build命令来完成。这个命令会在你的React项目根目录下创建一个build（或dist）文件夹，其中包含所有静态资源。
配置Express服务器： 创建一个Express应用，使其能够：
以下是一个基本的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}`);
});代码说明：
通过这种配置，当用户访问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开发服务器的代理功能。
实现步骤：
启动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}`);
});配置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路径配置不同的代理目标。
通过上述方法，你可以在不依赖Next.js的情况下，成功地将React前端应用与Express.js后端API整合到同一个URL和端口下。在生产环境中，一个Express服务器同时负责提供静态文件和处理API请求；在开发环境中，通过配置React开发服务器的代理功能，可以无缝地将API请求转发到独立的Express后端，从而实现高效的开发体验。这种分离但又统一的架构模式，为构建灵活且可扩展的Web应用提供了坚实的基础。
以上就是在React应用中集成Express API：实现同端口部署与开发的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
407
收藏
