При разворачивании своего приложения NuxtJS каждый разработчик рано или поздно столкнется с необходимостью использовать переменные окружения (environment variables) в том или ином виде. Как правило это требуется для разделения развертывания на production и dev- окружении.
Итак нам нужно использовать переменные окружения в приложении NuxtJs которое запущено в docker контейнере. Первым дело нужно установить переменные в docker-compose.yml файле. Делается это при помощи директивы environment
Итоговый файл будет примерно таким:
version: "3.9" volumes: db-data: static_volume: media_volume: services: db: image: postgres container_name: visionmark_postgres environment: - POSTGRES_DB=mydb - POSTGRES_USER=myuser - POSTGRES_PASSWORD=mypassword@63 volumes: - db-data:/var/lib/postgresql/data frontend: restart: always build: ./frontend container_name: visionmark_frontend environment: - BASE_URL=http://localhost/api/ - BRAWSER_BASE_URL=https://mysite.ru/api/ depends_on: - backend
В вашем случае разумеется файл, будет немного отличаться. Далее нам нужно эти переменные обработать в Nuxt.
Документация гласит, что в версиях Nuxt выше 2.12 уже можно не использовать модуль dotenv module . Вместо него появились встроенные свойства publicRuntimeConfig и privateRuntimeConfig.
publicRuntimeConfig нужен для объявления переменных которые используются на фронте, privateRuntimeConfig для переменных которые будут использоваться только лишь в контексте сервера.
Таким образом мне нужны было переопределить baseURL для модуль axios. Ранее у меня был такой конфиг в файле nuxt.config.js
axios: { baseURL: process.env.BASE_URL, browserBaseURL: process.env.BRAWSER_BASE_URL },
Теперь же я могу его удалить и использовать
publicRuntimeConfig: { axios: { browserBaseURL: process.env.BRAWSER_BASE_URL } }, privateRuntimeConfig: { axios: { baseURL: process.env.BASE_URL } }
У меня все, надеюсь этот мануал пригодится кому нибудь.