Docker, webpack and env variables

8/4/2020

I'm trying to compile some special environment variables into my JS like so:

const publicEnvVars = [  
    'GOOGLE_MAPS_API_KEY',
    'GOOGLE_DISTANCE_API_KEY',
    'SENTRY_PUBLIC_DSN',
    'STRIPE_PUBLIC_KEY',
    'RECAPTCHA_SITE_KEY',
]

let webpackConfig = {
    plugins: [
        new webpack.DefinePlugin(Object.fromEntries(publicEnvVars.map(v => [`process.env.${v}`, JSON.stringify(process.env[v])]))),
    ...

This was working great for development with webpack-development-server until I realized that my precompiled Docker image won't be able to pick up these environment variables.

I can't pass a .env file to docker build, so that's out of the question. Don't want to pass them one-by-one as --build-args either.

I can maybe try to inject some vars at runtime, but I don't think I really want to put all of these env vars in the HTML of every page in a <script> tag.

How else might I deal with this?

I'm also using Kubernetes if that helps.

-- mpen
docker
environment-variables
kubernetes
webpack

0 Answers