Issue
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
Solution
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.
Answered By - Charles Xu
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.