From f3818f6681b1c3a5eb8158b3ca1dd0b1b2b55954 Mon Sep 17 00:00:00 2001
From: Victoria Nadasdi <victoria@efertone.me>
Date: Tue, 16 Apr 2024 18:40:26 +0200
Subject: [PATCH] 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 | 17 +++++++++++++++++
 Dockerfile                    | 16 ++++++++++++++++
 README.md                     | 21 ++++++++++++++++++++-
 3 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 Dockerfile

diff --git a/.github/workflows/prodtag.yml b/.github/workflows/prodtag.yml
index 8a2b4392..e094c215 100644
--- a/.github/workflows/prodtag.yml
+++ b/.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 }}
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 00000000..974bba89
--- /dev/null
+++ b/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
diff --git a/README.md b/README.md
index 8f5c328a..77a06894 100644
--- a/README.md
+++ b/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/).