add support for ghcr frontend

.github/workflows/deploy-frontend.yml

@@ -0,0 +1,50 @@
+name: Create and publish a Docker image
+
+# Configures this workflow to run every time a change is pushed to the branch called `release`.
+on:
+  push:
+    branches: ['main']
+
+# Defines two custom environment variables for the workflow. These are used for the Container registry domain, and a name for the Docker image that this workflow builds.
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ccims/gropius-frontend
+
+# There is a single job in this workflow. It's configured to run on the latest available version of Ubuntu.
+jobs:
+  build-and-push-image:
+    runs-on: ubuntu-latest
+    # Sets the permissions granted to the `GITHUB_TOKEN` for the actions in this job.
+    permissions:
+      contents: read
+      packages: write
+      # 
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          submodules: true
+      # Uses the `docker/login-action` action to log in to the Container registry registry using the account and password that will publish the packages. Once published, the packages are scoped to the account defined here.
+      - name: Log in to the Container registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      # This step uses [docker/metadata-action](https://github.com/docker/metadata-action#about) to extract tags and labels that will be applied to the specified image. The `id` "meta" allows the output of this step to be referenced in a subsequent step. The `images` value provides the base name for the tags and labels.
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+      # This step uses the `docker/build-push-action` action to build the image, based on your repository's `Dockerfile`. If the build succeeds, it pushes the image to GitHub Packages.
+      # It uses the `context` parameter to define the build's context as the set of files located in the specified path. For more information, see "[Usage](https://github.com/docker/build-push-action#usage)" in the README of the `docker/build-push-action` repository.
+      # It uses the `tags` and `labels` parameters to tag and label the image with the output from the "meta" step.
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./production-container/Dockerfile-vue
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

docker-compose-testing.yaml

@@ -40,6 +40,12 @@ services:
       - SPRING_NEO4J_URI=bolt://neo4j:7687
       - GROPIUS_API_PUBLIC_JWT_SECRET=TodoLongEnoughAndSecureJwtSecretWithAtLeast256Bit
       - LOGGING_LEVEL_IO_GITHUB_GRAPHGLUE=WARN
+    healthcheck:
+      test: wget http://localhost:8080/graphiql || exit 1
+      interval: 1s
+      timeout: 10s
+      retries: 20
+      start_period: 3s
   api-internal:
     restart: unless-stopped
     build:
@@ -57,6 +63,12 @@ services:
       - GROPIUS_API_INTERNAL_API_TOKEN=TodoInternalApiToken
       - LOGGING_LEVEL_IO_GITHUB_GRAPHGLUE=WARN
       - GROPIUS_CORE_CREATE_INDICES_ON_STARTUP=false
+    healthcheck:
+      test: wget http://localhost:8080/graphiql || exit 1
+      interval: 1s
+      timeout: 10s
+      retries: 20
+      start_period: 3s
   postgres:
     image: postgres:14
     restart: unless-stopped
@@ -75,8 +87,10 @@ services:
       dockerfile: ../../production-container/Dockerfile-nestjs
     command: /bin/sh -c "npx typeorm migration:run -d dist/migrationDataSource.config.js && sleep 10 && node dist/main.js"
     depends_on:
-      - api-internal
-      - postgres
+      api-internal:
+        condition: service_healthy
+      postgres:
+        condition: service_started
     ports:
       - 3000:3000
     environment:
@@ -102,14 +116,16 @@ services:
     restart: unless-stopped
     build:
       context: .
-      dockerfile: production-container/Dockerfile-vue
-      args:
-        - VITE_LOGIN_OAUTH_CLIENT_ID=8ee1287d-71ff-4c85-becd-cba829f390a0
+      dockerfile: ./production-container/Dockerfile-vue
     ports:
       - "4200:80"
     depends_on:
-      - api-public
-      - login-service
+      api-public:
+        condition: service_healthy
+      login-service:
+        condition: service_started
+    environment:
+      - LOGIN_OAUTH_CLIENT_ID=8ee1287d-71ff-4c85-becd-cba829f390a0
   mongo:
     image: mongo
     restart: unless-stopped

production-container/Dockerfile-vue

@@ -6,12 +6,10 @@ WORKDIR /app
 
 # Copy the frontend source code into the container
 COPY gropius-frontend /app
-
-ARG VITE_LOGIN_OAUTH_CLIENT_ID
-ENV VITE_LOGIN_OAUTH_CLIENT_ID=$VITE_LOGIN_OAUTH_CLIENT_ID
+RUN rm .env
 
 # Install dependencies and build the frontend
-RUN npm install
+RUN npm ci
 RUN cd packages/graph-editor && npm run build
 RUN npm run build
 
@@ -23,4 +21,4 @@ COPY --from=builder /app/dist /usr/share/nginx/html
 
 # Copy a custom Nginx configuration that handles Vue SPA routing
 RUN rm /etc/nginx/conf.d/default.conf
-COPY production-container/nginx.conf /etc/nginx/conf.d
+COPY production-container/nginx.conf /etc/nginx/templates/default.conf.template

production-container/nginx.conf

@@ -37,4 +37,9 @@ server {
         # Remove /api/login from the forwarded path
         rewrite ^/api/login/(.*) /$1 break;
     }
+
+    location /api/login-client-id {
+        default_type text/plain;
+        return 200 ${LOGIN_OAUTH_CLIENT_ID};
+    }
 }