Reduce docker image size by serving compiled output via nginx instead…

… of webpack-dev-server

Dockerfile

@@ -1,12 +1,17 @@
-FROM node:lts-bullseye
+# first stage - build angular project #
+FROM node:lts-bullseye-slim AS build
+# create virtual directory in image
+WORKDIR /dist/src/app
+RUN npm cache clean --force
+# copy files from local machine to virtual directory in image
+COPY . .
+# install dependencies, legacy option for dragula dependency that requires older angular version
+RUN npm install --legacy-peer-deps
+RUN npm run build --omit=dev
 
-# App directory
-WORKDIR /usr/src/app
-
-# Install dependencies
-COPY . /usr/src/app
-RUN npm install -g @angular/[email protected]
-RUN npm install --legacy-peer-deps --quiet # legacy option due to ng-dragula needing an outdated angular version for now
 
+# second stage - serve compiled output via nginx server #
+FROM nginx:latest AS ngi
+COPY --from=build /dist/src/app/dist/tease /usr/share/nginx/html
+COPY /nginx.conf  /etc/nginx/conf.d/default.conf
 EXPOSE 80
-CMD ["npm", "start"]

angular.json

@@ -43,13 +43,13 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumWarning": "200kb",
+                  "maximumError": "400kb"
                 }
               ],
               "optimization": {

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;
+  }
+}