咨询在GitHub部署React前后端项目及MongoDB连接相关问题

一、前后端部署的选择 #

• 优先选择分别部署：前端是React构建后的静态资源（HTML/CSS/JS），适合部署到静态托管平台；后端是Node.js服务，需要部署到支持服务端运行的平台。分开部署能降低耦合度，方便各自维护、扩容，也能提升前端加载速度。
• 小型项目也可以合部署：将React构建产物放到后端的静态资源目录（比如Express的public文件夹），然后和后端一起部署到服务端平台，但这种方式灵活性较差。

二、本地MongoDB的替代方案 #

本地MongoDB仅能在你的电脑运行时被访问，部署到云端的后端无法连接本地数据库，必须替换为云端MongoDB服务：

1. 注册云端MongoDB服务账号，创建免费集群
2. 配置数据库访问权限：添加带用户名和密码的数据库用户
3. 配置网络规则：允许云端后端的IP地址（或临时允许所有IP）访问集群
4. 获取集群连接字符串，格式示例：

   mongodb+srv://<用户名>:<密码>@cluster0.mongodb.net/<数据库名>?retryWrites=true&w=majority
   

三、分步部署流程 #

（一）后端部署 #

1. 打开后端仓库，修改数据库连接代码：将原本地MongoDB的连接逻辑，替换为读取环境变量中的云端连接字符串，示例：

   const mongoose = require('mongoose');
   mongoose.connect(process.env.MONGODB_URI)
     .then(() => console.log('数据库连接成功'))
     .catch(err => console.error('数据库连接失败', err));
   

2. 选择一个支持Node.js的部署平台，新建Web服务并导入你的后端GitHub仓库
3. 在平台配置环境变量：添加MONGODB_URI，值为你获取的云端MongoDB连接字符串；同时添加后端所需的其他环境变量（如PORT）
4. 设置构建命令（如npm install）和启动命令（如npm start，需与你的package.json脚本一致）
5. 完成部署后，获取后端的公网访问地址

（二）前端部署 #

1. 打开前端仓库，修改API请求地址：将原本地后端的请求地址（如http://localhost:5000/api）替换为后端的公网地址
2. 安装静态部署依赖：

   npm install gh-pages --save-dev
   

3. 在package.json中添加配置：

   "homepage": "https://learnfromscratches.github.io/connections-frontend",
   "scripts": {
     // 原有脚本保留，新增以下两行
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build"
   }
   

4. 执行部署命令：

   npm run deploy
   

   完成后前端将发布到GitHub Pages

（三）跨域问题解决 #

前后端域名不同会触发跨域限制，需在后端配置CORS：

1. 安装CORS依赖：

   npm install cors
   

2. 在后端入口文件中添加配置：

   const cors = require('cors');
   // 生产环境建议指定前端域名，避免任意域名访问
   app.use(cors({
     origin: "https://learnfromscratches.github.io/connections-frontend"
   }));
   

四、验证连接 #

访问部署后的前端页面，尝试发起数据请求（如登录、获取列表），若能正常返回数据，则说明前后端与数据库的连接均配置成功。

内容的提问来源于stack exchange，提问作者Unnikrishnan KJ