Docker -компонентная переменная не передается в производственное приложение vue - PullRequest
Новая
       10

Docker -компонентная переменная не передается в производственное приложение vue

0 голосов
/ 01 марта 2020

Docker -компонентные переменные окружения, похоже, не установлены вообще. Я пытался использовать env_file и поля окружения, но при печати process.env в моем приложении vue единственными видимыми переменными являются NODE_ENV и BASE_URL

Вот мой код составления docker: 

    frontend:
    container_name: "Frontend"
    build:
        context: .
        dockerfile: frontend.dockerfile
    env_file:
        - ./frontend.env
    environment: 
        VUE_APP_BACKEND_URL: "django"
    ports: 
        - 8000:80
    command: echo $VUE_APP_BACKEND_URL

Frontend Dockerfile: 

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY ./front/package*.json ./
RUN npm install
COPY ./front .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Мой код frontend.env (он был добавлен, когда я пытался отладить проблему): 

VUE_APP_BACKEND_URL=django
VUE_APP_BACKEND_PORT=9000

Вот мой js код 

export function getEnvironmentVar(key,defaultVal){
  window.console.log(process.env)
  window.console.log(process.env.VUE_APP_BACKEND_URL)
  var result = process.env[`VUE_APP_${key}`];
  window.console.log(`Trying to read environment variable: ${key}, got: ${result}`)
  if(result!= undefined)
    return result
  else 
    return defaultVal
}

Вывод: 

{NODE_ENV: "production", BASE_URL: "/"}
NODE_ENV: "production"
BASE_URL: "/"
__proto__: Object

Это вывод с командной строкой в ​​docker -компонент добавлен: 

WARNING: The VUE_APP_BACKEND_URL variable is not set. Defaulting to a blank string.
Starting Frontend ... done
Attaching to Frontend
Frontend              | 
Frontend exited with code 0

Что я делаю неправильно?

Ответы [ 2 ]

2 голосов
/ 01 марта 2020

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

Чтобы сделать переменные среды видимыми для vue-cli при создании приложение, вам нужно использовать построить аргументы в вашем Dockerfile. Затем вы можете установить переменную среды на этапе сборки с тем же значением, что и аргумент сборки, прежде чем запускать npm run build.

frontend.dockerfile 

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
ARG VUE_APP_BACKEND_URL                       # <-- these two lines have
ENV VUE_APP_BACKEND_URL=$VUE_APP_BACKEND_URL  #      been added
COPY ./front/package*.json ./
RUN npm install
COPY ./front .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

docker -compose.yml 

services:
  frontend:
    container_name: "Frontend"
      build:
        context: .
        dockerfile: frontend.dockerfile
        args:
          - VUE_APP_BACKEND_URL=django
    ports: 
      - 8000:80

Поскольку VUE_APP_BACKEND_URL устанавливается до выполнения npm run build, переменные среды будут встроены в ваше встроенное приложение.

Источники:

0 голосов
/ 01 марта 2020

Вы можете попробовать пакет dotenv 

npm i dotenv

Добавить в начало файла 

require('dotenv').config()
...