How do I get the docker environment variables available to me in the docker file? (using 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 here

In my container I run a env command and see the variables I've set, also when running a node console I can see they are set in process.env

But when my project builds, all my env variables are undefined (they are not available during that RUN command)

The eval env > ./.env && line DOES put the vars I set with ENV command into the .env, but I can't have those variables hardcoded in the dockerfile

I wish I could do something like:

ENV MY_VAR $process.env.MY_VAR

Anything like that to grab my environment variables?

edit:

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语句中执行构建命令可以解决此问题