React项目使用webpack构建部署到S3后dotenv配置的环境变量不生效

你当前的配置仅读取了.env文件内的变量，没有合并Codebuild注入到系统环境中的变量，同时你的赋值逻辑存在顺序错误：

• 你的webpack配置中写的const env = {} || dotenv.config().parsed逻辑有误：JS中空对象{}为真值，||运算符会直接返回左侧的空对象，dotenv.config().parsed的内容根本不会被赋值给env（本地能运行大概率是你实际本地代码写反了顺序，或者是本地调试时手动注入了变量）
• dotenv默认只会读取.env文件的变量，不会自动读取process.env下的系统环境变量，AWS Codebuild中配置的环境变量会注入到process.env中，自然不会被你当前的逻辑捕获

1. 修正webpack配置的环境变量读取逻辑 #

调整逻辑，优先读取系统环境变量，再兜底.env文件的变量，合并后传入DefinePlugin：

const dotenv = require("dotenv")
const webpack = require('webpack')

module.exports = () => {
    // 先加载.env文件变量
    const dotenvParsed = dotenv.config().parsed || {}
    // 合并系统环境变量，系统变量优先级更高，覆盖.env同名变量
    const env = {...dotenvParsed, ...process.env}
    const envKeys = Object.keys(env).reduce((prev, next) => {
        prev[`${next}`] = JSON.stringify(env[next])
        return prev
    }, {})
    
    // 其余原有配置保持不变
    plugins: [
        new webpack.DefinePlugin(envKeys),
        new HtmlWebpackPlugin({
            template: "./public/index.html",
        }),
    ]
}

如果你担心系统变量太多污染全局，可以指定只提取需要的变量：

const env = {
  API_BASE_URL: process.env.API_BASE_URL || dotenvParsed.API_BASE_URL
}

2. 检查Codebuild配置 #

• 如果你的API_BASE_URL是通过Codebuild的密钥管理配置的敏感变量，需要在buildspec.yml的env块中显式声明该变量，才会在构建过程中生效
• 可以在buildspec.yml的build命令前加一行echo $API_BASE_URL，查看构建日志确认变量是否正常注入到了构建环境中

3. 验证构建产物 #

本地或者Codebuild构建完成后，打开dist目录下的打包后的JS文件，搜索API_BASE_URL，可以看到它已经被静态替换成了你配置的具体值，确认替换正确后再部署到S3即可。

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