如何让 React 应用程序使用 Docker 容器中的环境变量？

Question

我有一个 React 应用程序，它使用 webpack.config.js 中指定的环境变量。问题是环境变量在构建期间被硬编码。如何让应用程序使用 Docker 容器中的环境变量？我不想每次想要更改生产环境变量时都重新构建 UI 图像。

webpack.config.js

module.exports = {
  ...
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'production'),
      },
    }),
  ],
}

Dockerfile

# Builder
FROM node:16 as builder

WORKDIR /usr/src/app

COPY package*.json ./
RUN yarn

COPY src ./src
COPY .babelrc .
COPY webpack* .
COPY config.docker.js ./config.js
COPY tsconfig.json .

RUN yarn build

# Runtime
FROM nginx:1.24-alpine3.17-slim

COPY support/ /
COPY --from=builder /usr/src/app/build /usr/share/nginx/html

Answer 1

也许你可以尝试runtime-env。

您需要执行以下几个步骤：

1. 更改读取环境变量的语法：

   // main.js
   - process.env.FOO
   + runtimeEnv.NODE_ENV // you could change runtimeEnv to whatever you want, see configuration section for details.
   

2. 使用runtime-env生成一个

   runtime-env.js

   ：

   npx runtime-env --mode development && npm run dev
   

3. 尽早导入生成的文件：

   <!-- index.html -->
   + <script src="/runtime-env.js"></script>
   <script src="/main.js"></script>
   

希望这有帮助:)。