Can't copy dist folder to nginx docker container

Question

I know my question might be too simple but as i'm not a Docker expert, i'm kinda stuck with it

the follow is my docker configs

1- docker-compose.yml

version: "3.4"

services:
  angular:
    build:
      context: .
      dockerfile: docker/staging/angular.dockerfile
    ports:
      - '4200:4200'
  nginx:
    build:
      context: .
      dockerfile: docker/staging/nginx.dockerfile
    ports:
      - '80:80'
    depends_on:
      - angular

2- angular.dockerfile

FROM node as node
MAINTAINER fustany-admin

RUN mkdir /usr/src/app
WORKDIR /usr/src/app

COPY package*.json /usr/src/app/
RUN npm install --legacy-peer-deps
RUN npm install -g @angular/cli

COPY ./ /usr/src/app

EXPOSE 4200

RUN ng build --configuration=production
# COPYING SHOULD BE HERER ?
CMD ["ng", "serve", "--host", "0.0.0.0", "--port", "4200"]

3- nginx.dockerfile

# nginx
FROM nginx
MAINTAINER fustany-admin

COPY nginx/staging-default.conf /etc/nginx/conf.d/default.conf
# Tried thoes and nothing worked
# COPY dist /usr/share/nginx/html
# COPY --from=node ./usr/src/app/dist/fustany /usr/share/nginx/html/

EXPOSE 80

4- nginx.config

server {
  listen 80;

  server_name    46.101.58.213;

  if ($http_x_forwarded_proto = 'http') {
    return 301 https://$server_name$request_uri;
  }

  sendfile on;

  default_type application/octet-stream;

  gzip on;
  gzip_http_version 1.1;
  gzip_disable      "MSIE [1-6]\.";
  gzip_min_length   256;
  gzip_vary         on;
  gzip_proxied      expired no-cache no-store private auth;
  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  gzip_comp_level   9;

  root /usr/share/nginx/html;

  location / {
    try_files $uri $uri/ /index.html =404;
  }
}

Everything works fine with me, build is successful and containers run fine with nginx welcoming message (because dist isn't copied)

Once i manually copy the dist folder from angular container to nginx container under /usr/share/nginx/html everything works fine

So I'm just missing how to properly copy the dist as it always giving me file/folder doesn't exist, and i'm sure i'm conflicting between the build context files and the actual files

Answer 1

The two Dockerfiles need to be the same file; you can literally concatenate one to the other.

# Dockerfile
FROM node AS build
WORKDIR /usr/src/app
...
RUN ng build --configuration=production

FROM nginx
COPY nginx/staging-default.conf /etc/nginx/conf.d/default.conf
COPY --from=build ./usr/src/app/dist/fustany /usr/share/nginx/html/
# nothing else

With these in the same file, this sets up a multi-stage build. The COPY --from=... finds the FROM ... AS ... earlier in the same file, and you can copy files between stages. If these are separate Dockerfiles, then when the second file says COPY --from=node, it tries to copy a file from the node:latest image, and it just isn't there. (I've renamed the AS to something different from the original image to disambiguate this.)

Correspondingly, you don't need a separate dev-server container in your docker-compose.yml file. You can reduce this to:

version: "3.8"
services:
  nginx:
    build: .    # implicitly uses ./Dockerfile
    ports:
      - '80:80'