Tạo trang web tĩnh với Amazon S3 và Amazon Cloudfront

Trong bài trước mình đã có nói về hai dịch vụ của Amazon là S3 bucket và Cloudfront. Ở bài viết này, mình sẽ viết cụ thể hơn để các bạn có thể tự tay public một website tĩnh cơ bản và nhanh nhất.

Thông thường khi làm một Website, ngoài code ra chúng ta còn cần quan tâm đến hosting và domain name.

Nhìn hình minh họa trên, ta có thể tưởng tượng rõ các thành phần đó, khi website là một ngôi nhà, thì web hosting là mảnh đất để xây nhà, domain name là địa chỉ để tìm thấy ngôi nhà đó, và internet là con đường, đường truyền để giúp chúng ta đi và tìm đến địa chỉ.

Chi phí để làm hosting và domain name giao động trong khoảng 50-70$ cho một gói cơ bản trong một năm, và quản lý nó cũng mất thời gian. Vì vậy với một trang web tĩnh, hay với những người mới bắt đầu làm quen với làm web hay AWS ( với tài khoản miễn phí 1 năm ), thì luyện tập với S3 bucket và cloudfront là một ý tưởng tuyệt vời.

Upload và quản lý dữ liệu trên S3 bucket

Hãy chuẩn bị 1 web tĩnh trước khi thực hiện thử demo này, hoặc tạo nhanh 1 trang web tĩnh đơn giản với html và css.

Bước 1 : Create Bucket

Vào console S3 trong AWS, chọn create bucket để tạo 1 bucket mới. Điền tên bucket (Tên Bucket phải là unique )và lựa chọn region.

Bước 2 : Cài đặt properties

Chúng ta đang cài đặt hosting cho 1 web tĩnh, vì vậy hãy lựa chọn Static Website hosting.

Trong mục Static Website Hosting, ghi địa chỉ 2 page : page trang chủ (index.html hoặc bất kỳ page nào mà bạn đặt làm trang chủ) và page khi gặp lỗi (errol.html – optional), sau đó chọn Save.

Sau khi lưu ta sẽ có một đường dẫn tĩnh, đó sẽ là đường dẫn cho website của bạn. Tuy nhiên nếu click vào đường dẫn lúc này thì sẽ hiển thị lỗi 403 vì chúng ta chưa cài đặt dẫn web tĩnh này đến S3 bucket vừa tạo.

Bước 3 : Chỉnh sửa permission

3.1 Chỉnh sửa Block Public Access

Khi bắt đầu vào mục permission, AWS đang để mặc định là block toàn bộ các public access, chúng ta sẽ untick mục này để mở các public access lên.

3.2 Chỉnh sửa Bucket Policy

Chỉnh sửa Bucket Policy theo như hình trên : chỉnh sửa tên Bucket mà bạn đã đặt vào khu vực Resource.

Lúc này khi vào lại link web tĩnh mà ta vào lúc nãy, trang đã dẫn đến bucket rồi nhưng vẫn sẽ hiện lên lỗi 404 vì chúng ta chưa upload website lên S3.

Bước 4 : Upload website

Chọn Overview, click vào upload và kéo các file trong folder trang web của bạn lên.

Sau khi upload, chúng ta sẽ để mục set permission như mặc định, tuy nhiên đến bước Set properties thì chỉnh sửa Value của Header như trên. Tiếp theo chọn Next và hoàn thành.

Đến đây chúng ta đã hoàn thành upload và hosting web tĩnh qua Amazon S3. Load lại link đã tạo ở trên sẽ hiển thị lên trang web đã upload.

Dùng Amazon Cloudfront làm CDN cho web tĩnh

Amazon S3 là một trong những web services nổi tiếng của Amazon, nơi để lưu trữ data như hình ảnh, video, thư mục… cần thiết cho một website. Sử dụng S3 khiến mọi thứ trở nên dễ dàng hơn nhiều, ta không cần bận tâm đến dung lượng lưu trữ vì tính chất auto scaling, hơn nữa bản chất của nó là serverless service nên chúng ta chỉ cẩn quan tâm đến việc đẩy data lên, và lấy xuống bất cứ lúc nào cần mà thôi.

Mặc dù Amazon S3 đem lại khá nhiều lợi ích với vai trò data storage, nhưng để tối ưu hóa performance và bảo mật với chi phí phù hợp thì chúng ta vẫn nên sử dụng S3 song song với Amazon CloudFront.

Amazon Cloudfront là mạng CDN phân phối nội dung tĩnh và streaming toàn cầu của Amazon. Khi bạn sử dụng CDN sẽ giúp cho khách truy cập nhanh vào dữ liệu máy chủ web gần họ nhất thay vì phải truy cập vào trung tâm dữ liệu của nhà cung cấp hosting bạn đang dùng.

Hiện tại Amazon Cloudfront đang có các POP ở US, EU, Hong Kong, Philippines, S. Korea, Singapore & Taiwan, Japan, South America, Australia, India nên khi sử dụng chắc chắn tốc độ website của bạn sẽ được tăng lên một cách đáng kể từ Việt Nam.

Khi vào link web mà bạn đã hosting thông qua S3 ở trên, thời gian truy cập đến trang web rất lâu (mất đến vài phút), tuy nhiên nếu sử dụng Amazon Cloudfront sẽ giúp giải quyết vấn đề này.

Cách thức hoạt động của Amazon Cloudfront được mô tả như hình dưới:

Chi phí sử dụng Cloudfront rất rẻ, bạn chỉ phải trả phí cho những gì sử dụng mà thôi. Lưu ý Cloudfront sử dụng Amazon S3 để lưu trữ dữ liệu nên trong hóa đơn hàng tháng bạn sẽ thấy xuất hiện thêm khoản này nữa.

Mình đã có chia sẻ về Amazon Cloudfront ở bài trước, bạn có thể tìm hiểu thêm nếu muốn.

Bước 1 : Truy cập vào dịch vụ Amazon Cloudfront trên console, chọn Create Distribution

Chọn delivery method là Web.

Bước 2 : Cài đặt distribution

Sau khi chọn xong delivery method, chúng ta sẽ cài đặt cho distribution của mình.
Điền vào Origin Domain link mà chúng ta đã tạo ở S3 bucket, Origin Id là tên bucket.
Các tác vụ còn lại để như mặc định như trong hình và chọn create distribution.

Nếu không có lỗi gì bạn sẽ quay trở lại màn hình CloudFront Management Console và sẽ thấy CDN của mình đang được tạo (mất khoảng tối đa là 15 phút ). Khi nào cột Status báo Deployed thì CDN đã sẵn sàng hoạt động rồi đó.

Khi lựa chọn truy cập web bằng link này, tốc độ tải sẽ rất nhanh, chỉ mất vài giây, độ trễ rất thấp. Và lúc này khi truy cập lại link web mà chúng ta đã tạo ở S3 bucket thì cũng không thể truy cập được nữa.

Nếu bạn là một DevOps Engineer, ưa thích làm sản phẩm quốc tế trong lĩnh vực bán lẻ - thương mại điện tử! Tham gia Tuyển dụng DevOps Engineer, môi trường làm việc từ xa, địa điểm tự do, quản lý linh hoạt theo Agile