🚀 Triển Khai Ứng Dụng Gallery với Docker, Jenkins và EC2

Giới Thiệu

Trong bài viết này, chúng ta sẽ cùng nhau khám phá hành trình xây dựng, đóng gói, quét và triển khai ứng dụng Gallery sử dụng React và Firebase, với sự hỗ trợ của Docker, Jenkins CI/CD và AWS EC2. Chúng ta sẽ đi từ những bước cơ bản nhất cho đến khi ứng dụng hoàn tất và có thể chạy trên máy chủ.

Mục tiêu của hướng dẫn này là giúp ngay cả những ai mới làm quen với DevOps hoặc triển khai đám mây cũng có thể thực hiện theo từng bước và hiểu được tầm quan trọng của từng phần.

📸 Về Dự Án

Đây là một ứng dụng Gallery đơn giản được xây dựng bằng:

• React (frontend)
• Firebase (xác thực + lưu trữ)
• TailwindCSS (thiết kế)

Ứng dụng cho phép bạn:

• Tải lên và tải xuống hình ảnh
• Đăng nhập/đăng xuất một cách an toàn
• Quản lý gallery cá nhân của bạn

Mặc dù ứng dụng khá đơn giản, nhưng sức mạnh thực sự nằm ở cách chúng ta triển khai nó. Chúng ta sẽ áp dụng các phương pháp DevOps hiện đại để đảm bảo ứng dụng có thể được vận chuyển một cách nhanh chóng, an toàn và đáng tin cậy.

⚡ Bước 1: Chạy Ứng Dụng Locally

Trước khi nghĩ đến Docker hay Jenkins, bạn nên xác nhận rằng ứng dụng có thể chạy trên máy tính của bạn.

1. Clone repo:

git clone https://github.com/your-username/gallery-app.git
cd gallery-app

2. Cài đặt dependencies:

npm install

3. Khởi động server phát triển:

npm run dev

Mặc định, ứng dụng có sẵn tại:
http://localhost:5173

4. Để tạo bản build sản xuất:

npm run build

Điều này sẽ tạo ra một thư mục dist/ chứa các tài sản tĩnh được tối ưu hóa.

🐳 Bước 2: Đóng Gói với Docker

Thay vì xây dựng và phục vụ các tệp một cách thủ công, hãy sử dụng Docker. Docker giúp chúng ta vận chuyển ứng dụng đến bất kỳ đâu mà không lo về sự khác biệt của môi trường.

# Giai đoạn 1: Xây dựng ứng dụng
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Giai đoạn 2: Phục vụ bằng Nginx
FROM nginx:alpine
RUN rm -rf /usr/share/nginx/html/*
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

👉 Tại sao lại sử dụng multi-stage?

• Giai đoạn đầu tiên (node:18-alpine) xây dựng ứng dụng React.
• Giai đoạn thứ hai (nginx:alpine) chỉ phục vụ các tệp tĩnh đã được tối ưu hóa.
• Điều này giúp giữ cho hình ảnh cuối cùng nhẹ và sẵn sàng cho sản xuất.

Để xây dựng và chạy:

docker build -t gallery-app:latest .
docker run -d -p 80:80 --name gallery-app-cont gallery-app:latest

Bây giờ, mở http://localhost và ứng dụng của bạn đã sẵn sàng 🎉

⚙️ Bước 3: Tự Động Hóa với Jenkins

Các bản build thủ công là tốt cho việc thử nghiệm, nhưng trong các dự án thực tế, chúng ta sử dụng pipeline CI/CD để tự động hóa mọi thứ.

Chúng ta sẽ sử dụng Jenkins trên EC2 để:

• Clone mã nguồn
• Xây dựng hình ảnh Docker
• Quét hình ảnh với Trivy (quét bảo mật)
• Đẩy lên DockerHub
• Triển khai container trên EC2
  👉 Một Jenkinsfile đã có sẵn trong kho. Đảm bảo xem xét nó để biết định nghĩa đầy đủ của pipeline.

🔒 Bước 4: Quét Bảo Mật với Trivy

An toàn là rất quan trọng. Đó là lý do tại sao trước khi đẩy hình ảnh của chúng ta lên DockerHub, chúng ta cần kiểm tra xem Trivy đã được cài đặt và cập nhật chưa:

trivy image gallery-app:latest

Điều này sẽ kiểm tra các lỗ hổng trong các hình ảnh cơ sở (node:18-alpine, nginx:alpine) và các dependencies.

📤 Bước 5: Đẩy lên DockerHub

Khi hình ảnh đã được quét, pipeline sẽ đẩy nó lên DockerHub. Nếu có điều gì đó thất bại trong pipeline, bạn cũng có thể đẩy thủ công:

docker tag gallery-app:latest your-dockerhub-username/gallery-app:latest
docker push your-dockerhub-username/gallery-app:latest

🌍 Bước 6: Triển Khai trên EC2

Cuối cùng, chúng ta triển khai trên máy chủ EC2 của mình. Nếu pipeline thành công, điều này sẽ tự động. Nếu không, bạn cũng có thể làm điều đó một cách thủ công:

docker pull your-dockerhub-username/gallery-app:latest
docker run -d -p 80:80 --name gallery-app-cont your-dockerhub-username/gallery-app:latest

Bây giờ, hãy truy cập địa chỉ IP công cộng của EC2 trên trình duyệt và ứng dụng Gallery của bạn đã sẵn sàng..... 🚀

✅ Quy Trình Tổng Thể

• Chạy ứng dụng local (npm run dev)
• Xây dựng và phục vụ với Docker
• Pipeline Jenkins tự động hóa quá trình xây dựng → quét → đẩy → triển khai
• Ứng dụng chạy trên EC2, có thể truy cập qua cổng 80

🤝 Đóng Góp

Nếu bạn thích dự án này:

• ⭐ Đánh dấu repo
• 🍴 Fork và thử nghiệm
• 🛠️ Đóng góp qua pull requests

Cảm ơn bạn đã hỗ trợ dự án này 💙

🔗 Theo Dõi Tôi Để Nhận Nhiều Nội Dung Hơn

LinkedIn
GitHub

🔥 Với cấu hình này, bạn không chỉ xây dựng một ứng dụng Gallery thú vị mà còn học được cách áp dụng các thực hành DevOps (CI/CD, Docker, Quét, Triển khai) để làm cho ứng dụng của bạn sẵn sàng cho sản xuất.