React应用部署EC2时GitHub Action环境变量无法访问

你的REACT_APP_BACKEND环境变量无法被EC2上的React构建过程读取，核心原因有两个：

1. SSH会话的heredoc使用了单引号包裹的<< 'EOF'，这会阻止本地GitHub Action环境中的变量传递到远程EC2的shell会话中。
2. 即便变量能传递过去，也没有在EC2的构建步骤中显式暴露给React的构建命令。

修复步骤 #

1. 传递环境变量到EC2远程会话 #

去掉EOF两侧的单引号，改为<< EOF，这样本地的环境变量会被正确替换后传递到远程。同时，在远程会话中显式导出REACT_APP_BACKEND变量，确保构建命令能读取到。

2. 确保React构建时能读取到变量 #

React在npm run build时会自动读取前缀为REACT_APP_的环境变量，只需在构建前导出该变量即可，或者写入项目的.env.production文件（如果项目依赖该文件）。

修改后的完整工作流配置 #

name: Deploy Frontend to EC2

on:
  push:
    branches: [ "deployment" ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout code
      uses: actions/checkout@v3

    - name: Deploy to EC2
      env:
        EC2_HOST: ${{ secrets.EC2_HOST }}
        EC2_USER: ${{ secrets.EC2_USER }}
        EC2_KEY: ${{ secrets.EC2_KEY }}
        REACT_APP_BACKEND: ${{ secrets.BACKEND_URL }}
      run: |
        echo "${EC2_KEY}" > ec2-key.pem
        chmod 600 ec2-key.pem

        # 去掉EOF的单引号，允许本地变量替换传递到远程
        ssh -o StrictHostKeyChecking=no -i ec2-key.pem $EC2_USER@$EC2_HOST << EOF

          export NVM_DIR="$HOME/.nvm"
          [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
          
          nvm use 20.17.0

          cd /home/ubuntu/Portfolio/Portfolio-Frontend
  
          git pull origin deployment
          npm install

          # 显式导出环境变量，让React构建过程读取
          export REACT_APP_BACKEND=${REACT_APP_BACKEND}
          npm run build
  
          sudo cp -r build/* /var/www/frontend

        EOF
        
        rm ec2-key.pem

备选验证方案 #

如果上述修改仍有问题，可以尝试将环境变量写入项目的.env.production文件（React默认会读取该文件），在npm install之后添加：

echo "REACT_APP_BACKEND=${REACT_APP_BACKEND}" > .env.production

再执行npm run build即可。

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