サーバーレスのウェブアプリケーションを構築４ RESTful API

こんにちは。イムチェジョンです。
今回のブログではAmazon API Gateway と AWS Lambdaを利用し、RESTful APIを配布してみましょう。

[サーバーレスのウェブアプリケーションを構築シリーズ]
１. AWS Amplify を使った静的ウェブホスティング
２. Amazon Cognito を使ったユーザー管理
３. バックエンドの構築 (AWS Lambda、Amazon DynamoDB)
４. RESTful API (Amazon API Gateway、 AWS Lambda)

アジェンダ

1. 今回の目標
2. RESTful API とは
3. バックエンドの構築
4. まとめ

0. 今回の目標

目標：Amazon API Gateway、 AWS Lambdaを利用してLambda関数をRESTful APIとして構築し、公開する。（ウェブブラウザでLambda関数を実行できるようにする。）

1. RESTful API とは

まず、ハンズオンをする前にRESTful APIについて勉強します。

REST

• Representational State Transferの略
• HTTPURI(Uniform Resource Identifier)により資源(Resource)を明示し、HTTP Method(POST、GET、PUT、DELETE)により当該資源に対するCRUD Operationを適用することを意味
• RESTは基本的にウェブの既存技術とHTTPプロトコルをそのまま活用するため、ウェブの長所を最大限に活用できるアーキテクチャスタイル

RESTful API

• REST基盤でサービスAPIを実現したもの
• 最近、OpenAPI、マイクロサービスなどを提供する企業のほとんどはREST APIを提供
  • OpenAPI：誰でも使えるように公開されたAPI　
    • ex)グーグルマップ、公共データなど
  • マイクロサービス：一つの大きなアプリケーションを複数の小さなアプリケーションに分けて変更と組み合わせが可能になったアーキテクチャ
• REST基盤でシステムを分散し、拡張性とリユース性を高め、保守·運用を便利にする
• REST はHTTP 標準をベースに実装するので、HTTP をサポートするプログラム言語でクライアント、サーバを実装できる

2. バックエンドの構築

2-1. REST API 作成

まず、REST APIを作成しましょう。

以下の設定で作成します。
プロトコル：RESTを選択
API作成方法：新しいAPIを選択
API名：SiteAPIGateway
エンドポイントタイプ：エッジ最適化
ここでエッジ最適化はインターネットでパブリックサービスにアクセスするとき選ぶと良いです。

これでREST APIの作成ができました。

2-2. Cognito ユーザープールオーソライザーを作成

REST APIで新しいオーソライザーを以下の設定で作成します。
名前：AmplifySite
ライプ：Cognitoを選択
Cognito ユーザープール：ap-northeast-2 / Amplify_site
トークンのソース：Authorization

成功的にオーソライザーを作成しました。

オーソライザーがよく作動しているか確認をしてみましょう。
前に作ったウェブサイトにログインして/ride.htmlを移動し、Auth Tokenをコピーします。

オーソライザーのテストをクリックします。

認可トークンにコピーしたAuth Tokenを入れてテストをします。

結果をみるとログインしたユーザーの情報を確認できます。

2-3. リソースとメソッドを作成

次はリソースを作成しましょう。

以下の設定で作成します。
リソース名：ride
リソースパスは自動的に作成される。rideなのか確認
API Gateway CORS を有効にするチェック

今回はメソッドを作成します。

以下の設定です。
メソッド種類：POST
統合タイプ：Lambda関数
Lambdaプロキン統合の使用チェック
Lambdaリージョン：ap-northeast-2
Lambda関数：RequsetSite

メソッド作成した後、メソッドリクエストに入ります。

認可にAmplifySite選択します。

2-4. APIをデプロイ

今回はAPIをデプロイしましょう。
APIのデプロイをクリックします。

デプロイされるステージ：新しいステージ
ステージ名：prod

APIはデプロイできました。
作成したprodステージでURLの部分を記録しておきます。

2-5. ウェブサイトの設定を更新

ローカルで/js/config.jsを修正します。

invokeUrl: `上の`prod`ステージでURLを入力`

invokeUrlの部分だけ修正し、$git pushします。

2-6. 実装を検証

最後にデプロイされたAPIがちゃんと起動してるか確認をしてみましょう。
/ride.htmlページでクリックしたらその情報がDynamoDBに保存される結果を確認できます。

3. まとめ

これでサーバーレスのウェブアプリケーションを構築が完成されます。
フロントエンド、ユーザー管理、バックエンド、RESTful APIまで４つのブログに分けて進めました。このようにいくつのサービスを一緒に作ってハンズオンするのは初めてだったので、面白かったです！