Vite前端部署ECS时如何在运行时注入ALB URL环境变量？

针对你的Vite前端容器无法在运行时读取ECS任务定义传入的ALB URL问题，以下是几个可行的解决方案，无需重新构建镜像即可实现部署流程简化：

方案一：运行时生成静态配置文件 #

1. 在Vite项目的public目录下创建配置模板文件config.template.js：

window.__APP_CONFIG__ = {
  API_URL: "${API_URL}"
};

2. 前端代码中通过window.__APP_CONFIG__.API_URL访问后端地址，替换原有的import.meta.env引用。
3. 修改Dockerfile，添加启动脚本替换模板变量：

# 构建Vite项目
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 部署到Nginx
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY public/config.template.js /usr/share/nginx/html/config.template.js

# 添加启动脚本
COPY entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh

ENTRYPOINT ["/entrypoint.sh"]

4. 编写entrypoint.sh脚本，在容器启动时替换环境变量：

#!/bin/sh
sed -i "s/\${API_URL}/$API_URL/g" /usr/share/nginx/html/config.js
exec nginx -g 'daemon off;'

部署时，Terraform只需将ALB URL传入ECS任务定义的API_URL环境变量，容器启动时会自动生成可用的配置文件。

方案二：动态请求获取运行时配置 #

1. 前端入口文件中添加动态加载配置的逻辑：

async function initApp() {
  const res = await fetch('/config.json');
  const config = await res.json();
  window.__APP_CONFIG__ = config;
  // 初始化应用（比如React的ReactDOM.render或Vue的createApp）
}
initApp();

2. 在Docker启动脚本中生成config.json：

#!/bin/sh
echo "{\"API_URL\": \"$API_URL\"}" > /usr/share/nginx/html/config.json
exec nginx -g 'daemon off;'

此方案通过静态JSON文件传递配置，逻辑更简洁，适合大多数场景。

方案三：通过Nginx接口返回环境变量 #

1. 创建Nginx配置模板default.conf.template：

server {
  listen 80;
  root /usr/share/nginx/html;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }

  location /api-config {
    default_type application/json;
    return 200 '{"API_URL": "$API_URL"}';
  }
}

2. 修改Dockerfile，使用envsubst替换配置中的变量：

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY default.conf.template /etc/nginx/conf.d/default.conf.template

ENTRYPOINT ["/bin/sh", "-c", "envsubst '$API_URL' < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"]

3. 前端通过请求/api-config接口获取ALB URL，实现运行时动态读取。

这些方案都无需在构建镜像时注入环境变量，只需本地构建一次镜像，后续通过Terraform传入ECS任务定义的环境变量即可完成部署，完全符合你的流程需求。

内容的提问来源于stack exchange，提问作者Matt B