如何将连接MongoDB Atlas的Angular+Node.js项目部署至GitHub Pages

GitHub Pages是静态页面托管服务，根本没办法运行Node.js后端代码——你本地能跑是因为靠node index.js启动了Node服务，同时托管了Angular的静态文件，但GitHub Pages没有执行Node进程的环境，哪怕把后端文件传到gh-pages分支也没用。另外你说缺后端文件时出404，大概率是Angular的部署配置没做好。

1. 分离前后端部署（推荐） #

既然GitHub Pages跑不了后端，拆分部署是最合理的：

• 前端Angular项目继续部署到GitHub Pages，只托管静态文件
• Node.js后端部署到支持Node服务的免费平台（比如Vercel、Railway、Render）
• 前端代码里把API请求地址改成后端部署后的公网地址

2. 先修复Angular静态页面的404问题 #

如果只是想先让前端页面正常显示（暂时不连后端），按以下步骤调整：

• 构建Angular时指定正确的base href，对应你的仓库名：

  ng build --prod --base-href="/UserManagement/"
  

• 调整GitHub Actions工作流，确保dist文件正确上传到gh-pages分支的根目录。参考工作流文件（.github/workflows/deploy.yml）：

  name: Deploy Angular to GitHub Pages
  
  on:
    push:
      branches: [ main ]
    pull_request:
      branches: [ main ]
  
  jobs:
    build-and-deploy:
      runs-on: ubuntu-latest
      steps:
        - name: 拉取代码
          uses: actions/checkout@v4
  
        - name: 配置Node.js环境
          uses: actions/setup-node@v4
          with:
            node-version: '20'
  
        - name: 安装依赖
          run: npm install
  
        - name: 构建Angular项目
          run: ng build --prod --base-href="/UserManagement/"
  
        - name: 部署到GitHub Pages
          uses: peaceiris/actions-gh-pages@v4
          with:
            github_token: ${{ secrets.GITHUB_TOKEN }}
            publish_dir: ./dist/user-management/browser # 这里路径要和你Angular构建后的目录匹配
  

• 去仓库的GitHub Pages设置里确认：部署来源是gh-pages分支的根目录

3. 硬要前后端同环境运行（不推荐） #

如果非得让前后端在同一个环境跑，别用GitHub Pages，换支持Node服务的平台，比如Vercel：

• 在项目根目录创建vercel.json：

  {
    "buildCommand": "ng build --prod",
    "outputDirectory": "dist/user-management/browser",
    "functions": {
      "api/index.js": {
        "runtime": "@vercel/node@3"
      }
    },
    "routes": [
      { "src": "/api/(.*)", "dest": "/api/index.js" },
      { "src": "/(.*)", "dest": "/index.html" }
    ]
  }
  

• 把Node后端文件放到api目录下，直接部署到Vercel就行

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