ci: configure webapp docker (#111)

.github/workflows/ci-webapp.yml

@@ -64,4 +64,4 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: build
-          path: dist/webapp/
+          path: webapp/dist/webapp/

webapp/.dockerignore

@@ -0,0 +1,49 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events*.json
+speed-measure-plugin*.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.angular/cache
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+src/environments/*.tmp
+*.iml

webapp/Dockerfile

@@ -0,0 +1,23 @@
+FROM node:20.11.0-alpine as build
+
+WORKDIR /build
+COPY *.json *.js ./
+RUN npm clean-install
+COPY src/ ./src
+RUN npm run build
+
+FROM ghcr.io/nginxinc/nginx-unprivileged:1.25.3-alpine-slim
+
+ADD --chmod=755 https://github.com/kyubisation/angular-server-side-configuration/releases/download/v17.0.2/ngssc_64bit /usr/sbin/ngssc
+
+# Add ngssc script
+ADD --chmod=755 docker/99-ngssc.sh /docker-entrypoint.d/
+
+# Add nginx configuration
+ADD docker/nginx-angular.conf /etc/nginx/conf.d/default.conf
+
+# copy built application from build stage
+COPY --from=build --chown=nginx:nginx --chmod=755 /build/dist/webapp /usr/share/nginx/html
+
+# Validate the nginx configuration
+RUN nginx -t

webapp/angular.json

@@ -15,11 +15,11 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular-devkit/build-angular:browser",
           "options": {
             "outputPath": "dist/webapp",
             "index": "src/index.html",
-            "browser": "src/main.ts",
+            "main": "src/main.ts",
             "polyfills": [
               "zone.js"
             ],
@@ -37,6 +37,7 @@
           },
           "configurations": {
             "production": {
+              "outputPath": "dist/webapp",
               "budgets": [
                 {
                   "type": "initial",
@@ -122,10 +123,10 @@
         "ngsscbuild": {
           "builder": "angular-server-side-configuration:ngsscbuild",
           "options": {
-            "additionalEnvironmentVariables": [
-              "n"
-            ],
-            "buildTarget": "webapp:build"
+            "additionalEnvironmentVariables": [],
+            "buildTarget": "webapp:build",
+            "ngsscEnvironmentFile": "src/environments/environment.ts",
+            "filePattern": "**/index.html"
           },
           "configurations": {
             "production": {

webapp/docker-compose.yml

@@ -0,0 +1,5 @@
+services:
+  angular:
+    build: .
+    ports:
+      - "4200:4200"

webapp/docker/99-ngssc.sh

@@ -0,0 +1,3 @@
+#!/bin/sh
+
+ngssc insert /usr/share/nginx/html/

webapp/docker/nginx-angular.conf

@@ -0,0 +1,23 @@
+server {
+    listen       4200;
+    server_name  localhost;
+
+    root /usr/share/nginx/html;
+
+    error_page 500 502 503 504  /50x.html;
+
+    location ~* \.(?:.css|.js)$ {
+        expires 1y;
+    }
+
+    location = / {
+      index /index.html;
+    }
+
+    location ~ /(?!nginx_nr_agent_stub_status)([\w-]+) {
+        expires -1;
+        add_header Pragma "no-cache";
+        add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
+        try_files $uri $uri/ /$1/index.html =404;
+    }
+}

webapp/package.json

@@ -2,12 +2,11 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build",
+    "build": "ng run webapp:ngsscbuild",
     "watch": "ng build --watch --configuration development",
     "test": "ng test -c ci",
     "lint": "ng lint",
-    "format": "prettier --write .",
-    "build:ngssc": "ng run webapp:ngsscbuild:production"
+    "format": "prettier --write ."
   },
   "name": "webapp",
   "version": "0.1.0",