Giới thiệu

Trong công nghệ DevOps hiện đại, việc tạo ra những hình ảnh Docker nhỏ gọn và hiệu quả là một tiêu chí quan trọng. Đối với ứng dụng React hoặc Vue, một hình ảnh Docker chưa được tối ưu có thể chiếm hàng trăm megabyte. Việc này không chỉ làm chậm tốc độ triển khai mà còn tiêu tốn nhiều không gian lưu trữ trong registry.

Nguyên tắc tốt nhất là không có phụ thuộc.

Bằng cách áp dụng các kỹ thuật như Multi-Stage Builds, bạn có thể giảm kích thước hình ảnh lên đến 10 lần, giúp cải thiện tốc độ triển khai, giảm chi phí lưu trữ và giảm thiểu nguy cơ tấn công.

Hướng dẫn này sẽ cung cấp cho bạn một quy trình từng bước để giảm đáng kể kích thước hình ảnh Docker của ứng dụng React/Vue, bao gồm cách nhúng phiên bản phần mềm để nhận diện tại thời điểm chạy.

Sức mạnh của Multi-Stage Builds: Từ Bloat đến Tối giản

Một Dockerfile một giai đoạn cho ứng dụng React thường yêu cầu toàn bộ môi trường Node.js, các phụ thuộc và công cụ xây dựng trong hình ảnh cuối cùng, ngay cả khi chúng chỉ cần thiết cho quá trình xây dựng.

Giải pháp là mô hình Multi-Stage Build. Nó tách biệt môi trường xây dựng nặng nề khỏi môi trường chạy tối giản.

Bằng cách sử dụng phương pháp đa giai đoạn, chúng ta chỉ bao gồm các Tệp tĩnh đã xây dựng nhỏ và một máy chủ web tối thiểu trong hình ảnh cuối cùng.

Dockerfile Tối Ưu

Chúng ta sẽ sử dụng hai giai đoạn:

Giai đoạn xây dựng:

Sử dụng hình ảnh node:lts-alpine lớn hơn để cài đặt các phụ thuộc và chạy npm run build (bạn cũng có thể sử dụng yarn). Giai đoạn này sẽ bị loại bỏ sau khi xây dựng.

Giai đoạn cuối:

Sử dụng hình ảnh nginx:alpine cực kỳ tối giản để phục vụ các tệp tĩnh được sao chép từ giai đoạn xây dựng. Hình ảnh nginx:alpine thường chỉ có kích thước khoảng ~20 MB – một sự giảm kích thước đáng kể so với hình ảnh dựa trên Node.js!

Hướng Dẫn Tối Ưu Từng Bước

Bước 1: Khởi tạo Dockerfile

Tạo một tệp có tên Dockerfile trong thư mục gốc của dự án React của bạn.

Bước 2: Giai đoạn xây dựng

Giai đoạn này chịu trách nhiệm cho tất cả các công việc nặng nề – cài đặt Node, lấy các phụ thuộc và biên dịch ứng dụng React.

# Giai đoạn 1: Giai đoạn xây dựng
FROM node:lts-alpine AS builder

# Đặt thư mục làm việc bên trong container
WORKDIR /app

# Sao chép package.json và tệp khóa trước để tận dụng bộ nhớ cache của Docker
# Chỉ chạy npm install nếu các tệp package thay đổi
COPY package*.json ./
RUN npm install

# Sao chép tất cả các tệp nguồn khác
COPY . .

# Chạy lệnh xây dựng - thường xuất ra thư mục 'build' cho Create-React-App
RUN npm run build

Ghi chú tối ưu cho giai đoạn này:

• Hình ảnh cơ sở tối thiểu: Chúng ta sử dụng node:lts-alpine thay vì một hình ảnh đầy đủ node:lts. Alpine là một bản phân phối Linux rất nhỏ, tập trung vào bảo mật.
• Tận dụng bộ nhớ cache trong quá trình xây dựng: Việc sao chép package*.json và chạy npm install trước khi sao chép các tệp nguồn khác đảm bảo rằng Docker chỉ chạy bước npm install dài dòng khi phụ thuộc thay đổi, không phải mỗi lần bạn thay đổi tệp nguồn.

Bước 3: Giai đoạn cuối (Sản xuất)

Giai đoạn này sử dụng một máy chủ web nhẹ, sẵn sàng cho sản xuất để lưu trữ các tài sản đã xây dựng.

# Giai đoạn 2: Giai đoạn sản xuất cuối
FROM nginx:alpine

# Sao chép đầu ra xây dựng từ giai đoạn 'builder' vào thư mục công cộng của Nginx
# Thư mục 'build' là nơi 'npm run build' thường đặt các tài sản tĩnh.
COPY --from=builder /app/build /usr/share/nginx/html

# Mở cổng mà Nginx chạy
EXPOSE 80

# Lệnh để khởi động Nginx, phục vụ nội dung
CMD ["nginx", "-g", "daemon off;"]

Tối ưu chính:

• FROM nginx:alpine: Sử dụng một hình ảnh cực kỳ tối giản (khoảng 20 MB) làm lớp cuối cùng.
• COPY — from=builder: Đây là phép màu của multi-stage builds. Chúng ta chỉ sao chép các tệp tĩnh đã biên dịch nhỏ (/app/build) từ giai đoạn trước, loại bỏ toàn bộ môi trường Node.js, node_modules và công cụ xây dựng.

Nổi bật Phiên bản Phần mềm Hiện tại (Thông tin DevOps)

Trong DevOps, việc biết phiên bản phần mềm chính xác đang chạy trong sản xuất là rất quan trọng cho việc gỡ lỗi, quay lại và theo dõi.

Chúng ta sẽ sử dụng một Tham số Xây dựng (ARG) để nhúng phiên bản (ví dụ, từ pipeline CI/CD, nhãn Git hoặc ID Merge Request (MR)) vào hình ảnh tại thời điểm xây dựng, và sau đó hiển thị nó trong mã ứng dụng của bạn.

Bước 3.1: Truyền phiên bản qua Docker ARG

Chỉnh sửa giai đoạn xây dựng để chấp nhận một tham số BUILD_VERSION:

# ... (Mã trước đó)
# Giai đoạn 1: Giai đoạn xây dựng
FROM node:lts-alpine AS builder
# Định nghĩa một tham số xây dựng cho phiên bản phần mềm
ARG BUILD_VERSION=unknown 

WORKDIR /app

# ... (phần còn lại của mã giai đoạn 1)

# Xây dựng ứng dụng, truyền phiên bản dưới dạng biến cho quá trình xây dựng của React
# REACT_APP_VERSION là một mẫu tiêu chuẩn để hiển thị các biến ENV cho một bản xây dựng React
RUN npm run build

Khi xây dựng, bạn sẽ truyền phiên bản:

# Ví dụ sử dụng biến CI cho ID Merge Request
MR_ID="mr-12345"
docker build --build-arg BUILD_VERSION=${MR_ID} -t my-react-app:${MR_ID} .

Bước 3.2: Truy cập phiên bản trong React (Mã Xây dựng/MR)

Bạn cần cấu hình quy trình xây dựng React của mình (ví dụ: trong tệp .env của dự án, cấu hình webpack, hoặc một kịch bản đặc biệt) để tiêu thụ giá trị ARG Docker và nhúng nó vào các biến môi trường của ứng dụng.

Đối với một cài đặt Create-React-App tiêu chuẩn, bạn thường truyền các biến môi trường cho lệnh npm run build. Vì chúng ta không thể trực tiếp sử dụng ARG như ENV trong một lệnh duy nhất, mẫu phổ biến và sạch nhất là sử dụng một kịch bản đơn giản hoặc nhúng biến trong lệnh RUN.

Mã Dockerfile Quan Trọng (Kết hợp RUN cho npm run build):

Để đảm bảo tham số xây dựng được truyền dưới dạng một biến môi trường có thể nhìn thấy cho kịch bản xây dựng React:

# Giai đoạn 1: Giai đoạn xây dựng
FROM node:lts-alpine AS builder
# Định nghĩa một tham số xây dựng cho phiên bản phần mềm
ARG BUILD_VERSION=unknown 

# ... (các thiết lập khác)

# **NHÚNG MÃ XÂY DỰNG/MR CỦA ỨNG DỤNG**
# Truyền tham số BUILD_VERSION dưới dạng một biến môi trường REACT_APP_VERSION cho quy trình xây dựng
RUN REACT_APP_VERSION=${BUILD_VERSION} npm run build 
# Mã ứng dụng của bạn (ví dụ: scripts trong package.json) nên đảm bảo rằng biến này được nhúng.

Mã Ứng Dụng React Tương ứng (ví dụ, trong App.js hoặc một thành phần Footer):

Mã của ứng dụng React sử dụng cách tiêu chuẩn để truy cập các biến môi trường thời điểm xây dựng:

import React from 'react';

function Footer() {
  // **NHÚNG MÃ XÂY DỰNG/MR CỦA ỨNG DỤNG**
  const version = process.env.REACT_APP_VERSION || 'local-dev';

  return (
    <footer>
      Phiên bản phần mềm đang chạy: **{version}** 🚀
    </footer>
  );
}

export default Footer;

Điều này đảm bảo rằng ID Merge Request, Git SHA hoặc bất kỳ định danh phiên bản quan trọng nào được nhúng trực tiếp vào các tài sản tĩnh, dễ dàng nhìn thấy cho các nhà phát triển hoặc nhóm hỗ trợ.

Dockerfile Tối Ưu Hoàn Chỉnh hoặc Triển Khai Nhanh Là Triển Khai Nhỏ

Dưới đây là Dockerfile hoàn chỉnh, tối ưu về kích thước, với việc nhúng phiên bản:

# --------------------------------------------------------------------------------
# GIAI ĐOẠN 1: GIAO ĐIỆN
# Sử dụng một hình ảnh Node nhẹ để cài đặt các phụ thuộc và biên dịch ứng dụng React
# --------------------------------------------------------------------------------
FROM node:lts-alpine AS builder

# Định nghĩa một tham số xây dựng cho phiên bản (mặc định là 'unknown' nếu không được cung cấp)
ARG BUILD_VERSION=unknown

WORKDIR /app

# Sao chép các tệp package trước để kích hoạt bộ nhớ cache của npm install
COPY package*.json ./
RUN npm install

# Sao chép mã nguồn ứng dụng
COPY . .

# Truyền BUILD_VERSION dưới dạng một biến môi trường trong quá trình xây dựng
# Giá trị này sẽ được nhúng vào các tài sản tĩnh (ví dụ: có thể truy cập qua process.env.REACT_APP_VERSION)
# **NHÚNG MÃ XÂY DỰNG/MR CỦA ỨNG DỤNG**
RUN REACT_APP_VERSION=${BUILD_VERSION} npm run build

# --------------------------------------------------------------------------------
# GIAI ĐOẠN 2: HÌNH ẢNH SẢN XUẤT CUỐI CÙNG
# Sử dụng một hình ảnh Nginx tối giản để phục vụ các tệp tĩnh đã biên dịch
# --------------------------------------------------------------------------------
FROM nginx:alpine

# Sao chép các tệp ứng dụng React đã xây dựng từ giai đoạn 'builder'
# Bước này loại bỏ toàn bộ môi trường Node.js, giảm kích thước hơn 90%
COPY --from=builder /app/build /usr/share/nginx/html

# Mở cổng HTTP tiêu chuẩn
EXPOSE 80

# Khởi động Nginx
CMD ["nginx", "-g", "daemon off;"]

Bằng cách làm theo cách tiếp cận này, bạn sẽ chuyển từ một hình ảnh một giai đoạn lớn (thường 1 GB+) sang một hình ảnh cuối cùng nhẹ nhàng được cung cấp bởi Nginx Alpine (thường < 50 MB) – dễ dàng đạt được mục tiêu giảm kích thước 10 lần của chúng ta.

Kết luận: Gửi Đi Thông Minh, Không Nặng Nề

Chúng ta đã đề cập đến nhiều khía cạnh, từ hình ảnh cơ sở tối thiểu đến sự tuyệt vời của multi-stage builds. Bài học cuối cùng là: trong thế giới container, ít hơn là nhiều hơn, và mỗi megabyte đều quý giá.

Bằng cách áp dụng các nguyên tắc đã thảo luận – chọn một Alpine bút chì thay vì chiếc vali Debian, dọn dẹp trong một lớp, và sử dụng tệp .dockerignore như dây đai nhung cho hình ảnh của bạn – bạn không chỉ tiết kiệm không gian đĩa; bạn còn mua lại thời gian triển khai quý giá. Bạn đang trao cho pipeline CI/CD của mình một đôi giày chạy bộ mới.

Hãy nhớ câu khẩu hiệu DevOps: “Bạn xây dựng nó, bạn chạy nó.” Một hình ảnh nhẹ là một hình ảnh đáng tin cậy, và sự tin cậy là nền tảng của các hoạt động tuyệt vời. Nỗ lực bạn bỏ ra hôm nay để tối ưu hóa Dockerfile của mình là một khoản thanh toán cho nợ kỹ thuật trong tương lai.

Hành trình cải tiến liên tục này không phải là một điểm đến, mà là một quá trình không bao giờ kết thúc.

Hãy Tiếp Tục Cuộc Trò Chuyện

Bài viết này chỉ là phần nổi của tảng băng chìm. Sự tối ưu tốt nhất là sự phù hợp với ngăn xếp cụ thể của bạn.

Bạn có một hình ảnh khó khăn mà bạn vừa giảm kích thước? Tôi rất muốn nghe câu chuyện thành công “honey, I shrunk the Docker” của bạn.

Đừng để cuộc thảo luận này trở thành “ra khỏi tầm nhìn, ra khỏi tâm trí.” Hãy thoải mái liên hệ qua LinkedIn hoặc X.Com

Chúc bạn thành công với Container!