From 7878ef1cc56e863ee96613148bf4179238674937 Mon Sep 17 00:00:00 2001
From: Anderson T <tseng.andersonn@gmail.com>
Date: Fri, 13 Sep 2024 06:13:45 -0700
Subject: [PATCH] Shrunk docker image to 1.2 GB to 200 MB

---
 README.md                              |  2 +-
 frontend/Dockerfile                    | 76 +++++++++++++++++++++-----
 frontend/next.config.js                |  3 +-
 frontend/src/app/about/ExecProfile.tsx | 30 +++++-----
 4 files changed, 81 insertions(+), 30 deletions(-)

diff --git a/README.md b/README.md
index 81b83c1..7da1c37 100644
--- a/README.md
+++ b/README.md
@@ -38,7 +38,7 @@ docker build -t langaracpscnext:latest .
 Start the container:
 
 ```bash
-docker run -p 3000:3000 -v $(pwd)/src:/app/src langaracpscnext:latest
+docker run -p 3000:3000 langaracpscnext:latest
 ```
 
 Access the Langara Computer Science Club site at [http://localhost:3000](http://localhost:3000).
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index 45a5c40..3697bd4 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -1,21 +1,71 @@
-# Based on https://shipyard.build/blog/how-to-yarn-project-with-docker/
+# OPTIMIZED DOCKERFILE TAKEN FROM
+# https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile
 
-FROM node:21-alpine3.19
-WORKDIR /usr/src/app
+FROM node:18-alpine AS base
 
-# Documentation - not functional
-EXPOSE 3000
+# Install dependencies only when needed
+FROM base AS deps
+# 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
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN \
+  if [ -f yarn.lock ]; then yarn run build; \
+  elif [ -f package-lock.json ]; then npm run build; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
 
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
 
-# Install dependencies
-COPY yarn.lock package.json ./
-RUN yarn install --network-timeout 1000000
+ENV NODE_ENV=production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+ENV NEXT_TELEMETRY_DISABLED=1
 
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
 
-COPY . ./
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
 
-# building the app
-RUN yarn run build
+ENV PORT=3000
 
-# Running the app
-CMD [ "yarn", "start" ]
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+ENV HOSTNAME="0.0.0.0"
+CMD ["node", "server.js"]
\ No newline at end of file
diff --git a/frontend/next.config.js b/frontend/next.config.js
index 024b798..866a404 100644
--- a/frontend/next.config.js
+++ b/frontend/next.config.js
@@ -24,7 +24,8 @@ const nextConfig = {
         pathname: "/executives/image/**"
       },
     ]
-  }
+  },
+  output: 'standalone'
 }
 
 module.exports = nextConfig
diff --git a/frontend/src/app/about/ExecProfile.tsx b/frontend/src/app/about/ExecProfile.tsx
index c2d3fb6..6d2276c 100644
--- a/frontend/src/app/about/ExecProfile.tsx
+++ b/frontend/src/app/about/ExecProfile.tsx
@@ -17,20 +17,20 @@ interface ExecProfileProps
     Description: string;
 }
 
-const PositionStrings: string[] = [
-    "President",
-    "Vice President",
-    "Vice President Internal",
-    "Vice President External",
-    "Tech Lead",
-    "Assistant Tech Lead",
-    "General Representative",
-    "Director of Public Relations",
-    "Director of Finance",
-    "Director of Events",
-    "Secretary",
-    "Director of Media"
-];
+// const PositionStrings: string[] = [
+//     "President",
+//     "Vice President",
+//     "Vice President Internal",
+//     "Vice President External",
+//     "Tech Lead",
+//     "Assistant Tech Lead",
+//     "General Representative",
+//     "Director of Public Relations",
+//     "Director of Finance",
+//     "Director of Events",
+//     "Secretary",
+//     "Director of Media"
+// ];
  
 export default function ExecProfile({ID, Name, ImageBuffer, Position, Description} : ExecProfileProps)
 { 
@@ -42,7 +42,7 @@ export default function ExecProfile({ID, Name, ImageBuffer, Position, Descriptio
             if (window.innerWidth <= 800)
                 initialValue = 100;
         }
-    });
+    }); 
 
     const [imageWidth, setImageWidth] = useState<number>(initialValue);