Dockerfile - Angular ( v10 to v12 ) )

FROM node:alpine as builder

WORKDIR /app
COPY package.json package-lock.json ./
ENV CI=1
RUN npm ci

COPY . .
RUN npm run build -- --prod --output-path=/dist

# Deploy our Angular app to NGINX
FROM nginx:alpine

## Replace the default nginx index page with our Angular app
RUN rm -rf /usr/share/nginx/html/*
COPY --from=builder /dist /usr/share/nginx/html

COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
COPY ./nginx/gzip.conf /etc/nginx/gzip.conf

ENTRYPOINT ["nginx", "-g", "daemon off;"]

1. Make a folder named 'nginx' root of your directory

• inside this folder make a file named 'gzip.conf' & paste the code bellow

gzip            on;
gzip_vary       on;
gzip_http_version  1.0;
gzip_comp_level 5;
gzip_types
                application/atom+xml
                application/javascript
                application/json
                application/rss+xml
                application/vnd.ms-fontobject
                application/x-font-ttf
                application/x-web-app-manifest+json
                application/xhtml+xml
                application/xml
                font/opentype
                image/svg+xml
                image/x-icon
                text/css
                text/plain
                text/x-component;
gzip_proxied    no-cache no-store private expired auth;
gzip_min_length 256;
gunzip          on;

• add another file named 'nginx.conf' & paste the code bellow

user nginx;

worker_processes    auto;

events { worker_connections 1024; }

http {
    include             /etc/nginx/mime.types;
    include             /etc/nginx/gzip.conf;
    limit_req_zone      $binary_remote_addr zone=one:10m rate=5r/s;
    server_tokens       off;

    sendfile            on;
    keepalive_timeout   29; # Adjust to the lowest possible value that makes sense for your use case.
    client_body_timeout 10; client_header_timeout 10; send_timeout 10;

    server {
        listen                      80;
        server_name                 $hostname;
        root                        /usr/share/nginx/html;
        
        add_header X-Frame-Options DENY;
        add_header X-Content-Type-Options nosniff;
        add_header X-Frame-Options "SAMEORIGIN";

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

2. Make a file named 'Dockerfile' at your root directory & paste the code bellow

FROM node:alpine as builder

WORKDIR /app
COPY package.json package-lock.json ./
ENV CI=1
RUN npm ci

COPY . .
RUN npm run build -- --prod --output-path=/dist

# Deploy our Angular app to NGINX
FROM nginx:alpine

## Replace the default nginx index page with our Angular app
RUN rm -rf /usr/share/nginx/html/*
COPY --from=builder /dist /usr/share/nginx/html

COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
COPY ./nginx/gzip.conf /etc/nginx/gzip.conf

ENTRYPOINT ["nginx", "-g", "daemon off;"]

Last but not the list make a file named '.dockerignore' also in your root directory & paste the code bellow

# editor configs
Properties
.vscode
.editorconfig
.prettierrc
.stylelintrc.json

# code binaries
bin
obj
node_modules
npm-debug.log
log

# docs
*.md
LICENSE

# docker
.docker
.dockerignore
Dockerfile
*/docker-compose*

# repositories
.git
.hg
.svn

Folder Structure might be like this

+
   +dist
   +e2e
   +nginx
      +gzip.conf
      +nginx.conf
   +node_modules
   +src
  ...
  ...
  ...
  +Dockerfile
  +.dockerignore
....

Must have to 'package-lock.json' in your project.

Docker Command :

1. docker login
2. docker build -t {GiveYourAppName} .
3. docker run -d -it -p 80:80/tcp --name {SetAnyNameForDockerContainer} {SetYourAppName}
   More about to run angular app in docker

get docker image as .tar => docker save -o D:\Practice\.....\....\....\...\app\docker.tar imageName

generate package-lock.json => npm install --package-lock

Angular v12 Update

# STEP 1 : build-stage
FROM node:14.16.0-alpine3.13 as build-stage

WORKDIR /app
COPY package*.json .
RUN npm install
COPY . .
RUN npm run build

# STEP 2 : Production
FROM nginx:1.12-alpine
# RUN addgroup app && adduser -S -G app app
# USER app
COPY --from=build-stage /app/dist/APP_NAME /usr/share/nginx/html
EXPOSE 80
ENTRYPOINT [ "nginx","-g","daemon off;" ]