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

@@ -40,6 +40,8 @@ jobs:
 
       - name: Build Frontend
         uses: docker/build-push-action@v3
+        env:
+          HUSKY: 0
         with:
           context: frontend
           push: true

.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

.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
-

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/

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": {