Я создал проект Vue, используя Docker (и Docker Compose), и нахожусь в процессе развертывания с помощью Dokku. Я настроил проект достаточно, чтобы его можно было успешно развернуть в производственной среде. Однако у меня возникают проблемы при попытке доступа к переменным среды в сценарии сборки Vue CLI. Из-за того, как работает Vue CLI, переменные среды по существу встроены в приложение во время сборки (а не во время выполнения). Это означает, что мне нужны переменные среды во время компиляции приложения, которыми я управляю в процессе производства Dockerfile.
Auth0 Dokku Guide было бесценным но не имел дело с передачей переменных среды из Dokku в Vue CLI при сборке (где я застрял). С Docker Compose (разработка) это легко, но Dockerfile (рабочий) кажется другим (с использованием и ARG, и ENV для каждой переменной).
# === Base stage =====
FROM node:12.2-alpine AS base
WORKDIR /app
# node_modules are managed inside the container
COPY package*.json ./
# === Dependency stage =====
FROM base AS dependencies
# Install ONLY production dependencies
RUN npm install --only=production
# Copy production dependencies aside
RUN cp -R node_modules prod_node_modules
# Install ALL dependencies
RUN npm install
# === Build stage =====
FROM dependencies AS build
# Copy the rest of the application
COPY . .
# NOTE: It appears to be necessary to use BOTH 'ARG' and 'ENV'?
ARG VUE_APP_API_URL
ENV VUE_APP_API_URL ${VUE_APP_API_URL}
# ...repeat for EVERY build variable necessary?
# Build the Vue application, outputting the static files to /dist
RUN npm run build
# === Release stage =====
FROM base AS release
# Copy production dependencies (overwriting all dependencies, used for building)
COPY --from=dependencies /app/prod_node_modules ./node_modules
# Copy the build artifacts from the build stage
COPY --from=build /app/dist ./dist
# Copy the simple server file
COPY server.js /app/server.js
EXPOSE 8080
CMD node server.js
Ключевой частью является использование ARG и ENV ... нет лучшего способа, чем повторить это для каждой переменной, используемой в процессе сборки Vue (ie. файл конфигурации приложения)?
# NOTE: It appears to be necessary to use BOTH 'ARG' and 'ENV'?
ARG VUE_APP_API_URL
ENV VUE_APP_API_URL ${VUE_APP_API_URL}
# ...repeat for EVERY build variable necessary?
Приложение успешно построено и правильно развернуто в небольшом Express контейнере сервера. Переменные среды заполняются при сборке Vue CLI при использовании вышеуказанной настройки файла Dockerfile. Я использую файл config.js в проекте Vue, чтобы получить переменные среды во время сборки. Обратите внимание на правильное использование префиксов переменных VUE_APP_ (требуется Vue CLI).
export default {
api: {
url: process.env.VUE_APP_API_URL,
},
app: {
envName: process.env.VUE_APP_ENV_NAME || "local",
isProduction: process.env.NODE_ENV === "production",
},
};
Я попытался добавить необходимые переменные среды как переменные Dokku config, так и docker-options. Я немного запутался в Dokku docs о переменных конфигурации времени сборки. Относится ли это к переменным, используемым исключительно в Dockerfile, или к переменным, по существу предоставленным как process.env?
# Set Dokku environment variables (NOT USED)
dokku config:set [app_name] VUE_APP_API_URL=https://api.example.org
# Set Docker build variable (USED WITH ARG/ENV)
dokku docker-options:add [app_name] build "--build-arg VUE_APP_API_URL=https://api.example.org"
Должен быть лучший способ передать переменные среды, а не занимать так много строк ( и этапы) в Dockerfile!
TL; DR: Есть ли лучший способ передать переменные среды из Dokku в сценарий сборки Vue CLI при сборке с Dockerfile? Кажется безумием обновлять рабочий Dockerfile с таким количеством объявлений ARG и ENV, а затем по-прежнему устанавливать каждое из них индивидуально в dokku docker-options с этим многословным синтаксисом!
TL; DR2: Почему он не работает с dokku config, поскольку я не использую переменные времени сборки, но Vue CLI использует текущие переменные среды для сборки приложения? Почему Vue CLI использует переменные dokku config при построении?