如何在Railway.app部署MERN应用？已分开部署前后端如何连接？

MERN应用在Railway上有两种主流部署方式，可根据项目结构选择：

方式一：单仓库部署（前后端同仓） #

• 调整项目结构：确保后端代码在根目录，前端代码放在client子目录。后端package.json需包含启动脚本（如"start": "node server.js"），前端package.json需有构建脚本（如Create React App的"build": "react-scripts build"）。
• 配置启动命令：在Railway项目的「Settings」→「Start Command」中，设置为npm run build && npm start；或在根目录package.json中添加自定义部署脚本：

  "scripts": {
    "deploy": "cd client && npm install && npm run build && cd .. && npm install && npm start"
  }
  

  再将Railway的启动命令设为npm run deploy。
• 配置环境变量：在Railway的「Variables」面板添加后端所需变量（如MongoDB URI），后端代码监听端口需写成process.env.PORT || 5000（Railway会自动分配端口）。
• 触发部署：将代码推送到GitHub仓库，在Railway中导入该仓库，等待构建完成即可。

方式二：双仓库部署（前后端分仓） #

后端部署步骤 #

• 将后端代码推送到独立GitHub仓库，在Railway导入该仓库，启动命令设为npm start。
• 添加后端环境变量（如数据库连接串），确保端口监听process.env.PORT。
• 部署完成后，复制Railway分配的后端域名（格式类似https://xxx-server.railway.app）。

前端部署步骤 #

• 将前端代码推送到另一个GitHub仓库，在Railway导入该仓库。
• 在前端的Railway「Variables」面板添加环境变量，比如Create React App用REACT_APP_API_URL，值为刚才复制的后端域名。
• Railway会自动识别前端项目类型（如CRA）并完成构建，部署后生成前端专属域名。

按以下步骤完成连接：

1. 配置前端环境变量
   在前端的Railway项目「Variables」面板中，添加API地址变量（CRA用REACT_APP_API_URL，Vue用VITE_API_URL），值为后端的完整Railway域名（必须带https://前缀）。

2. 后端配置CORS策略
   确保后端启用CORS，允许前端域名访问。使用cors包的示例代码：

   const cors = require('cors');
   // 生产环境建议指定前端域名，降低跨域风险
   app.use(cors({ origin: process.env.CLIENT_URL }));
   

   然后在后端的Railway「Variables」面板添加CLIENT_URL，值为前端的Railway域名。测试阶段可临时用app.use(cors())允许所有域名访问。

3. 修改前端请求逻辑
   前端发送请求时，使用环境变量中的API地址，示例：

   // Create React App 示例
   const fetchData = async () => {
     const res = await fetch(`${process.env.REACT_APP_API_URL}/api/users`);
     const data = await res.json();
     console.log(data);
   };
   

4. 验证连接
   修改环境变量后，Railway会自动重启对应服务。等待重启完成后，访问前端域名，测试接口请求是否正常返回数据。

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