#20 dockerize the angular application with nginx

Author: WingZer0o

.dockerignore

@@ -0,0 +1,8 @@
+.git
+.editorconfig
+/.vscode/*
+/node_modules
+/e2e
+/docs
+.gitignore
+*.zip

Dockerfile

@@ -0,0 +1,22 @@
+# From the source https://dev.to/oneofthedevs/docker-angular-nginx-37e4
+
+FROM node:20-alpine AS build
+
+WORKDIR /dist/src/app
+
+RUN npm cache clean --force
+COPY . .
+RUN npm install
+RUN npm run build
+
+
+### STAGE 2:RUN ###
+# Defining nginx image to be used
+FROM nginx:latest AS ngi
+# Copying compiled code and nginx config to different folder
+# NOTE: This path may change according to your project's output folder 
+COPY --from=build /dist/src/app/dist/angular-spa /usr/share/nginx/html
+COPY /nginx.conf  /etc/nginx/conf.d/default.conf
+# Exposing a port, here it means that inside the container 
+# the app will be using Port 80 while running
+EXPOSE 80

nginx.conf

@@ -0,0 +1,20 @@
+server {
+  listen 80;
+  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;
+  }
+}