如何在docker文件中获取对我可用的docker环境变量？ （使用React / JS / webpack）

Question

dockerfile：

ARG MY_VAR

ENV NODE_ENV  production
ENV MY_VAR $MY_VAR

COPY . .

RUN NODE_ENV=development npm install && \
    touch ./.env && \
    eval env > ./.env && \
    npm run build && \
    npm prune --production

Docker newb在这里

在我的容器中，我运行一个env命令并查看已设置的变量，同时在运行节点控制台时，我可以看到它们已在process.env中设置process.env

但是在我的项目构建时，我所有的env变量都未定义（在该RUN命令期间它们不可用）

eval env > ./.env &&行确实将用ENV命令设置的变量放入.env中，但是我无法在dockerfile中将这些变量硬编码

我希望我可以做类似的事情：

ENV MY_VAR $process.env.MY_VAR

像这样抢我的环境变量？

编辑：

webpack.config.js：

require('dotenv').config()

const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const BUILD_PATH = path.resolve(__dirname, "./client/build") + '/';
const SOURCE_PATH = path.resolve(__dirname, "./client/src") + '/';
const PUBLIC_PATH = path.resolve(__dirname, "./client/build") + '/';

const env = require('./env')(PUBLIC_PATH)


module.exports = () => {
  return {
    entry: ["idempotent-babel-polyfill", SOURCE_PATH + "/index.jsx"],

    context: SOURCE_PATH,

    output: {
      path: BUILD_PATH,
      filename: "bundle.js",
      publicPath: PUBLIC_PATH
    },

    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          use: [
            { loader: "babel-loader" },
          ]
        },
        {
          test: /\.scss$/,
          exclude: /node_modules/,
          use: [
            { loader: "style-loader" },
            { loader: "css-loader" },
            { loader: "sass-loader" }
          ]
        },
        {
          test: /\.(png|jpg|gif)$/,
          exclude: /node_modules/,
          use: [
            { loader: "file-loader" }
          ]
        }
      ]
    },

    devServer: {
      compress: true,
      port: 3002,
      historyApiFallback: true,
      contentBase: BUILD_PATH,
      publicPath: PUBLIC_PATH
    },

    devtool: "eval-source-map",

    plugins: [
      new webpack.DefinePlugin(env),
      new HtmlWebpackPlugin({
        filename: "index.html",
        template: path.resolve(SOURCE_PATH + "/index.html"),
        inject: true
      }),
      new webpack.optimize.UglifyJsPlugin(),
    ],

    watch: false,

  }
};

env.js：

require('dotenv').config()

// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
// injected into the application via DefinePlugin in Webpack configuration.
var REACT_APP = /^REACT_APP_/i;

function getClientEnvironment(publicUrl) {
  var processEnv = Object
    .keys(process.env)
    .filter(key => REACT_APP.test(key))
    .reduce((env, key) => {
      env[key] = process.env[key];
      return env;
    }, {
        'NODE_ENV': process.env.NODE_ENV || 'development',
        'MY_VAR': process.env.MY_VAR // for example
      });

  processEnv['process.env'] = Object
    .keys(processEnv)
    .reduce((env, key) => {
      env[key] = JSON.stringify(processEnv[key]);
      return env;
    }, {})

  return processEnv;
}

module.exports = getClientEnvironment;

Answer 1

在docker的CMD语句中执行构建命令可以解决此问题