本文旨在指导开发者如何在不使用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服务器处理。
实现步骤：
构建React应用：首先，你需要将React应用打包成生产就绪的静态文件。通常，这通过运行npm run build或yarn build命令来完成。这个命令会在你的React项目根目录下创建一个build（或dist）文件夹，其中包含所有静态资源。
配置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开发服务器的代理功能。
实现步骤：
启动Express API服务器：确保你的Express API服务器正在监听一个端口（例如localhost:5000）。
// api-server.jsconst 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.jsimport { 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 API：实现同端口部署与开发的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1540667.html
微信扫一扫 
支付宝扫一扫 
