Implement caching properly for both dev and prod workflows and dockerfiles

Author: jason301c

.github/workflows/azure-acr-deploy-frontend-dev.yml

@@ -19,6 +19,13 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          driver-opts: |
+            image=moby/buildkit:latest
+            network=host
+
       - name: Log in to Azure Container Registry
         uses: docker/login-action@v3
         with:

.github/workflows/azure-acr-deploy-frontend-prod.yml

@@ -19,6 +19,13 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          driver-opts: |
+            image=moby/buildkit:latest
+            network=host
+
       - name: Log in to Azure Container Registry
         uses: docker/login-action@v3
         with:

frontend/Dockerfile

@@ -1,41 +1,33 @@
-# frontend/Dockerfile
 FROM node:20-alpine AS base
-
-# Install dependencies only when needed
-FROM base AS deps
 WORKDIR /app
 
-# Copy package files
+FROM base AS deps
 COPY package.json package-lock.json* ./
-RUN npm ci
+RUN npm ci --omit=dev
 
-# Rebuild the source code only when needed
 FROM base AS builder
-WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
-COPY . .
-
-# Build the application
+COPY tsconfig.json next.config.ts ./
+COPY public ./public
+COPY src ./src
 RUN npm run build
 
-# Production image, copy all the files and run next
 FROM base AS runner
 WORKDIR /app
+ENV NODE_ENV=production
 
-ENV NODE_ENV production
-
-# Create a non-root user and give them ownership
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
+# Create non-root user
+RUN addgroup --system --gid 1001 nodejs \
+ && adduser --system --uid 1001 nextjs
 USER nextjs
 
-# Copy built assets from builder stage
+# Copy built assets
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/public ./public
 
 EXPOSE 3000
+ENV PORT=3000
+ENV HOSTNAME=0.0.0.0
 
-ENV PORT 3000
-ENV HOSTNAME "0.0.0.0"
-
-CMD ["node", "server.js"]
+CMD ["node", "server.js"]

frontend/Dockerfile.dev

@@ -1,38 +1,39 @@
 FROM node:20-alpine AS base
+WORKDIR /app
 
-# Install dependencies only when needed
 FROM base AS deps
-WORKDIR /app
 COPY package.json package-lock.json* ./
 RUN npm ci
 
-# Rebuild the source code only when needed
 FROM base AS builder
-WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
-COPY . .
+COPY tsconfig.json next.config.ts ./
+COPY public ./public
+COPY src ./src
 RUN npm run build
 
-# Dev/Staging image: Built app with dev logging
 FROM base AS runner
 WORKDIR /app
-
 ENV NODE_ENV=development
 
-# Install runtime deps (including pino-pretty for transport) - but not used now
-COPY package.json package-lock.json* ./
-RUN npm ci --only=production && npm install pino-pretty  # Keep for potential future use
+# Copy runtime deps from deps stage (no double install!)
+COPY --from=deps /app/node_modules ./node_modules
+
+# Optionally include dev tool
+RUN npm install --global pino-pretty
 
-# Copy built assets from builder
+# Copy built assets
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/public ./public
 
 # Create non-root user
-RUN addgroup --system --gid 1001 nodejs && adduser --system --uid 1001 nextjs
+RUN addgroup --system --gid 1001 nodejs \
+ && adduser --system --uid 1001 nextjs
 USER nextjs
 
 EXPOSE 3000
-ENV PORT 3000
-ENV HOSTNAME "0.0.0.0"
+ENV PORT=3000
+ENV HOSTNAME=0.0.0.0
 
-CMD ["npm", "start"]
+CMD ["npm", "start"]

frontend/src/assets/OgImage.png frontend/public/OgImage.pngfrontend/src/assets/OgImage.png renamed to frontend/public/OgImage.png

@@ -5,7 +5,6 @@ import { notFound } from "next/navigation";
 import { Job } from "@/types/job";
 import JobDetailsWrapper from "@/components/jobs/job-details-wrapper";
 import { Metadata } from "next";
-import OgImage from "@/assets/OgImage.png";
 
 type Props = {
   params: Promise<{ id: string }>;
@@ -38,7 +37,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
       description,
       images: [
         {
-          url: OgImage.src,
+          url: "/OgImage.png",
           alt: title,
         },
       ],

frontend/src/assets/mac.svg frontend/public/mac.svgfrontend/src/assets/mac.svg renamed to frontend/public/mac.svg

@@ -21,7 +21,6 @@ import { Metadata } from "next";
 import FeedbackButton from "@/components/ui/feedback-button";
 import { Notifications } from "@mantine/notifications";
 
-import OgImage from "../assets/OgImage.png";
 import FirstVisitNotification from "@/components/ui/first-visit-notification";
 
 export const metadata: Metadata = {
@@ -34,7 +33,7 @@ export const metadata: Metadata = {
     description: "Stay ahead with the job board that never sleeps.",
     images: [
       {
-        url: OgImage.src,
+        url: "/OgImage.png",
         alt: "MAC Jobs Board",
       },
     ],

frontend/src/app/jobs/[id]/page.tsx

@@ -1,11 +1,10 @@
-import MacLogo from "@/assets/mac.svg";
 import Image from "next/image";
 import Link from "next/link";
 
 export default function Logo() {
   return (
     <Link href="/" className="flex space-x-3 items-center h-8 cursor-pointer">
-      <Image src={MacLogo} className="h-10 w-10" alt="MAC Logo" />
+      <Image src="/mac.svg" className="h-10 w-10" alt="MAC Logo" />
       <span className="text-lg lg:text-xl">Jobs</span>
     </Link>
   );