OP#55 Update Docker Process to Build App (#110)

Author: RafaelCenzano

.dockerignore

@@ -0,0 +1,9 @@
+docs/
+.github/
+.gitignore
+.dockerignore
+Dockerfile
+Makefile
+LICENSE
+README.md
+eslint.config.mjs

.github/workflows/docker-deploy.yml

@@ -23,27 +23,26 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
-      - name: Build React App
-        env: # If using this frontend for your own usecase change this backend url to your backend url
-          REACT_APP_BACKEND_SERVER: "https://api.labconnect.cs.rpi.edu"
-        run: |
-          npm ci --legacy-peer-deps
-          CI=false
-          npm run build
+
       # 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@65b78e6e13532edd9afa3aa52ac7964289d1a9c1
         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.
+      
+          # 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@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
-      # 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.
+          tags: |
+            type=ref,event=branch,pattern=main
+            type=raw,value=latest
+      
+          # 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

.github/workflows/docker-test.yml

@@ -9,28 +9,32 @@ on:
       - "**.tsx"
       - "package.json"
       - "package-lock.json"
+      - "Dockerfile"
+      - ".dockerignore"
 
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
 
-      - name: Build React App
-        run: |
-          npm ci --legacy-peer-deps
-          CI=false
-          REACT_APP_BACKEND_SERVER="https://api.labconnect.cs.rpi.edu"
-          npm run build
-
       - name: "Build Docker Image"
         run: |
           docker build -t labconnect-frontend .
 
       - name: "Run Docker Container"
         run: |
           docker run -d --name labconnect-frontend-container labconnect-frontend
-          sleep 60
+          sleep 30
           docker logs labconnect-frontend-container
           docker stop labconnect-frontend-container
+      
+      - name: "Check for Container Exit Code"
+        id: check_exit_code
+        run: |
+          docker inspect labconnect-frontend-container --format='{{.State.ExitCode}}'
           docker rm labconnect-frontend-container
+
+      - name: "Fail if Container Fails"
+        if: steps.check_exit_code.outputs.exit_code != '0'
+        run: exit 1

.github/workflows/eslint.yml

@@ -18,7 +18,7 @@ jobs:
           node-version: 22
 
       - name: Install dependencies
-        run: npm ci --legacy-peer-deps
+        run: npm ci
 
       - name: Run EsLint
         uses: sibiraj-s/action-eslint@v3

Dockerfile

@@ -1,8 +1,33 @@
-FROM --platform=linux/amd64 node:22.9.0-alpine3.20
+FROM node:23-alpine3.21 AS base
+
+# Install dependencies
+FROM base AS deps
+
+WORKDIR /app
+
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+
+COPY package.json package-lock.json ./
+
+RUN npm ci
+
+# Build the app with the node modules installed
+FROM base AS builder
+
+WORKDIR /app
+
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+RUN npm run build
+
+# Create a new image with the build files
+FROM base AS runner
 
 WORKDIR /app
 
-COPY build /app/build
+COPY --from=builder /app/build ./build
 RUN npm install -g serve
 
 HEALTHCHECK --interval=10s --timeout=5s --start-period=5s --retries=3 \