针对你提出的几个问题，我逐一拆解说明：

1. Docker Swarm模式下环境变量的定义位置 #

在Swarm模式中，环境变量主要有两个核心定义位置：

• 镜像内置变量：通过Dockerfile中的ENV指令定义，构建镜像时被写入镜像层，属于镜像的固定属性
• 运行时注入变量：在部署用的Compose配置文件（比如你的app.yml）中，通过服务的environment字段（或env_file）定义，部署Swarm服务时动态注入到容器中
  另外还有节点级/集群级的环境变量，但一般仅用于Swarm自身的配置，很少用于业务应用。

2. 环境变量优先级：Swarm vs 你提到的Docker Compose #

首先明确：Docker Swarm的优先级规则和你描述的传统Docker Compose（非Swarm模式）完全不同——
在你的场景中：

• Dockerfile里用ENV定义了APP_BACKEND_URL=http://localhost/
• app.yml中frontend服务的environment字段定义了同名变量APP_BACKEND_URL: 'backend'
  最终生效的是**app.yml中配置的运行时变量**，它会覆盖镜像内置的ENV值。

关于你提到的「Docker Compose中Dockerfile值覆盖Compose配置」的情况，大概率是你混淆了args和environment字段：

args是构建时变量，用于镜像构建过程，若Dockerfile中已定义同名ARG，Compose的args会被覆盖；而environment是运行时变量，正常情况下会覆盖Dockerfile的ENV值。不过Swarm模式的规则非常明确：运行时注入的变量优先级始终高于镜像内置变量。

3. 解决前端读取变量为undefined的问题 #

前端出现undefined的核心原因通常有两个：要么变量没有正确注入容器，要么前端应用的读取方式不对。按以下步骤排查：

第一步：验证容器中的环境变量是否正确注入 #

先确认Swarm服务是否正确加载了app.yml中的变量：

1. 执行命令查看服务配置：

   docker service inspect appli_frontend
   

   找到Spec.TaskTemplate.ContainerSpec.Env字段，检查其中的APP_BACKEND_URL是否为backend
2. 进入运行中的容器直接查看变量：

   # 先获取容器ID
   docker ps | grep appli_frontend
   # 进入容器查看环境变量
   docker exec -it <容器ID> printenv APP_BACKEND_URL
   

如果这里显示的是backend，说明变量已经正确注入容器，问题出在前端应用的读取逻辑。

第二步：修复前端应用的环境变量读取逻辑 #

如果你的前端是静态单页应用（SPA）（比如React、Vue、Angular），注意：

Docker的环境变量是容器运行时注入的，但SPA的构建过程通常会把环境变量打包到静态JS文件中，运行时无法读取容器的环境变量——这是很多人踩坑的点！

解决方案是用运行时占位符替换的方式：

1. 修改Dockerfile：

   # 其他构建步骤（比如npm run build）...
   ENV APP_BACKEND_URL=__BACKEND_URL_PLACEHOLDER__
   # 复制静态文件到nginx目录
   COPY dist /usr/share/nginx/html
   # 复制启动脚本
   COPY entrypoint.sh /entrypoint.sh
   RUN chmod +x /entrypoint.sh
   ENTRYPOINT ["/entrypoint.sh"]
   

2. 创建entrypoint.sh启动脚本：

   #!/bin/sh
   # 替换静态文件中的占位符为容器的环境变量值
   sed -i "s/__BACKEND_URL_PLACEHOLDER__/$APP_BACKEND_URL/g" /usr/share/nginx/html/index.html
   # 启动nginx
   exec nginx -g 'daemon off;'
   

3. 修改app.yml中的环境变量配置，确保格式正确：

   services:
     frontend:
       image: your-frontend-image:latest
       environment:
         - APP_BACKEND_URL=backend  # 数组格式推荐，或者用键值对格式
       # 其他配置（端口、网络等）...
   

第三步：确认Swarm服务的部署配置 #

确保你执行的部署命令正确：

docker stack deploy -c app.yml appli

部署后可以用docker stack services appli查看服务是否正常运行，若有重启循环，查看容器日志排查问题：

docker service logs -f appli_frontend

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