Переменные окружения не работают с Webpack Encore в контейнере Docker

Содержание

Вопрос или проблема
Ответ или решение
Проблема с переменными окружения в Webpack Encore в Docker-контейнере
Причины проблемы
Решение
Дополнительные советы
Заключение

Вопрос или проблема

У меня есть проект на Symfony с Webpack Encore. MySQL, PHP, Mercure, Yarn/NodeJS и т.д. установлены на моем компьютере, но я перехожу на использование dunglas/symfony-docker. Хотя раньше все работало, в новой настройке мои переменные окружения не работают так, как ожидалось.

# .env.local
MERCURE_HUB_URL=https://localhost/.well-known/mercure

# webpack.config.js
Encore.configureDefinePlugin(options => {
  const environment = dotenv.config({
    path: './.env.local',
    debug: false
  })
  console.info(environment.parsed)
  options['process.env.MERCURE_HUB_URL'] = JSON.stringify(environment.parsed.MERCURE_HUB_URL)
}

# api.js
const hub = new URL(process.env.MERCURE_HUB_URL)

Это раньше работало, но теперь я запускаю Node в контейнере:

# compose.yaml
encore:
  image: node:latest-alpine
  volumes:
    - .:/app
  ports:
    - "8080:8080"
  working_dir: /app
  depends_on:
    - php
  command: >
    sh -c "yarn install && yarn encore dev-server"

Хотя это работает (dev-server запускает компиляцию webpack), process в api.js не определен:

api.js:123 Uncaught ReferenceError: process is not defined

console.info(environment.parsed) в моем webpack.config.js возвращает переменные, как ожидалось, во время сборки, поэтому я не понимаю, что пошло не так. Есть идеи?

Process недоступен в текущей области видимости, вы можете попробовать глобально установить переменную MERCURE, таким образом, в “frontend” коде не понадобится process. Вот так:

  .configureDefinePlugin(options => {
    const environment = dotenv.config({
      path: './.env.local',
      debug: false
    }).parsed;

options['MERCURE_HUB_URL'] = JSON.stringify(environment.MERCURE_HUB_URL);

Вы можете использовать это в api.js следующим образом:

const hub = new URL(MERCURE_HUB_URL);

Ответ или решение

Проблема с переменными окружения в Webpack Encore в Docker-контейнере

Когда вы переносите проект Symfony с использованием Webpack Encore в среду Docker, могут возникнуть сложности с доступом к переменным окружения. В данном случае, переменная MERCURE_HUB_URL, определенная в файле .env.local, не доступна в вашем клиентском коде, что приводит к ошибке ReferenceError: process is not defined.

Причины проблемы

Изолированная среда Docker: Когда вы работаете в Docker, ваше приложение запущено в отдельном контейнере, который может не иметь доступа к тем же переменным окружения, что и ваша локальная среда.
Отсутствие процесса: Переменная process в Node.js доступна только в среде выполнения Node, но когда вы пакуете ваш код с помощью Webpack для использования в браузере, этот контекст меняется.
Некорректная конфигурация Webpack: Хотя вы используете плагин DefinePlugin, важно правильно настроить передачу переменных окружения, чтобы их можно было использовать в клиентском коде.

Решение

Чтобы решить данную проблему, рекомендуется изменить способ передачи переменной MERCURE_HUB_URL в клиентский код:

Измените конфигурацию Webpack Encore:
Ваша конфигурация webpack.config.js должна быть изменена так, чтобы передавать переменные окружения напрямую, без использования process. Это можно сделать следующим образом:
```
Encore.configureDefinePlugin(options => {
   const environment = dotenv.config({
       path: './.env.local',
       debug: false
   }).parsed;

   options['MERCURE_HUB_URL'] = JSON.stringify(environment.MERCURE_HUB_URL);
});
```
Используйте переменную в api.js:
После изменения конфигурации вы сможете обращаться к MERCURE_HUB_URL напрямую в вашем клиентском коде, не полагаясь на process:
```
const hub = new URL(MERCURE_HUB_URL);
```

Дополнительные советы

Проверка .env.local: Убедитесь, что файл .env.local на вашей машине правильно настроен и доступен для контейнера. Это может включать в себя правильные права доступа к файлам и соответствующий путь к файлу.
Docker Compose: Убедитесь, что ваш docker-compose.yml файл правильно настроен и содержит все необходимые тома и переменные среды. Вы можете использовать переменные окружения Docker для установки переменных окружения в контейнере.
Отладка: Если проблема сохраняется, добавьте отладочную информацию (например, console.log) для проверки наличия доступа к переменным окружения внутри вашего контейнера.

Заключение

Правильная настройка переменных окружения в проекте с Webpack Encore, работающем в Docker, требует внимания к деталям. Изменив способ передачи переменных окружения и убедившись в их доступности, вы сможете устранить ошибки, связанные с отсутствием переменной process. Следуя данным рекомендациям, вы сможете наладить работоспособность вашего проекта и полностью использовать возможности Docker.