ci: multistage container build

We've been hosting the dapp as a static website, but the developers have
maintained it as a single-page application (SPA). Let's update the
containerfile to handle hosting the app so we can deploy via container
image.

.github/workflows/container.yml

@@ -0,0 +1,49 @@
+---
+name: Build container image
+on:
+  workflow_call:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+    tags:
+      - '**'
+jobs:
+  build-and-push-penumbra:
+    runs-on: buildjet-16vcpu-ubuntu-2004
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Log in to the Docker Hub container registry (for pulls)
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Log in to the GitHub container registry (for pushes)
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: ghcr.io/penumbra-zone/dapp
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          platforms: linux/amd64
+          file: Dockerfile
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

Dockerfile

@@ -1,20 +1,17 @@
-FROM node:16
-
-ENV PORT 9012
+FROM node:16 AS builder
 
 RUN mkdir -p /usr/src/app
 WORKDIR /usr/src/app
-
 COPY package*.json /usr/src/app/
 RUN npm config set @buf:registry https://buf.build/gen/npm/v1/
 RUN npm install
 
 COPY . /usr/src/app
 RUN npm run build
 
-# Install a static webserver, to emulate Firebase static website hosting.
-RUN npm install http-server -g
-WORKDIR /usr/src/app/build
-EXPOSE 9012
-# CMD [ "npm", "start" ]
-CMD [ "http-server" ]
+EXPOSE 8080
+
+# Not using a  custom "prod" script from package.json,
+# due to routing problems.
+# CMD [ "npm", "run", "start:prod" ]
+CMD [ "npm", "start" ]

justfile

@@ -1,2 +1,3 @@
-build:
-    ./build-static-site
+container:
+    docker build -t penumbra_dapp .
+    docker run -p 9012:9012 -it penumbra_dapp

package.json

@@ -22,8 +22,10 @@
 		"web-vitals": "^2.1.0"
 	},
 	"scripts": {
-		"build": "webpack --config webpack.production.js",
+		"build": "webpack --config webpack.development.js",
+		"build:prod": "webpack --config webpack.production.js",
 		"start": "webpack-dev-server --progress --config webpack.development.js",
+		"start:prod": "webpack-dev-server --progress --config webpack.production.js",
 		"test": "jest",
 		"test:watch": "jest --watch",
 		"test:coverage": "jest --coverage"

webpack.common.js

@@ -12,6 +12,16 @@ module.exports = {
       patterns: [{ from: 'src/icons' }],
     }),
   ],
+  devServer: {
+    client: {
+      logging: 'info',
+      overlay: false,
+    },
+    historyApiFallback: true,
+    compress: true,
+    static: './build',
+    port: 9012,
+  },
   module: {
     rules: [
       {
@@ -48,4 +58,4 @@ module.exports = {
   experiments: {
     asyncWebAssembly: true,
   },
-};
+};

webpack.production.js

@@ -3,4 +3,5 @@ const common = require('./webpack.common.js');
 
 module.exports = merge(common, {
   mode: 'production',
-});
+  stats: 'errors-only',
+});