Merge pull request #176 from Game-as-a-Service/refactor/docker-size-i…

…mprovement-through-output-sourcing

refactor: reduce docker image size by next output tracing

.github/workflows/build-and-deploy.yaml

@@ -56,16 +56,25 @@ jobs:
       - name: Test
         run: yarn test
 
-      - name: Docker Build
-        run: |
-          docker build \
-          -t ${{ vars.AWS_ECR_URI }}/${{ vars.AWS_ECR_REPOSITORY_NAME }}:latest \
-          -t ${{ vars.AWS_ECR_URI }}/${{ vars.AWS_ECR_REPOSITORY_NAME }}:${{ github.sha }} \
-          -f ./docker/Dockerfile.production \
-          .    
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+        with:
+          driver: docker-container
+          driver-opts: |
+            image=moby/buildkit:v0.9.3
+            network=host
 
-      - name: Push Docker Image to ECR
-        run: docker push ${{ vars.AWS_ECR_URI }}/${{ vars.AWS_ECR_REPOSITORY_NAME }} --all-tags
+      - name: Build and push Docker images
+        uses: docker/build-push-action@v4
+        with:
+          context: '.'
+          file: ./docker/Dockerfile.production
+          push: true
+          tags: |
+            ${{ vars.AWS_ECR_URI }}/${{ vars.AWS_ECR_REPOSITORY_NAME }}:latest
+            ${{ vars.AWS_ECR_URI }}/${{ vars.AWS_ECR_REPOSITORY_NAME }}:${{ github.sha }}
+          cache-from: type=gha
+          cache-to: type=gha
 
       # Restart systemd service
       - name: Run Application

docker/Dockerfile.production

@@ -1,33 +1,52 @@
-# Base Stage
-# Builder Stage
-FROM node:18-alpine AS builder
-
-ENV NODE_ENV=development
+FROM node:18-alpine AS base
 
+# 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
 
-COPY package.json yarn.lock ./
-
-RUN yarn install --frozen-lockfile
+COPY package.json yarn.lock*  ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --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 . .
 
-# Build the application using the appropriate build script (defined in package.json)
-# Remove the Next.js cache to reduce memory usage
-RUN yarn build \
-    && rm -rf ./.next/cache
+# 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 Stage
-FROM node:18-alpine AS production
-
-ENV NODE_ENV=production
+RUN yarn build
 
+# Production image, copy all the files and run next
+FROM base AS runner
 WORKDIR /app
 
-COPY --from=builder /app/package.json ./package.json
-COPY --from=builder /app/next.config.js ./next.config.js
-COPY --from=builder /app/node_modules ./node_modules
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
 COPY --from=builder /app/public ./public
-COPY --from=builder /app/.next ./.next
 
-CMD ["yarn", "start"]
+# 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
+COPY --from=builder --chown=nextjs:nodejs /app/.next/server/pages ./.next/server/pages
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+CMD ["node", "server.js"]

next.config.js

@@ -9,6 +9,7 @@ if (process.env.ANALYZE === "true") {
 }
 
 const nextConfig = {
+  output: "standalone",
   eslint: {
     ignoreDuringBuilds: true,
   },

package.json

@@ -32,6 +32,7 @@
     "next": "13.4.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "sharp": "^0.32.1",
     "swr": "2.1.5",
     "tailwind-merge": "1.13.2"
   },
@@ -58,6 +59,7 @@
     "@typescript-eslint/parser": "5.60.0",
     "@types/ws": "8.5.5",
     "autoprefixer": "10.4.14",
+    "bundlewatch": "0.3.3",
     "cross-env": "7.0.3",
     "cypress": "12.15.0",
     "eslint": "8.43.0",
@@ -74,7 +76,6 @@
     "storybook": "7.0.23",
     "tailwindcss": "3.3.2",
     "typescript": "5.1.3",
-    "bundlewatch": "0.3.3",
     "ws": "8.13.0"
   },
   "husky": {