Multi-stage Docker build in gitlab-ci

We use gitlab ci across our build and deploy pipeline. When serving an static site or single page application, we use multiple build stages in gitlab. We define a builder container that builds the project from source code first, and then the artifacts are copied to the second stage where the continer is built for deployment.

Docker


FROM node:10 as builder

ADD package.json /usr/src/app/
WORKDIR /usr/src/app
RUN yarn install 
COPY . .
RUN yarn build

FROM nginx:stable
COPY --from=builder /usr/src/app/build/ /var/www/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
ENTRYPOINT ["nginx","-g","daemon off;"]

nginx


# auto detects a good number of processes to run
worker_processes auto;

#Provides the configuration file context in which the directives that affect connection processing are specified.
events {
    # Sets the maximum number of simultaneous connections that can be opened by a worker process.
    worker_connections 8000;
    # Tells the worker to accept multiple connections at a time
    multi_accept on;
}


http {
    # what times to include
    include       /etc/nginx/mime.types;
    # what is the default one
    default_type  application/octet-stream;

    # Sets the path, format, and configuration for a buffered log write
    log_format compression '$remote_addr - $remote_user [$time_local] '
        '"$request" $status $upstream_addr '
        '"$http_referer" "$http_user_agent"';

    server {
        # listen on port 80
        listen 80;
 
        # save logs here
        access_log /var/log/nginx/access.log compression;
        gzip on;
gzip_buffers 16 8k;
gzip_comp_level 1;
gzip_http_version 1.0;
gzip_min_length 10;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/x-icon application/vnd.ms-fontobject font/opentype application/x-font-ttf;
gzip_vary on;
        
             # where the root here
        root /var/www/html;
        # what file to server as index
        index index.html index.htm;

   

        # Media: images, icons, video, audio, HTC
        location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
          expires 1M;
          access_log off;
          add_header Cache-Control "public";
        }

        # Javascript and CSS files
        location ~* \.(?:css|js)$ {
            try_files $uri =404;
            expires 1w;
            access_log off;
            add_header Cache-Control "public";
        }

        # Any route containing a file extension (e.g. /devicesfile.js)
        location / {
   try_files $uri $uri/ /index.html;}
    }
}

yaml


build_image:
  image: docker:git
  services:
  - docker:dind
  
  before_script:  
  - apk update && apk add curl && apk add python
  
  
  script:
    - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
    - docker build -t $CI_REGISTRY_IMAGE:latest .
    - docker push $CI_REGISTRY_IMAGE:latest
  only:
    - master