feat: web docker image optimisation

Signed-off-by: Abhishek kushwaha <[email protected]>

apps/web/Dockerfile

@@ -1,24 +1,55 @@
-FROM node:20-alpine AS build
+FROM node:20-alpine AS base
 
+
+FROM base AS builder
+RUN apk add --no-cache libc6-compat
+RUN apk update
+# working directory
 WORKDIR /app
+RUN npm install -g turbo
+COPY . .
+RUN turbo prune web --docker
 
-RUN npm i -g pnpm
+# Add lockfile and package.json's of isolated subworkspace
+FROM base AS installer
+RUN apk add --no-cache libc6-compat
+RUN apk update
+WORKDIR /app
 
-# COPY package.json .
-COPY turbo.json .
-COPY pnpm-workspace.yaml .
-COPY package*.json .
-COPY ./packages ./packages
+# install the dependencies
+RUN npm install -g pnpm
+COPY .gitignore .gitignore
+COPY --from=builder /app/out/json/ .
+COPY --from=builder /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
+RUN pnpm  install
 
-COPY apps/web/package.json apps/web/package.json
-COPY apps/web/tsconfig.json apps/web/tsconfig.json
+# Build the project
+COPY --from=builder /app/out/full/ .
+COPY turbo.json turbo.json
 
-RUN pnpm install
 
-COPY . .
+RUN pnpm turbo build --filter=web...
 
-RUN pnpm run build:web
+FROM base AS runner
+WORKDIR /app
 
+# Don't run production as root
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+USER nextjs
+
+COPY --from=installer /app/apps/web/next.config.js .
+COPY --from=installer /app/apps/web/package.json .
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=installer --chown=nextjs:nodejs /app/apps/web/.next/standalone ./
+COPY --from=installer --chown=nextjs:nodejs /app/apps/web/.next/static ./apps/web/.next/static
+COPY --from=installer --chown=nextjs:nodejs /app/apps/web/public ./apps/web/public
+
+ENV PORT=3000
 EXPOSE 3000
+ENV HOSTNAME "0.0.0.0"
+
 
-ENTRYPOINT ["pnpm", "run", "start:web"]
+CMD node apps/web/server.js

apps/web/next.config.js

@@ -1,6 +1,7 @@
 const path = require("node:path");
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  output: "standalone",
   webpack(config, { isServer }) {
     config.module.rules.push({
       test: /\.svg$/,

docker-compose-test.yml

@@ -15,7 +15,26 @@ services:
       POSTGRES_DB: tests
     networks:
       - keyshade-test
-
+  web:
+    container_name: keyshade-web
+    build:
+      context: .
+      dockerfile: ./apps/web/Dockerfile
+    restart: always
+    ports:
+      - 3000:3000
+    networks:
+      - keyshade-test
+  api:
+    container_name: keyshade-api
+    build:
+      context: .
+      dockerfile: ./apps/api/Dockerfile
+    restart: always
+    ports:
+      - 3001:3001
+    networks:
+      - keyshade-test
 networks:
   keyshade-test:
     driver: bridge

docker-compose.yml

@@ -13,6 +13,26 @@ services:
       - ./data:/var/lib/postgresql/data
     networks:
       - keyshade-dev
+  web:
+    container_name: keyshade-web
+    build:
+      context: .
+      dockerfile: ./apps/web/Dockerfile
+    restart: always
+    ports:
+      - 3000:3000
+    networks:
+      - keyshade-dev
+  api:
+    container_name: keyshade-api
+    build:
+      context: .
+      dockerfile: ./apps/api/Dockerfile
+    restart: always
+    ports:
+      - 3001:3001
+    networks:
+      - keyshade-dev
 
 networks:
   keyshade-dev: