Hướng Dẫn Triển Khai và Tối Ưu Hóa Ứng Dụng Web với AWS CloudFront

Tổng quan

Trong bài lab này, chúng ta sẽ triển khai một ứng dụng web sử dụng Amazon S3 làm nơi lưu trữ nội dung tĩnh, tích hợp với CloudFront để phân phối nội dung nhanh hơn và hỗ trợ các Origins (origins) như API Gateway và MediaPackage cho video streaming. Bài lab sẽ hướng dẫn từng bước từ chuẩn bị tài nguyên, tạo CloudFront Distribution, cấu hình các Origins, đến kiểm tra hiệu suất và dọn dẹp tài nguyên.

Giới thiệu Amazon CloudFront

Amazon CloudFront là dịch vụ CDN (Content Delivery Network) giúp tăng tốc phân phối nội dung web như HTML, CSS, JavaScript, hình ảnh, và video đến người dùng trên toàn cầu. CloudFront sử dụng mạng lưới các điểm biên (Edge Locations) để lưu trữ nội dung gần người dùng hơn, giảm độ trễ và cải thiện hiệu suất.

Một số tính năng chính của CloudFront:

Hỗ trợ các Origins (S3, API Gateway, MediaPackage, EC2, v.v.).
Tích hợp với AWS WAF để bảo vệ ứng dụng web.
Cung cấp tính năng nén nội dung và lưu trữ đệm (caching) để tối ưu hiệu suất.
Cho phép cấu hình linh hoạt thông qua giao diện AWS Console hoặc CloudFormation.

Lab Introduction

AWS Experience: Intermediate
Time to Complete: 45 minutes
AWS Region: US East (N. Virginia) us-east-1
Cost to Complete: Free Tier eligible (các tài nguyên trong bài lab đều nằm trong giới hạn Free Tier nếu sử dụng đúng cách)
Services Used: Amazon S3, AWS CloudFormation, Amazon CloudFront, API Gateway, MediaPackage

Architecture Diagram

Dưới đây là kiến trúc tổng quan của ứng dụng sau khi hoàn thành triển khai:

S3 Bucket: Lưu trữ nội dung tĩnh (HTML, CSS, JS).
CloudFront Distribution: Phân phối nội dung từ S3, API Gateway, và MediaPackage.
API Gateway: Cung cấp API cho các chức năng động.
MediaPackage: Xử lý streaming video.

Prerequisites

Trước khi bắt đầu, bạn cần:

Một tài khoản AWS.
Đã cài đặt AWS CLI và cấu hình quyền truy cập (AWS Access Key và Secret Access Key).
Một trình duyệt web (Chrome, Firefox, v.v.) để kiểm tra ứng dụng.
Công cụ curl.

Task Details

1. Lấy tài nguyên dự án

Tải file ZIP từ link sau: https://codeload.github.com/cloud-mentor-pro/lab-resource/zip/refs/heads/main
Giải nén file ZIP và điều hướng đến thư mục:
```
cd aws-soa/cloudfront-lab/01.Prepair/
```

2. Chạy script khởi tạo bucket

Đối với Linux, macOS hoặc WSL trên Windows, cấp quyền thực thi cho script:
```
chmod +x prepare.sh
```
Chạy script với một chuỗi ngẫu nhiên (ví dụ: soa202507):
```
./prepare.sh soa202507
```
- Script sẽ:
- Triển khai một CloudFormation stack có tên soa-s3-cloudfront-lab.
- Tạo một S3 bucket có tên soa-s3-bucket-cloudfront-lab-soa202507.
- Tạo một IAM role soa-iam-role-cloudformation-section7-lab với các quyền cần thiết.
- Upload các tài nguyên cần thiết vào bucket.
- Lưu ý: Vì chuỗi ngẫu nhiên sẽ là thành phần để tạo buket name nên trong trường hợp lỗi thì hãy chọn chuỗi ngẫu nhiên khác sao cho tên bucket tránh bị trùng lặp nhé.
Sau khi triển khai thành công, xác nhận các tài nguyên sau đã được tạo:
- IAM Role: soa-iam-role-cloudformation-section7-lab
- S3 Bucket: soa-s3-bucket-cloudfront-lab-soa202507
- Nội dung trong bucket (các file HTML, CSS, JS).
- Bucket đã tắt Block Public Access. (chỉ cần kiểm tra)

3. Triển khai Infra & App

Triển khai file infra.yaml từ source code đã tải về:
- Truy cập AWS CloudFormation Console.
- Tạo stack mới với tên soa-cloudformatiom-lab-cloudfront.
- Upload file infra.yaml và triển khai.
- Variable nhập là soa-s3-bucket-cloudfront-lab-soa202507
- Role chọn là soa-iam-role-cloudformation-section7-lab
Sau khi triển khai thành công, kiến trúc ứng dụng sẽ như sau:
- Hình trên được tạo nhờ tool Infrastructure Composer của aws. Mình sử dụng để trực quan hóa kiến trúc nền của file cloudformation: Link tham khảo: infrastructure-composer AWS docs

4. Kiểm tra ứng dụng web

Truy cập tab Outputs của stack soa-cloudformatiom-lab-cloudfront trong CloudFormation Console và ghi lại các giá trị:
- apiOriginEndpoint
- originBucket
- s3WebsiteDomain
- videoOriginDomain
Mở trình duyệt và truy cập URL của s3WebsiteDomain. Kết quả mong đợi: Ứng dụng web hiển thị giao diện chính.

5. Tạo CloudFront Distribution

Truy cập CloudFront Console và chọn Create distribution. Distribution name sẽ là soa-cloudfront-db
Trong phần Origin settings:
- Chọn S3 bucket được tạo bởi CloudFormation (tên tương tự: soa-cloudformatiom-lab-cloudfront-originbucket-<random-string>.s3.us-east-1.amazonaws.com).
- Chọn origin là Amazon S3.
- Giữ nguyên các thiết lập mặc định khác.
Trong phần Web Application Firewall (WAF), chọn Do not enable security protections.
Nhấn Create distribution. Trang chi tiết của CloudFront Distribution sẽ hiển thị.

6. Kiểm tra CloudFront Distribution

Sao chép Domain name của CloudFront Distribution (ví dụ: `https://d2ce29n0yy95t8.cloudfront.net).
Mở trình duyệt và truy cập domain name. Trang web mẫu sẽ hiển thị.
Các trang con như API có thể không hiển thị dữ liệu. Chúng ta sẽ khắc phục ở bước tiếp theo.

7. Thêm API Origin

Lấy URL của API Gateway từ Outputs của stack CloudFormation (apiOriginEndpoint).
Trong CloudFront Console, mở Distribution đã tạo, chọn tab Origins.
Nhấn Create origin:
- Nhập domain name của apiOriginEndpoint (chỉ nhập phần như https://fhgyp7wlpk.execute-api.us-east-1.amazonaws.com/api/).
- Chọn Protocol là HTTPS Only.
- Đặt tên origin là apiOrigin.
- Nhấn Create origin.

8. Thêm Video Origin

Lấy URL streaming video từ Outputs của stack CloudFormation (videoOriginDomain).
Trong tab Origins, nhấn Create origin:
- Nhập domain name của videoOriginDomain (chỉ nhập phần như https://b4d1beeb1330ff2fd68001cff6240ad2.egress.mediapackage-vod.us-east-1.amazonaws.com)..)
- Chọn Protocol là HTTPS Only.
- Đặt tên origin là videoOrigin.
- Nhấn Create origin.

9. Định tuyến yêu cầu đến các Origins

Trong tab Behaviors, nhấn Create behavior:
- Đặt Path pattern là /api/*.
- Chọn apiOrigin làm Origin and origin group.
- Chọn Allowed HTTP methods: GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE.
- Chọn Cache policy là CachingDisabled.
- Chọn Origin request policy là AllViewerExceptHostHeader.
- Nhấn Create behavior.
Tạo thêm behavior cho video:
- Nhấn Create behavior.
- Đặt Path pattern là /out/*.
- Chọn videoOrigin làm Origin and origin group.
- Chọn Cache policy là CachingOptimized.
- Nhấn Create behavior.
Đảm bảo các behavior mới nằm trên Default (*) Behavior.
Trong tab General, kiểm tra trạng thái Last modified là Deploying.

10. Kiểm tra các Origins

Sau khi Distribution được triển khai, truy cập lại domain CloudFront (https://d2ce29n0yy95t8.cloudfront.net).
Kiểm tra menu API: Dữ liệu API sẽ hiển thị.
Kiểm tra menu Media: Video sẽ phát sau khi tải trang.

11. Chuẩn bị cho So sánh hiệu suất giữa S3 và CloudFront:

Lấy url s3 domain:

12. Kiểm tra thời gian tải trung bình từ S3 (`s3WebsiteDomain`):

Câu lệnh thực thi:

macOS/Linux:

for i in 'seq 1 10'; do echo $i; curl -s -o /dev/null --write-out "size_download: %{size_download} // time_total: %{time_total} // time_starttransfer: %{time_starttransfer}n" http://[s3WebsiteDomain]/test/download.test; done;

Windows:

for /L %i in (1,1,10) do @echo %i && curl -s -o NUL --write-out "size_download: %{size_download} // time_total: %{time_total} // time_starttransfer: %{time_starttransfer}n" http://[s3WebsiteDomain]/test/download.test

Thay thế [s3WebsiteDomain] bằng domain của bản thân.

Trường hợp của mình :

for i in 'seq 1 10'; do echo $i; curl -s -o /dev/null --write-out "size_download: %{size_download} // time_total: %{time_total} // time_starttransfer: %{time_starttransfer}n" [http://soa-cloudformatiom-lab-cloudfront-originbucket-botyoe70vr93.s3-website-us-east-1.amazonaws.com/test/download.test](http://soa-cloudformatiom-lab-cloudfront-originbucket-botyoe70vr93.s3-website-us-east-1.amazonaws.com/test/download.test); done;

Kết quả:
- Tốc độ load khoảng 1.7 giây

13. Kiểm tra thời gian tải trung bình từ CloudFront (`CloudFront endpoint`):