GitHub Actions无法将环境变量传递给Vite构建

问题描述 #

尝试通过GitHub Action将React应用部署到S3存储桶，但Vite构建时环境变量未生效。部署完成后所有环境变量都无法正常工作，YAML配置如下：

name: Upload to S3

on:
  pull_request:
  push:
    branches:
      - dev
jobs:
  build:
    runs-on: ubuntu-latest
    
    strategy:
      matrix:
        node-version: [14.x]

    steps:
      - uses: actions/checkout@v3
      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v2
        with:
          aws-region: ${{ secrets.AWS_REGION }}
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        env:
          VITE_APP_BASE_URL: ${{ secrets.VITE_APP_BASE_URL }}
          AWS_S3_BUCKET: ${{ secrets.AWS_REBRAND_BUCKET_NAME }}
          VITE_APP_ALGOLIA_APP_ID:  ${{ secrets.VITE_APP_ALGOLIA_APP_ID }}
          VITE_APP_ENVIRONMENT: development
      
      - name: Yarn Install
        run: yarn install
      - name: Yarn Build
        run: yarn build
      - name: Deploy app build to S3 bucket
        run: aws s3 sync ./build/ s3://${{ secrets.AWS_REBRAND_BUCKET_NAME }} --delete

yarn build命令为"build": "vite build"，AWS凭证变量能正常传递，但其余环境变量完全无法传入。

问题原因 #

你将VITE开头的环境变量放在了Configure AWS Credentials步骤的env块中，GitHub Action里步骤级别的env仅对当前步骤生效，yarn build步骤无法访问这些变量。而AWS凭证能生效是因为aws-actions/configure-aws-credentials这个Action会自动将凭证配置到全局环境变量，供后续AWS命令使用，和你手动添加的env逻辑不同。

修复方案 #

有两种可行的修改方式：

方式一：将环境变量移到Job级别（推荐） #

把env块放到build Job下面，这样整个Job的所有步骤都能访问到这些变量：

name: Upload to S3

on:
  pull_request:
  push:
    branches:
      - dev
jobs:
  build:
    runs-on: ubuntu-latest
    env:
      VITE_APP_BASE_URL: ${{ secrets.VITE_APP_BASE_URL }}
      AWS_S3_BUCKET: ${{ secrets.AWS_REBRAND_BUCKET_NAME }}
      VITE_APP_ALGOLIA_APP_ID:  ${{ secrets.VITE_APP_ALGOLIA_APP_ID }}
      VITE_APP_ENVIRONMENT: development
    strategy:
      matrix:
        node-version: [14.x]

    steps:
      - uses: actions/checkout@v3
      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v2
        with:
          aws-region: ${{ secrets.AWS_REGION }}
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
      
      - name: Yarn Install
        run: yarn install
      - name: Yarn Build
        run: yarn build
      - name: Deploy app build to S3 bucket
        run: aws s3 sync ./build/ s3://${{ secrets.AWS_REBRAND_BUCKET_NAME }} --delete

方式二：将环境变量移到Build步骤 #

只在Yarn Build步骤中传入环境变量，减少全局变量的范围：

name: Upload to S3

on:
  pull_request:
  push:
    branches:
      - dev
jobs:
  build:
    runs-on: ubuntu-latest
    
    strategy:
      matrix:
        node-version: [14.x]

    steps:
      - uses: actions/checkout@v3
      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v2
        with:
          aws-region: ${{ secrets.AWS_REGION }}
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
      
      - name: Yarn Install
        run: yarn install
      - name: Yarn Build
        run: yarn build
        env:
          VITE_APP_BASE_URL: ${{ secrets.VITE_APP_BASE_URL }}
          AWS_S3_BUCKET: ${{ secrets.AWS_REBRAND_BUCKET_NAME }}
          VITE_APP_ALGOLIA_APP_ID:  ${{ secrets.VITE_APP_ALGOLIA_APP_ID }}
          VITE_APP_ENVIRONMENT: development
      - name: Deploy app build to S3 bucket
        run: aws s3 sync ./build/ s3://${{ secrets.AWS_REBRAND_BUCKET_NAME }} --delete

修改后，yarn build步骤就能正确读取Vite所需的环境变量，构建出包含正确配置的应用产物。

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