feat: add Docker image build on prod release and publish to ghcr.io

This patch add a simple Docker image that builds the application with
node and puts the end result into a small nginx image.

Updtaed the prod release GitHub action to build and publish the image on
GitHub's OCI registry (ghcr.io) and connect it to the repository.

Why?

Docker is fun, more and more people deploy images on their homelab,
Docker Swarm, or Kubernetes clusters. I do the same. First I build a
builder for myself[^1], then I had a "waaaaait a minute...." moment and
realised I can upstream it and put it here.

Another options for the GitHub action:
I can move the whole build to a separate workflow and trigger on new
tag and instead of building the application, just download the artifact
from the release page on GitHub (like my version[^2] does on manual trigger).

[^1]: https://github.com/yitsushi/phanpy-docker/pkgs/container/phanpy-docker
[^2]: https://github.com/yitsushi/phanpy-docker/blob/main/.github/workflows/build-and-publish.yaml

.github/workflows/prodtag.yml

@@ -30,3 +30,20 @@ jobs:
           files: |
             phanpy-dist.zip
             phanpy-dist.tar.gz
+      - name: Extract metadata for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            ${{ steps.tag_name.outputs.tag_name }}
+            latest
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          build-args: |
+            VERSION=${{ steps.tag_name.outputs.tag_name }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

Dockerfile

@@ -0,0 +1,16 @@
+from node:21-alpine as builder
+
+workdir /code
+
+copy . /code
+
+run npm ci && npm run build
+
+from nginx:1.25.4-alpine
+
+label maintainer="Victoria Nadasdi <efertone@pm.me>"
+label org.opencontainers.image.source=https://github.com/cheeaun/phanpy
+label org.opencontainers.image.description="Docker Image for Phanpy"
+label org.opencontainers.image.licenses=MIT
+
+copy --from=builder /code/dist /usr/share/nginx/html

README.md

@@ -123,12 +123,31 @@ Some of these may change in the future. The front-end world is ever-changing.
 
 This is a **pure static web app**. You can host it anywhere you want.
 
-Two ways (choose one):
+Three ways (choose one):
 
 ### Easy way
 
 Go to [Releases](https://github.com/cheeaun/phanpy/releases) and download the latest `phanpy-dist.zip` or `phanpy-dist.tar.gz`. It's pre-built so don't need to run any install/build commands. Extract it. Serve the folder of extracted files.
 
+### The Docker way
+
+```bash
+docker run -p 8080:80 ghcr.io/cheeaun/phanpy:latest
+```
+
+With Docker Compose:
+
+```yaml
+---
+version: "3.9"
+services:
+  phanpy:
+    image: ghcr.io/cheeaun/phanpy:latest
+    container_name: phanpy
+    ports:
+      - 8080:80
+```
+
 ### Custom-build way
 
 Requires [Node.js](https://nodejs.org/).