Docker Compose环境变量无法在Nginx中生效：Vue+Spring Boot跨容器部署配置问题

你遇到的核心问题是：Nginx本身不支持直接在配置文件中解析环境变量，所以你写的${VUE_APP_BASE_URL}不会被自动替换成Docker Compose里设置的值。下面是具体的解决方案，基于你现有的配置修改：

步骤1：将Nginx配置改为模板文件 #

把你的nginx.conf重命名为nginx.conf.template，内容保持不变（依然保留${VUE_APP_BASE_URL}占位符）：

# Run as a less privileged user for security reasons.
user nginx;
# worker_threads to run; "auto" sets it to the CPU_cores available in the system, and offers the best performance.
worker_processes auto;

events {
    worker_connections 1024;
}

http {
    sendfile on;
    upstream docker-backend {
        server ${VUE_APP_BASE_URL};
    }
    server {
        # Hide nginx version information.
        server_tokens off;
        listen 80;
        root /usr/share/nginx/html;
        include /etc/nginx/mime.types;
        location / {
            try_files $uri $uri/ /index.html;
        }
        location /api/ {
            proxy_pass http://docker-backend;
        }
    }
}

步骤2：更新Dockerfile，添加环境变量替换逻辑 #

在生产阶段，我们不再直接复制最终的Nginx配置，而是复制模板文件，然后用envsubst工具（nginx:stable-alpine镜像自带）替换占位符后再启动Nginx：

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

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
# 复制模板文件而非最终配置
COPY nginx.conf.template /etc/nginx/nginx.conf.template
EXPOSE 80
# 先用envsubst替换变量，再启动Nginx
CMD ["sh", "-c", "envsubst '${VUE_APP_BASE_URL}' < /etc/nginx/nginx.conf.template > /etc/nginx/nginx.conf && nginx -g 'daemon off;'"]

关键说明： #

• envsubst '${VUE_APP_BASE_URL}'：明确指定只替换这个环境变量，避免误替换Nginx本身的内置变量（比如$uri、$uri/）。如果不指定变量，envsubst会替换所有$开头的内容，导致Nginx配置失效。
• 替换后的配置会写入/etc/nginx/nginx.conf，然后正常启动Nginx。

步骤3：保持Docker Compose配置不变 #

你的Docker Compose文件已经正确设置了VUE_APP_BASE_URL环境变量，不需要修改：

backend-service:
  container_name: backend-service
  image: backend-service-local
  networks:
    - app-network
  ports:
    - 8081:8080
  restart: on-failure
  depends_on:
    postgresdb:
      condition: service_healthy
vue-app:
  container_name: vue-app
  image: vue-app-local
  networks:
    - app-network
  ports:
    - 8080:80
  environment:
    VUE_APP_BASE_URL: http://backend-service:8080
  restart: on-failure
  depends_on:
    backend-service:
      condition: service_started

验证方法 #

启动容器后，你可以进入vue-app容器检查生成的Nginx配置：

docker exec -it vue-app cat /etc/nginx/nginx.conf

如果看到upstream docker-backend块里的server值变成了http://backend-service:8080，说明替换成功了。

额外注意事项 #

• 确保backend-service和vue-app在同一个Docker网络（app-network）中，这样容器名backend-service可以被正确解析。
• 如果后续需要添加更多环境变量，只需要在envsubst命令中添加对应的变量（比如envsubst '${VUE_APP_BASE_URL} ${ANOTHER_VAR}'），并在Nginx模板和Docker Compose中设置即可。

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