1. vankobe

    Posted

    vankobe
Changes in title
+API GatewayとLambdaでAPI作成のチュートリアル
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,116 @@
+
+
+サーバーレスの第一歩といえばLambda。それをAPI Gatewayで公開する手順を書いてみました。
+
+## 想定するAPI
+
+### API endpoint
+
+```
+# params
+## path: ページのpath
+https://YOUR_API_GATEWAY_DOMAIN/link_clicks?path=/111
+```
+
+### Lambda関数
+apiという名前のlambda functionを想定する。
+参考: [LambdaでRDSチュートリアル](http://qiita.com/vankobe/items/31acb99cd8eb106a019d)
+
+```
+# param
+## {"path": "/11111"}
+
+# result
+#=> [{"clicks": 5555}]
+```
+
+## 1. API Gatewayの設定
+
+### 1.1 API作成
+
+Create APIからAPIを作成する
+この名前はurlなどには含まれないのでなんでも良い
+
+![API作成.png](https://qiita-image-store.s3.amazonaws.com/0/68146/8d2229d7-ab4a-4d47-3252-f1d0abfde5f4.png "API作成.png")
+![test API作成.png](https://qiita-image-store.s3.amazonaws.com/0/68146/6209f4da-e23e-2cc5-1324-74245c6d92f6.png "test API作成.png")
+
+### 1.2 Resourceを作成する
+Actions > Create Resource からリソースを作成する
+このリソース名がAPIのpathになる
+
+![create method.png](https://qiita-image-store.s3.amazonaws.com/0/68146/5ea24dda-7357-b63d-027d-3df78596177e.png "create method.png")
+![resource作成.png](https://qiita-image-store.s3.amazonaws.com/0/68146/a77b3d17-f303-6f09-0571-9dcdd145e9bb.png "resource作成.png")
+
+
+### 1.3 ResourceにMethodを追加する
+先ほど追加したResourceを選択した状態で、Actions > Create Method からメソッドを追加する
+今回はGETを選択した。GETの横のチェックマークを押さないとsubmitされないので注意。
+
+![method追加(チェックマーク押さないといけない).png](https://qiita-image-store.s3.amazonaws.com/0/68146/1d8c7d0c-8cc0-0678-2d5c-10af52801e39.png "method追加(チェックマーク押さないといけない).png")
+
+### 1.4 MethodとLambdaを紐づける
+追加したメソッドを選択すると以下のような画面になるので、Lambda Functionを選択する(今回はapiというファンクションを使用)
+![methodを選択して、lambdaを選択する.png](https://qiita-image-store.s3.amazonaws.com/0/68146/0d2000ee-d086-75fb-67ad-ac85019b3829.png "methodを選択して、lambdaを選択する.png")
+
+これで、エンドポイントの設定がほぼ完了。あとは、許可するパラメータなどの設定に入る。
+![途中経過.png](https://qiita-image-store.s3.amazonaws.com/0/68146/ff2d7893-918f-ee50-d39f-87e36b02c0b1.png "再集計.png")
+
+
+### 1.5 Method Requestで、許可するパラメータ、リクエストヘッダーを登録する
+追加したメソッドを選択すると前項の画像のようになる。
+その中からMethod Requestを選択して、
+ - Query String Parametersにpathを登録
+ - Request Header に Content-Typeを登録
+する
+
+![pathをquery string parametersに登録(チェック押さないといけない).png](https://qiita-image-store.s3.amazonaws.com/0/68146/23dd49f3-86bb-fcd2-d870-b76b7d8c1100.png "pathをquery string parametersに登録(チェック押さないといけない).png")
+![method requestのhttp request headerにContent-Type追加.png](https://qiita-image-store.s3.amazonaws.com/0/68146/d9de97ce-967c-3ceb-6409-110aa8e859db.png "method requestのhttp request headerにContent-Type追加.png")
+
+### 1.6 Integration Requestで、APIから渡ってきた値をLambdaに渡せるように設定する
+APIから渡ってきた値をLambdaに渡すために、リクエストテンプレートを設定する
+
+1. Body Mapping Template > Content-Type に application/json を登録
+![integration requestでcontent-Type追加.png](https://qiita-image-store.s3.amazonaws.com/0/68146/8c24ed66-c10f-1c73-9064-0864200fcc89.png "integration requestでcontent-Type追加.png")
+
+2. application/jsonを選択すると、リクエストテンプレートを登録できるので以下を登録する
+
+```
+#set($inputRoot=$input.path('$'))
+{
+ "path": "$input.params('path')"
+}
+```
+
+![query stringのpathを許可するようにtemplateを作成.png](https://qiita-image-store.s3.amazonaws.com/0/68146/aa61a4ea-f430-6b16-a6e4-0056615d4ef0.png "query stringのpathを許可するようにtemplateを作成.png")
+
+
+### 1.7 testを行う
+Method Exectionの画面に戻り、testをクリック。
+`path=/11111` , `Content-Type=application/json` を設定し、テストを実行する
+Response Bodyがちゃんと帰ってきて入ればOK
+
+![execution test.png](https://qiita-image-store.s3.amazonaws.com/0/68146/6874ae41-9f5c-d42b-ff49-08a2f6768623.png "execution test.png")
+
+### 1.8 APIをデプロイする
+Actions > Deploy API からAPIをデプロイする
+Stage Nameはエンドポイントのurlに含まれるので慎重に名前をつける
+![deploy api.png](https://qiita-image-store.s3.amazonaws.com/0/68146/32ce7de7-937f-d190-9056-aafab3097c16.png "deploy api.png")
+
+![deploy.png](https://qiita-image-store.s3.amazonaws.com/0/68146/0fe0f873-7ce4-a3df-f367-1fc279bc8e8c.png "deploy.png")
+
+すると、以下のようにエンドポイントが作成される
+
+```
+ https://xxxxx.execute-api.ap-northeast-1.amazonaws.com/testapi
+ ```
+
+![apiエンドポイント作成.png](https://qiita-image-store.s3.amazonaws.com/0/68146/e76e0415-8de4-986d-5f93-e73fb2e9c866.png "apiエンドポイント作成.png")
+
+
+実際にアクセスすると、レスポンスが返ってくる
+![apiアクセス.png](https://qiita-image-store.s3.amazonaws.com/0/68146/f42487b3-999f-0a8a-a290-ec4f97a726d1.png "apiアクセス.png")
+
+## 最後に
+
+Lambda以上にAPI Gatewayは設定項目が多くハマりポイント満載ですが、設定できるといろんなことをリソースによる制限を考えずに実行できるのでありがたいです。
+サーバーレスアーキテクチャーの第一歩として挑戦していただければ幸いです。