finished docker build & deploy

Dockerfile

@@ -1,32 +1,58 @@
-# Stage 1: Build the Next.js project
+# This file is inspired by https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile
-FROM node:18 AS builder
+
+FROM node:18-alpine AS base
+
+#-----------------------------------------
+# STAGE 1: Build the Next.js project
+#-----------------------------------------
+FROM base AS builder
+
+# 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
 
-ENV WORKDIR=/app
 WORKDIR /app
 
-# copy all the soruce code
+# package.json and package-lock.json
-COPY . .
+COPY ./package.json ./package-lock.json ./
 
 # installing dependencies
 RUN npm i && npm cache clean --force
 
+# copy all the soruce code
+COPY . .
+
 # building app
 RUN npm run build
 
-# remove dev dependencies
+#-----------------------------------------
-RUN rm -rf node_modules
+# STAGE 3: Run the Next.js server
-
+#-----------------------------------------
-# installing production dependencies
+FROM base as production
-RUN npm i --verbose --only=production && npm cache clean --force
-
-# Stage 2: Run the Next.js server
-FROM gcr.io/distroless/nodejs:18 as prod-image
 
 WORKDIR /app
 
-COPY --from=builder /app/package.json /app/package-lock.json ./
+ENV NODE_ENV production
 
-COPY --from=builder /app/.next ./.next
+RUN addgroup --system --gid 1001 nodejs
-COPY ./public /app/public
+RUN adduser --system --uid 1001 nextjs
 
-CMD ["npm", "start"]
+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
+
+ENV PORT 3000
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+CMD ["node", "server.js"]

README.md

@@ -32,5 +32,9 @@ The image will be stored in the local Docker instance.
 ## Deploying Docker service
 Run the following command:
 ```bash
-docker stack deploy -c docker-compose-deploy.yml utility-bills-tracker:1.0.0
+    HOSTNAME=0.0.0.0 \
+    NEXTAUTH_URL=https://rezije.app \
+    docker stack deploy \
+        -c docker-compose-deploy.yml \
+        utility-bills-tracker
 ```

debug-deploy.sh

@@ -0,0 +1,38 @@
+#!/bin/bash
+
+# print menu: (1) deploy stack, (2) follow logs of "web-app" service, (3) remove stack
+echo "1. Deploy stack"
+echo "2. Follow logs of 'web-app' service"
+echo "3. Remove stack"
+echo ""
+echo "Ctrl+C to exit"
+echo ""
+
+# read user input
+read -p "Enter your choice: " -n 1 -r
+echo ""
+
+# deploy stack
+if [ $REPLY -eq 1 ]
+then
+    #docker stack deploy -c docker-compose-deploy.yml utility-bills-tracker
+    HOSTNAME=0.0.0.0 \
+    NEXTAUTH_URL=https://rezije.app \
+    docker stack deploy \
+        -c docker-compose-deploy.yml utility-bills-tracker
+fi
+
+# follow logs of "web-app" service
+if [ $REPLY -eq 2 ]
+then
+    docker service logs -f utility-bills-tracker_web-app
+fi
+
+# remove stack
+if [ $REPLY -eq 3 ]
+then
+    docker stack rm utility-bills-tracker
+fi
+
+# go back to menu
+./debug-deploy.sh

docker-compose-deploy.yml

@@ -3,30 +3,29 @@ version: "3.7"
 
 services:
   web-app:
-    image: utility-bills-tracker:latest
+    image: utility-bills-tracker:1.0.0
-    restart: always
     ports:
       - 3000:3000
     environment:
-      MONGODB_URI: mongodb://root:XZtq9WakpT35wb8C76omRx@mongo:27017/
+      MONGODB_URI: mongodb://root:example@mongo:27017/
       GOOGLE_ID: 355397364527-adjrokm6hromcaaar0qfhk050mfr35ou.apps.googleusercontent.com
       GOOGLE_SECRET: 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
       AUTH_SECRET: Gh0jQ35oq6DR8HkLR3heA8EaEDtxYN/xkP6blvukZ0w=
+      HOSTNAME: ${HOSTNAME:-0.0.0.0} # IP address at which the server will be listening (0.0.0.0 = listen on all addresses)
+      NEXTAUTH_URL: ${NEXTAUTH_URL:-http://localhost:3000} # URL next-auth will use while redirecting user during authentication (if not set - will use HOSTNAME)
   mongo:
     image: mongo:6.0.12
-    restart: always
     environment:
       MONGO_INITDB_ROOT_USERNAME: root
-      MONGO_INITDB_ROOT_PASSWORD: XZtq9WakpT35wb8C76omRx
+      MONGO_INITDB_ROOT_PASSWORD: example
     volumes:
       - ./mongo:/data/db
   mongo-express:
     image: mongo-express
-    restart: always
     ports:
       - 8081:8081
     environment:
       ME_CONFIG_MONGODB_ADMINUSERNAME: root
-      ME_CONFIG_MONGODB_ADMINPASSWORD: XZtq9WakpT35wb8C76omRx
+      ME_CONFIG_MONGODB_ADMINPASSWORD: example
-      ME_CONFIG_MONGODB_URL: mongodb://root:XZtq9WakpT35wb8C76omRx@mongo:27017/
+      ME_CONFIG_MONGODB_URL: mongodb://root:example@mongo:27017/
 

next.config.js

@@ -1,4 +1,10 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    // Possible options:
+    // - `undefined`: The default build output, `.next` directory, that works with production mode `next start` or a hosting provider like Vercel
+    // - `'standalone'`: A standalone build output, `.next/standalone` directory, that only includes necessary files/dependencies. Useful for self-hosting in a Docker container.
+    // - `'export'`: An exported build output, `out` directory, that only includes static HTML/CSS/JS. Useful for self-hosting without a Node.js server.
+    output: "standalone", // needed for running the app in a Docker container
+};
 
 module.exports = nextConfig;