Triển khai front-end

Bước đầu trong bài này, chúng ta sẽ host ứng dụng web (front-end) với S3 Static website hosting.

Tạo S3 Bucket

  1. Mở bảng điều khiển Amazon S3, nhấn Create bucket S3Console

  2. Nhập tên cho bucket, ví dụ: fcj-book-shop-tranvix

    • Chọn AWS Region gần bạn nhất (ví dụ: Asia Pacific (Singapore) ap-southeast-1)
    • Chọn General purpose cho Bucket type S3CreateBucket

  3. Bỏ chọn chặn cho phép truy cập public tại mục Block Public Access settings for this bucket

    • Bỏ chọn Block all public access
    • Tích vào mục I acknowledge that the current settings might result in this bucket and the objects within becoming public S3PublicAccess

  4. Giữ nguyên các cài đặt mặc định ở phần Default encryption, sau đó nhấn nút Create bucket S3CreateButton

  5. Ấn vào bucket vừa tạo, nhấn vào tab Properties S3Properties

  6. Kéo xuống cuối trang đến mục Static website hosting, ấn Edit S3StaticHosting

  7. Chọn Enable để kích hoạt host web tĩnh trên S3

    • Chọn Host a static website cho Hosting type
    • Nhập index.html cho mục Index document S3EnableHosting

  8. Ấn nút Save changes S3SaveStaticHosting

  9. Sau khi kích hoạt thành công, bạn hãy ghi lại Bucket website endpoint (đường dẫn của web) S3Endpoint

  10. Chọn sang tab Permissions, kéo xuống mục Bucket policy, ấn nút Edit S3Permissions

  11. Sao chép đoạn JSON dưới đây vào mục Policy (thay thế fcj-book-shop-tranvix thành tên bucket của bạn)

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::fcj-book-shop-tranvix/*"
        }
    ]
}

Nhớ đổi fcj-book-shop-tranvix trong đoạn JSON trên thành tên S3 bucket bạn vừa tạo ở bước 2.

S3PolicyJSON

  1. Ấn nút Save changes S3PolicySave

  2. Bucket policy đã được cập nhật thành công S3PolicySuccess

Tạo S3 Bucket Lưu Trữ Hình Ảnh

  1. Tạo thêm 2 S3 bucket để lưu trữ ảnh sách:
    • book-image-stores-tranvix: Lưu trữ hình ảnh gốc
    • book-image-resize-stores-tranvix: Lưu trữ hình ảnh đã thay đổi kích thước

Triển khai code Front-end

  1. Tải code fcj-serverless-frontend về máy của bạn:
    • Mở command-line/terminal trên máy bạn tại thư mục bạn muốn lưu source code
    • Sao chép câu lệnh dưới đây:
git clone https://github.com/tranvix0910/FCAJ_Workshop-Serverless.git
cd FCAJ_Workshop-Serverless
npm install --force
npm run build

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.

  1. Chúng ta đã build xong front-end. Tiếp theo thực hiện câu lệnh sau để tải thư mục build lên S3:
aws s3 cp build s3://fcj-book-shop-tranvix --recursive

Nếu bạn tải lên thất bại, hãy cấu hình access key ID, secret access key, aws region và output format với câu lệnh aws configure

  1. Kiểm tra S3 bucket để xác minh các tệp đã được tải lên S3Upload

  2. Nhấn vào tab Objects để xem các file đã được upload lên S3Objects

  3. Dán Bucket website endpoint mà bạn vừa ghi lại vào trình duyệt web của bạn WebsiteResult

Ứng dụng của bạn hiện tại chưa có dữ liệu nào được trả về. Để lấy dữ liệu từ DynamoDB, hãy sang phần tiếp theo.