From 38f67a6cc01f9e9bf12e003880df1843aa21f08c Mon Sep 17 00:00:00 2001
From: Ilya Kreymer <ikreymer@users.noreply.github.com>
Date: Wed, 9 Aug 2023 12:06:20 -0700
Subject: [PATCH] Optimize Frontend Image Build on CI (#1057)

* Always run yarn only on build platform with --platform=$BUILDPLATFORM
* Remove optional dependencies (playwright + chromium) from build with --ignore-optional and move some devDependencies to be optional
* Disable husky pre-commit hook checks on frontend

Co-authored-by: sua yoo <sua@suayoo.com>
---
 .github/workflows/deploy-dev.yaml           |  2 ++
 .github/workflows/frontend-build-check.yaml |  2 ++
 .github/workflows/release.yaml              |  7 ++++---
 frontend/Dockerfile                         | 12 +++++-------
 frontend/package.json                       | 14 ++++++++------
 5 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/.github/workflows/deploy-dev.yaml b/.github/workflows/deploy-dev.yaml
index 60adaa59..6d21a660 100644
--- a/.github/workflows/deploy-dev.yaml
+++ b/.github/workflows/deploy-dev.yaml
@@ -40,6 +40,8 @@ jobs:
 
       - name: Build Frontend
         uses: docker/build-push-action@v3
+        env:
+          HUSKY: 0
         with:
           context: frontend
           push: true
diff --git a/.github/workflows/frontend-build-check.yaml b/.github/workflows/frontend-build-check.yaml
index 33ddf621..4812bfd8 100644
--- a/.github/workflows/frontend-build-check.yaml
+++ b/.github/workflows/frontend-build-check.yaml
@@ -27,6 +27,8 @@ jobs:
             ${{ runner.os }}-btrix-frontend-build-
       - name: Install dependencies
         working-directory: frontend
+        env:
+          HUSKY: 0
         run: yarn install --frozen-lockfile
       - name: Unit tests
         working-directory: frontend
diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
index b8da88a6..ed1b8674 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -37,7 +37,7 @@ jobs:
 
       -
         name: Build Backend
-        uses: docker/build-push-action@v3
+        uses: docker/build-push-action@v4
         with:
           context: backend
           platforms: linux/amd64,linux/arm64
@@ -48,7 +48,9 @@ jobs:
 
       -
         name: Build Frontend
-        uses: docker/build-push-action@v3
+        uses: docker/build-push-action@v4
+        env:
+          HUSKY: 0
         with:
           context: frontend
           platforms: linux/amd64,linux/arm64
@@ -61,4 +63,3 @@ jobs:
           tags: ${{ env.REPO_PREFIX }}webrecorder/browsertrix-frontend:${{ env.VERSION }}, webrecorder/browsertrix-frontend:latest
           cache-from: type=gha,scope=frontend
           cache-to: type=gha,scope=frontend,mode=max
-
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index ff45b48b..6447bdfa 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -1,17 +1,15 @@
 # syntax=docker/dockerfile:1.4
 ARG RWP_BASE_URL=https://cdn.jsdelivr.net/npm/replaywebpage/
 
-FROM docker.io/library/node:16 as build_deps
+FROM --platform=$BUILDPLATFORM docker.io/library/node:16 as build_deps
 
 WORKDIR /app
 COPY yarn.lock package.json ./
 # Uses `yarn cache clean` to let Docker cache layer instead
 # of including yarn cache in the build image
-RUN yarn --production --frozen-lockfile --network-timeout 1000000 && \
+RUN yarn --production --frozen-lockfile --ignore-optional --network-timeout 1000000 && \
     yarn cache clean
 
-FROM build_deps as build
-
 COPY --link lit-localize.json \
     postcss.config.js \
     tailwind.config.js \
@@ -36,16 +34,16 @@ ENV GIT_COMMIT_HASH=${GIT_COMMIT_HASH} \
     VERSION=${VERSION} \
     RWP_BASE_URL=${RWP_BASE_URL}
 
-# Prevent Docker caching node_modules
+# Prevent Docker image including node_modules to save space
 RUN yarn build && \
-    rm -rf ./node_modules
+  rm -rf ./node_modules
 
 FROM docker.io/library/nginx:1.23.2
 
 ARG RWP_BASE_URL
 ENV RWP_BASE_URL=${RWP_BASE_URL}
 
-COPY --link --from=build /app/dist /usr/share/nginx/html
+COPY --link --from=build_deps /app/dist /usr/share/nginx/html
 
 #COPY ./nginx.conf /etc/nginx/nginx.conf
 COPY --link ./frontend.conf.template /etc/nginx/templates/
diff --git a/frontend/package.json b/frontend/package.json
index 761ecb77..321409c6 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -73,21 +73,23 @@
     "localize:build": "lit-localize build"
   },
   "devDependencies": {
-    "@esm-bundle/chai": "^4.3.4-fix.0",
     "@lit/localize-tools": "^0.6.9",
-    "@open-wc/testing": "^3.2.0",
-    "@playwright/test": "1.32.1",
     "@web/dev-server-esbuild": "^0.3.3",
     "@web/dev-server-import-maps": "^0.0.6",
     "@web/dev-server-rollup": "^0.3.21",
-    "@web/test-runner": "^0.13.22",
-    "@web/test-runner-playwright": "^0.8.8",
-    "chromium": "^3.0.3",
     "husky": "^8.0.3",
     "lint-staged": "^13.1.0",
     "sinon": "^12.0.1",
     "webpack-dev-server": "^4.3.0"
   },
+  "optionalDependencies": {
+    "@esm-bundle/chai": "^4.3.4-fix.0",
+    "@open-wc/testing": "^3.2.0",
+    "@playwright/test": "1.32.1",
+    "@web/test-runner": "^0.13.22",
+    "@web/test-runner-playwright": "^0.8.8",
+    "chromium": "^3.0.3"
+  },
   "eslintConfig": {
     "parser": "@typescript-eslint/parser",
     "env": {