Add github action to create and push image on release (#4)

* Add Dockerfile for building and serving web UI with NGINX
* Add github action to create and push image on release

Author: douglaswinter

.dockerignore

@@ -0,0 +1,6 @@
+.dockerignore
+coverage
+node_modules
+dist
+README.md
+.git

.github/workflows/publish_containers.yml

@@ -0,0 +1,54 @@
+name: Publish Docker Image
+
+on:
+  release:
+    types: [published]
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_REPOSITORY: ghcr.io/DiamondLightSource/visr-ui
+
+jobs:
+  docker-build:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      packages: write
+      attestations: write
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.IMAGE_REPOSITORY }}
+          tags: |
+            type=semver,pattern={{version}}
+
+      - name: Build and push Docker image
+        id: push
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+
+      - name: Generate artifact attestation
+        uses: actions/attest-build-provenance@v1
+        with:
+          subject-name: ${{ env.IMAGE_REPOSITORY }}
+          subject-digest: ${{ steps.push.outputs.digest }}
+          push-to-registry: true

Dockerfile

@@ -0,0 +1,55 @@
+FROM node:22-alpine AS base
+
+# Use a consistent working directory across all stages
+WORKDIR /app
+
+# 1) Install dependencies
+FROM base AS deps
+
+# If your application uses environment variables for compile-time configuration, you can use arguments
+# to configure them when building the image.
+# ARG FOO=BAR
+# ENV REACT_APP_FOO=${FOO}
+
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* ./
+
+# Uncomment the next line if you're not using Classic Yarn
+#COPY ./.yarn ./.yarn
+
+
+# Install dependencies using the detected lockfile
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# 2) Run the build
+FROM base AS builder
+
+# Copy installed dependencies
+COPY --from=deps /app/node_modules ./node_modules
+
+# Copy all source files
+COPY . .
+
+# Build the app using the detected package manager
+RUN \
+  if [ -f yarn.lock ]; then yarn run build; \
+  elif [ -f package-lock.json ]; then npm run build; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# 3) Create minimal image to serve the app
+FROM nginxinc/nginx-unprivileged:1.25-alpine as runner
+
+# Copy built files to nginx web root
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Copy your custom nginx config
+COPY nginx.conf /etc/nginx/nginx.conf
+
+EXPOSE 8080
+CMD ["nginx", "-g", "daemon off;"]

nginx.conf

@@ -0,0 +1,28 @@
+worker_processes  3;
+pid /tmp/nginx.pid; # Changed from /var/run/nginx.pid
+error_log  /var/log/nginx/error.log;
+events {
+  worker_connections  10240;
+}
+
+http {
+  include mime.types;
+  client_body_temp_path /tmp/client_temp;
+  proxy_temp_path       /tmp/proxy_temp_path;
+  fastcgi_temp_path     /tmp/fastcgi_temp;
+  uwsgi_temp_path       /tmp/uwsgi_temp;
+  scgi_temp_path        /tmp/scgi_temp;
+  server {
+    listen 8080;
+    # Redirects traffic to /index.html, our main entrypoint. If you have a multi-page application, add more locations
+    location / {
+      root   /usr/share/nginx/html;
+      index  index.html index.htm;
+      try_files $uri $uri/ /index.html;
+    }
+    error_page 500 502 503 504 /50x.html;
+    location = /50x.html {
+      root  /usr/share/nginx/html;
+    }
+  }
+}