Azure生产环境多容器Web应用CI/CD部署：AKS与App Service选型及ACI端口映射错误解决方案求助

核心问题解析：为什么会出现“Cannot map container ports on ACI”错误 #

Azure Web App for Containers的多容器模式基于Azure Container Instances（ACI）运行，ACI有个关键限制：只有对外提供服务的前端容器可以暴露80/443端口，后端容器不允许对外做端口映射——它们只能通过内部Docker网络被前端容器访问，不能直接绑定公网端口。你原来的Compose文件给backend设置了ports: - "3000:8600"，直接触发了ACI的限制，导致部署失败。

第一步：修正Docker配置（本地验证） #

先调整你的Docker Compose和Dockerfile，适配Azure的要求：

修改后的Docker Compose文件 #

version: "3.4"
services:
  frontend:
    build: ./frontend
    # 前端必须暴露80端口（ACI仅允许对外暴露80/443）
    ports:
      - "80:80"
    networks:
      - dev_network
    depends_on:
      - backend
    # 用环境变量让前端动态获取后端地址
    environment:
      - BACKEND_API_URL=http://backend:8600
  backend:
    build: ./backend
    # 后端不需要对外端口映射，仅暴露内部访问端口
    expose:
      - "8600"
    networks:
      - dev_network
    environment:
      - NODE_ENV=production
networks:
  dev_network:
    driver: bridge

调整前端Dockerfile（Angular） #

避免硬编码后端地址，让前端通过环境变量读取API地址：

1. 修改frontend/src/environments/environment.prod.ts：

export const environment = {
  production: true,
  backendApiUrl: window['env']['backendApiUrl'] || 'http://backend:8600'
};

2. 在frontend/index.html的<head>中添加环境变量读取脚本：

<script>
  window['env'] = window['env'] || {};
  window['env']['backendApiUrl'] = "%BACKEND_API_URL%";
</script>

3. 更新Frontend Dockerfile，添加环境变量替换步骤：

# Stage 1: 编译构建Angular代码
FROM node:latest as build
WORKDIR /usr/local/app
COPY ./ /usr/local/app/
RUN npm install && npm run build --prod

# Stage 2: 用Nginx部署应用
FROM nginx:latest
COPY --from=build /usr/local/app/dist/ClientServicePortal /usr/share/nginx/html
# 替换index.html中的环境变量占位符
RUN sed -i 's/%BACKEND_API_URL%/'"$BACKEND_API_URL"'/g' /usr/share/nginx/html/index.html
EXPOSE 80

（可选：如果是SPA应用，建议配置Nginx的nginx.conf解决刷新404问题）

后端Dockerfile优化 #

移除不必要的EXPOSE 3000（你实际使用的是8600端口），保持配置简洁：

FROM node:14-alpine
ENV NODE_ENV=production
WORKDIR /usr/src/app
COPY ["package.json", "package-lock.json*", "./"]
RUN npm install --production --silent && mv node_modules ../
COPY . .
EXPOSE 8600
CMD ["node", "server.js"]

完成修改后，在本地执行docker-compose up验证，确保前端能正常访问后端API。

第二步：推送镜像到Azure容器注册表（ACR） #

1. 先在Azure Portal创建一个ACR实例（选择基本/标准层即可）。
2. 打开本地终端，登录ACR：

az acr login --name <你的ACR名称>

3. 构建并推送前端镜像：

# 构建镜像
docker build -t <你的ACR名称>.azurecr.io/frontend:latest ./frontend
# 推送镜像到ACR
docker push <你的ACR名称>.azurecr.io/frontend:latest

4. 构建并推送后端镜像：

docker build -t <你的ACR名称>.azurecr.io/backend:latest ./backend
docker push <你的ACR名称>.azurecr.io/backend:latest

第三步：配置Azure Web App for Containers #

1. 在Azure Portal创建Web App，选择“Docker Container”作为发布方式，再选择“Multi-container”。
2. 在“Docker Compose”标签页：
   • 镜像源选择“Azure Container Registry”，关联你创建的ACR；
   • 上传修改后的Docker Compose文件（注意把build字段替换为ACR镜像地址，示例：

     frontend:
       image: <你的ACR名称>.azurecr.io/frontend:latest
       # 其他配置不变
     backend:
       image: <你的ACR名称>.azurecr.io/backend:latest
       # 其他配置不变
     

   • 添加环境变量BACKEND_API_URL=http://backend:8600（与Compose配置一致）。
3. 点击“创建”，等待部署完成后访问Web App URL验证功能。

第四步：搭建CI/CD流水线（Azure DevOps） #

针对你DevOps经验较少的情况，推荐用Azure DevOps Pipeline实现自动构建、推送和部署：

1. 准备工作 #

• 将代码推送到Azure Repos或GitHub；
• 在Azure DevOps中创建一个项目。

2. 创建Pipeline #

1. 进入Azure DevOps项目的“Pipelines”页面，点击“New pipeline”；
2. 选择你的代码仓库（如Azure Repos Git）；
3. 选择“Docker Compose”模板；
4. 配置模板参数：
   • 容器注册表类型选“Azure Container Registry”，关联你的ACR；
   • Docker Compose文件路径填./docker-compose.yml；
   • 勾选“Push images to Azure Container Registry”；
5. 添加部署任务：
   • 在Pipeline编辑器中点击“+”，搜索“Azure Web App for Containers”任务；
   • 配置任务：选择Azure订阅、目标Web App，部署类型选“Docker Compose”，关联ACR并填写Compose文件路径；
6. 设置触发条件：在Pipeline的“Triggers”页面，勾选“Enable continuous integration”，选择触发分支（如main）；
7. 保存并运行Pipeline，验证是否自动完成构建、推送镜像和部署流程。

关键注意事项 #

• ACI端口限制：后端容器永远不要设置ports映射，仅用expose暴露内部端口，通过服务名（如backend）访问；
• 环境变量适配：不要硬编码后端地址，用环境变量适配本地、测试、生产等不同环境；
• ACR权限配置：确保Web App有ACR的拉取权限，可在ACR的“Access control (IAM)”中给Web App的服务主体添加“AcrPull”角色。

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