Docker - Front-end APP

default.conf

include gzip.conf;

server {
  listen 80 default_server;
  listen [::]:80 default_server;

  root /usr/share/nginx/html;

  server_tokens off;

  add_header X-Frame-Options SAMEORIGIN;
  add_header X-XSS-Protection "1; mode=block";

  index index.html;

  # Static files
  location ~ ^/(static)/ {
    access_log off;
    expires max;
  }

  location ~* ^.+\.(html|htm)$ {
    expires 5m;
  }

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

Dockerfile

FROM node:12-alpine as build-stage
RUN apk add --no-cache curl gnupg libstdc++

WORKDIR /app
COPY package*.json ./
COPY yarn.lock ./
RUN yarn install
COPY . .

ARG MODE=production

RUN yarn run build:$MODE

FROM nginx:1.16-alpine as production-stage

# copy config
COPY docker/nginx/gzip.conf /etc/nginx/gzip.conf
COPY docker/nginx/default.conf /etc/nginx/conf.d/default.conf

# copy from build
COPY --from=build-stage /app/dist /usr/share/nginx/html

# make all files belong to the nginx user
RUN chown nginx:nginx /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

gzip.conf

# Compression

# Enable Gzip compressed.
gzip on;

# Compression level (1-9).
# 5 is a perfect compromise between size and cpu usage, offering about
# 75% reduction for most ascii files (almost identical to level 9).
gzip_comp_level    5;

# Don't compress anything that's already small and unlikely to shrink much
# if at all (the default is 20 bytes, which is bad as that usually leads to
# larger files after gzipping).
gzip_min_length    256;

# Compress data even for clients that are connecting to us via proxies,
# identified by the "Via" header (required for CloudFront).
gzip_proxied       any;

# Tell proxies to cache both the gzipped and regular version of a resource
# whenever the client's Accept-Encoding capabilities header varies;
# Avoids the issue where a non-gzip capable client (which is extremely rare
# today) would display gibberish if their proxy gave them the gzipped version.
gzip_vary          on;

gzip_disable "msie6";

# Compress all output labeled with one of the following MIME-types.
gzip_types
  application/atom+xml
  application/javascript
  application/json
  application/ld+json
  application/manifest+json
  application/rss+xml
  application/vnd.geo+json
  application/vnd.ms-fontobject
  application/x-font-ttf
  application/x-web-app-manifest+json
  application/xhtml+xml
  application/xml
  font/opentype
  image/bmp
  image/svg+xml
  image/x-icon
  text/cache-manifest
  text/css
  text/plain
  text/vcard
  text/vnd.rim.location.xloc
  text/vtt
  text/x-component
  text/x-cross-domain-policy;
# text/html is always compressed by HttpGzipModule

# This should be turned on if you are going to have pre-compressed copies (.gz) of
# static files available. If not it should be left off as it will cause extra I/O
# for the check. It is best if you enable this in a location{} block for
# a specific directory, or on an individual server{} level.
# gzip_static on;