Triển khai Front-end

Trong bước này, chúng ta sẽ tạo một S3 bucket với tính năng Static website hosting được bật và có thể truy cập công khai, sử dụng AWS SAM.

Chỉnh sửa SAM Template

1. Mở tệp template.yaml trong thư mục fcj-book-shop mà chúng ta đã tạo ở phần 1.

   

2. Xóa các phần không cần thiết (phần được highlight trong hình trên), bao gồm:

   • Resources: HelloWorldFunction và các Events liên quan.
   • Outputs: Toàn bộ phần Outputs.

3. Thêm phần Parameters vào sau phần Globals để định nghĩa tên bucket:

   Parameters:
     FCAJBookShopBucketName:
       Type: String
       Default: fcj-book-shop-by-myself
   

   

4. Thêm phần Resources để tạo S3 Bucket và Bucket Policy:

   Resources:
     FCAJBookShop:
       Type: AWS::S3::Bucket
       Properties:
         BucketName: !Ref FCAJBookShopBucketName
         WebsiteConfiguration:
           IndexDocument: index.html
         PublicAccessBlockConfiguration:
           BlockPublicAcls: false
           BlockPublicPolicy: false
           IgnorePublicAcls: false
           RestrictPublicBuckets: false
   
     FCAJBookShopPolicy:
       Type: AWS::S3::BucketPolicy
       Properties:
         Bucket: !Ref FCAJBookShop
         PolicyDocument:
           Version: 2012-10-17
           Statement:
             - Action:
                 - "s3:GetObject"
               Effect: Allow
               Principal: "*"
               Resource: !Join
                 - ""
                 - - "arn:aws:s3:::"
                   - !Ref FCAJBookShop
                   - /*
   

Đoạn mã trên định nghĩa:

• FCAJBookShop: Một S3 bucket với tính năng Static Website Hosting được bật, tất cả các Public Access Block đều được tắt.
• FCAJBookShopPolicy: Một Bucket Policy cho phép mọi người (Principal: "*") có quyền đọc (s3:GetObject) tất cả các object trong bucket.

Build và Deploy với SAM

5. Chạy lệnh sam build tại thư mục của dự án SAM (fcj-book-shop) để build ứng dụng:

   sam build
   

   

6. Kiểm tra tính hợp lệ của template SAM:

   sam validate
   

   

7. Triển khai SAM với chế độ guided (hướng dẫn từng bước):

   sam deploy --guided
   

   Nhập các thông tin sau khi được yêu cầu:

   • Stack Name: fcj-book-shop
   • AWS Region: ap-southeast-1 (hoặc region bạn muốn triển khai).
   • Parameter FCAJBookShopBucketName: Giữ giá trị mặc định hoặc nhập tên bucket mong muốn.
   • Confirm changes before deploy: Y
   • Allow SAM CLI IAM role creation: Y
   • Disable rollback: N
   • Save arguments to configuration file: Y

   

8. Trong khi chờ triển khai, bạn có thể mở CloudFormation console để theo dõi tiến trình tạo stack.

   

9. Chờ quá trình tạo changeset hoàn tất. Khi được hỏi Deploy this changeset?, nhập y để xác nhận triển khai.

   

Kiểm tra kết quả trên AWS Console

10. Mở Amazon S3 console.

    • Tìm kiếm và xác nhận bucket đã được tạo thành công.
    • Nhấp vào bucket để xem chi tiết.

    

11. Tại trang chi tiết bucket:

    • Nhấp vào tab Properties để xem thông tin cấu hình.

    

12. Cuộn xuống phần Static website hosting:

    • Xác nhận trạng thái là Enabled.
    • Ghi lại Bucket website endpoint — đây là URL để truy cập website sau khi upload front-end.

    

13. Nhấp vào tab Permissions:

    • Kiểm tra Bucket policy đã được thêm tự động bởi CloudFormation.
    • Policy cho phép s3:GetObject với Principal: "*", nghĩa là mọi người đều có thể đọc các file trong bucket.

    

14. Mở CloudFormation console để kiểm tra stack:

    • Stack fcj-book-shop có trạng thái CREATE_COMPLETE.

    

15. Nhấp vào stack fcj-book-shop, chuyển sang tab Resources:

    • Xem các tài nguyên mà CloudFormation đã tạo: FCAJBookShop (S3 Bucket) và FCAJBookShopPolicy (Bucket Policy).

    

16. Nhấp vào stack aws-sam-cli-managed-default để xem các tài nguyên được SAM CLI tự động tạo:

    • SamCliSourceBucket: Bucket lưu trữ artifact khi deploy.
    • SamCliSourceBucketBucketPolicy: Policy cho bucket đó.

    

Upload Front-end lên S3

17. Tải mã nguồn fcj-serverless-frontend về thiết bị của bạn:

    git clone https://github.com/tranvix0910/FCAJ_Workshop-Serverless.git
    cd FCAJ_Workshop-Serverless
    

18. Cài đặt các dependency. Do một số package trong dự án có thể đã bị outdate, hãy sử dụng flag --force:

    npm install --force
    

    

    

19. Build ứng dụng front-end:

    npm run build
    

    Quá trình build có thể hiển thị một số warning — bạn có thể bỏ qua chúng.

    

20. Sau khi build hoàn tất, thư mục build sẽ được tạo. Upload thư mục này lên S3 bucket:

    aws s3 cp build s3://fcj-book-shop-by-myself --recursive
    

    

Kiểm tra kết quả triển khai

21. Mở Amazon S3 console, điều hướng đến bucket của bạn và kiểm tra tab Objects để xác nhận tất cả các file đã được upload thành công.

    

22. Chuyển sang tab Properties, cuộn xuống phần Static website hosting và sao chép Bucket website endpoint.

    

23. Mở URL endpoint trong trình duyệt. Bạn sẽ thấy website FCJ Book Store đã được tải thành công.