Chuẩn bị

Trước khi thực hiện nội dung chính của workshop này, chúng ta cần thiết lập lại ứng dụng web bằng AWS SAM.

Triển khai Backend (SAM)

  1. Tải xuống mã nguồn dưới đây và giải nén vào thư mục làm việc của bạn.

  2. Trước khi triển khai, hãy lấy Cognito App Client ID và Cognito App Client Secret.

    • Điều hướng đến Amazon Cognito → User pools → chọn User Pool → App clients → chọn App Client.
    • Ghi lại Client ID và Client Secret.

    Preparation

  3. Mở terminal trong thư mục mã nguồn vừa giải nén và chạy các lệnh sau.

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

sam validate
sam build
sam deploy --guided

Preparation

  1. Khi được nhắc, nhập các giá trị sau. Để mặc định cho các tùy chọn còn lại.

    • Stack Name: fcaj-book-shop
    • AWS Region: ap-southeast-1
    • Parameter FCAJBookShopBucketName: fcaj-book-shop-by-tranvix
    • Parameter cognitoClientID: (dán Client ID từ bước 2)
    • Parameter cognitoClientSecret: (dán Client Secret từ bước 2)
    • 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

    Preparation

  2. Xem lại CloudFormation changeset liệt kê tất cả tài nguyên sẽ được tạo, sau đó xác nhận triển khai.

    Preparation

  3. Chờ CloudFormation hoàn tất việc tạo tất cả tài nguyên. Quá trình triển khai hoàn tất khi trạng thái stack hiển thị CREATE_COMPLETE.

    Preparation

Build và Upload Frontend

  1. Clone repository frontend FCAJ Workshop Serverless.

    • Mở terminal trong thư mục 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. Cài đặt các dependencies của dự án.

    npm install --force

Nếu npm install (không có --force) bị lỗi do xung đột dependency như ERESOLVE overriding peer dependency, hãy sử dụng npm install --force để bắt buộc cài đặt mặc dù các package đã bị outdate.

Preparation

  1. Build ứng dụng front-end.

    npm run build

    Preparation

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

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

Thay fcaj-book-shop-by-tranvix bằng tên S3 bucket mà bạn đã tạo trong quá trình sam deploy.

Preparation

  1. Xác minh rằng tất cả file đã được tải lên thành công trong tab Objects của S3 bucket.

    Preparation

  2. Trong tab Properties của S3 bucket, cuộn xuống phần Static website hosting và sao chép URL Bucket website endpoint.

    Preparation

    Preparation

  3. Mở URL endpoint trong trình duyệt để xác nhận ứng dụng đang hoạt động đúng.

    Preparation

Chúng ta đã thiết lập 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 workshop.