Build Docker multi-platform images: linux/amd64,linux/arm{64,v8} (#93)

- Docker: Switch to arm64v8/node:x-alpine base image - Docker/node: Upgrade to v20.14.0 - GHA: Set platforms on docker jobs - yarn: Set supportedArchitectures to `arm64`, `x64` and os to linux on .yarnrc.yml - yarn: Update to version 4.2.2 on package.json#packageManager
danroux · Jun 20, 2024 · 9b1d1df · 9b1d1df
1 parent dbef33d
commit 9b1d1df
Show file tree

Hide file tree

Showing 8 changed files with 721 additions and 864 deletions.
diff --git a/.changelog/93.txt b/.changelog/93.txt
@@ -0,0 +1,19 @@
+```release-note:enhancement
+Docker: Build Docker images for multi-platforms: linux/amd64,linux/arm{64,v8}
+```
+
+```release-note:note
+yarn: Set specific resolutions on package.json for rollup/wasm-node && typescript@4.9.5
+
+- https://github.com/rollup/rollup/issues/5194 Failed to run on arm platforms #5194
+```
+
+```release-note:note
+yarn: Set supportedArchitectures to `arm64`, `x64` and os to linux on .yarnrc.yml
+
+- https://nodejs.org/docs/latest-v20.x/api/process.html#processarch
+```
+
+```release-note:dependency
+yarn: Update to version 4.2.2 on package.json#packageManager
+```
diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
@@ -52,6 +52,8 @@ jobs:
           file: Dockerfile
           cache-from: type=gha
           cache-to: type=gha,mode=max
+          # platforms: linux/amd64,linux/arm64,linux/arm/v7
+          platforms: linux/amd64
           push: true
           tags: |
             ${{ vars.GHCR_SK8L_UI_IMAGE_NAME }}:dev-${{ inputs.image_tag }}
@@ -82,6 +84,7 @@ jobs:
           file: Dockerfile
           cache-from: type=gha
           cache-to: type=gha,mode=max
+          platforms: linux/amd64
           push: true
           tags: |
             ${{ vars.GHCR_SK8L_UI_IMAGE_NAME }}:dev
@@ -112,6 +115,7 @@ jobs:
           file: production.dockerfile
           cache-from: type=gha
           cache-to: type=gha,mode=max
+          platforms: linux/amd64, linux/arm64, linux/arm/v8
           push: true
           tags: |
             ${{ vars.GHCR_SK8L_UI_IMAGE_NAME }}:pre
@@ -142,6 +146,7 @@ jobs:
           file: production.dockerfile
           cache-from: type=gha
           cache-to: type=gha,mode=max
+          platforms: linux/amd64, linux/arm64, linux/arm/v8
           push: true
           tags: |
             ${{ vars.GHCR_SK8L_UI_IMAGE_NAME }}:pre-${{ inputs.image_tag }}
@@ -169,6 +174,7 @@ jobs:
         with:
           context: .
           file: production.dockerfile
+          platforms: linux/amd64, linux/arm64, linux/arm/v8
           push: true
           tags: |
             ${{ vars.DOCKERHUB_SK8L_UI_IMAGE_NAME }}:latest
@@ -202,6 +208,7 @@ jobs:
           file: Dockerfile.test
           cache-from: type=gha
           cache-to: type=gha,mode=max
+          platforms: linux/amd64
           build-args: |
             UI_TEST_IMAGE_TAG=dev-${{ inputs.image_tag }}
           push: true

diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -1 +1,7 @@
-nodeLinker: node-modules
+nodeLinker: "node-modules"
+supportedArchitectures:
+  cpu:
+    - arm64
+    - x64
+  os:
+    - linux
diff --git a/Dockerfile b/Dockerfile
@@ -11,6 +11,7 @@
 # https://hub.docker.com/_/node/tags?page=1&name=bookworm-slim <- look for vulnerabilities
 # https://github.com/primer/octicons/blob/main/package.json
 FROM node:22.2.0-bookworm-slim AS deps
+# FROM arm32v7/node:22.2.0-bookworm-slim AS deps
 
 RUN groupadd --system --gid 101 nginx \
     && useradd --system --gid nginx --create-home --home /home/nginx --comment "nginx user" --shell /bin/bash --uid 101 nginx \
@@ -32,6 +33,8 @@ COPY package*.json yarn.lock .yarnrc.yml .
 # $(pwd)/bin
 # corepack enable --install-directory ~/bin \
 
+RUN node -p "process.arch" \
+    && echo $TARGETPLATFORM && echo $TARGETOS && echo $TARGETARCH
 RUN mkdir -p $(pwd)/node_modules/.cache  \
     && corepack enable \
     && yarn config set --home enableTelemetry 0 \
@@ -41,24 +44,29 @@ RUN mkdir -p $(pwd)/node_modules/.cache  \
 # # RUN yarn install --production
 
 FROM alpine:3.20 AS release
+
 LABEL org.opencontainers.image.source=https://github.com/danroux/sk8l-ui
 LABEL org.opencontainers.image.description="sk8l-ui dev image"
 LABEL org.opencontainers.image.licenses=MIT
 
+ARG TARGETPLATFORM TARGETOS TARGETARCH
 ENV npm_config_cache=/usr/app/node_modules/.cache
-ENV V 20.5.1
-ENV FILE node-v$V-linux-x64-musl.tar.xz
+# https://unofficial-builds.nodejs.org/download/release/v21.7.3/
+ENV V=20.14.0
+# ENV FILE node-v$V-linux-x64-musl.tar.xz
 WORKDIR /usr/app
-RUN apk add --no-cache libstdc++ \
-  && apk add --no-cache --virtual .deps curl \
-  && curl -fsSLO --compressed \
-  "https://unofficial-builds.nodejs.org/download/release/v$V/$FILE" \
-  && tar -xJf $FILE -C /usr/local --strip-components=1 \
-  # ATTENTION!! --- maybe i want to remove this after all or add npm as a dep or sth. like that
-  # && rm -f $FILE /usr/local/bin/npm /usr/local/bin/npx \
-  # && rm -rf /usr/local/lib/node_modules \
-  && apk del .deps \
-  && rm $FILE
+
+RUN if [ "$TARGETPLATFORM" = "linux/amd64" ]; then FILE=x64-musl; elif [ "$TARGETPLATFORM" = "linux/arm/v8" ]; then FILE=armv6l; elif [ "$TARGETPLATFORM" = "linux/arm64" ]; then FILE=armv6l; else FILE=x64-musl; fi \
+    && apk add --no-cache libstdc++ \
+    && apk add --no-cache --virtual .deps curl \
+    && curl -fsSLO --compressed \
+    "https://unofficial-builds.nodejs.org/download/release/v$V/node-v$V-linux-$FILE.tar.xz" \
+    && tar -xJf node-v$V-linux-$FILE.tar.xz -C /usr/local --strip-components=1 \
+    # ATTENTION!! --- maybe i want to remove this after all or add npm as a dep or sth. like that
+    # && rm -f $FILE /usr/local/bin/npm /usr/local/bin/npx \
+    # && rm -rf /usr/local/lib/node_modules \
+    && apk del .deps \
+    && rm node-v$V-linux-$FILE.tar.xz
 # RUN npm install -g npm@10.4.0
 
 # not actually needed locally, but to keep initContainer command working
@@ -84,23 +92,11 @@ RUN chown -R 101:101 $(pwd)/.yarn
 COPY --chown=101:101 . .
 
 EXPOSE 8001
-ENV HOST 0.0.0.0
-ENV PORT 8001
+ENV HOST=0.0.0.0
+ENV PORT=8001
 USER 101
 
 CMD [ "npx", "yarn", "dev" ]
 # CMD [ "npx", "serve", "-s", "dist", "--ssl-key", "/etc/sk8l-certs/server-key.pem", "--ssl-cert", "/etc/sk8l-certs/server-cert.pem" ]
 
 # https://cli.vuejs.org/guide/deployment.html#docker-nginx
-
-# =========
-
-# WORKDIR /usr/app
-# RUN apt-get update \
-#     && apt-get install -y git
-# RUN git clone --depth=1 https://github.com/primer/octicons.git
-# RUN npm install dependencies --save-dev
-# RUN npm run build
-
-# # docker cp sass:/usr/app/octicons/lib/build/data.json data.json
-# CMD ["/bin/sh"]
diff --git a/package.json b/package.json
@@ -18,7 +18,9 @@
     "google-protobuf": "^3.21.2",
     "grpc-web": "^1.5.0",
     "luxon": "^3.4.3",
+    "rollup": "^4.18.0",
     "simple-statistics": "^7.8.3",
+    "typescript": "npm:4.9.5",
     "uplot": "^1.6.25",
     "vue": "^3.4.27",
     "vue-router": "^4.3.3"
@@ -77,12 +79,16 @@
       }
     ]
   },
+  "resolutions": {
+    "rollup": "npm:@rollup/wasm-node@*",
+    "typescript@4.5.2": "npm:typescript@4.9.5"
+  },
   "browserslist": [
     "last 2 versions",
     "not ie 11"
   ],
   "jest": {
     "preset": "@vue/cli-plugin-unit-jest"
   },
-  "packageManager": "yarn@4.0.1"
+  "packageManager": "yarn@4.2.2"
 }
diff --git a/production.dockerfile b/production.dockerfile
@@ -1,27 +1,20 @@
 # https://hub.docker.com/_/node/tags?page=1&name=bookworm-slim <- look for vulnerabilities
 # https://github.com/primer/octicons/blob/main/package.json
 
-FROM alpine:3.20 as build-stage
+FROM --platform=${TARGETPLATFORM} arm64v8/node:20.14.0-alpine3.20 AS build-stage
+
+ARG TARGETPLATFORM TARGETOS TARGETARCH
 ENV npm_config_cache=/usr/app/node_modules/.cache
-ENV V 20.5.1
-ENV FILE node-v$V-linux-x64-musl.tar.xz
 
 WORKDIR /usr/app
-RUN apk add --no-cache libstdc++ \
-    && apk add --no-cache --virtual .deps curl \
-    && curl -fsSLO --compressed \
-    "https://unofficial-builds.nodejs.org/download/release/v$V/$FILE" \
-    && tar -xJf $FILE -C /usr/local --strip-components=1 \
-    # ATTENTION!! --- maybe i want to remove this after all or add npm as a dep or sth. like that
-    # && rm -f $FILE /usr/local/bin/npm /usr/local/bin/npx \
-    # && rm -rf /usr/local/lib/node_modules \
-    && apk del .deps
 
 COPY package*.json yarn.lock .yarnrc.yml .
 
+RUN node -p "process.arch" \
+    && echo $TARGETPLATFORM && echo $TARGETOS && echo $TARGETARCH
 RUN corepack enable \
     && yarn config set --home enableTelemetry 0 \
-    && yarn install
+    && yarn install --immutable --check-cache
 # USER 1000:3000
 # Error: EACCES: permission denied, mkdir '/usr/app/node_modules/.cache'
 # RUN mkdir -p /usr/app/node_modules/.cache \
@@ -40,17 +33,17 @@ RUN yarn build
 # CMD ["npx", "yarn", "run", "serveprod"]
 # RUN yarn add serve
 
-FROM nginx:1.25.4-alpine3.18-slim as production-stage
+FROM nginx:1.25.4-alpine3.18-slim AS production-stage
 LABEL org.opencontainers.image.source=https://github.com/danroux/sk8l-ui
 LABEL org.opencontainers.image.description="sk8l-ui image"
 LABEL org.opencontainers.image.licenses=MIT
 
 WORKDIR /app
 
-ENV APP_PORT 8001
+ENV APP_PORT=8001
 EXPOSE $APP_PORT
-ENV PORT $APP_PORT
-ENV HOST 0.0.0.0
+ENV PORT=$APP_PORT
+ENV HOST=0.0.0.0
 
 COPY --from=build-stage /usr/app/dist /app_tmp
 # COPY nginx.conf /etc/nginx/nginx.conf
@@ -68,15 +61,3 @@ USER 101
 # https://cli.vuejs.org/guide/deployment.html#docker-nginx
 # CMD ["./run_app.sh", "&&", "npx", "serve", "-s", "dist"]
 CMD ["./run_app.sh"]
-
-# =========
-
-# WORKDIR /usr/app
-# RUN apt-get update \
-#     && apt-get install -y git
-# RUN git clone --depth=1 https://github.com/primer/octicons.git
-# RUN npm install dependencies --save-dev
-# RUN npm run build
-
-# # docker cp sass:/usr/app/octicons/lib/build/data.json data.json
-# CMD ["/bin/sh"]