Add basic instruction to run the container

- As the build now happens inside the container, I thought it was a good idea to extract it from the image instead of rebuilding it on the host
- QEMU and Buildx are just stuff for multiplatform builds (even if it's just a bunch of static files, I don't think docker is able to detect that the base image (nginx) exists in multiplatform, I might be wrong
- Add actions to extract metadata in order to tag the image
- Add actions to logins to Docker Hub and GitHub Registry
- Build and push to both registry, with our previously created tags
- Build only, locally, the "artifacts" stage, where we can extract the zip files. As it's reusing the previous stages, it won't be build twice.
- Extract the artifacts so the previous release workflow can keep on going (as it should!)

.dockerignore

@@ -0,0 +1,38 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Custom
+.env.dev
+phanpy-dist.zip
+phanpy-dist.tar.gz
+
+dist/
+node_modules/
+.github/
+readme-assets/
+README.md
+.gitignore
+.prettierrc
+Dockerfile

.github/workflows/prodtag.yml

@@ -10,19 +10,84 @@ jobs:
     runs-on: ubuntu-latest
     permissions:
       contents: write
+      packages: write
     steps:
       - uses: actions/checkout@v4
         with:
           ref: production
       # - run: git tag "`date +%Y.%m.%d`.`git rev-parse --short HEAD`" $(git rev-parse HEAD)
       # - run: git push --tags
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-      - run: npm ci && npm run build
-      - run: cd dist && zip -r ../phanpy-dist.zip . && tar -czf ../phanpy-dist.tar.gz . && cd ..
+
       - id: tag_name
         run: echo ::set-output name=tag_name::$(date +%Y.%m.%d).$(git rev-parse --short HEAD)
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      # @cheeaun: If you want to check out other ways to tag your Docker image:
+      # https://github.com/docker/metadata-action/blob/master/README.md
+      # I kept "tag_name" as the tag name for the Docker image for now
+      - name: Extract metadata for the Docker image
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: |
+            ${{ github.repository }}
+            ghcr.io/${{ github.repository }}
+          tags: |
+            type=raw,value=${{ steps.tag_name.outputs.tag_name }}
+
+      # @cheeaun: I think deploying to Docker Hub and GitHub is a good idea, to always have a fallback
+      # - name: Login to Docker Hub
+      #   uses: docker/login-action@v3
+      #   with:
+      #     username: ${{ secrets.DOCKERHUB_USERNAME }}
+      #     password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      # Source: https://github.com/docker/login-action?tab=readme-ov-file#github-container-registry
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          # @cheeaun: I think this is a good idea to support multiple architectures
+          # Basically here: any Windows, Mac or Linux computers, and 32-bits Raspberry Pi
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          push: true
+          load: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      - name: Extract artifacts from the Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          # @cheeaun: And this is where we extract the artifacts from the Docker image
+          # The reason I'm extracting it this way, is that you don't depend on anything else than docker,
+          # and you don't always know if your CI runner will have the tools to zip or tar a directory.
+          push: false
+          load: true
+          tags: ${{ github.repository }}:artifacts-latest
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      # Copy the artifacts files from the Docker container to the host
+      - run: |
+          docker create --name phanpy-artifacts ${{ github.repository }}:artifacts-latest
+          docker cp -q phanpy-artifacts:/root/phanpy/latest.zip ./dist/phanpy-dist.zip
+          docker cp -q phanpy-artifacts:/root/phanpy/latest.tar.gz ./dist/phanpy-dist.tar.gz
+          docker rm phanpy-artifacts
+
       - uses: softprops/action-gh-release@v1
         with:
           tag_name: ${{ steps.tag_name.outputs.tag_name }}

Dockerfile

@@ -1,23 +1,36 @@
-FROM busybox:1 AS build
-ARG PHANPY_RELEASE_VERSION
+#############################################
+# Install everything to build the application
+#############################################
+FROM node:20-alpine AS build
 
-WORKDIR /root/phanpy_release
+WORKDIR /root/phanpy
 
-RUN wget "https://github.com/cheeaun/phanpy/releases/download/${PHANPY_RELEASE_VERSION}/phanpy-dist.tar.gz" && \
-    tar -xvf "phanpy-dist.tar.gz" -C /root/phanpy_release && \
-    rm "phanpy-dist.tar.gz"
+COPY package.json package-lock.json ./
+RUN npm ci
 
-# ---
-FROM busybox:1
+COPY . .
+RUN npm run build
 
-# Create a non-root user to own the files and run our server
-RUN adduser -D static
-USER static
-WORKDIR /home/static
+##################################################
+# Special stage to easily extract the app as a zip
+##################################################
+FROM alpine:3 AS artifacts
 
-# Copy the static website
-# Use the .dockerignore file to control what ends up inside the image!
-COPY --chown=static:static --from=build /root/phanpy_release /home/static
+WORKDIR /root/phanpy
 
-# Run BusyBox httpd
-CMD ["httpd", "-f", "-v", "-p", "8080"]
+RUN apk add zip
+COPY --from=build /root/phanpy/dist /root/phanpy/dist
+
+# Outputs:
+# - /root/phanpy/latest.zip
+# - /root/phanpy/latest.tar.gz
+RUN zip -r /root/phanpy/latest.zip dist && \
+    tar -czf /root/phanpy/latest.tar.gz dist
+
+#####################################################
+# Copy the static files to a mininal web server image
+#####################################################
+FROM nginx:1-alpine-slim
+
+ENV NGINX_ENTRYPOINT_QUIET_LOGS=1
+COPY --chown=static:static --from=build /root/phanpy/dist /usr/share/nginx/html

README.md

@@ -1,10 +1,10 @@
 <div align="center">
   <img src="design/logo-4.svg" width="128" height="128" alt="">
 
-Phanpy
-===
+# Phanpy
 
 **Minimalistic opinionated Mastodon web client.**
+
 </div>
 
 ![Fancy screenshot](readme-assets/fancy-screenshot.jpg)
@@ -55,7 +55,7 @@ Everything is designed and engineered following my taste and vision. This is a p
 
 - On the timeline, the user name is displayed as `[NAME] @[username]`.
 - For the `@[username]`, always exclude the instance domain name.
-- If the `[NAME]` *looks the same* as the `@[username]`, then the `@[username]` is excluded as well.
+- If the `[NAME]` _looks the same_ as the `@[username]`, then the `@[username]` is excluded as well.
 
 ### Boosts Carousel
 
@@ -123,17 +123,29 @@ 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):
+Some examples:
 
-### Easy way
+### Using pre-built releases
 
 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.
 
+### Using a Docker image
+
+In your terminal, run:
+
+```
+$ docker run -d -p 8080:80 cheeaun/phanpy
+```
+
+Go to http://localhost:8080 and 🎉
+
+Make sure to deploy the web app using a reverse proxy that make the connection secure (using HTTPS).
+
 ### Custom-build way
 
 Requires [Node.js](https://nodejs.org/).
 
-Download or `git clone` this repository. Use `production` branch for *stable* releases, `main` for *latest*. Build it by running `npm run build` (after `npm install`). Serve the `dist` folder.
+Download or `git clone` this repository. Use `production` branch for _stable_ releases, `main` for _latest_. Build it by running `npm run build` (after `npm install`). Serve the `dist` folder.
 
 Customization can be done by passing environment variables to the build command. Examples:
 
@@ -214,7 +226,7 @@ Costs involved in running and developing this web app:
 
 ## Mascot
 
-[Phanpy](https://bulbapedia.bulbagarden.net/wiki/Phanpy_(Pok%C3%A9mon)) is a Ground-type Pokémon.
+[Phanpy](<https://bulbapedia.bulbagarden.net/wiki/Phanpy_(Pok%C3%A9mon)>) is a Ground-type Pokémon.
 
 ## Maintainers + contributors