Cấu hình next.config.js

javascript Copy

/** @type {import('next').NextConfig} */

import { writeFileSync } from 'fs';

const nextConfig = {
  reactStrictMode: false,
  output: 'standalone',
};

export default nextConfig;

Ở đây, chúng ta cấu hình cho Next.js với chế độ nghiêm ngặt tắt và thiết lập đầu ra là standalone, cho phép ứng dụng chạy độc lập trên cổng 3000.

Dockerfile

Chúng ta sẽ sử dụng hình ảnh node:alpine để tạo môi trường triển khai nhẹ cho ứng dụng.

dockerfile Copy

FROM node:alpine AS base

FROM base AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package*.json yarn.lock* ./
RUN yarn --frozen-lockfile

FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN yarn build

FROM base AS production
WORKDIR /app
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public

EXPOSE 3000
ENV PORT 3000
CMD ["node", "server.js"]

Chúng ta chia Dockerfile thành nhiều giai đoạn để tối ưu hóa dung lượng cuối cùng của hình ảnh ứng dụng.

Cấu hình docker-compose.yml

Chúng ta sử dụng file docker-compose.yml để thiết lập dịch vụ cho ứng dụng Next.js:

yaml Copy

version: "3.8"

services:
  nextjs:
    ports:
      - 3024:3000
    container_name: websi
    image: websi:latest
    restart: always
    build:
      context: ./
      dockerfile: Dockerfile  
    environment:
      NEXT_PUBLIC_URL_BE: https://xx
      NEXT_PUBLIC_LOGO: ''

Tại đây, chúng ta ánh xạ cổng 3000 trong container sang cổng 3024 trên máy chủ.

File .dockerignore

Để giảm kích thước hình ảnh docker, chúng ta cũng cần tạo file .dockerignore nhằm loại bỏ những thư mục không cần thiết:

.dockerignore Copy

node_modules
.next
.github
.husky
.yarn

Chạy Docker

Để khởi chạy ứng dụng, chúng ta sử dụng các lệnh sau:

bash Copy

    - docker-compose down --volumes --remove-orphans
    - docker-compose up -d --force-recreate --build

Sau khi chạy xong, kiểm tra danh sách các hình ảnh docker:

Copy

docker images

REPOSITORY   TAG       IMAGE ID       CREATED          SIZE
abi          latest    b04c775dd088   5 minutes ago    189MB

Ta có thể thấy rằng dung lượng hình ảnh đã giảm đáng kể khi áp dụng các kỹ thuật tối ưu.

Triển khai CI/CD trên GitLab

Chúng ta có thể cấu hình CI/CD trên GitLab với tệp tin sau: