1. vankobe

    No comment

    vankobe
Changes in body
Source | HTML | Preview
@@ -1,116 +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")
+![apiアクセス.png](https://qiita-image-store.s3.amazonaws.com/0/68146/afd347d8-3b9d-306f-1820-4f24fe9c27f2.png "apiアクセス.png")
## 最後に
Lambda以上にAPI Gatewayは設定項目が多くハマりポイント満載ですが、設定できるといろんなことをリソースによる制限を考えずに実行できるのでありがたいです。
サーバーレスアーキテクチャーの第一歩として挑戦していただければ幸いです。