本地Webpack构建React部署EB：保留process.env变量方案咨询

你的问题核心在于Webpack的DefinePlugin会在构建阶段把代码中的process.env替换为构建时本地的环境变量对象，而Elastic Beanstalk（EB）的环境变量是在应用运行时才注入的，构建阶段本地根本不存在这些变量，所以它们被替换成了空值。

下面是具体的解决方案，完全不需要在EB上重新构建，也不用把变量硬编码到dotenv里：

关键修改：调整DefinePlugin的配置 #

你的Webpack配置中使用了new webpack.DefinePlugin(env.stringified)，这会把所有process.env相关的引用都替换成构建时的本地值。我们需要修改这个配置，只注入构建阶段必需的变量（比如NODE_ENV），保留服务端代码中运行时需要的process.env.*引用不被替换。

找到你webpack.config.server里的DefinePlugin部分，替换成如下代码：

new webpack.DefinePlugin({
  // 只替换构建时必须的环境变量，比如NODE_ENV
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
  // 如果你的代码还需要其他构建时变量（比如PUBLIC_URL），可以在这里添加
  // 'process.env.PUBLIC_URL': JSON.stringify(publicUrl)
}),

这样修改后，Webpack只会替换代码中的process.env.NODE_ENV，而像process.env.PORT这类EB提供的运行时变量会保持原代码不变，当应用在EB上运行时，Node.js会自动读取EB注入的真实环境变量。

为什么这个方案有效？ #

• DefinePlugin的作用是在构建阶段做静态替换，只替换你明确指定的变量，未指定的process.env.*会保留原代码结构。
• 你的Webpack配置已经设置了node: { process: false }，这会让Webpack不模拟Node.js的process对象，而是直接使用运行时的真实process，确保EB的环境变量能被正常读取。

额外验证点 #

1. 确保你的服务端代码中直接使用process.env.PORT（而不是提前解构赋值后再用），避免Webpack在构建阶段提前解析变量。
2. 本地构建后，检查生成的bundle.js，确认process.env.PORT这类变量没有被替换成空值或undefined。

这样修改后，你就可以继续本地构建生产包，部署到EB后正常读取它的环境变量了。

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