Dự án trên AWS:

Xây dựng ứng dụng web serverless

với AWS Lambda, Amazon API Gateway, Amazon S3, Amazon DynamoDB và Amazon Cognito

Giới thiệu

Lưu trữ trang web tĩnh

Quản lý người dùng

Dựng backend serverless

Triển khai API RESTful

Chấm dứt các tài nguyên

Mô-đun 1. Lưu trữ web tĩnh

Trong mô-đun này, bạn sẽ đặt cấu hình cho Amazon Simple Storage Service (S3) để lưu trữ các tài nguyên tĩnh cho ứng dụng web của mình. Trong các mô-đun tiếp theo, bạn sẽ thêm chức năng động vào những trang này bằng cách sử dụng JavaScript để gọi API RESTful từ xa được dựng bằng AWS Lambda và Amazon API Gateway.

Tổng quan về kiến trúc

Kiến trúc của mô-đun này rất đơn giản. Tất cả nội dung web tĩnh của bạn bao gồm HTML, CSS, JavaScript, hình ảnh và các tệp khác sẽ được lưu trữ trong Amazon S3. Sau đó, người dùng cuối sẽ truy cập trang của bạn bằng URL trang web công khai do Amazon S3 cung cấp. Bạn không cần chạy bất kỳ máy chủ web nào hoặc sử dụng các dịch vụ khác để trang của bạn có thể khả dụng.

Để đạt được mục đích của mô-đun này, bạn sẽ sử dụng URL điểm cuối trang web Amazon S3 mà chúng tôi cung cấp. URL có dạng http://{your-bucket-name}.s3-website.{region}.amazonaws.com. Đối với hầu hết các ứng dụng thực, bạn sẽ muốn sử dụng miền tùy chỉnh để lưu trữ trang của mình. Nếu bạn muốn sử dụng miền của riêng mình, hãy làm theo hướng dẫn để thiết lập trang web tĩnh bằng miền tùy chỉnh trong tài liệu Amazon S3.

Thời gian hoàn thành mô-đun: 30 phút

Các dịch vụ đã sử dụng: Amazon S3

Mẫu CloudFormation: Nếu bạn đã quen sử dụng Amazon S3 hoặc chỉ muốn chuyển sang làm việc ngay với Lambda và API Gateway, bạn có thể khởi chạy một trong các mẫu AWS CloudFormation này trong Khu vực bạn chọn để tự động dựng các tài nguyên cần thiết.

Khu vực Mẫu CloudFormation
Miền Đông Hoa Kỳ (Bắc Virginia) Khởi chạy ngăn xếp >
Miền Đông Hoa Kỳ (Ohio) Khởi chạy ngăn xếp >
Miền Tây Hoa Kỳ (Oregon) Khởi chạy ngăn xếp >
Châu Âu (Frankfurt) Khởi chạy ngăn xếp >
Châu Âu (Ireland) Khởi chạy ngăn xếp >
Châu Âu (London) Khởi chạy ngăn xếp >
Châu Á Thái Bình Dương (Tokyo) Khởi chạy ngăn xếp >
Châu Á Thái Bình Dương (Seoul) Khởi chạy ngăn xếp >
Châu Á Thái Bình Dương (Sydney) Khởi chạy ngăn xếp >
Châu Á Thái Bình Dương (Mumbai) Khởi chạy ngăn xếp >

Hướng dẫn khởi chạy CloudFormation

  1. Nhấp vào liên kết Khởi chạy ngăn xếp bên trên để chọn khu vực mong muốn.

  2. Nhấp vào Tiếp theo trên trang Lựa chọn mẫu.

  3. Cung cấp một tên duy nhất chung cho Tên vùng lưu trữ trang web, chẳng hạn như wildrydes-tencuaban và nhấp vào Tiếp theo.

  4. Trên trang Tùy chọn, giữ nguyên mọi tùy chọn mặc định và nhấp vào Tiếp theo.

  5. Trên trang Xem lại, đánh dấu chọn hộp để xác nhận CloudFormation sẽ tạo các tài nguyên IAM và nhấp vào Tạo.

    Mẫu này sử dụng tài nguyên tùy chỉnh để sao chép tài sản trang web tĩnh từ vùng lưu trữ S3 trung tâm vào vùng lưu trữ chuyên dụng của bạn. Để tài nguyên tùy chỉnh ghi vào vùng lưu trữ mới trong tài khoản của bạn, tài nguyên này phải tạo vai trò IAM mà nó có thể đảm nhận với những quyền đó.

  6. Đợi ngăn xếp wildrydes-webapp-1 đạt trạng thái CREATE_COMPLETE.

  7. Sau khi lựa chọn ngăn xếp wildrydes-webapp-1, nhấp vào tab Đầu ra, rồi nhấp vào liên kết URL trang web.

  8. Xác minh trang chủ Wild Rydes tải đúng cách và chuyển sang mô-đun tiếp theo: Quản lý người dùng.

Hướng dẫn thực hiện

Hãy làm theo hướng dẫn từng bước sau đây để lưu trữ trang web tĩnh. Nhấp vào số của từng bước để mở rộng phần.

  • Bước 1. Lựa chọn khu vực

    Lựa chọn khu vực

    Có thể triển khai ứng dụng web này tại mọi khu vực AWS hỗ trợ tất cả các dịch vụ được dùng trong ứng dụng này, bao gồm Amazon Cognito, AWS Lambda, Amazon API Gateway, Amazon S3 và Amazon DynamoDB.

    Bạn có thể tham khảo bảng khu vực để xem những khu vực có các dịch vụ được hỗ trợ. Bạn có thể chọn trong số các khu vực được hỗ trợ sau:

    • Miền Đông Hoa Kỳ (Bắc Virginia)
    • Miền Đông Hoa Kỳ (Ohio)
    • Miền Tây Hoa Kỳ (Oregon)
    • Châu Âu (Frankfurt)
    • Châu Âu (Ireland)
    • Châu Âu (London)
    • Châu Á Thái Bình Dương (Tokyo)
    • Châu Á Thái Bình Dương (Seoul)
    • Châu Á Thái Bình Dương (Sydney)
    • Châu Á Thái Bình Dương (Mumbai)

     

    Lựa chọn khu vực của bạn trong menu thả xuống ở góc trên bên phải của Bảng điều khiển quản lý AWS.

    (Nhấp vào để phóng to)

  • Bước 2. Tạo vùng lưu trữ S3

    Tạo vùng lưu trữ S3

    Bạn có thể dùng Amazon S3 để lưu trữ các trang web tĩnh mà không phải đặt cấu hình hoặc quản lý bất kỳ máy chủ web nào. Trong bước này, bạn sẽ tạo một vùng lưu trữ S3 mới dùng để lưu trữ tất cả các tài sản tĩnh (ví dụ: tệp HTML, CSS, JavaScript và hình ảnh) cho ứng dụng web của mình. 

    Trong bước này, bạn sẽ sử dụng bảng điều khiển hoặc AWS CLI để tạo vùng lưu trữ Amazon S3. Hãy nhớ rằng tên vùng lưu trữ của bạn phải là duy nhất chung. Bạn nên dùng tên như wildrydes-ho. Nếu xảy ra lỗi tên vùng lưu trữ đã tồn tại, bạn hãy thử thêm số hoặc ký tự bổ sung cho đến khi tìm thấy tên chưa sử dụng.

    1. Trong Bảng điều khiển quản lý AWS, chọn Dịch vụ, rồi lựa chọn S3 bên dưới Lưu trữ.
    2. Chọn +Tạo vùng lưu trữ
    3. Cung cấp một tên duy nhất chung cho vùng lưu trữ của bạn, chẳng hạn như wildrydes-ho. Nếu xảy ra lỗi tên vùng lưu trữ đã tồn tại, bạn hãy thử thêm số hoặc ký tự bổ sung cho đến khi tìm thấy tên chưa sử dụng.
    4. Lựa chọn Khu vực bạn đã chọn để sử dụng cho hội thảo này trong danh sách thả xuống.
    5. Chọn Tạo ở dưới cùng bên trái hộp thoại mà không cần lựa chọn vùng lưu trữ để sao chép cài đặt.

  • Bước 3. Tải nội dung lên

    Tải nội dung lên

    Trong bước này, bạn sẽ tải tài sản trang web cho mô-đun này lên vùng lưu trữ S3 của mình. Bạn có thể sử dụng Bảng điều khiển quản lý AWS (yêu cầu trình duyệt Google Chrome), AWS CLI hoặc mẫu CloudFormation được cung cấp để hoàn thành bước này. Nếu bạn đã cài đặt AWS CLI và đặt cấu hình trên máy cục bộ, chúng tôi khuyên bạn nên dùng phương pháp đó. Nếu không, hãy sử dụng bảng điều khiển nếu bạn đã cài đặt phiên bản Google Chrome mới nhất. 

    Hướng dẫn sử dụng bảng điều khiển từng bước

    Để tải lên tất cả các tệp và thư mục con trong thư mục cục bộ thông qua Bảng điều khiển quản lý AWS, bạn phải sử dụng phiên bản trình duyệt web Chrome mới nhất. Nếu không thể sử dụng Chrome, vui lòng làm theo các hướng dẫn để sử dụng AWS CLI hoặc mẫu CloudFormation được cung cấp.

    1. Tải xuống bản lưu trữ của kho này bằng liên kết này.

    2. Giải nén bản lưu trữ bạn đã tải xuống máy cục bộ của mình.

    3. Mở Bảng điều khiển quản lý AWS trong Chrome. Chọn Dịch vụ, rồi lựa chọn S3 bên dưới Lưu trữ.

    4. Lựa chọn vùng lưu trữ bạn đã tạo ở bước trước đó và đảm bảo bạn đang xem tab Tổng quan.

    5. Mở Windows File Explorer hoặc macOS Finder và duyệt đến nội dung mở rộng của tệp zip bạn đã tải xuống ở bước đầu tiên.

    6. Duyệt đến thư mục WebApplication/1_StaticWebHosting/website trên máy cục bộ của bạn.

    7. Lựa chọn tất cả các tệp và thư mục con trong thư mục trang web. Đảm bảo không lựa chọn thư mục trang web đó.

    8. Kéo và thả các tệp đã lựa chọn từ hệ thống tệp cục bộ của bạn vào nội dung bên dưới tab Tổng quan trong bảng điều khiển S3.

    9. Chọn Tải lên ở dưới cùng bên trái hộp thoại hiển thị.

    10. Đợi quá trình tải lên hoàn tất và đảm bảo nhìn thấy nội dung của thư mục trang web được liệt kê trong bảng điều khiển S3. Nếu chỉ thấy một thư mục trang web duy nhất, bạn nên xóa thư mục đó khỏi vùng lưu trữ và làm theo các hướng dẫn này một lần nữa để đảm bảo bạn chỉ lựa chọn nội dung của thư mục trước khi kéo và thả vào bảng điều khiển S3.

    Hướng dẫn sử dụng CLI từng bước

    Nếu đã cài đặt và đặt cấu hình CLI, bạn có thể sử dụng nó để sao chép các tài sản web cần thiết từ s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website vào vùng lưu trữ của mình.

    1. Thực thi lệnh sau, nhớ thay thế YOUR_BUCKET_NAME bằng tên bạn dùng trong phần trước và thay thế YOUR_BUCKET_REGION bằng mã khu vực (ví dụ: us-east-2) nơi bạn tạo vùng lưu trữ của mình.

      aws s3 sync s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website s3://YOUR_BUCKET_NAME --region YOUR_BUCKET_REGION

    2. Nếu lệnh thành công, bạn sẽ thấy danh sách các đối tượng được sao chép vào vùng lưu trữ của bạn.

     

    Hướng dẫn sử dụng CloudFormation từng bước

    Nếu không thể sử dụng một trong các phương pháp trước đó, bạn có thể khởi chạy mẫu CloudFormation được cung cấp để sao chép các tài sản cần thiết vào vùng lưu trữ S3 của mình. Khởi chạy mẫu CloudFormation bằng cách lựa chọn một khu vực và nhấp vào liên kết Khởi chạy ngăn xếp trong mục Mẫu CloudFormation của mô-đun này. 

  • Bước 4. Thêm chính sách vùng lưu trữ để cho phép đọc công khai

    Thêm chính sách vùng lưu trữ để cho phép đọc công khai

    Bạn có thể xác định những người có thể truy nhập nội dung trong các vùng lưu trữ S3 của mình bằng chính sách vùng lưu trữ. Chính sách vùng lưu trữ là các tài liệu JSON chỉ định những thực thể chính được phép thực thi các hành động khác nhau đối với những đối tượng trong vùng lưu trữ của bạn.

    Trong bước này, bạn sẽ thêm chính sách vùng lưu trữ vào vùng lưu trữ Amazon S3 mới để cho phép người dùng ẩn danh xem trang của bạn. Theo mặc định, chỉ người dùng được xác thực có quyền truy nhập vào tài khoản AWS của bạn mới có thể truy nhập vào vùng lưu trữ của bạn.

    Xem ví dụ này về chính sách cấp quyền truy nhập chỉ đọc cho người dùng ẩn danh. Chính sách ví dụ này cho phép bất kỳ ai trên Internet xem nội dung của bạn. Cách dễ nhất để cập nhật chính sách vùng lưu trữ là sử dụng bảng điều khiển. Lựa chọn vùng lưu trữ, chọn tab quyền, rồi lựa chọn Chính sách vùng lưu trữ.

    1. Trong bảng điều khiển S3, lựa chọn tên vùng lưu trữ bạn đã tạo trong mục 1.
    2. Chọn tab Quyền, rồi chọn Chính sách vùng lưu trữ.
      1. Trong bảng điều khiển S3, lựa chọn tên vùng lưu trữ bạn đã tạo trong mục 1.
      2. Chọn tab Quyền, đảm bảo lựa chọn Cài đặt truy nhập công khai.
      3. Nhấp vào Chỉnh sửa và bỏ chọn:
        • "Chặn chính sách vùng lưu trữ công khai mới"
        • "Chặn quyền truy nhập công khai và liên tài khoản nếu vùng lưu trữ có chính sách công khai"
      4. Nhấp vào Lưu.
      5. Trong hộp thoại xác nhận hiển thị, nhập 'xác nhận', rồi nhấp vào Xác nhận. 
      6. Khi vẫn ở trong tab Quyền, chọn Chính sách vùng lưu trữ.  
    3. Nhập tài liệu chính sách sau vào trình biên tập chính sách vùng lưu trữ và thay thế [YOUR_BUCKET_NAME] bằng tên vùng lưu trữ bạn đã tạo trong mục 1:
    {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow", 
            "Principal": "*", 
            "Action": "s3:GetObject", 
            "Resource": "arn:aws:s3:::[YOUR_BUCKET_NAME]/*" 
        } 
    ] 
}
    1. Chọn Lưu để áp dụng chính sách mới.

  • Bước 5. Bật lưu trữ trang web

    Bật lưu trữ trang web

    Theo mặc định, các đối tượng trong vùng lưu trữ S3 luôn khả dụng thông qua các URL có cấu trúc http://.amazonaws.com//. Để cung cấp tài sản từ URL gốc (ví dụ: /index.html), bạn sẽ cần phải bật lưu trữ trang web trên vùng lưu trữ. Thao tác này sẽ giúp các đối tượng của bạn khả dụng tại điểm cuối trang web cụ thể theo Khu vực AWS của vùng lưu trữ: .s3-website-.amazonaws.com.

    Bạn cũng có thể sử dụng một miền tùy chỉnh cho trang web của mình. Ví dụ: http://www.wildrydes.com được lưu trữ trên S3. Hội thảo này không đề cập đến hoạt động thiết lập miền tùy chỉnh nhưng bạn có thể xem hướng dẫn chi tiết trong tài liệu của chúng tôi.

    Trong bước này, bạn sẽ sử dụng bảng điều khiển để bật lưu trữ trang web tĩnh. Bạn có thể thực hiện thao tác này trên tab Thuộc tính sau khi lựa chọn vùng lưu trữ. Đặt index.html làm tài liệu chỉ mục và để trống tài liệu lỗi. Xem tài liệu về cách đặt cấu hình vùng lưu trữ để lưu trữ trang web tĩnh để biết thêm chi tiết.

    1. Từ trang chi tiết vùng lưu trữ trong bảng điều khiển S3, chọn tab Thuộc tính.
    2. Chọn thẻ Lưu trữ trang web tĩnh.
    3. Lựa chọn Sử dụng vùng lưu trữ này để lưu trữ trang web, rồi nhập index.html cho tài liệu Chỉ mục. Để trống các trường còn lại.
    4. Ghi lại URL Điểm cuối ở đầu hộp thoại trước khi chọn Lưu. Bạn sẽ sử dụng URL này trong suốt phần còn lại của hội thảo để xem ứng dụng web của mình. Từ giờ trở đi, URL này sẽ được gọi là URL cơ sở của trang web của bạn.
    5. Nhấp vào Lưu để lưu các thay đổi của bạn.

  • Bước 6. Xác thực quá trình thực hiện của bạn

    Xác thực quá trình thực hiện của bạn

    Sau khi hoàn thành các bước thực hiện này, bạn có thể truy nhập vào trang web tĩnh của mình bằng cách truy cập URL điểm cuối trang web cho vùng lưu trữ S3.

    Truy cập URL cơ sở của trang web của bạn (đây là URL bạn đã ghi lại trong mục trước) trong trình duyệt bạn chọn. Bạn sẽ thấy trang chủ Wild Rydes được hiển thị. Nếu cần tra cứu URL cơ sở, hãy truy cập bảng điều khiển S3, lựa chọn vùng lưu trữ của bạn rồi nhấp vào Lưu trữ web tĩnh trên tab Thuộc tính.

    Nếu trang kết xuất chính xác (xem ảnh chụp màn hình ví dụ bên dưới), bạn có thể chuyển sang mô-đun tiếp theo: Quản lý người dùng.

Tiếp theo: Quản lý người dùng