Add HTTPS support for Dev & Cypress (#335)

.github/workflows/cypress.yml

@@ -14,16 +14,39 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
+      - name: Set environment variables
+        run: |
+          echo PEM_CERT_PATH=$(pwd)/certs/geopilot.pem >> $GITHUB_ENV
+          echo UBUNTU_TRUSTED_CERT_PATH=/usr/local/share/ca-certificates/geopilot.crt >> $GITHUB_ENV
+
+      - name: Setup dotnet
+        uses: actions/setup-dotnet@v4
+        with:
+          dotnet-version: "8.0"
+
+      - name: Create dev-certs
+        run: |
+          mkdir ./certs
+          dotnet dev-certs https --export-path ${{ env.PEM_CERT_PATH }} --no-password --format PEM
+          chmod -R 664 ./certs/*
+
+      - name: Trust dev-certs
+        run: |
+          sudo apt-get install -y ca-certificates
+          sudo cp ${{ env.PEM_CERT_PATH }} ${{ env.UBUNTU_TRUSTED_CERT_PATH }}
+          sudo update-ca-certificates
+
       - name: Start db and api's
         run: docker compose up --wait
 
       - name: Cypress run
         uses: cypress-io/github-action@v6
         with:
           command: npx cypress run --record --parallel --key ${{ secrets.CYPRESS_RECORD_KEY }} --ci-build-id ${{ github.repository }}-${{ github.run_id }}-${{ github.run_attempt}}
-          wait-on: "http://localhost:5173"
+          wait-on: "https://localhost:5173"
           wait-on-timeout: 120
           working-directory: ./src/Geopilot.Frontend
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NODE_EXTRA_CA_CERTS: ${{ env.UBUNTU_TRUSTED_CERT_PATH }}

.gitignore

@@ -404,4 +404,7 @@ FodyWeavers.xsd
 src/Geopilot.Frontend/cypress/screenshot
 src/Geopilot.Frontend/cypress/downloads
 src/Geopilot.Frontend/cypress/videos
-src/Geopilot.Frontend/cypress/screenshots
+src/Geopilot.Frontend/cypress/screenshots
+
+# Local dev-certs output
+certs/

README.md

@@ -14,33 +14,47 @@ Folgende Komponenten müssen auf dem Entwicklungsrechner installiert sein:
 
 Für die Formattierung wird ESLint verwendet. Dazu im Visual Studio unter `Options/Text Editor/Javascript/Linting/General` _Enable ESLint_ auf `true` setzen, resp. im VS Code die _ESLint_-Extension installieren.
 
-Damit die Launch Settings für _docker-compose_ korrekt geladen werden, mit Rechtsklick auf dem Projekt _Manage Docker Compose Launch Settings_ öffnen, warten bis alle Services geladen sind und dann speichern.
+⚠️ Damit die Launch Settings für _docker-compose_ korrekt geladen werden, mit Rechtsklick auf dem Projekt _Manage Docker Compose Launch Settings_ öffnen, warten bis alle Services geladen sind und dann speichern.
 
-### Starten der Applikation 🚀
+### Starten der Applikation (Lokal) 🚀
 
-Vor dem ersten Start oder bei Änderungen in den Packages muss in _Geopilot.Frontend_ manuell `npm install` ausgeführt werden.
+- Vor dem ersten Start oder bei Änderungen in den Packages muss in _Geopilot.Frontend_ manuell `npm install` ausgeführt werden.
 
-Über _Start_ > _Configure Startup Projects_ > _Common Properties_ > _Startup Projects_ müssen _Multiple starup projects_ definiert werden.
-| Project | Action |
-|-----------------|-------------------------|
-| docker-compose | Start without debugging |
-| Geopilot.Api | Start |
-| Geopilot.Api.Test | None |
-| Geopilot.Frontend | Start |
+- Damit die Applikation mit HTTPS funktioniert, muss ein lokales dev-cert erstellt werden. Dieses wird durch das npm Script `predev` vor dem Start automatisch erstellt. Sollte dies nicht funktionieren, kann mit folgendem Befehl ein Zertifikat manuell erstellt und vertraut werden: `dotnet dev-certs https --trust`. HTTPS muss verwendet werden, damit die STAC-Urls korrekt funktionieren und so der STAC-Browser wie in einer produktiven Umgebung verwendet werden kann.
+
+- Über _Start_ > _Configure Startup Projects_ > _Common Properties_ > _Startup Projects_ müssen _Multiple startup projects_ definiert werden.
+
+| Project           | Action                  |
+| ----------------- | ----------------------- |
+| docker-compose    | Start without debugging |
+| Geopilot.Api      | Start                   |
+| Geopilot.Api.Test | None                    |
+| Geopilot.Frontend | Start                   |
+
+### Starten der Applikation (Docker Compose) 🐳
+
+Das Projekt unterstützt das Starten der Applikation mit Docker Compose, um einer produktiven Umgebung möglichst nahe zu kommen. Um HTTPS zu unterstützen, benötigt es ein vertrautes dev-cert sowie ein Export dessen im PEM-Format. Diese werden im [docker-compose.yml](./docker-compose.yml) korrekt geladen. Setup ist nachfolgend beschrieben. Die Applikation ist danach unter [https://localhost:5173](https://localhost:5173) erreichbar.
+
+```bash
+dotnet dev-certs https --trust
+dotnet dev-certs https --export-path ".\certs\geopilot.pem" --no-password --format PEM
+docker-compose up
+```
 
 ### URLs Entwicklungsumgebung 🔗
 
-| URL                    | Project                                    | Reverse Proxy                                                             |
-| ---------------------- | ------------------------------------------ | ------------------------------------------------------------------------- |
-| https://localhost:5173 | Geopilot.Frontend                          | `/api` und `/browser` zu https://localhost:7188                           |
-| https://localhost:7188 | Geopilot.Api                               | `/browser` zu http://localhost:8080 (der `/browser`-Prefix wird entfernt) |
-| http://localhost:8080  | stac-browser (in docker-compose)           | -                                                                         |
-| http://localhost:3001  | PgAdmin (in docker-compose)                | -                                                                         |
-| http://localhost:3080  | interlis-check-service (in docker-compose) | -                                                                         |
-| http://localhost:4011  | Keycloak Server Administration             | -                                                                         |
+| URL                    | Project                                       | Reverse Proxy                                                             |
+| ---------------------- | --------------------------------------------- | ------------------------------------------------------------------------- |
+| https://localhost:5173 | Geopilot.Frontend                             | `/api` und `/browser` zu https://localhost:7188                           |
+| https://localhost:7188 | Geopilot.Api                                  | `/browser` zu http://localhost:8080 (der `/browser`-Prefix wird entfernt) |
+| https://localhost:5173 | Geopilot.Api (in docker-compose mit Frontend) | `/browser` zu http://localhost:8080 (der `/browser`-Prefix wird entfernt) |
+| http://localhost:8080  | stac-browser (in docker-compose)              | -                                                                         |
+| http://localhost:3001  | PgAdmin (in docker-compose)                   | -                                                                         |
+| http://localhost:3080  | interlis-check-service (in docker-compose)    | -                                                                         |
+| http://localhost:4011  | Keycloak Server Administration                | -                                                                         |
 
 Das Auth-Token wird als Cookie im Frontend gespeichert und über den Reverse Proxy (in `vite.config.js`) ans API zur Authentifizierung weitergegeben.
-Der STAC Browser ist auch über https://localhost:5173/browser erreichbar und das Cookie kann somit auch da zur Authentifizierung verwendet werden.
+Der STAC Browser ist über https://localhost:5173/browser erreichbar und das Cookie kann somit auch da zur Authentifizierung verwendet werden.
 
 ### Debugging 🪲
 

docker-compose.yml

@@ -58,9 +58,12 @@ services:
       context: .
     restart: unless-stopped
     ports:
-      - 5173:8080
+      - 5173:8443
     environment:
       ASPNETCORE_ENVIRONMENT: Development
+      ASPNETCORE_HTTPS_PORTS: 8443
+      ASPNETCORE_Kestrel__Certificates__Default__Path: /https/geopilot.pem
+      ASPNETCORE_Kestrel__Certificates__Default__KeyPath: /https/geopilot.key
       ConnectionStrings__Context: Server=db;Port=5432;Database=geopilot;User Id=HAPPYWALK;Password=SOMBERSPORK;
       ReverseProxy__Clusters__stacBrowserCluster__Destinations__stacBrowserDestination__Address: http://stac-browser:8080/
       Auth__Authority: http://localhost:4011/realms/geopilot
@@ -74,6 +77,7 @@ services:
       - ./src/Geopilot.Api/Persistent:/assets
       - ./README.md:/public/info.md
       - ./LICENSE:/public/terms-of-use.md
+      - ./certs:/https:ro
     extra_hosts:
       - "localhost:host-gateway"
     depends_on:

src/Geopilot.Frontend/cypress.config.js

@@ -4,7 +4,7 @@ import vitePreprocessor from "cypress-vite";
 export default defineConfig({
   projectId: "bqtbpp",
   e2e: {
-    baseUrl: "http://localhost:5173",
+    baseUrl: "https://localhost:5173",
     video: false,
     viewportWidth: 1920,
     viewportHeight: 1080,

src/Geopilot.Frontend/vite.config.js

@@ -1,8 +1,29 @@
 import { fileURLToPath, URL } from "node:url";
+import process from "node:process";
 
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import viteTsconfigPaths from "vite-tsconfig-paths";
+import fs from "fs";
+import path from "path";
+
+const baseFolder =
+  process.env.APPDATA !== undefined && process.env.APPDATA !== ""
+    ? `${process.env.APPDATA}/ASP.NET/https`
+    : `${process.env.HOME}/.aspnet/https`;
+
+const certificateArg = process.argv.map(arg => arg.match(/--name=(?<value>.+)/i)).filter(Boolean)[0];
+const certificateName = certificateArg ? certificateArg.groups.value : process.env.npm_package_name;
+
+if (!certificateName) {
+  console.error(
+    "Invalid certificate name. Run this script in the context of an npm/yarn script or pass --name=<<app>> explicitly.",
+  );
+  process.exit(-1);
+}
+
+const certFilePath = path.join(baseFolder, `${certificateName}.pem`);
+const keyFilePath = path.join(baseFolder, `${certificateName}.key`);
 
 // https://vitejs.dev/config/
 // noinspection JSUnusedGlobalSymbols
@@ -29,6 +50,10 @@ export default defineConfig({
       },
     },
     port: 5173,
+    https: {
+      key: fs.existsSync(keyFilePath) ? fs.readFileSync(keyFilePath) : null,
+      cert: fs.existsSync(certFilePath) ? fs.readFileSync(certFilePath) : null,
+    },
   },
   assetsInclude: ["**/*.md"],
 });