如何将独立MERN应用部署为自有网站的子路径？

1. 用Git Submodule整合项目 #

先将你的my-app作为主网站项目的子模块引入，既能保持两个项目独立开发，又能在部署时整合到同一服务器实例：

# 在主网站项目根目录执行，将my-app仓库添加为子模块，放在services/my-app目录下
git submodule add <你的my-app仓库地址> ./services/my-app

后续拉取主项目时，记得同步子模块：

git clone --recurse-submodules <主网站仓库地址>
# 若已克隆主项目，执行以下命令同步子模块
git submodule update --init --recursive

2. 调整MERN前端适配子路径 #

前端原本针对根路径（/）开发，需修改配置适配/my-app子路径：

• 设置homepage：在my-app/package.json中添加"homepage": "/my-app"，执行npm run build时，所有静态资源路径会自动加上/my-app前缀。
• 配置路由基准路径：如果使用React Router，给BrowserRouter添加basename属性：

import { BrowserRouter } from 'react-router-dom';

<BrowserRouter basename="/my-app">
  {/* 你的路由组件 */}
</BrowserRouter>

• 构建前端静态文件：在my-app目录下执行npm install && npm run build，生成适配子路径的build静态文件目录。

3. 主网站后端（Express）挂载子应用 #

假设主网站基于Express开发，通过以下方式将my-app的前端和后端整合到主服务中：

• 托管前端静态文件：在主服务入口文件（如app.js）中添加静态文件托管路由：

const express = require('express');
const path = require('path');
const app = express();

// 托管my-app的build目录，对应访问路径/my-app
app.use('/my-app', express.static(path.join(__dirname, './services/my-app/build')));

• 挂载后端API路由：如果my-app有独立的Express后端路由，直接挂载到/my-app/api路径下：

// 引入my-app的后端路由（根据实际路径调整）
const myAppApiRoutes = require('./services/my-app/server/routes');

// 将my-app的API挂载到/my-app/api前缀下
app.use('/my-app/api', myAppApiRoutes);

若my-app后端是独立服务，也可使用http-proxy-middleware做反向代理，但直接挂载路由更适合同一服务器实例的场景。

4. 部署与测试 #

• 部署时，确保主项目和子模块的依赖均已安装，my-app的前端已完成构建。
• 启动主服务后，访问example.com/my-app即可获得与本地localhost:3000一致的内容，API接口通过example.com/my-app/api/xxx访问。

注意事项 #

• 确保my-app内部的资源引用（图片、样式、接口请求）使用相对路径，或通过homepage和basename自动适配子路径，避免出现404。
• 若my-app有环境变量（如API_BASE_URL），需设置为/my-app/api，而非本地的http://localhost:3000/api。
• 本地测试时，可将主服务端口设为80，访问localhost/my-app验证效果。

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