はじめに

この記事は、「AWSに興味はあるけどよく知らない」「資格を持っているけど実際に触ってみたことがない」「何か始めてみたい」という方向けの連載シリーズ⑥です。（⑤はこちら）
「30分で学習できる」をテーマに毎週金曜日に更新します。ぜひ私と一緒に取り組んでみてください！私自身も初めての挑戦となりますので、間違いや補足がありましたら教えていただけると嬉しいです。
※このブログでの作業は全て macOSで行なっています。

RESTful API をデプロイする

このモジュールでは、Amazon API Gateway を使い、前の手順で作った Lambda 関数を API として公開します。
次に、ウェブサイト側に JavaScript を追加し、公開した API と AJAX 通信を行うように設定します。これにより、静的なサイトを動きのある「動的ウェブアプリケーション」へと作り変えていきます。
作業が完了すると、ユーザーはマップ上のポイントをクリックし、「Request Unicorn」ボタンを選択して、ユニコーンに乗る場所を選択することができるようになります。

新しいREST API を作成する

1.API Gateway を開き、左側の３本線のタブから「API」を選択します。
2.「APIを作成」を選択します。
3.「APIタイプを選択」という画面が表示されるため、「REST API」を選択して「構築」を押します。
4.下記設定を選択し、「APIを作成」を選択します。

APIの詳細：新しいAPI
API名：WildRydes
APIエンドポイントタイプ：エッジ最適化
IPアドレスのタイプ：IPv4

オーソライザーを作成する

Amazon API Gateway は、前回のブログで作成したCognitoユーザープールから発行される JWT（JSON ウェブトークン） を使って、認証を行います。ここでは、API がこのユーザープールと連携してアクセス制限を行えるよう、オーソライザーを設定していきます。

1.先ほど作成した、「WildRydes」を選択します。
2.3本線を押して左側のタブを開き、「オーソライザー」を選択します。

3.「オーソライザーを作成」を選択します。
4.下記設定を選択し、「作成」を選択します。

オーソライザー名：「WildRydes」
オーソライザーのタイプ：Cognito
Cognitoユーザープール
リージョン：以前Cognitoを作成した時と同じもの　東京（ap-northeast-1）または大阪（ap-northeast-3）
検索窓：以前作成したCognito
トークンのソース：「Authorization」

5.３本線の左側のタブから「オーソライザー」＞先ほど作成した「WildRydes」を選択します。
6.「オーソライザーをテスト」欄のトークンの値に、以前の手順「ユーザーを管理する」で保存しておいたトークンを入力します。
こちらのブログの、「実装を検証する」手順５の部分になります。
7.オレンジ色の「オーソライザーをテスト」を押します。レスポンスコードが200であれば成功です。

401エラーとなってしまった場合

401エラーの場合は、入力したトークンが間違っている可能性があります。
もう一度「signin.html」を開いてサインインを行い、正しくトークンをコピーしましょう。枠内を全て選択し、最初から最後までコピーできているか確認してみてください。

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

このセクションでは、API内に新しいリソースと、そのリソース用のPOSTメソッドを作成します。その後、前回作成した RequestUnicorn 関数を呼び出せるように、メソッドへLambda プロキシ統合を設定します。

1.3本線を押して左側のタブを開き、「リソース」を選択します。
2.「リソースを作成」を選択します。
3.「リソース名」に「ride」と入力します。
4.「CORS (クロスオリジンリソース共有)」にチェックを入れて、「リソースを作成」を選択します。
5.「メソッドを作成」を選択します。
6.下記設定を選択し、「メソッドを作成」を選択します。

メソッドタイプ：POST
統合タイプ：Lambda関数
Lambdaプロキシ統合：チェックオン
レスポンス転送モード：バッファード
Lambda関数：「RequestUnicorn」と検索して出てくるものを選択
統合のタイムアウト：デフォルト
メソッドリクエストの設定＞許可：「WildRydes」

APIをデプロイする

1.左側のタブ＞「リソース」＞先ほど作ったリソースを選択します。
2.右上にあるオレンジ色の「APIをデプロイ」を選択します。
3.ステージで「新しいステージ」選択します。
4.ステージ名に「prod」を入力し、「デプロイ」を選択します。
5.「URLを呼び出す」に書いてあるURLをコピーし、メモします

Webサイトの設定を更新する

このステップでは、作成したAPIとWebサイトを連携させるために、/js/config.js ファイルを更新します。
1. PCのファイルアプリから「wildrydes-site」＞「js」＞「config.js」ファイルを開きます。
2.「config.js」ファイルを右クリックし、「このアプリケーションで開く」＞「テキストエディットで開く」を選択します。
3.「invokeUrl: ‘　’」のクォーテーションの中に、先ほどメモしたURLを貼り付けてファイルを保存します。
4.ターミナルを開き、「wildrydes-site」フォルダへ移動します。
5.下記コードを順番に実行します。
git add . 
git commit -m "new_configuration"
git push

実装を検証する

1.PCのファイルアプリから「wildrydes-site」＞「ride.html」を右クリックしテキストエディットで開きます。
2.下から8行目にsrc="https://js.arcgis.com/4.3/"という部分があります。「4.3」を「4.6」に変更して保存します。
3.下記コードを順番に実行します。
git add . 
git commit -m "new_configuration"
git push
4. Amplifyから「wildrydes-site」リポジトリを開き、デプロイが完了するまで待ちます。
5.「ドメイン」欄にあるURLをコピーして、ブラウザのアドレスバーに貼り付けます。URLの後ろに、「/ride.html」と追加してEnterを押します。このようなサイトが表示されたでしょうか。
うまく表示されない場合は、手順2の4.3→4.6 への変更が正しくされているか、もう一度「ride.html」を開いて確認してみてください。
6.マップの好きな場所をクリックして、「Request Unicorn」を押します。ユニコーンが来てくれます。

「Request Unicorn」でエラーとなった場合

「An error occurred when requesting your unicorn: undefined」となった場合、リクエストがうまく届いていません。F12で開発者ツールを開いてエラー内容を確認しましょう。
私の場合は、「amplifyapp.com’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.Understand this error」（amplifyapp.com は CORS ポリシーによってブロックされました）とありました。

解決策

1.API Gateway を開き、「WildRydes」を選択します。
2「CORSを有効にする」を選択します。
3.「POST」にチェックをつけ、「保存」を選択します。

4.「APIをデプロイ」を選択します。
以上で完了です。ユニコーンライドのWebページに戻り、更新して試してみてください。

ユニコーンを呼ぶことができたでしょうか。これでアプリケーションは完成です。お疲れ様でした！最後にリソースを削除して完了です。
AWSは従量課金制を基本としています。ユニコーンを呼び出すたびにLambda、APIGatewayが動作して料金が発生しますが、1回の呼び出しに対して1円もかからない程度です。（無料枠ではない場合）しかし、不正なアクセスによって何度も勝手にアプリを操作されてしまい、多額の請求が来る場合もあります。必要ない場合は早めに削除しましょう。

リソースの削除、ハンズオンを終えての感想はこちらから