How to deploy multiple MEAN app containers to Azure using Docker-Compose

Question

I am pretty new to docker. I am trying to deploy a MEAN app (Angular frontend, Node.js/Express backend, and MongoDB) to Azure using Docker-Compose.

Locally the multi container environment works as expected. The front-end connects to the back-end web api and db as expected. When I deploy the image to Azure the front-end cannot connect to the back-end web api's.

The error in the browser console is:

OPTIONS http://localhost:3000/api/dosa net::ERR_CONNECTION_REFUSED

Angular Docker file

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 File

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 calls

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));
  }

I run the following via 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 log (condensed)

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.

I can call the back-end web api's fine locally using docker-compose up --build but it doesn't work when deployed to Azure

Any more question? Or if it's helpful you can accept it as the answer. — Charles Xu

Charles Xu Charles Xu · Accepted Answer · 2019-01-14T01:48:55

When you deploy multi-containers on Azure, there is something different from that you deploy the multi-containers on local Docker server.

You can use the Docker compose setting links to bind the web application and the backend server or other services. But on Azure, it most dependants on the environment. There is an example that Creating a multi-container app in Web App for Containers on Azure. The sample compose file like this:

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:

You can follow the steps in it and do some modifications in your compose file according to your requirement. Hope this will help you.

How to deploy multiple MEAN app containers to Azure using Docker-Compose

1 Answers