Nginx Question posted in
The official documentation can be found here.

Can't copy dist folder to nginx docker container

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

Tags:

3

Answers


  1. 0

    Try the following in the nginx.dockerfile

    FROM nginx

COPY nginx/staging-default.conf /etc/nginx/conf.d/default.conf
COPY --from=node /usr/src/app/dist/fustany /usr/share/nginx/html/

EXPOSE 80
    Login or Signup to reply.
  2. 0

    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'
    Login or Signup to reply.
  3. 0

    I was getting the same error but the error was not code related. Updating docker to latest version solved the issue for me.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search