Невозможно получить доступ к переменным env из dockerfile в приложении React с помощью веб-пакета DefinePlugin

Question

Я не уверен, что я делаю неправильно. console.log печатает undefined. Makefile, config.env, webpack.config.js и package.json все находятся в корне проекта.

Makefile:

docker-run: docker
    docker run -it --env-file config.env -p "80:80" app

config.env

API_KEY=https://test.com

webpack.config.js

plugins: [
        new webpack.DefinePlugin({
            BASE_URL: JSON.stringify('https://myapp.firebaseio.com'),
            'process.env.API_KEY': JSON.stringify(process.env.API_KEY)
        })
    ]

App.js

const App = () => {
    useEffect(() => {
        console.log(process.env.API_KEY);//undefined
        console.log(process.env.BASE_URL);//undefined
        console.log(BASE_URL);//undefined
    }, []);
    return (
        <></>
    );
};

Package.json (npm run docker)

"scripts": {
        "start": "rm -rf dist && webpack-dev-server --mode development --open --hot --port 8090",
        "docker": "rm -rf dist && webpack --mode production && make docker-run"
    },

Answer 1

Одна ошибка, которую я вижу здесь, заключается в том, что вы создаете проект вне докера и помещаете артефакты (после сборки) в докер для обслуживания веб-приложения.

Согласно документации DefinePlugin https://webpack.js.org/plugins/define-plugin/

DefinePlugin позволяет создавать глобальные константы, которые можно настроить во время компиляции

Это означает, что если у вас есть компонент App.js, как показано ниже

import React from 'react';

function App() {
  return (
    <div>
        <p>[process.env.test] = {process.env.test}</p>
        <p>[process.env.NODE_ENV] = {process.env.NODE_ENV}</p>

    </div>
  );
}

export default App;

И конфигурация веб-пакета

new webpack.DefinePlugin({"process.env.test": JSON.stringify(process.env.test)})

После запуска NODE_ENV=production test="A test variable" npm run build (который запускается изнутри webpack --mode production, если он загружается с помощью create-реакции-приложения)

Компонент компилируется в(Вставлены только соответствующие части скомпилированного кода веб-пакета).

 var i = function() {
        return a.a.createElement(
          "div",
          null,
          a.a.createElement(
            "p",
            null,
            "[process.env.test] = ",
            "A test variable"
          ),
          a.a.createElement(
            "p",
            null,
            "[process.env.NODE_ENV] = ",
            "production"
          )
        );
      }

Здесь он заменил {process.env.test} и {process.env.NODE_ENV} на A test variable и production во время компиляции .

Установка каких-либо переменных среды на сервере после сборки не влияет на скомпилированный файл .

И из-за прямого внедрения переменных env в скомпилированный код выне следует использовать это для хранения конфиденциальнойинформация (секреты / личные токены, пароли, IP-адреса внутренних серверов и т. д.).

Таким образом, решение вашей первоначальной проблемы может заключаться в создании артефактов внутри контейнера Docker. Ниже приведен пример файла Docker.

FROM node:10 as react-app
# Create app directory
WORKDIR /usr/src/app
# Set a temporary variable
ENV test="Hello Docker"
COPY . .
RUN npm install
RUN npm run build

FROM nginx:1.12-alpine
COPY --from=react-app /usr/src/app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]  

Пример репозитория git, если вам нужна ссылка.

https://github.com/nithinthampi/test-defineplugin.