GitHub Actions无法将环境变量传递至Vite构建问题求助

Vite的环境变量是构建阶段注入到静态产物中的，你当前的流程是先构建Docker镜像（此时未传入任何Vite环境变量），之后部署启动容器时才传递环境变量——这时候静态文件已经生成完毕，无法再注入变量，自然会得到undefined。另外注意：Vite要求环境变量必须以VITE_开头，你代码里写的import.meta.env.LOGIN不符合规则，应该对应变量名写成import.meta.env.VITE_APP_LOGIN。

提供两种可行思路，根据你的场景选择：

方案一：构建镜像时注入环境变量（适合变量固定的场景） #

修改GitHub Action的build-and-push-image任务，在构建镜像时就传入Vite需要的环境变量：

1. 更新build-and-push-image中的构建步骤，添加环境变量传递：

- name: Build and push Docker image
  uses: docker/build-push-action@v4
  env:
    VITE_APP_LOGIN: ${{ vars.SW_APP_LOGIN }}
    VITE_APP_PASSWORD: ${{ secrets.SW_APP_PASSWORD }}
    VITE_APP_EXCLUDE_URLS: ${{ vars.SW_APP_EXCLUDE_URLS }}
  with:
    context: .
    push: true
    tags: ${{ steps.meta.outputs.tags }}
    labels: ${{ steps.meta.outputs.labels }}
    cache-from: type=gha
    cache-to: type=gha,mode=max

2. 确保你的Dockerfile在构建阶段能读取这些变量，示例如下：

# 构建阶段
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
# 构建时自动注入环境变量到静态文件
RUN npm run build

# 运行阶段
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

这样构建出的镜像已经包含注入好变量的静态文件，部署时无需再传递环境变量。

方案二：运行时动态注入环境变量（适合需要动态变更变量的场景） #

如果需要在部署阶段调整环境变量，可以通过启动脚本替换静态文件中的占位符：

1. 修改Vite代码，将环境变量改为占位符：

const LOGIN = import.meta.env.VITE_APP_LOGIN || '__VITE_APP_LOGIN__';
const PASSWORD = import.meta.env.VITE_APP_PASSWORD || '__VITE_APP_PASSWORD__';

2. 更新Dockerfile，添加启动脚本：

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh
EXPOSE 80
ENTRYPOINT ["/entrypoint.sh"]
CMD ["nginx", "-g", "daemon off;"]

3. 编写entrypoint.sh替换脚本：

#!/bin/sh
# 替换静态文件中的占位符
sed -i "s/__VITE_APP_LOGIN__/$VITE_APP_LOGIN/g" /usr/share/nginx/html/assets/*.js
sed -i "s/__VITE_APP_PASSWORD__/$VITE_APP_PASSWORD/g" /usr/share/nginx/html/assets/*.js
# 执行原启动命令
exec "$@"

4. 调整GitHub Action的deploy步骤，确保环境变量传递到容器：

docker run --name ${{ inputs.deploy_target }} \
  --env VITE_APP_LOGIN="${{ vars.SW_APP_LOGIN }}" \
  --env VITE_APP_PASSWORD="${{ secrets.SW_APP_PASSWORD }}" \
  -d -p ${{ inputs.deploy_port }}:80

内容的提问来源于stack exchange，提问作者Valery Nosareu