Unable to compose muliticontainer docker app (Angular-Node-MongoDB) with single npm command

Question

I am trying to compose a multi-container Angular-Node-MongoDB docker app with single npm command. Here is the demo app.

The Node-MongoDB containers are deployed but the Angular app is not deployed properly to the container as docker command is unable to copy the Angular build artifacts (./App/UI/dist) to the Angular container's nginx deploy folder ./usr/share/nginx/html (when I attach shell to Angular container and do ~ls, I see ./usr/share/nginx/html directory empty. Ideally it should have contents from App/UI/dist.)

The folder structure:

/App/package.json:

  "scripts": {
    "start": "npm run build:watch:UI:dev && npm run compose:docker:dev",
    "build:watch:UI:dev": "cd UI && npm run ng build --watch",
    "compose:docker:dev": "docker-compose -f app.docker-compose.dev.yml up -d --build"
  }

If I run ~/Documents/App$ npm start, all three containers are deployed but the UI project does not work are there are on contents inside ./usr/share/nginx/html. However, Node and MongoDB containers work fine.

If I separately run the docker compose command for the Angular project from UI folder then the Angular container app works fine. (I can see all the build artifacts inside ./usr/share/nginx/html)

~/Documents/POC/App/UI$ ng build --watch
~/Documents/POC/App/UI$ docker-compose -f docker-compose.dev.yml up -d --build

What issue I am guessing here is that the contents of App/UI/dist are copied to the intermediate container but then these contents are not copied to the finally deployed Angular container. Is it because I am running the npm command from the different folder and hence causing some permissions issue? Or it is the issue with the volumes/contex in the docker compose file, as the command is now running from the App root folder instead of App/UI folder?

App/UI/.docker/dev.dockerfile:

FROM nginx:alpine
LABEL author="Saurabh Palatkar"
COPY nginx.conf /etc/nginx/nginx.conf    
COPY /dist /usr/share/nginx/html
RUN ls /usr/share/nginx/html
EXPOSE 80 443
CMD [ "nginx", "-g", "daemon off;" ]

App/UI/docker-compose.dev.yml:

version: '3.4'    
services:    
      angular-nginx-docker:
        container_name: ng-docker-dev
        image: ng-docker-dev
        build: 
          context: .
          dockerfile: .docker/dev.dockerfile
        environment:
          NODE_ENV: development
        volumes: 
          - "./dist:/usr/share/nginx/html"
        ports:
          - 4200:80
        ## set your startup file here
        command: [nginx-debug, '-g', 'daemon off;']

App/app.docker-compose.dev.yml:

version: "3.4"    
services:
  angular-nginx-docker:
    container_name: ng-docker-dev
    image: ng-docker-dev
    build: 
      context: UI
      dockerfile: .docker/dev.dockerfile
    environment:
      NODE_ENV: development
    volumes: 
      - "./dist:/usr/share/nginx/html"
    ports:
      - 4200:80
    ## set your startup file here
    command: [nginx-debug, '-g', 'daemon off;']
  api:
    container_name: node-api
    image: node-api
    build:
      context: API
      dockerfile: .docker/dev.dockerfile
    environment:
      PORT: 5000
      MONGO_URL: mongodb://database:27017
      NODE_ENV: dev
    ports:
      - "5000:5000"
    links:
      - database
    depends_on:
      - database

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

ibenjelloun ibenjelloun · Accepted Answer · 2018-10-18T07:54:55

Your docker files are under UI/docker and you try to copy dist as if it was in in UI/docker/dist.

Try putting the dev.dockerfile directly in UI directory, and changing the copy line to COPY dist /usr/share/nginx/html.

Unable to compose muliticontainer docker app (Angular-Node-MongoDB) with single npm command

2 Answers