如何在Beanstalk的Docker镜像中用craco构建React项目时隐藏私钥

1. 调整构建与craco配置，取消本地.env文件依赖 #

• 首先修改package.json中的构建命令，移除env-cmd读取本地.env文件的逻辑，craco默认会自动读取运行环境中已存在的环境变量：

  "build:nightly": "craco build"
  

• 注意React生态默认只会自动注入以REACT_APP_为前缀的环境变量到构建产物中，如果你使用的私钥变量没有该前缀，可以在craco.config.js中配置webpack的DefinePlugin手动注入：

  const webpack = require('webpack');
  module.exports = {
    webpack: {
      configure: (config) => {
        config.plugins.push(
          new webpack.DefinePlugin({
            // 替换为你实际使用的私钥变量名
            'process.env.PRIVATE_KEY': JSON.stringify(process.env.PRIVATE_KEY)
          })
        );
        return config;
      }
    }
  };
  

2. 配置Docker与Beanstalk透传环境变量 #

Docker构建阶段默认无法直接获取宿主的环境变量，需要手动配置透传逻辑：

• 在Dockerfile的构建阶段声明对应变量的构建参数，转为环境变量供craco构建读取，示例如下：

  # 构建层
  FROM node:18-alpine AS builder
  WORKDIR /app
  # 声明需要透传的构建参数，和Beanstalk中配置的变量名一一对应
  ARG PRIVATE_KEY
  ARG REACT_APP_OTHER_CONFIG
  # 将构建参数转为环境变量
  ENV PRIVATE_KEY=$PRIVATE_KEY
  ENV REACT_APP_OTHER_CONFIG=$REACT_APP_OTHER_CONFIG
  
  COPY package*.json ./
  RUN npm install
  COPY . .
  RUN npm run build:nightly
  
  # 运行层，以nginx托管为例
  FROM nginx:stable-alpine
  COPY --from=builder /app/build /usr/share/nginx/html
  EXPOSE 80
  CMD ["nginx", "-g", "daemon off;"]
  

• 进入Beanstalk控制台的对应环境，打开「配置」-「容器」选项，在构建参数配置项中添加你需要透传的变量，值填写${变量名}即可关联你在「软件」-「环境属性」中已经配置好的环境变量。

3. 运行时注入的优化方案（可选） #

如果你的私钥是运行时使用而非构建阶段需要打包进产物，更推荐用运行时注入的方案，彻底避免密钥被打包到镜像中：

• 在public/index.html中添加占位符：

  <script>
    window.PRIVATE_KEY = '__PRIVATE_KEY__';
  </script>
  

• 在Docker的启动脚本中使用envsubst命令替换占位符为实际的环境变量值，运行时注入的变量不需要在构建阶段处理，也不会出现在代码仓库或镜像层中。

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