Chuẩn bị

Trước khi chúng ta đi vào nội dung chính của bài workshop này, chúng ta cần phải reset ứng dụng web.

Triển khai Backend

  1. Tải xuống mã nguồn dưới đây.

  2. Giải nén mã nguồn, mở template.yaml.

    • Thay đổi giá trị tranvix.click thành tên miền của bạn.

      route53HostedZoneName:
  Type: String
  Default: tranvix.click

      Thay đổi tên miền trong template.yaml

  3. Chạy các lệnh dưới đây.

    Đảm bảo bạn đã cài đặt AWS CLI và SAM CLI trên máy của bạn, cấu hình thông tin xác thực AWS trước khi chạy các lệnh.

    sam validate
sam build

    SAM validate và build

  4. Chạy lệnh dưới đây để triển khai ứng dụng SAM.

    sam deploy --guided

  5. Nhập nội dung sau. Để mặc định.

    • Stack Name []: fcaj-book-shop

    • AWS Region []: us-east-1

    • Confirm changes before deploy [Y/n]: Y

    • Allow SAM CLI IAM role creation [Y/n]: Y

    • Disable rollback [y/N]: N

    • Save arguments to configuration file [Y/n]: Y

      Cấu hình SAM deploy guided

  6. Chờ quá trình tải lên và khởi tạo triển khai.

    SAM deploy đang khởi tạo

  7. Xem lại bộ thay đổi CloudFormation và xác nhận triển khai bằng cách nhập y.

    Bộ thay đổi CloudFormation và xác nhận triển khai

  8. Chờ CloudFormation stack hoàn thành việc tạo tất cả các tài nguyên.

    Tạo stack hoàn thành

Cấu hình DNS

  1. Thực hiện theo hướng dẫn này nếu nhà đăng ký tên miền của bạn không phải là AWS.

    Sử dụng Route 53 làm dịch vụ DNS cho một tên miền đang sử dụng

    • Sao chép các bản ghi loại NS từ vùng lưu trữ Route53 của bạn. Bản ghi NS trên Route 53
    • Dán các bản ghi NS đó vào nhà đăng ký tên miền DNS của bạn. Dán bản ghi NS vào nhà đăng ký tên miền

Triển khai CloudFront, ACM Certificate và Route 53 Record

  1. Lấy ID của cache policy Managed-CachingOptimized bằng cách chạy lệnh sau.

    aws cloudfront list-cache-policies --type managed --query "CachePolicyList.Items[].CachePolicy.{Name:CachePolicyConfig.Name, Id:Id}" --output table

    Lấy ID cache policy của CloudFront

  2. Truy cập bảng điều khiển Route 53 để lấy Hosted zone ID của bạn.

    Route 53 Hosted zone ID

  3. Mở template.yaml và thêm các tham số sau.

    • cachePolicyId: ID của cache policy Managed-CachingOptimized từ bước trước.

    • cloudFrontHostedZoneId: ID vùng lưu trữ cho các phân phối CloudFront (Z2FDTNDATAQYW2 — đây là giá trị cố định cho tất cả các phân phối CloudFront). Xem AliasTarget HostedZoneId để biết thêm chi tiết.

    • route53HostedZoneId: ID vùng lưu trữ Route 53 của bạn.

      cachePolicyId:
  Type: String
  Default: 658327ea-f89d-4fab-a63d-7e88639e58f6

cloudFrontHostedZoneId:
  Type: String
  Default: Z2FDTNDATAQYW2

route53HostedZoneId:
  Type: String
  Default: Z09366853E38V7H0WU0E6

      Thêm tham số vào template.yaml

  4. Trong cùng tệp template.yaml, bỏ chú thích các khối tài nguyên sau:

    • FCAJCertificate — tạo chứng chỉ ACM với xác thực DNS.

      Bỏ chú thích FCAJCertificate

    • FCAJCloudFrontDistribution — tạo phân phối CloudFront.

      Bỏ chú thích FCAJCloudFrontDistribution

    • FCAJRoute53RecordSet và FCAJRootRoute53RecordSet — tạo bản ghi A trên Route 53 trỏ đến phân phối CloudFront.

      Bỏ chú thích Route 53 RecordSets

  5. Chạy lại các lệnh dưới đây để build và triển khai các tài nguyên mới.

    sam validate
sam build

    SAM validate và build cho lần triển khai thứ hai

  6. Triển khai stack đã cập nhật.

Việc triển khai CloudFront Distribution có thể mất một lúc để hoàn thành, vì vậy hãy kiên nhẫn chờ đợi.

sam deploy

SAM deploy với tài nguyên CloudFront

  1. Chờ CloudFormation stack hoàn thành việc tạo Certificate, CloudFront Distribution và Route 53 Record Set.

    Cập nhật CloudFormation stack hoàn thành

  2. Kiểm tra vùng lưu trữ Route 53 đã có thêm các bản ghi (A, AAAA, CNAME).

    Vùng lưu trữ Route 53 với các bản ghi

Build & Upload Frontend

  1. Clone kho mã nguồn frontend FCAJ Workshop Serverless.

    • Mở terminal trên máy tính của bạn trong thư mục nơi bạn muốn lưu mã nguồn.
    • Chạy các lệnh sau.
    git clone https://github.com/tranvix0910/FCAJ_Workshop-Serverless.git
cd FCAJ_Workshop-Serverless

  2. Mở FCAJ_Workshop-Serverless với VSCode và chỉnh sửa.

    • Mở src/App.js và thay đổi isAdmin: true như hình dưới đây.

      Chỉnh sửa App.js đặt isAdmin thành true

  3. Truy cập bảng điều khiển API Gateway, chọn API fcaj-serverless-api, điều hướng đến Stages → staging và sao chép Invoke URL.

    API Gateway Invoke URL

  4. Mở src/config.js và cập nhật:

    • APP_API_URL: Dán Invoke URL từ bước trước.

    • DEFAULT_REGION: Đặt giá trị là us-east-1.

      Cập nhật config.js

  5. Cài đặt các gói phụ thuộc và xây dựng ứng dụng front-end.

    npm install --force
npm run build

Nếu npm install (không có --force) gặp lỗi do xung đột phụ thuộc như ERESOLVE overriding peer dependency, hãy sử dụng npm install --force để buộc cài đặt ngay cả khi một số gói đã lỗi thời.

  1. Tải thư mục build lên S3 bucket của bạn.

    aws s3 cp build s3://fcaj-book-shop-by-tranvix0910 --recursive

Thay thế fcaj-book-shop-by-tranvix0910 bằng tên S3 bucket bạn đã tạo trong bước sam deploy.

Tải thư mục build lên S3

  1. Kiểm tra tất cả các tệp đã được tải lên thành công bằng cách kiểm tra tab Objects của S3 bucket.

    Các đối tượng trong S3 bucket

  2. Mở URL tên miền của bạn (ví dụ: https://tranvix.click) trong trình duyệt để xác nhận ứng dụng đang chạy chính xác.

    Ứng dụng FCAJ Book Store đang chạy

Vậy là chúng ta đã xây dựng lại và triển khai thành công ứng dụng web. Bây giờ chúng ta đã sẵn sàng để tiếp tục với nội dung chính của bài workshop.