feat: own dockerfile (#6)

- Build own images for different platforms
- Generalize Dockerfile
- Update yarn, refactor a bit
- update actions

.github/workflows/default.yml

@@ -8,14 +8,14 @@ jobs:
     env:
       TAG: html-to-pdf
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: '16'
           cache: 'yarn'
       - run: yarn install
       - run: yarn lint --max-warnings 0
       - name: Build container
-        run: docker build --file deploy/test/Dockerfile --tag ${TAG} .
+        run: docker build --file deploy/Dockerfile --target test --tag ${TAG} .
       - name: Run test in a container
         run: docker run --rm ${TAG} yarn test

.github/workflows/release.yml

@@ -11,14 +11,17 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: '16'
           cache: 'yarn'
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v2
       - name: Define docker image metadata
-        uses: docker/metadata-action@v3
-        id: metadata
+        uses: docker/metadata-action@v4
+        id: meta
         with:
           images: muehlemannpopp/html-to-pdf
           tags: |
@@ -27,14 +30,15 @@ jobs:
             type=semver,pattern={{major}}
             type=sha,prefix=git-,format=short
       - name: Login to DockerHub
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
-      - name: Build and push an image to DockerHub
-        uses: int128/kaniko-action@v1
+      - name: Build and push
+        uses: docker/bake-action@v2
         with:
           push: true
-          file: deploy/prod/Dockerfile
-          tags: ${{ steps.metadata.outputs.tags }}
-          labels: ${{ steps.metadata.outputs.labels }}
+          files: |
+            ./docker-bake.hcl
+            ${{ steps.meta.outputs.bake-file }}
+          targets: build

.yarnrc.yml

@@ -1,16 +1,14 @@
 packageExtensions:
-  "html-to-pdf@*":
-    dependencies:
-      # those below are needed for "@sentry/node" but it did not work specifying it for sentry
-      # so it's configured for main package for now
-      tslib: "*"
-      cookie: "*"
   debug@*:
     dependencies:
       supports-color: "*"
+  html-to-pdf@*:
+    dependencies:
+      cookie: "*"
+      tslib: "*"
   ws@*:
     dependencies:
       bufferutil: "*"
       utf-8-validate: "*"
 
-yarnPath: .yarn/releases/yarn-3.0.0-rc.2.cjs
+yarnPath: .yarn/releases/yarn-3.2.4.cjs

Taskfile.yml

@@ -10,7 +10,7 @@ vars:
     [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh";
     [ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh";
     nvm use;
-  COMPOSE: docker-compose --file deploy/docker-compose.yml --file deploy/docker-compose.private.yml
+  COMPOSE: docker-compose --file deploy/docker-compose.yml
 
 tasks:
   default: task --list
@@ -82,3 +82,8 @@ tasks:
     desc: Build app locally
     cmds:
       - bash -c '{{ .NODE_ENV }} yarn build'
+
+  build:
+    desc: Build app image
+    cmds:
+      - '{{ .COMPOSE }} build {{ .CLI_ARGS }}'

deploy/Dockerfile

@@ -0,0 +1,77 @@
+FROM node:16-alpine as builder
+
+WORKDIR /app
+COPY . /app
+
+RUN yarn install && yarn build
+
+
+FROM alpine:3.16 as prod
+
+ARG RELEASE_ID
+ARG CI_BUILD_DATE
+
+ENV \
+  CHROME_BIN=/usr/bin/chromium-browser \
+  CHROME_PATH=/usr/lib/chromium/ \
+  PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 \
+  PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser \
+  RELEASE_ID=$RELEASE_ID \
+  CI_BUILD_DATE=$CI_BUILD_DATE
+
+# Installs latest Chromium package.
+RUN \
+  apk upgrade --no-cache --available \
+  && apk add --no-cache \
+    chromium \
+    ttf-freefont \
+    font-noto-emoji \
+  && apk add --no-cache \
+    --repository=https://dl-cdn.alpinelinux.org/alpine/edge/testing \
+    font-wqy-zenhei \
+  && apk add --no-cache \
+    tini make gcc g++ python3 git nodejs npm yarn \
+  && mkdir -p /app/build \
+  && adduser -D chrome \
+  && chown -R chrome:chrome /app
+
+WORKDIR /app
+
+COPY deploy/local.conf /etc/fonts/local.conf
+COPY --from=builder /app/build/main.prod.js .
+COPY favicon.ico .
+COPY deploy/docker-entrypoint.sh /docker-entrypoint.sh
+COPY README.md .
+
+# Run Chrome as non-privileged
+USER chrome
+
+ENTRYPOINT ["tini", "--"]
+
+EXPOSE 4000
+CMD ["/docker-entrypoint.sh"]
+
+
+FROM prod as dev
+
+# change user to bypass write limitations
+USER root
+
+COPY . /app
+
+RUN chown -R chrome ./
+
+# change user back to one used by zenika image
+USER chrome
+
+RUN yarn install
+
+
+FROM prod as test
+
+# change user to bypass write limitations
+USER root
+
+COPY . /app
+
+RUN yarn

deploy/docker-compose.test.yml

@@ -5,7 +5,8 @@ services:
     image: muehlemann-popp/html-to-pdf-test
     build:
       context: ../
-      dockerfile: deploy/test/Dockerfile
+      dockerfile: deploy/Dockerfile
+      target: test
     container_name: html-to-pdf-test
     command: yarn test
     environment:

deploy/docker-compose.yml

@@ -5,7 +5,8 @@ services:
     image: muehlemann-popp/html-to-pdf
     build:
       context: ../
-      dockerfile: deploy/dev/Dockerfile
+      dockerfile: deploy/Dockerfile
+      target: dev
     volumes:
       - '../src/:/app/src/'
     container_name: html-to-pdf

deploy/local.conf

@@ -0,0 +1,31 @@
+<?xml version="1.0"?>
+<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
+<fontconfig>
+
+ <alias>
+   <family>sans-serif</family>
+   <prefer>
+     <family>Main sans-serif font name goes here</family>
+     <family>Noto Color Emoji</family>
+     <family>Noto Emoji</family>
+   </prefer>
+ </alias>
+
+ <alias>
+   <family>serif</family>
+   <prefer>
+     <family>Main serif font name goes here</family>
+     <family>Noto Color Emoji</family>
+     <family>Noto Emoji</family>
+   </prefer>
+ </alias>
+
+ <alias>
+  <family>monospace</family>
+  <prefer>
+    <family>Main monospace font name goes here</family>
+    <family>Noto Color Emoji</family>
+    <family>Noto Emoji</family>
+   </prefer>
+ </alias>
+</fontconfig>

docker-bake.hcl

@@ -0,0 +1,12 @@
+target "docker-metadata-action" {}
+
+target "build" {
+  inherits = ["docker-metadata-action"]
+  context = "./"
+  dockerfile = "deploy/prod/Dockerfile"
+  platforms = [
+    "linux/386",
+    "linux/amd64",
+    "linux/arm64/v8",
+  ]
+}

src/controller/capture.ts

@@ -41,7 +41,7 @@ export const logException = async <T> (when: string, process: () => Promise<T>):
   } catch (e) {
     const err = e as Error
     // eslint-disable-next-line no-console
-    console.error(`[${timestamp()}] Exception at ${when}: "${e.message}"`)
+    console.error(`[${timestamp()}] Exception at ${when}: "${err.message}"`)
     // catching errors to sentry is done at higher level, exception stack logging as well
     throw err
   }

webpack.config.ts

@@ -1,4 +1,4 @@
-import { Configuration } from 'webpack'
+import { Configuration, optimize } from 'webpack'
 import { resolve } from 'path'
 import TerserPlugin from 'terser-webpack-plugin'
 
@@ -36,9 +36,10 @@ const config: Configuration = {
   optimization: {
     minimizer: [new TerserPlugin({ extractComments: false })],
   },
-  // we better bundle everything into 1 script file to ease docker image creation, thus commented out below
-  externals: [
-    isProdBuild ? {} : /^[a-z\-0-9]+$/, // Ignore node_modules folder
+  plugins: [
+    new optimize.LimitChunkCountPlugin({
+      maxChunks: 1,
+    }),
   ],
 }