Bài 8. Build docker image cho Web tĩnh

Giới thiệu

Web tĩnh đơn giản chỉ là tập hợp của các tệp tin HTML, CSS, JavaScript, người dùng sẽ truy cập vào tệp tin HTML để thu về trang web với nội dung được viết sẵn trong đó. Hiện nay các ứng dụng Web App Frontend sẽ được xây dựng và tạo ra web tĩnh, ngoại trừ việc trong web tĩnh này có các thành phần tương tác tốt hơn so với web tĩnh truyền thống chỉ hiển thị thông tin.

Trong bài viết này, chúng ta sẽ tạo ra Docker Image cho một web tĩnh.

Chuẩn bị

• Clone source code về máy: https://github.com/gbaeke/static-web
• Test source code, truy cập vào source code và ở tệp tin index.html bằng trình duyệt
• Máy đã cài đặt Docker

Xây dựng Image

Bước 1. Viết Dockerfile

Tạo tệp tin Dockerfile trong source code có nội dung sau:

FROM nginx:1.24.0-alpine

# Nginx phục vụ các tệp tin html và source code web tĩnh  trong thư mục /usr/share/nginx/html
# Copy source code vào thư mục /usr/share/nginx/html
COPY . /usr/share/nginx/html

# Khai báo cổng của web tĩnh trên nginx là 80 trong image, cổng mặc định khi nginx hoạt động
EXPOSE 80

# Lệnh chạy nginx
ENTRYPOINT ["nginx", "-g", "daemon off;"]

Bước 2. Build Image từ Dockerfile

Chạy lệnh sau để build image cho web tĩnh:

• Từ tệp tin Dockerfile
• Image: slick:v1

docker build -t slick:v1 -f Dockerfile .

• -t slick:v1 : chúng ta khai báo tên và tag cho image được tạo ra là slick:v1
• -f Dockerfile : chúng ta chỉ định rõ tệp tin Dockerfile sử dụng cho quá trình build image
• . Là thư mục hiện tại, là build context, để quá trình build image có thể sao chép thư mục hoặc tệp tin vào trong image.

Bước 3: Kiểm tra image

Liệt kê các image có trong Docker host:

docker images
# docker images | grep slick

Bạn sẽ thấy có image với tên là slick và tag v1

Bước 4: Push image lên Docker Hub

Để đưa image lên Docker Hub, chúng ta cần có sẵn account, và ghi nhớ tên của tài khoản này

Các image để lưu trữ được trên Docker Hub sẽ có dạng <username>/<image_name>:<image_tag> (1).

Ví dụ với user là dothiengiang0001, image là slick:v1 => dothiengiang0001/slick:v1

Trong Docker, có một cú pháp để chúng ta tạo mới một image từ một image có sẵn: docker tag <image_source> <image_dest>

Chúng ta sẽ tạo image có dạng (1) từ image slick:v1

docker tag slick:v1 <username>/slick:v1
# ví dụ
# docker tag slick:v1 dothiengiang0001/slick:v1

Sau khi đã chạy câu lệnh tag, kiểm tra images mới đã tạo:

docker image ls

Tiếp tục, nếu chưa login vào Docker Hub, chúng ta sẽ login với Docker Hub bằng lệnh, hoặc bạn có thể sử dụng Docker Desktop để login.

# Lệnh login bằng docker cli
docker login
# Nếu chưa đăng nhập trước đó, bạn sẽ được yêu cầu nhập vào tài khoản, mật khẩu(giống với thông tin đăng nhập cho docker hub).

Bước áp chót, chúng ta thực hiện lệnh push để đẩy image:

# cú pháp
docker push <username>/<image_name>:<image_tag>
# ví dụ
# docker push dothiengiang0001/slick:v1

Thực thi tạo container từ image

Yêu cầu:

• Đưa container xuống chạy ngầm
• Đặt tên cho container là slick-static
• Tạo cổng kết nối thông từ 8866 trên host vào cổng 80 bên trong container(ứng dụng nginx trong image đã khai báo)
• Image chúng ta đã tạo ở bước trước slick:v1

Tạo container từ image ở bước trước:

docker run -itd --name slick-static -p 8866:80 slick:v1

Và test thành quả với lệnh curl localhost:8866 hoặc thực hiện port forwarding trên virtual box để hiển thị kết quả trên trình duyệt trên trình duyệt.

Thực thi container trên browser window

Trên Virtualbox -> Settings -> Network và thiết lập như hình:

Lưu lại và khởi động lại VirutalBox.

Ở đây chúng ta thực thi  trên http://127.0.0.120:8866/ và xem kết quả:
 

Kết luận

- Trong bài viết này, chúng ta đã đi qua quy trình chi tiết để xây dựng và triển khai một web tĩnh đơn giản sử dụng Docker. Các bước từ chuẩn bị mã nguồn, viết Dockerfile, xây dựng image, kiểm tra image, đẩy image lên Docker Hub, và cuối cùng là chạy container từ image đã tạo đều được thực hiện một cách tuần tự và rõ ràng. Với việc sử dụng Docker, chúng ta không chỉ đảm bảo tính nhất quán trong môi trường triển khai mà còn tăng cường khả năng mở rộng và quản lý ứng dụng dễ dàng hơn.

- Việc tạo và chạy một container cho một web tĩnh như trên cũng là một ví dụ minh họa cho cách sử dụng Docker để triển khai các ứng dụng web khác. Các bước này có thể được tùy chỉnh và mở rộng cho các dự án phức tạp hơn. Docker đã chứng tỏ mình là một công cụ mạnh mẽ và linh hoạt, hỗ trợ tốt cho quá trình phát triển và triển khai ứng dụng hiện đại. Hy vọng qua bài viết này, bạn đã nắm vững hơn cách sử dụng Docker để quản lý và triển khai các ứng dụng web tĩnh của mình.

Tác giả: Đỗ Thiên Giang

Chú ý: Tất cả các bài viết trên TEDU.COM.VN đều thuộc bản quyền TEDU, yêu cầu dẫn nguồn khi trích lại trên website khác.