如何使用 Docker-Compose 将多个 MEAN 应用程序容器部署到 Azure

Question

我对 docker 很陌生。我正在尝试使用 Docker-Compose 将 MEAN 应用程序（Angular 前端、Node.js/Express 后端和 MongoDB）部署到 Azure。

在本地，多容器环境按预期工作。前端按预期连接到后端 Web api 和 db。当我将映像部署到 Azure 时，前端无法连接到后端 Web api。

浏览器控制台的错误是：

选项http://localhost:3000/api/dosa net::ERR_CONNECTION_REFUSED

Angular Docker 文件

FROM node:8.12-alpine

RUN mkdir -p /usr/src/app/front-end
WORKDIR /usr/src/app/front-end

ENV PATH /usr/src/app/node_modules/.bin:$PATH

COPY package*.json /usr/src/app/front-end/

RUN npm install
RUN npm install -g @angular/cli

COPY . /usr/src/app/front-end

CMD ng serve --host 0.0.0.0 --port 4200 --disable-host-check

Node.js Docker 文件

FROM node:8.12-alpine

RUN mkdir -p /usr/src/app/back-end
WORKDIR /usr/src/app/back-end

ENV PATH /usr/src/app/node_modules/.bin:$PATH

COPY package*.json /usr/src/app/back-end/

RUN npm install

COPY . /usr/src/app/back-end

CMD npm start

docker-compose.yml

version: '2.1'

services:
  client: # name of the service
    image: {{myDockerRepo}}/frontend:dev
    build: frontend
    expose:
        - 4200
    environment:
      NODE_ENV: production
    ports:
      - 4200:4200
    links:
      - server

  server:
      image: {{myDockerRepo}}/backend:dev
      build: ./backend
      expose:
        - 3000
      environment:
        NODE_ENV: production
      ports:
        - 3000:3000
      links:
      - database

  database:
    image: mongo
    ports:
      - "27017:27017"

api.service.ts 调用

const dosaApiUrl = "http://localhost:3000/api/dosa";
getDoSAs(): Observable<any> {
    return this.http.get(dosaApiUrl, { headers: this.httpOptionsWAuth() }).pipe(
      map(this.extractData),
      catchError(this.handleError));
  }

我通过 azure cli 运行以下命令

az webapp create --resource-group myResourceGroup --plan myPlan --name MyWebApp --multicontainer-config-type compose --multicontainer-config-file docker-compose.yml

Azure docker-compose 日志（精简）

2019-01-13 14:35:43.461 INFO  - Starting container for site
2019-01-13 14:35:43.461 INFO  - docker run -d -p 12574:4200 --name MyWebApp_client_5 -e WEBSITE_SITE_NAME=MyWebApp -e WEBSITE_AUTH_ENABLED=False -e WEBSITE_ROLE_INSTANCE_ID=0 -e WEBSITE_INSTANCE_ID=206aa27402c709921f82d12a9fc0030a987d4d1f7523a0723759d8b10b751860 myDockerRepo/frontend:dev  

2019-01-13 14:35:45.812 INFO  - Starting container for site
2019-01-13 14:35:45.812 INFO  - docker run -d -p 0:3000 --name MyWebApp_server_5 -e WEBSITE_SITE_NAME=MyWebApp -e WEBSITE_AUTH_ENABLED=False -e WEBSITE_ROLE_INSTANCE_ID=0 -e WEBSITE_INSTANCE_ID=206aa27402c709921f82d12a9fc0030a987d4d1f7523a0723759d8b10b751860 myDockerRepo/backend:dev  

2019-01-13 14:35:47.026 INFO  - Starting container for site
2019-01-13 14:35:47.026 INFO  - docker run -d -p 0:27017 --name MyWebApp_database_5 -e WEBSITE_SITE_NAME=MyWebApp -e WEBSITE_AUTH_ENABLED=False -e WEBSITE_ROLE_INSTANCE_ID=0 -e WEBSITE_INSTANCE_ID=206aa27402c709921f82d12a9fc0030a987d4d1f7523a0723759d8b10b751860 mongo  

2019-01-13 14:35:47.026 INFO  - Logging is not enabled for this container.
Please use https://aka.ms/linux-diagnostics to enable logging to see container logs here.
2019-01-13 14:38:45.686 INFO  - Started multi-container app
2019-01-13 14:38:45.760 INFO  - Container MyWebApp_client_5 for site MyWebApp initialized successfully.

我可以使用 docker-compose up --build 在本地调用后端 web api，但是部署到 Azure 时它不起作用

Answer 1

在 Azure 上部署多容器时，与在本地 Docker 服务器上部署多容器有所不同。

您可以使用 Docker compose 设置links 来绑定 Web 应用程序和后端服务器或其他服务。但在 Azure 上，它最依赖于环境。有一个例子是Creating a multi-container app in Web App for Containers on Azure。示例撰写文件如下：

version: '3.3'

services:
   db:
     image: mysql:5.7
     volumes:
       - db_data:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: somewordpress
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress

   wordpress:
     depends_on:
       - db
     image: wordpress:latest
     ports:
       - "8000:80"
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: wordpress
       WORDPRESS_DB_PASSWORD: wordpress
volumes:
    db_data: 

您可以按照其中的步骤，根据您的要求对您的撰写文件进行一些修改。希望这会对你有所帮助。