dotenv-webpack配置的环境变量在Github Actions中不生效如何解决？

问题根源 #

你将APP_BASE环境变量配置在了S3同步的步骤下，仅该步骤可读取该变量，但执行npm run build的前置步骤无法获取该变量。同时你的代码仓库未提交.env文件，dotenv-webpack既无法读取本地.env文件，也无法获取系统环境变量中的APP_BASE，因此触发报错、变量替换失败。

修复步骤 #

1. 调整GitHub Actions环境变量位置 #

将APP_BASE移至npm run build可读取的作用域下，修改后的workflow.yml示例如下：

name: React CI

on:
    push:
        branches:
            - "main"

jobs:
    build:
        runs-on: ubuntu-latest
        # 配置为整个Job的全局环境变量，所有步骤都可读取
        env:
          APP_BASE: ${{ secrets.APP_BASE }}

        strategy:
            matrix:
                node-version: [15.x]

        steps:
            - uses: actions/checkout@v1
            - run: npm install
            - run: npm run build
            - uses: jakejarvis/s3-sync-action@master
              with:
                  args: --acl public-read --follow-symlinks --delete
              env:
                  AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
                  AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
                  AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
                  AWS_REGION: "ap-southeast-2"
                  SOURCE_DIR: "dist"

2. 可选：消除Failed to load ./.env.警告 #

如果不需要在本地.env文件不存在时触发报错，可以调整dotenv-webpack配置，添加silent: true参数屏蔽文件不存在的警告：

plugins: [
    new Dotenv({
        systemvars: true,
        silent: true // 屏蔽.env文件不存在的警告
    }),
]

备选方案：构建前临时生成.env文件 #

如果你不想调整环境变量作用域，也可以在构建步骤前新增一行命令，直接把APP_BASE写入临时.env文件：

steps:
    - uses: actions/checkout@v1
    - run: npm install
    # 新增步骤：生成临时.env文件
    - run: echo "APP_BASE=${{ secrets.APP_BASE }}" > .env
    - run: npm run build
    # 后续S3同步步骤保持不变

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