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:

1. Mở bảng điều khiển Amazon S3

2. Ấn Create bucket

3. Nhập tên cho bucket, ví dụ: fcjdmswebstore

• Chọn vùng gần bạn nhất

4. Bỏ chọn chặn cho phép truy cập public

• Tích vào mục I acknowledge that the current settings might result in this bucket and the objects within becoming public

5. Ấn nút Create bucket

6. Ấn vào bucket vừa tạo

7. Ấn sang tab Properties

8. Kéo xuống cuối trang, ấn Edit của mục Static web hosting

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

• Nhập index.html cho mục Index document

10. Ấn nút Save changes

• Sau khi kích hoạt thành công, bạn hãy ghi lại đường dẫn của web

11. Sau đó, chúng ta cần thêm policy cho S3 bucket để có thể truy cập được:

• Chọn sang tab Permissions
• Ấn nút Edit tại mục Bucket policy

12. Sao chép đoạn dưới đây vào mục Policy

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

• Thay thế BUCKET_NAME bằng tên bucket mà bạn đặt, sau đó ấn nút Save changes

13. Mở tệp src/component/Home/Upload.js trong thư mục source code của ứng dụng và bỏ comment đoạn code gọi API ghi dữ liệu vào DynamoDB.

14. Tiếp theo chạy câu lệnh sau tại thư mục gốc của project bạn đã tải về từ workshop 2.

yarn build
aws s3 cp build s3://BUCKET_NAME --recursive

• Thay thế BUCKET_NAME bằng tên bucket mà bạn đặt

Kết quả sau khi tải xong:

15. Dán đường dẫn web mà bạn vừa ghi lại vào trình duyệt web của bạn

Bạn đã hoàn thành việc host website của mình trên S3. Sang phần tiếp theo chúng ta cập nhật lại các lambda function của bài workshop số 2.