Merge pull request #614 from Northeastern-Electric-Racing/613-speed-up-client-build

#613 Speed up client-build: hoist ng build out of Docker

Author: bracyw

.github/workflows/client-build.yml

@@ -1,59 +1,58 @@
-#
 name: Create and publish client docker image
 
 on:
   workflow_dispatch:
 
-
-
-# Defines two custom environment variables for the workflow. These are used for the Container registry domain, and a name for the Docker image that this workflow builds.
 env:
   REGISTRY: ghcr.io
-  IMAGE_NAME: ${{ github.repository }}
+  IMAGE_NAME: northeastern-electric-racing/argos-client
 
-# There is a single job in this workflow. It's configured to run on the latest available version of Ubuntu.
 jobs:
-  build-and-push-image:
-    runs-on: ubuntu-latest
-    # Sets the permissions granted to the `GITHUB_TOKEN` for the actions in this job.
+  build-and-push:
+    runs-on: ubuntu-24.04
     permissions:
       contents: read
       packages: write
-      # 
+    defaults:
+      run:
+        working-directory: ./angular-client
     steps:
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v4.0.0
-      - name: Checkout repository
-        uses: actions/checkout@v6
-      # Uses the `docker/login-action` action to log in to the Container registry registry using the account and password that will publish the packages. Once published, the packages are scoped to the account defined here.
-      - name: Log in to the Container registry
-        uses: docker/login-action@v4.0.0
+      - uses: actions/checkout@v6
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 20.17.0
+
+      - name: Install deps
+        run: npm ci
+
+      - name: Build production bundle
+        run: npm run build:production
+
+      # Stage dist where Dockerfile.prebuilt expects it; /dist is in .dockerignore,
+      # so the docker context can't pull from dist/angular-client/browser directly.
+      - name: Stage dist into docker context
+        run: cp -r dist/angular-client/browser browser
+
+      - uses: docker/setup-qemu-action@v3
+        with:
+          platforms: arm64
+
+      - uses: docker/setup-buildx-action@v4.0.0
+
+      - uses: docker/login-action@v4.0.0
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
-      # This step uses [docker/metadata-action](https://github.com/docker/metadata-action#about) to extract tags and labels that will be applied to the specified image. The `id` "meta" allows the output of this step to be referenced in a subsequent step. The `images` value provides the base name for the tags and labels.
-      - name: Extract metadata (tags, labels) for Docker
-        id: meta
-        uses: docker/metadata-action@v6.0.0
-        with:
-          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}-client
-      # This step uses the `docker/build-push-action` action to build the image, based on your repository's `Dockerfile`. If the build succeeds, it pushes the image to GitHub Packages.
-      # It uses the `context` parameter to define the build's context as the set of files located in the specified path. For more information, see "[Usage](https://github.com/docker/build-push-action#usage)" in the README of the `docker/build-push-action` repository.
-      # It uses the `tags` and `labels` parameters to tag and label the image with the output from the "meta" step.
-      - name: Build and push Docker image for angular client
-        uses: docker/build-push-action@v7.0.0
+
+      # Multi-arch in one buildx push — apk add gettext is the only RUN, fine under QEMU.
+      # All real CPU work (ng build) ran natively above; arch-sensitive part is just the nginx base layer.
+      - uses: docker/build-push-action@v7.0.0
         with:
           context: ./angular-client
+          file: ./angular-client/Dockerfile.prebuilt
           push: true
-          target: production
-          platforms: linux/arm64,linux/amd64
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          # for caching
-          # cache-from: type=gha,scope=global
-          # cache-to: type=gha,mode=max,scope=global
-          # https://github.com/docker/build-push-action/issues/820
+          platforms: linux/amd64,linux/arm64
+          tags: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.ref_name }}
           provenance: false
-          build-args: |
-            PROD=true

angular-client/Dockerfile.prebuilt

@@ -0,0 +1,18 @@
+# Used by .github/workflows/client-build.yml — expects the Angular production
+# bundle to already be built on the runner and staged at browser/.
+# For local/compose builds that build from source, use Dockerfile.
+FROM nginx:alpine
+
+RUN apk add --no-cache gettext
+
+WORKDIR /usr/share/nginx/html
+
+COPY browser/ .
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY env.prod.js ./assets/env.prod.js
+COPY --chmod=755 entrypoint.sh /entrypoint.sh
+
+EXPOSE 80
+
+ENTRYPOINT ["/entrypoint.sh"]
+CMD ["nginx", "-g", "daemon off;"]