Почему недоступны переменные при развертывании через docker/jenkins?

Question

[lexstile]

Внутри контейнера переменные выводятся, но javascript ругается, что переменная не найдена, в чем может быть дело?

Локально на windows 10 все работает.

Webpack

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const autoprefixer = require('autoprefixer');
const Webpack = require('webpack');

const dotenv = require('dotenv');
const path = require('path');

const htmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/src/public/index.html',
  inject: 'body',
  scriptLoading: 'defer',
});

const miniCssExtractConfig = new MiniCssExtractPlugin({
  filename: '[name].[hash].css',
  chunkFilename: '[id].[hash].css',
});

const DefinePluginConfig = new Webpack.DefinePlugin({
  'process.env': JSON.stringify(dotenv.config().parsed),
});

const ESLintPluginConfig = new ESLintPlugin();

module.exports = {
  mode: 'development',
  entry: __dirname + '/src/index.js',
  output: {
    // path: __dirname + '/dist',
    path: __dirname,
    filename: '[name].[hash].js',
    publicPath: '/',
  },
  optimization: {
    // minimize: false,
    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: ['babel-loader'],
        exclude: [/node_modules/],
      },
      {
        test: /\.(css)$/,
        use: [MiniCssExtractPlugin.loader, { loader: 'css-loader' }],
      },
      {
        test: /\.(scss)$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: {
                exportGlobals: true,
                localIdentName: '[local]--[hash:base64:5]',
                auto: /\.module\.\w+$/i,
              },
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    autoprefixer({
                      browsers: ['> 0%'],
                    }),
                  ],
                ],
              },
              // TODO: только dev
              sourceMap: true,
            },
          },
          {
            loader: 'sass-loader',
          },
        ],
      },
      {
        test: /\.(png|jp(e*)g|svg|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              // name: 'images/[hash]-[name].[ext]',
              name: '[path][name].[ext]',
            },
          },
        ],
      },
    ],
  },
  resolve: {
    alias: {
      components: path.join(__dirname, 'src/components'),
      constants: path.join(__dirname, 'src/constants'),
      store: path.join(__dirname, 'src/store'),
      pages: path.join(__dirname, 'src/pages'),
      utils: path.join(__dirname, 'src/utils'),
      api: path.join(__dirname, 'src/api'),
      routes: path.join(__dirname, 'src/routes'),
      schemes: path.join(__dirname, 'src/schemes'),
      hooks: path.join(__dirname, 'src/hooks'),
    },
    extensions: ['.js', '.jsx'],
  },
  plugins: [htmlWebpackPluginConfig, miniCssExtractConfig, ESLintPluginConfig, DefinePluginConfig],
  devServer: {
    static: './src/public',
    port: 3000,
    historyApiFallback: {
      index: '/',
      disableDotRule: true,
    },
    hot: true,
  },
};

.env

APP_URL=http://***enu.ru
API_URL=http://api.***enu.ru
APP_ENV=development

constants.js

export const API_URL = process.env.API_URL;
export const APP_ENV = process.env.APP_ENV;

export const DOMAIN = process.env.APP_URL;

docker

ENV APP_URL=http://***enu.ru
ENV API_URL=http://api.***enu.ru
ENV APP_ENV=development

Comments

[сергей кузьмин]

вот это что ?

'process.env': JSON.stringify(dotenv.config().parsed),

если вы переопределили process.env то почему ожидаете что он вам увидит

если помогло - я положу в ответы вы отметите решением

[lexstile]

сергей кузьмин, а как не переопределять, не подскажете?

[сергей кузьмин]

попробуйте не загружать этот плагин

plugins: [htmlWebpackPluginConfig, miniCssExtractConfig, ESLintPluginConfig],

- убрал DefinePluginConfig -
должен дефолтный process.envзаработать

[lexstile]

сергей кузьмин, в общем, ушел от dotenv и DefinePluginConfig, пришел к dotenv-webpack, вы были правы в целом, если хотите - могу отметить))

[сергей кузьмин]

lexstile, да пожалуйста отметьте ответ решением.

Answer 1

[сергей кузьмин]

из за кода приложения

'process.env': JSON.stringify(dotenv.config().parsed),

в плагине DefinePluginConfig - переопределили process.env то почему ожидаете что он вам настоящие переменные окружения увидит

plugins: [htmlWebpackPluginConfig, miniCssExtractConfig, ESLintPluginConfig],

- уберите DefinePluginConfig -
должен дефолтный process.envзаработать