Trước tiên tạo một trang web tĩnh và tìm hiểu cách nó hoạt động trong Docker container bằng cách sử dụng nginx.

Tạo một trang đơn giản

Đầu tiên, mình tạo một thư mục được gọi static-site-nginx và trong thư mục đó mình tạo một tệp index.html, styles.css và tệp index.js.

mkdir static-site-nginx
cd static-site-nginx
touch index.html styles.css index.js

Tiếp theo, đưa nội dung sau vào mỗi tệp.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Static Site</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <h1>My counter app</h1>
    <p>Here's the count: <span>0</span></p>
    <button>Click me</button>
    <script src="./index.js"></script>
  </body>
</html>

styles.css

h1 {
  font-family: sans-serif;
  color: blue;
}

index.js

const count = document.querySelector('span');
const button = document.querySelector('button');
button.addEventListener('click', function () {
  count.textContent = parseInt(count.textContent) + 1;
});

Khởi chạy ứng dụng (Không có Docker)

Để thử nghiệm xem ứng dụng có hoạt động, mình sử dụng serve gói npm làm máy chủ cục bộ.

Sau khi chạy ứng dụng, màn hiển thị ứng dụng trên trình duyệt sẽ như sau:

Nếu ứng dụng của bạn hoạt động như trên, tiếp theo bạn cần phải chạy với Docker.

Tệp bắt buộc

Để chạy một trang web tĩnh với Docker, trong resource của mình bắt buộc phải có tệp Dockerfile.

touch Dockerfile

Trong ứng dụng phức tạp hơn, có thể cần các tệp khác (ví dụ: tệp .dockerignore), nhưng với dự án đơn giản thì mình chỉ cần với Dockerfile.

Xây dựng Dockerfile

Trong Dockerfile mình sẽ cần khởi chạy với nginx, sao chép các nội dung tĩnh và chỉ định cho vùng chứa container.

Nginx images
Xóa mọi nội dung tĩnh mặc định khỏi nginx images
Sao chép các nội dung tĩnh của mình qua
Chỉ định cho vùng chứa container để chạy nginx

Dockerfile:

# nginx state for serving content
FROM nginx:alpine
# Set working directory to nginx asset directory
WORKDIR /usr/share/nginx/html
# Remove default nginx static assets
RUN rm -rf ./*
# Copy static assets over
COPY ./* ./
# Containers run nginx with global directives and daemon off
ENTRYPOINT ["nginx", "-g", "daemon off;"]

Bây giờ mình đã tập hợp Dockerfile của mình,xây dựng một images có tên static-nginx:

docker build -t static-nginx .

Bây giờ images của mình đã được tạo, mình có thể bắt đầu một vùng chứa container bằng lệnh sau, lệnh này sẽ phục vụ ứng dụng của mình trên cổng 8080.

docker run --rm -it -p 8080:80 static-nginx

Điều hướng đến localhost:8080 và bây giờ bạn sẽ thấy ứng dụng của mình đang chạy!

Tạo Static App Serve với Nginx trên Docker