通过GitHub Actions将GitHub ReactJS应用部署到Ubuntu服务器的方案咨询

1. 现有404/502报错修复 #

• 404报错：你新增React Router/Switch后用了默认的Browser路由模式，直接访问子路径时服务端没有对应静态资源，需要在web服务器中配置所有前端请求 fallback 到index.html即可解决
• 502报错：反向代理指向的Node服务未正常运行、端口监听错误，或者代理配置的地址/端口不匹配，优先检查Node服务是否正常启动、代理配置的端口是否和Node服务监听端口一致

2. 可直接复用的GitHub Action配置 #

首先在GitHub仓库的Settings->Secrets and variables->Actions路径下添加4个仓库私密变量：

• SERVER_IP：Ubuntu服务器公网IP
• SERVER_USER：服务器SSH登录用户名（常用为root）
• SERVER_SSH_KEY：服务器SSH登录私钥（对应公钥需提前写入服务器~/.ssh/authorized_keys文件）
• APP_DIR：服务器上应用存放的绝对路径，例如/var/www/my-react-app

在项目根目录创建.github/workflows/deploy.yml文件，内容如下：

name: 自动部署到Ubuntu服务器
# 配置触发条件：推送到main分支时触发部署，可自行修改分支名
on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 拉取最新代码
        uses: actions/checkout@v4

      - name: 配置Node.js环境
        uses: actions/setup-node@v4
        with:
          node-version: '18' # 替换为你项目实际使用的Node版本号

      - name: 安装依赖并构建前端产物
        run: |
          npm install
          npm run build

      - name: 同步文件到服务器并执行部署
        uses: easingthemes/ssh-deploy@main
        env:
          SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
          ARGS: "-rlgoDzvc -i --exclude='node_modules'"
          SOURCE: "./"
          REMOTE_HOST: ${{ secrets.SERVER_IP }}
          REMOTE_USER: ${{ secrets.SERVER_USER }}
          TARGET: ${{ secrets.APP_DIR }}
          # 部署完成后在服务器执行的命令，可按需调整
          SCRIPT_AFTER: |
            cd ${{ secrets.APP_DIR }}
            npm install --production
            pm2 reload my-node-app # 替换为你的Node服务PM2进程名
            sudo nginx -s reload

3. Ubuntu服务器端配置 #

• 提前安装PM2管理Node服务，避免服务意外崩溃退出：执行npm install -g pm2，首次启动Node服务执行pm2 start 你的Node入口文件.js --name my-node-app
• 把本地生成的SSH公钥写入服务器~/.ssh/authorized_keys文件，确保GitHub Action可以通过SSH免密登录服务器
• 配置服务器sudo权限免密，避免执行sudo nginx -s reload时需要输入密码：执行echo "$USER ALL=(ALL) NOPASSWD: /usr/sbin/nginx -s reload" >> /etc/sudoers，替换$USER为你的SSH登录用户名
• 配置完成后，每次向GitHub对应分支推送代码，就会自动触发部署流程，无需手动登录服务器操作

4. Nginx与Apache选择建议 #

优先继续使用Nginx，无需切换到Apache：

• Nginx在静态资源托管、反向代理场景下性能远高于Apache，内存占用更低，配置逻辑更简洁，完全适配React+Node应用的部署需求
• 以下是适配React Router的Nginx配置示例，可直接修改后放入/etc/nginx/sites-available/目录下：

server {
    listen 80;
    server_name 你的项目域名或服务器IP;
    # 指向React npm run build生成的dist/build目录绝对路径
    root /var/www/my-react-app/build;
    index index.html;

    # 解决React Browser路由404问题
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 代理Node后端接口，若你的接口前缀为/api则保留该配置，否则可删除或修改前缀
    location /api {
        proxy_pass http://127.0.0.1:3001; # 替换为你的Node服务实际监听端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

配置完成后执行sudo nginx -t检查语法无误，再执行sudo nginx -s reload生效即可。

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