如何通过GitHub Action在Firebase Hosting中配置.env环境变量

1. 对齐变量名 #

由于代码中使用的是process.env.SECURITY_AI_URL，需将根目录.env文件中的VUE_APP_API_URL修改为SECURITY_AI_URL，确保变量名与代码引用完全一致。

2. 在GitHub Action工作流中注入环境变量 #

根据变量是否敏感，选择以下两种方式之一修改.github/workflows/firebase-hosting-merge.yml：

方式一：加载仓库中的.env文件（适用于非敏感变量） #

在构建步骤前添加命令，将.env中的变量注入到构建环境：

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      # 加载.env变量到环境
      - name: Load env variables
        run: |
          if [ -f .env ]; then
            export $(cat .env | grep -v '#' | awk '/=/ {print $1}')
          fi
      # 执行项目构建
      - name: Build project
        run: npm install && npm run build
      # Firebase部署步骤
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_YOUR_PROJECT }}'
          projectId: your-firebase-project-id

方式二：使用GitHub Secrets存储（适用于敏感变量） #

1. 进入GitHub仓库的「Settings」→「Secrets and variables」→「Actions」，添加名为SECURITY_AI_URL的Secret，值为你的API地址。
2. 修改工作流，在构建步骤中注入该变量：

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      # 构建时注入Secret变量
      - name: Build project
        run: npm install && npm run build
        env:
          SECURITY_AI_URL: ${{ secrets.SECURITY_AI_URL }}
      # Firebase部署步骤
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_YOUR_PROJECT }}'
          projectId: your-firebase-project-id

3. 原理说明 #

Vue项目的Webpack构建过程中，会自动将构建环境中存在的process.env变量替换为实际值。只要构建时SECURITY_AI_URL变量存在，代码中的process.env.SECURITY_AI_URL就会被替换为对应的值，部署到Firebase Hosting后即可生效。

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