Trong mô- đun này, bạn sẽ sử dụng Amazon API Gateway để hiển thị hàm Lambda bạn xây dựng ở mô- đun trước thành một API RESTful. API này sẽ truy cập được công khai trên Internet. Nó sẽ được bảo mật bằng cách sử dụng nhóm người dùng Amazon Cognito bạn đã tạo trong mô-đun trước. Sử dụng cấu hình này bạn sẽ chuyển đổi trang web được lưu tĩnh thành ứng dụng web động bằng cách thêm JavaScript phía ứng dụng khách để thực hiện lệnh gọi AJAX đến các API bị lộ.

Serverless_Web_App_LP_assets-05

Sơ đồ trên minh họa thành phần API Gateway bạn xây dựng trong mô-đun này tích hợp với các thành phần hiện có bạn đã xây dựng trước đó như thế nào. Các mục màu xám là các thành phần bạn vừa thực hện ở các bước trước đó.

Trang web tĩnh bạn triển khai ở mô-đun trước có một trang được cấu hình để tương tác với API bạn sẽ xây dựng trong mô-đun này. Trang tại /ride.html có giao diện dạng bản đồ đơn giản để yêu cầu chuyến đi kỳ lân. Sau khi xác thực bằng cách sử dụng trang /signin.html, người dùng của bạn sẽ có thể chọn địa điểm lấy hàng bằng cách nhấp vào một điểm trên bản đồ sau đó yêu cầu chuyến đi bằng cách chọn nút "Yêu cầu kỳ lân" ở góc trên bên phải.

Mô-đun này sẽ tập trung vào các bước bắt buộc để xây dựng các thành phần API trên đám mây, nhưng nếu bạn quan tâm đến cách hoạt động của mã trình duyệt để gọi API này, thì bạn có thể kiểm tra tệp ride.js của trang web. Trong trường hợp này ứng dụng dùng phương pháp jQuery's ajax() để yêu cầu từ xa.

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

Dịch vụ sử dụng: Amazon API Gateway và AWS Lambda


Làm theo hướng dẫn từng bước bên dưới để tạo REST API của bạn. Nhấp vào số của từng bước để mở rộng phần.

  • Bước 1. Tạo REST API mới


    1. Trong Bảng điều khiển quản lý AWS, nhấp vào Dịch vụ sau đó chọn API Gateway bên dưới Dịch vụ ứng dụng.

    2. Chọn Tạo API.

    3. Chọn API mới và nhập WildRydes vào Tên API.

    4. Giữ Biên được tối ưu đã chọn trong danh sách thả xuống Loại điểm cuối. Lưu ý: Biên được tối ưu hóa phù hợp nhất với các dịch vụ công cộng được truy cập công khai trên Internet. Các điểm cuối khu vực thường được dùng cho API được truy cập chủ yếu từ trong cùng Khu vực AWS.

    5. Chọn Tạo API

  • Bước 2. Tạo Công cụ cho phép nhóm người dùng Cognito

    Amazon API Gateway có thể sử dụng token JWT được trả về bởi Nhóm người dùng Cognito để xác thực lệnh gọi API. Ở bước này, bạn sẽ cấu hình công cụ ủy quyền để API của bạn sử dụng nhóm người dùng bạn đã tạo trong Mô-đun 2.

    Trong bảng điều khiển Amazon API Gateway, hãy tạo một công cụ cho phép nhóm người dùng Cognito mới cho API của bạn. Cấu hình công cụ đó với các chi tiết về nhóm người dùng bạn đã tạo ra trong mô-đun trước. Bạn có thể kiểm thử cấu hình trong bảng điều khiển bằng cách sao chép và dán token xác thực được cấp cho bạn sau khi bạn đăng nhập qua trang /signin.html trên trang web hiện tại của bạn.


    1. Ở API mới được tạo, hãy chọn Công cụ cho phép.

    2. Chọn Tạo công cụ cho phép mới.

    3. Nhập WildRydes vào tên Công cụ cho phép.

    4. Chọn loại là Cognito.

    5. Trong mục thả xuống Khu vực ở Nhóm người dùng Cognito, chọn Khu vực mà ở đó bạn tạo nhóm người dùng Cognito trong mô-đun 2 (theo mặc định cần chọn khu vực hiện tại).

    6. Nhập WildRydes (hoặc tên bạn đã dùng cho nhóm người dùng của bạn) vào mục nhập Nhóm người dùng Cognito.

    7. Nhập Cho phép cho Nguồn Token.

    8. Chọn Tạo.

    Xác minh cấu hình công cụ cho phép

    1. Mở một tab trình duyệt mới và truy cập /ride.html dưới tên miền trang web của bạn.

    2. Nếu bạn được chuyển hướng đến trang đăng nhập, hãy đăng nhập với người dùng bạn đã tạo trong mô-đun trước. Bạn sẽ được chuyển hướng quay lại /ride.html.

    3. Sao chép token xác thực từ thông báo trên /ride.html,

    4. Quay lại tab trước đó bạn vừa hoàn thành việc tạo Công cụ cho phép

    5. Nhấp vào Kiểm tra ở dưới cùng của thẻ công cụ cho phép.

    6. Dán token xác thực vào trường Token xác thực trong hộp thoại bật lên.

    7. Nhấp vào nút Kiểm thử và xác nhận rằng mã phản hồi là 200 và bạn thấy yêu cầu cho người dùng của bạn được hiển thị.

  • Bước 3. Tạo tài nguyên và phương pháp mới

    Tạo một tài nguyên mới được gọi /ride trong API. Sau đó tạo phương pháp POST cho tài nguyên đó và cấu hình nó để sử dụng tích hợp proxy Lambda được sao lưu bởi hàm RequestUnicorn bạn đã tạo ở bước đầu tiên trong mô-đun này.


    1. Ở điều hướng bên trái, hãy nhấp vào Tài nguyên trong WildRydes API.

    2. Từ danh sách thả xuống Thao tác chọn Tạo tài nguyên.

    3. Nhập rideTên tài nguyên.

    4. Đảm bảo Lộ trình tài nguyênđược thiết lập thành ride.

    5. Chọn Bật API Gateway CORS cho tài nguyên.

    6. Nhấp vào Tạo tài nguyên.

    7. Với tài nguyên /ride mới được tạo, từ danh sách thả xuống Thao tác chọn Tạo phương pháp.

    8. ChọnPOST từ danh sách thả xuống mới xuất hiện, sau đó nhấp vào dấu kiểm.

    9. Chọn Hàm Lambda cho loại tích hợp.

    10. Đánh dấu vào hộp kiểm Sử dụng tích hợp Lambda Proxy.

    11. Chọn Khu vực bạn đang sử dụng cho Khu vực Lambda.

    12. Nhập tên hàm bạn đã tạo trong mô-đun trước, RequestUnicorn, cho Hàm Lambda.

    13. Chọn Lưu. Xin lưu ý rằng nếu bạn gặp lỗi hàm không tồn tại, hãy kiểm tra khu vực bạn chọn xem có khớp với khu vực bạn sử dụng trong mô-đun trước không.

    14. Khi được nhắc cho phép Amazon API Gateway gọi hàm của bạn, chọn OK.

    15. Chọn trên thẻ Yêu cầu phương pháp.

    16. Chọn biểu tượng bút chì bên cạnh Cho phép.

    17. Chọn công cụ cho phép nhóm người dùng Cognito WildRydes từ danh sách thả xuống, và nhấp vào biểu tượng dấu kiểm.

  • Bước 4. Triển khai API

    Từ bảng điều khiển Amazon API Gateway, chọn Thao tác, Triển khai API. Bạn sẽ được nhắc tạo một giai đoạn mới. Bạn có thể dùng prod làm tên của giai đoạn.


    1. Trong danh sách thả xuống Thao tác chọn Triển khai API.

    2. Chọn[Giai đoạn mới] trong danh sách thả xuốngGiai đoạn triển khai.

    3. Nhập prod làm Tên giai đoạn.

    4. Chọn Triển khai.

    5. Lưu ý URL gọi. Bạn sẽ sử dụng nó trong phần tiếp theo.

  • Bước 5. Cập nhật cấu hình trang web

    Cập nhật tệp /js/config.js trong triển khai trang web để bao gồm URL gọi của giai đoạn bạn vừa tạo. Bạn nên sao chép URL gọi trực tiếp từ phía trên cùng của trang trình soạn thảo giai đoạn trên bảng điều khiển Amazon API Gateway và dán vào khóa _config.api.invokeUrl trong tệp /js/config.js của trang web. Đảm bảo khi bạn cập nhật tệp config, tệp này vẫn chứa các cập nhật bạn đã tạo trong mô-đun trước cho nhóm người dùng Cognito của bạn.


    1. Mở tệp config.js trong trình soạn thảo văn bản.

    2. Cập nhật cài đặt invokeUrl trong khóa api trong tệp config.js. Đặt giá trị cho URL gọi cho giai đoạn triển khai bạn đã tạo trong phần trước.

      Một ví dụ về tệp config.js hoàn chỉnh được kèm theo bên dưới. Lưu ý, giá trị thực trong tệp của bạn sẽ khác.

    window._config = {
    
        cognito: {
    
            userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb         
    
            userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
    
            region: 'us-west-2' // e.g. us-east-2 
    
        }, 
    
        api: { 
    
            invokeUrl: 'https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod, 
    
        } 
    
    };
    1. Lưu tệp đã chỉnh sửa và đẩy tệp đó sang kho lưu trữ Git để tự động triển khai tệp đến Bảng điều khiển Amplify.

    $ git push
  • Bước 6. Xác thực quá trình triển khai

    Lưu ý: Bạn có thể thấy độ trễ khi cập nhật tệp config.js trong bộ chứa S3 và khi nội dung cập nhật hiển thị trong trình duyệt của bạn. Bạn nên đảm bảo là đã xóa bộ nhớ đệm của trình duyệt trước khi thực hiện các bước sau.


    1. Truy cập /ride.html trong tên miền trang web của bạn.

    2. Nếu bạn được chuyển hướng đến trang đăng nhập, hãy đăng nhập với người dùng bạn đã tạo trong mô-đun trước.

    3. Sau khi bản đồ được tải, nhấp bất kỳ trên bản đồ để thiết lập vị trí lấy hàng.

    4. Chọn Yêu cầu kỳ lân. Bạn nên xem thông báo trong thanh bên phải xem có kỳ lân đang trên hành trình sau đó xem biểu tượng kỳ lân bay đến vị trí lấy hàng của bạn.