Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@mkttks

API Gateway + CognitoでWebサイトからバックエンドの処理を呼び出す

Last updated at Posted at 2023-07-13

やりたいこと

前回の記事（ https://qiita.com/mkttks/items/c30e993adb520869dbb4 ）ではAWS Lambda と Amazon DynamoDB を使用してバックエンドの処理を実装しました。
今回はAPI Gatewayを使ってWebサイトからこのバックエンドの処理を使えるようにします。

内容は引き続き下記の公式チュートリアルに沿ったものです。（※ただしチュートリアル通りに進めると権限まわりの設定で詰まります。）
https://aws.amazon.com/jp/getting-started/hands-on/build-serverless-web-app-lambda-apigateway-s3-dynamodb-cognito/

システム構成図

api gatewayのシステム構成図
公式チュートリアルから引っ張ってきた図だとこんな感じです。API GatewayがWebサイトとLambdaを繋ぐイメージですね。

手順

新しいAPIを作成する

まず新しいAPIを作成します。
APIをすごく雑に説明するとWebサイトがバックエンドの処理を呼び出すための呪文集みたいなものです。API Gatewayを使うとこのAPIを作ることができます。

API Gatewayにアクセス

  1. AWS Console( https://console.aws.amazon.com/ )にサインインして検索欄に「api」と入力
  2. 出てきたAPI Gatewayのアイコンをクリック
    image.png

新しいAPIを作成

  1. 左のメニューの「API」をクリック
    image.png
  2. 「APIタイプを選択」->「REST API」の「構築」ボタンをクリック
    image.png
  3. 「新しいAPIの作成」で「新しいAPI」にチェックを入れる
  4. 「名前と説明」->「API名」で任意の名前を入力（ここではWildRydesとします）
  5. 「エンドポイントタイプ」で「エッジ最適化」を選択
    image.png
  6. 「APIの作成」をクリック
    image.png

新しいAPIができました。
image.png

新しいリソースとメソッドを作成する

前の手順で作ったAPIにリソースとメソッドを追加します。

リソースを作成

  1. 「API」->「（API名）」をクリック
    image.png
  2. 左のメニューの「リソース」を選択
  3. 「アクション」ドロップダウンから「リソースの作成」をクリック
    image.png
  4. 「リソース名」に任意の名前を入力（ここではrideとします）
  5. 「リソースパス」は自動入力されるのでそのまま
  6. 「API Gateway CORS を有効にする」にチェックを入れる
  7. 「リソースの作成」ボタンをクリック
    image.png

「/ride」というリソースが作成されました。
image.png

メソッドを作成

  1. 「/ride」リソースが選択された状態で「アクション」ドロップダウンから「メソッドの作成」をクリック
    image.png
  2. 表示されるドロップダウンから「POST」を選択
    image.png
  3. ドロップダウンの右のチェックマークをクリック
    image.png
  4. 「統合タイプ」で「Lambda関数」にチェックを入れる
  5. 「Lambdaプロキシ統合の使用」にチェックを入れる
  6. 「Lambdaリージョン」に前回作成したLambda関数が置かれているリージョンを選択する（ここではap-northeast-1）
  7. 「Lambda関数」に前回作成したLambda関数の関数名を入力（ここではRequestUnicorn）
  8. 「保存」ボタンをクリック
  9. 「Lambda 関数に権限を追加する」というダイアログが表示された場合は「OK」をクリック
    image.png

メソッドが作成されました。
image.png

アクセス許可を設定する

続いてアクセス許可の設定をします。今回はWebサイトにログインしたユーザのみがAPIを使えるように設定します。

Lambda関数のIAMロールにアクセス許可を付与

Lambda関数とAWS Cognitoが連携できるように、Lambda関数に設定しているIAMロールにCognitoへのアクセス許可を付与します。

  1. 「API」->「（API名）」->「リソース」->「/ride」->「POST」を選択
  2. 右側の「Lambda （Lambda関数名）」のリンクをクリック（別タブでLambda関数の設定画面が開きます）
    image.png
  3. 「設定」タブの「アクセス権限」->「実行ロール」->「ロール名」のリンクをクリック（別タブでIAMロールの設定画面が開きます）
    image.png
  4. 「許可」->「許可ポリシー」->「許可を追加」をクリック
  5. 「ポリシーをアタッチ」をクリック
    image.png
  6. 検索欄に「cognito」と入力
  7. 出てきた「AmazonCognitoPowerUser」にチェックを入れる
    image.png
  8. 「許可を追加」ボタンをクリック
    image.png

オーソライザーを作成

続いてオーソライザーを作成します。これはAPI GatewayをCognitoと連携させるために必要な設定です。

  1. API Gatewayの「API」->「（API名）」を選択
  2. 左のメニューの「オーソライザー」を選択
    image.png
  3. 「新しいオーソライザーの作成」をクリック
    image.png
  4. 「オーソライザーの作成」->「名前」に任意の名前を入力（ここではwildrydes-cognito-authorizerとします）
  5. 「タイプ」で「Cognito」にチェックを入れる
  6. 「Cognitoユーザープール」で前々回作成したCognitoを指定（ここではWildRydes）
  7. 「トークンのソース」にAuthorizationと入力
  8. 「作成」をクリック
    image.png
  9. 左のメニューの「リソース」を選択
  10. 「/ride」のPOSTをクリック
  11. 「メソッドリクエスト」をクリック
    image.png
  12. 「設定」->「許可」で「Cognitoユーザープールオーソライザー」の下の先ほど作ったオーソライザーを選択
  13. ドロップダウンの右側のチェックボタンをクリック
    image.png

これでアクセス許可の設定ができました。

APIをデプロイする

設定が完了したのでAPIをデプロイしましょう。

APIをデプロイ

  1. 「アクション」ドロップダウンから「APIのデプロイ」をクリック
    image.png
  2. 「APIのデプロイ」ダイアログ->「デプロイされるステージ」で「[新しいステージ]」を選択
  3. 「ステージ名」に任意の名前を入力（ここではprodとします）
  4. 「デプロイ」ボタンをクリック
    image.png

APIがデプロイされました。「URLの呼び出し:」の右側のURLを次の手順で使うためコピーしておきましょう。
image.png

Webサイト構成を更新する

それではWebサイトの方でAPIを呼び出す実装をしましょう。ソースコードは前々回作成したものを利用します。
あらためてサンプルコードを取得した方はこちらからどうぞ
aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursive

AWS Cloud9にアクセス

  1. AWS Consoleの検索欄で「cloud9」と入力
  2. Cloud9のアイコンをクリック
    image.png
  3. 前々回作成した環境の「Cloud9 IDE」を開く
    image.png

ソースコードを編集

  1. wildryde-site/js/config.jsを開く
    image.png
  2. apiテーブルのinvokeUrlに先ほど作ったAPIの「URLの呼び出し:」の右側のURLを張り付け
window._config = {
    cognito: {
        userPoolId: '｛ユーザープールID｝', // e.g. us-east-2_uXboG5pAb
        userPoolClientId: '｛ユーザープールクライアントID｝', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
        region: '｛リージョン名｝' // e.g. us-east-2
    },
    api: {
        invokeUrl: '（作ったAPIのURL）' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod',
    }
};

ソースコードを編集２（サンプルのアップデート）

公式が出しているサンプルコードの内容が一部古くなっており、手動で変えないといけない箇所があるそうなので追記します。

  1. 「wildryde-site/ride.html」を開く
    image.png
  2. Ctrl + Fを押して検索欄に「arcgis」と入力
    image.png
  3. 該当する行2か所を以下のように修正
<script src="https://js.arcgis.com/4.6/"></script>

 <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">

変更を反映

変更したファイルを保存してCodeCommitのGitrリポジトリに反映します。

  1. Cloud9のターミナルで以下のコマンドを入力
$ git add .
$ git commit -m "new_config"
$ git push

動作確認

いよいよWebサイトが完成しました。Webサイトからバックエンドの処理を呼び出して正しく動くか確認しましょう。

  1. AWS Consoleの検索欄に「amplify」と入力
  2. AWS Amplifyのロゴをクリック
    image.png
  3. 前回作成したアプリを選択して左下のURLからWebサイトにアクセスします。
    image.png
  4. Webサイトのドメインの下にある「/signin.html」にアクセスする（ブラウザのURLの末尾に「/signin.html」を追加してEnterを押してください。）
    image.png
  5. 以前作成したCognitoユーザでログインする（もしCognitoユーザがない場合はindex.htmlのGIDDY UP!ボタンから新規作成してください）
    image.png
  6. ride.htmlが表示される
    image.png
  7. 地図から好きな地点をクリック（せっかくなのでここでは東京にしてみます）
  8. 右上の「Request Unicorn」ボタンをクリック（赤いボタンです）
    image.png

うまくいけば東京にユニコーンがやってきます。やったぜ！
image.png

まとめ

今回でAPI GatewayでWebサイトからバックエンドの処理を呼び出すことができました。
これでAWSを使って自作のWebサービスを作るための手順を一から学ぶことができました。お疲れ様でした！

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?