咨询：Beanstalk环境变量在Docker构建React应用时无法访问的解决方案

这个问题我之前部署React应用到Elastic Beanstalk时也碰到过，核心矛盾在于：Beanstalk的环境变量是在容器运行时注入的，但你的yarn build是在Docker构建阶段执行的，此时容器还未获取到Beanstalk配置的变量，自然会导致构建失败。下面给你几个可行的解决方案，按推荐程度排序：

方案一：将构建步骤移到Beanstalk部署阶段（最推荐） #

把Dockerfile里的yarn build去掉，让Beanstalk在部署过程中执行构建——这时候Beanstalk的环境变量已经生效，构建过程就能直接读取到。

步骤1：修改Dockerfile #

只保留依赖安装和启动命令，移除构建步骤：

FROM node:11.10
WORKDIR /app
COPY . /app
RUN yarn
EXPOSE 8080
CMD [ "yarn", "start"]

步骤2：添加Beanstalk构建配置 #

在你的项目根目录创建.ebextensions文件夹，然后新建01_build.config文件，内容如下：

container_commands:
  01_build:
    command: "yarn build"
    leader_only: true # 只在主实例上执行，避免多实例重复构建

Beanstalk会在容器启动前执行这个container_commands，此时环境变量已经注入到容器环境中，yarn build就能正常读取到所有配置的变量了。

方案二：运行时注入环境变量（适合无法提前构建的场景） #

如果你的React应用需要在运行时动态读取环境变量（而不是构建时打包），可以通过启动脚本动态生成环境变量文件，再启动服务。

步骤1：创建启动脚本 #

在项目根目录新建start.sh脚本：

#!/bin/bash
# 生成React识别的环境变量文件（注意变量名必须以REACT_APP_开头）
cat > .env << EOF
REACT_APP_API_URL=$REACT_APP_API_URL
REACT_APP_AUTH_KEY=$REACT_APP_AUTH_KEY
# 这里添加你所有需要的环境变量
EOF

# 启动React服务
yarn start

记得给脚本添加执行权限：

chmod +x start.sh

步骤2：修改Dockerfile #

替换原来的CMD为执行脚本：

FROM node:11.10
WORKDIR /app
COPY . /app
RUN yarn
RUN chmod +x start.sh # 确保脚本可执行
EXPOSE 8080
CMD [ "./start.sh" ]

这样容器启动时，Beanstalk的环境变量已经注入，脚本会读取这些变量生成.env文件，React应用启动后就能拿到最新的变量了。

关于你的最后一个问题 #

当然可以在构建前从Beanstalk获取环境变量并注入代码——方案一就是最直接的实现方式：通过Beanstalk的container_commands在部署阶段执行构建，此时构建环境已经能访问到Beanstalk配置的所有环境变量，完全不需要把变量硬编码到代码里。

内容的提问来源于stack exchange，提问作者Jerin A Mathews