Add deployment and improve Dockerfiles and CICD

frontend/Dockerfile

@@ -1,7 +1,26 @@
-FROM node:lts-alpine3.18
+# build stage
+FROM node:lts-alpine AS build
+
+WORKDIR /app
+COPY frontend/package*.json ./
+RUN npm ci
+COPY frontend/ ./
+RUN npm run build
+
+# development stage
+FROM node:lts-alpine AS dev
 
 WORKDIR /app
 COPY package*.json ./
 RUN npm install
-COPY ./ ./
+COPY . ./
 
+# production stage
+# https://hub.docker.com/r/bitnami/nginx -> always run as non-root user
+FROM bitnami/nginx:1.25 AS prod
+
+# copy build files from build container
+COPY --from=build /app/dist /app
+COPY ./frontend/nginx.conf /opt/bitnami/nginx/conf/nginx.conf
+
+EXPOSE 8000

frontend/Dockerfile_prod

@@ -1,14 +0,0 @@
-# build stage
-FROM node:lts-alpine3.18 as build-stage
-WORKDIR /app
-COPY package*.json ./
-RUN npm ci
-COPY . .
-RUN npm run build
-
-# production stage
-FROM nginx:stable as production-stage
-COPY --from=build-stage /app/dist /usr/share/nginx/html
-COPY nginx.conf /etc/nginx/conf.d/default.conf
-EXPOSE 8000
-CMD ["nginx", "-g", "daemon off;"]

frontend/nginx.conf

@@ -1,47 +1,44 @@
-server {
-    listen       8000;
-    listen  [::]:8000;
-    server_name  localhost;
+worker_processes  4;
 
-    #access_log  /var/log/nginx/host.access.log  main;
+error_log  /opt/bitnami/nginx/logs/error.log;
+pid        /opt/bitnami/nginx/tmp/nginx.pid;
 
-    location / {
-        root   /usr/share/nginx/html;
-        index  index.html index.htm;
-
-        #necessary to display vue subpage
-        try_files $uri $uri/ /index.html;
-    }
-
-    #error_page  404              /404.html;
-
-    # redirect server error pages to the static page /50x.html
-    #
-    error_page   500 502 503 504  /50x.html;
-    location = /50x.html {
-        root   /usr/share/nginx/html;
-    }
-
-    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
-    #
-    #location ~ \.php$ {
-    #    proxy_pass   http://127.0.0.1;
-    #}
-
-    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
-    #
-    #location ~ \.php$ {
-    #    root           html;
-    #    fastcgi_pass   127.0.0.1:9000;
-    #    fastcgi_index  index.php;
-    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
-    #    include        fastcgi_params;
-    #}
-
-    # deny access to .htaccess files, if Apache's document root
-    # concurs with nginx's one
-    #
-    #location ~ /\.ht {
-    #    deny  all;
-    #}
+events {
+    worker_connections  1024;
+}
+
+http {
+    include       mime.types;
+    default_type  application/octet-stream;
+
+    access_log  /opt/bitnami/nginx/logs/proxy_access.log;
+    error_log   /opt/bitnami/nginx/logs/proxy_error.log;
+
+    sendfile        on;
+    keepalive_timeout  180s;
+    send_timeout 180s;
+
+    client_body_temp_path /opt/bitnami/nginx/tmp/client_temp;
+    proxy_temp_path       /opt/bitnami/nginx/tmp/proxy_temp_path;
+    fastcgi_temp_path     /opt/bitnami/nginx/tmp/fastcgi_temp;
+    uwsgi_temp_path       /opt/bitnami/nginx/tmp/uwsgi_temp;
+    scgi_temp_path        /opt/bitnami/nginx/tmp/scgi_temp;
+
+    server {
+        listen       8000;
+        listen  [::]:8000;
+        server_name  localhost;
+
+        location / {
+            root   /opt/bitnami/nginx/html;
+            index  index.html index.htm;
+
+            #necessary to display vue subpage
+            try_files $uri $uri/ /index.html;
+        }
+        error_page   500 502 503 504  /50x.html;
+        location = /50x.html {
+            root   /opt/bitnami/nginx/html;
+        }
+    }
 }