Merge branch 'chore/build-cicd' into 'development'

build docker via gitlab

See merge request mbugroup/lti-web-client!42

.gitlab-ci.yml

@@ -1,76 +1,95 @@
-stages: [notify]
+stages:
+  - build
+  - cleanup
+  - deploy
 
-# --- Notify when MR is opened/updated ---
+variables:
-notify_discord_mr:
+  DOCKER_DRIVER: overlay2
-  stage: notify
+  IMAGE_NAME: "${CI_REGISTRY_IMAGE}/web-lti"
-  image: alpine:3.20
+  DEPLOY_ENV: development
-  rules:
+  KEEP_IMAGES: 3
-    - if: '$CI_PIPELINE_SOURCE == "merge_request_event"'
+  BUILD_MODE: static
+
+before_script:
+  - echo "🔐 Logging in to GitLab Container Registry..."
+  - echo "$GITLAB_TOKEN" | docker login -u "$GITLAB_USER" --password-stdin "$CI_REGISTRY"
+
+# =====================================================
+# 🧱 BUILD IMAGE
+# =====================================================
+build-image:
+  stage: build
+  image: docker:27.0.2
+  services:
+    - docker:dind
   variables:
-    WEBHOOK_URL: $DISCORD_WEBHOOK_URL
+    DOCKER_TLS_CERTDIR: ""
-  before_script:
-    - apk add --no-cache curl jq
   script: |
-    MR_URL="${CI_PROJECT_URL}/-/merge_requests/${CI_MERGE_REQUEST_IID}"
+    echo "🚀 Building Docker image for ${DEPLOY_ENV} branch..."
+    export TAG="${DEPLOY_ENV}_${CI_COMMIT_SHORT_SHA}"
+    echo "🧱 Tagging image as: $IMAGE_NAME:$TAG"
 
-    jq -n \
+    docker build \
-      --arg repo "$CI_PROJECT_PATH" \
+      --build-arg NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL \
-      --arg mr "#${CI_MERGE_REQUEST_IID}" \
+      --build-arg NEXT_PUBLIC_SSO_LOGIN_URL=$NEXT_PUBLIC_SSO_LOGIN_URL \
-      --arg url "$MR_URL" \
+      --build-arg BUILD_MODE=$BUILD_MODE \
-      --arg requestor "${GITLAB_USER_LOGIN:-$GITLAB_USER_NAME}" \
+      -t "$IMAGE_NAME:$TAG" \
-      --arg source "$CI_MERGE_REQUEST_SOURCE_BRANCH_NAME" \
+      -t "$IMAGE_NAME:$DEPLOY_ENV" .
-      --arg target "$CI_MERGE_REQUEST_TARGET_BRANCH_NAME" \
-      --arg title "$CI_MERGE_REQUEST_TITLE" \
-      '{
-        username: "CI Bot - FE",
-        embeds: [{
-          title: "📣 [LTI WEB CLIENT] Merge Request Opened/Updated",
-          description: ($mr + " in " + $repo),
-          url: $url,
-          color: 3447003,
-          fields: [
-            {name: "Author", value: $requestor, inline: true},
-            {name: "Source → Target", value: ($source + " → " + $target), inline: true},
-            {name: "Title", value: $title}
-          ]
-        }]
-      }' \
-      | curl -sS -H "Content-Type: application/json" -d @- "$WEBHOOK_URL"
 
-# --- Notify when MR is merged ---
+    echo "📦 Pushing images to registry..."
-notify_discord_merge:
+    docker push "$IMAGE_NAME:$TAG"
-  stage: notify
+    docker push "$IMAGE_NAME:$DEPLOY_ENV"
+  only:
+    - development
+
+# =====================================================
+# 🧹 CLEANUP OLD IMAGES (KEEP 3)
+# =====================================================
+cleanup-registry:
+  stage: cleanup
   image: alpine:3.20
-  rules:
-    # Only run for merge request pipelines that are in merged state
-    - if: '$CI_PIPELINE_SOURCE == "merge_request_event" && $CI_MERGE_REQUEST_STATE == "merged"'
-  variables:
-    WEBHOOK_URL: $DISCORD_WEBHOOK_URL
-  before_script:
-    - apk add --no-cache curl jq
   script: |
-    MR_URL="${CI_PROJECT_URL}/-/merge_requests/${CI_MERGE_REQUEST_IID}"
+    apk add --no-cache curl jq
+    echo "🧹 Cleaning up old images (keeping ${KEEP_IMAGES})..."
 
-    jq -n \
+    TOKEN=$(curl --silent --request POST --header "Content-Type: application/json" \
-      --arg repo "$CI_PROJECT_PATH" \
+      --data "{\"login\": \"$GITLAB_USER\", \"password\": \"$GITLAB_TOKEN\"}" \
-      --arg mr "#${CI_MERGE_REQUEST_IID}" \
+      "${CI_REGISTRY}/jwt/auth" | jq -r '.token')
-      --arg url "$MR_URL" \
+
-      --arg requestor "${CI_MERGE_REQUEST_AUTHOR}" \
+    ALL_TAGS=$(curl --silent --header "Authorization: Bearer $TOKEN" \
-      --arg source "$CI_MERGE_REQUEST_SOURCE_BRANCH_NAME" \
+      "${CI_REGISTRY}/v2/${CI_PROJECT_PATH}/web-lti/tags/list" \
-      --arg target "$CI_MERGE_REQUEST_TARGET_BRANCH_NAME" \
+      | jq -r ".tags | sort | reverse | .[${KEEP_IMAGES}:]" | jq -r '.[]')
-      --arg title "$CI_MERGE_REQUEST_TITLE" \
+
-      '{
+    for tag in $ALL_TAGS; do
-        username: "CI Bot - FE",
+      echo "🗑️  Deleting old image tag: $tag"
-        embeds: [{
+      DIGEST=$(curl --silent -H "Authorization: Bearer $TOKEN" \
-          title: "✅ [LTI WEB CLIENT] Merge Request Merged",
+        "${CI_REGISTRY}/v2/${CI_PROJECT_PATH}/web-lti/manifests/$tag" | jq -r '.config.digest')
-          description: ($mr + " has been merged into " + $repo),
+      curl --silent -X DELETE -H "Authorization: Bearer $TOKEN" \
-          url: $url,
+        "${CI_REGISTRY}/v2/${CI_PROJECT_PATH}/web-lti/manifests/${DIGEST}" || true
-          color: 3066993,
+    done
-          fields: [
+  only:
-            {name: "Author", value: $requestor, inline: true},
+    - development
-            {name: "Source → Target", value: ($source + " → " + $target), inline: true},
+  when: always
-            {name: "Title", value: $title}
+
-          ]
+# =====================================================
-        }]
+# 🚀 DEPLOY TO SERVER (VIA SSH)
-      }' \
+# =====================================================
-      | curl -sS -H "Content-Type: application/json" -d @- "$WEBHOOK_URL"
+deploy:
+  stage: deploy
+  image: alpine:3.20
+  before_script:
+    - apk add --no-cache openssh
+    - mkdir -p ~/.ssh
+    - echo "$SSH_PRIVATE_KEY" > ~/.ssh/id_rsa
+    - chmod 600 ~/.ssh/id_rsa
+    - ssh-keyscan -H "$SERVER_IP" >> ~/.ssh/known_hosts
+  script: |
+    echo "🚀 Deploying $IMAGE_NAME:$DEPLOY_ENV to $SERVER_USER@$SERVER_IP"
+    ssh $SERVER_USER@$SERVER_IP "
+      docker login -u '$GITLAB_USER' -p '$GITLAB_TOKEN' $CI_REGISTRY &&
+      docker pull $IMAGE_NAME:$DEPLOY_ENV &&
+      docker compose -f /home/devops/docker/deployment/development/compose/docker-compose.web-lti.yaml up -d dev-web-lti &&
+      docker image prune -f
+    "
+  only:
+    - development

Dockerfile

@@ -0,0 +1,56 @@
+# ============================================================
+# 🏗️  Stage 1 — Builder
+# ============================================================
+FROM node:20-alpine AS builder
+
+# Install hanya yang diperlukan untuk build
+RUN apk add --no-cache git bash build-base curl
+
+WORKDIR /app
+
+# Copy dependency list terlebih dahulu agar cache efektif
+COPY package*.json ./
+
+# Gunakan npm ci (lebih cepat, konsisten)
+RUN npm ci --omit=dev
+
+# Copy source code terakhir
+COPY . .
+
+# Buat config agar Next tahu mode static export
+RUN echo "const config = { output: 'export', images: { unoptimized: true } }; export default config;" > next.config.mjs
+
+# Build Next.js tanpa Turbopack, lalu hapus cache npm
+ENV NEXT_DISABLE_TURBOPACK=1
+RUN npx next build && npm cache clean --force
+
+# Tambahkan cache folder _next agar bisa dilayani oleh server
+RUN mkdir -p .next/server/app/_next && \
+    cp -r .next/static .next/server/app/_next/static && \
+    cp -r public/assets .next/server/app/ || true
+
+# ============================================================
+# 🧱  Stage 2 — Runtime (super ringan)
+# ============================================================
+FROM node:20-alpine AS runtime
+
+# Install hanya 1 dependency ringan untuk serving static file
+RUN npm install -g serve && apk add --no-cache tini
+
+WORKDIR /app
+
+# Copy hasil build dari stage sebelumnya
+COPY --from=builder /app/.next/server/app ./server
+COPY --from=builder /app/.next/server/app/_next ./server/_next
+COPY --from=builder /app/public ./public
+
+# Set environment minimal
+ENV NODE_ENV=production
+ENV PORT=3000
+
+EXPOSE 3000
+
+# Jalankan lewat tini untuk handle signal & memory leak
+ENTRYPOINT ["/sbin/tini", "--"]
+
+CMD ["serve", "-s", "server", "-l", "3000"]

docker-compose.yaml

@@ -0,0 +1,39 @@
+version: "3.9"
+
+services:
+  dev-web-lti:
+    container_name: dev-web-lti
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "3002:3000"
+    env_file:
+      - .env
+    environment:
+      NODE_ENV: production
+      APP_ENV: production
+    networks:
+      - dev-lti-network
+    restart: always
+    deploy:
+      resources:
+        limits:
+          cpus: "3.0"
+          memory: 3G
+        reservations:
+          cpus: "1.0"
+          memory: 512M
+    extra_hosts:
+      - "host.docker.internal:host-gateway"
+    # Optional: aktifkan healthcheck jika punya endpoint
+    # healthcheck:
+    #   test: ["CMD-SHELL", "curl -fsS http://localhost:3000/api/healthz || exit 1"]
+    #   interval: 10s
+    #   timeout: 3s
+    #   retries: 10
+    #   start_period: 15s
+
+networks:
+  dev-lti-network:
+    external: true