Vue应用Docker部署时Dockerfile无法读取环境变量问题咨询

你配置的核心问题是宿主机的环境变量默认无法被Docker构建过程直接读取，二者环境是完全隔离的，你需要手动将宿主机的PROJECT_REPO变量传递到Docker构建上下文里。

1. 修改Dockerfile，声明接收构建参数 #

在你的Dockerfile的构建阶段中声明ARG参数，用来接收外部传入的项目仓库标识：

# build stage
FROM node:lts-alpine as build-stage
# 新增这行，声明构建时传入的参数
ARG PROJECT_REPO
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build:${PROJECT_REPO}

# 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;"]

2. 修改build_deploy.sh，构建时传递参数 #

在docker build命令中加上--build-arg参数，将宿主机的PROJECT_REPO环境变量传递到Docker构建过程：

#!/bin/bash

docker build --build-arg PROJECT_REPO=${PROJECT_REPO} -t ${PROJECT_REPO} .

修改完成后重新执行npm run deploy:project1，即可正常识别变量完成对应项目的构建。

内容的提问来源于stack exchange，提问作者power-cut