LINEBotをみんなで作ろう〜レイヤーとAPIgateway設定編〜【7日目】

この記事は下記の [#GWアドベントカレンダー](https://gw-advent.9wick.com/calendars/2020/72) の 7日目の記事になります。

1週間でサーバレスLINEBotを生み出す( @inoue2002  ） | GWアドベントカレンダー

# はじめに
こちらの内容は超初心者向けです。
[公式ドキュメント](https://developers.line.biz/ja/docs/messaging-api/overview/#messaging-api%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF)を読める方はこちらをお読みいただく方が正確です。

[昨日の記事](https://qiita.com/drafts/ad945981150c859911fc)をご覧になってない方はぜひ。
こちらの記事はGWアドベントカレンダーを通してLINEBotをサーバレスで作れるようになろう！ということを目標に書いている記事です。

LINEBotは作れるけどAWSでサーバーレスを作ってみたい！方向けの記事です

昨日の記事でAWSアカウントが作成できましたので、これを使って動くBotを作って行きます。

#lambda関数を作成
##昨日の記事で作ったAWSアカウントでログインする

###[コンソールへ行く](https://us-east-2.console.aws.amazon.com/console/home?region=us-east-2)
##検索欄に`lambda`を入力、検索候補に出てくる`Lambda`をクリックする
<img width="1429" alt="スクリーンショット 2020-05-08 10.08.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/c1b336d8-694e-a4d2-4330-48c107b326e8.png">
##Lambdaの画面が出てくると右上でリージョンを確認する。（デフォルトがオハイヨになっていることが多い、お好きなリージョンをセ選択する）
<img width="1426" alt="スクリーンショット 2020-05-08 10.08.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/6b910f53-e482-7cec-77da-f948b72988ec.png">
##関数を作成するをクリック
<img width="1436" alt="スクリーンショット 2020-05-08 10.09.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/ae518dea-d067-60cb-113c-8d4645479564.png">


##以下の画像の通り、関数名、ランタイム、ロール等の設定を行う、できたら作成ボタンをクリック
<img width="1439" alt="スクリーンショット 2020-05-08 10.09.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/7934a832-61d1-a81a-c55a-34f6b3b6212e.png">
<img width="1440" alt="スクリーンショット 2020-05-08 10.10.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/b2cff0c5-417d-c67c-81cc-17667feb0856.png">
##以下の画面が出てきたら成功
<img width="1436" alt="スクリーンショット 2020-05-08 10.11.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/6e66fdc0-9b04-0a33-c02e-17deb59a02a8.png">

以上でLambda関数の作成が終了。

#APIgateway作成

##一度AWSの一番最初の画面に戻って、検索欄に`apigateway`と入力し`APIGateway`を選択する
<img width="1430" alt="スクリーンショット 2020-05-08 10.11.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/ac9aad58-1233-f2b2-e0b8-ec8a11a7866c.png">
##RESTAPIを構築
<img width="1440" alt="スクリーンショット 2020-05-08 10.13.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/eb56537d-e000-b2c2-c791-733b2141e056.png">
##API名、エンドポイントタイプなどを設定
<img width="1440" alt="スクリーンショット 2020-05-08 10.13.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/058f456c-57fd-b31b-b222-ade04e1bfd7a.png">

##アクション→メゾットの作成
<img width="1437" alt="スクリーンショット 2020-05-08 10.15.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/21e01783-549b-accf-7af2-b6a9373c49c7.png">
##POST設定
<img width="1429" alt="スクリーンショット 2020-05-08 10.16.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/e6ee4964-2108-376b-bc74-04037b716bff.png">

<img width="1440" alt="スクリーンショット 2020-05-08 10.16.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/e842e5d7-850c-c0f6-86ed-f9e1efd39801.png">

<img width="986" alt="スクリーンショット 2020-05-08 10.17.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/cbb1fb53-b914-43d6-e00f-674ca6dbdded.png">
<img width="1430" alt="スクリーンショット 2020-05-08 10.17.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/05b724f8-e031-df2e-edad-fa7ff10587c7.png">
<img width="1437" alt="スクリーンショット 2020-05-08 10.18.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/83f4de9f-41fd-c80e-6431-e84d2138a808.png">
＊ヘッダーの追加をクリック

##名前の欄に`X-Line-Signature`と入力、必須にチェックを入れる
<img width="1438" alt="スクリーンショット 2020-05-08 10.19.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/896b629f-b9f1-05c9-0c16-7df65b9c0aed.png">
##APIのデプロイ
<img width="1432" alt="スクリーンショット 2020-05-08 10.19.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/879952cc-dac5-4dac-26e7-017f7e365ca8.png"><img width="1440" alt="スクリーンショット 2020-05-08 10.31.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/4c157bdc-4cdd-90d4-58da-964139f406f4.png">

<img width="686" alt="スクリーンショット 2020-05-08 10.20.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/4fb2d110-74d4-5ab7-a199-03b6d2896521.png">

##確認
Lambdaの関数の画面へ行き、以下の写真のように関数にAPIGatewayが連携されていれば成功
<img width="1347" alt="スクリーンショット 2020-05-08 10.21.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/ad8f72c1-3ea5-2c61-decc-664f12f839d0.png">


#レイヤー作成
##ターミナルを開き、デスクトップに移動します　`cd deskTop`
<img width="563" alt="スクリーンショット 2020-05-08 10.29.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/620ceb72-89c6-1a29-ed4c-ed384b8dc961.png">
##ディレクトリの作成　`mkdir nodejs`
<img width="570" alt="スクリーンショット 2020-05-08 10.29.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/26d292e1-b4b8-ee15-b315-1e0e5b1aeb60.png">
##nodejsディレクトリに移動`cd nodejs`
<img width="562" alt="スクリーンショット 2020-05-08 10.29.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/0c5ef55b-2e93-4c27-c368-1e004f583608.png">
##npm初期処理`npm init -y`
<img width="562" alt="スクリーンショット 2020-05-08 10.30.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/d5d8dbb8-7545-f474-823d-81f7424b6cf1.png">
##lineBot-SDKをインストール `npm i @line/bot-sdk`
<img width="567" alt="スクリーンショット 2020-05-08 10.30.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/87163e7e-b941-ead5-7d29-2928e763e264.png">
##デスクトップにnodejsディレクトリがあるか確認

<img width="198" alt="スクリーンショット 2020-05-08 10.30.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/b864a246-7fd9-5b92-6849-54956c95b68c.png">
##そいつを圧縮
<img width="165" alt="スクリーンショット 2020-05-08 10.30.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/a09530e9-1662-6857-e2d6-7b3faefa7b43.png">

##lambdaのページを開き、レイヤーの設定画面へ移動する
<img width="1440" alt="スクリーンショット 2020-05-08 10.31.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/64ffa6b2-b3fb-dcbb-a2da-ba7435dc5c95.png">
<img width="1440" alt="スクリーンショット 2020-05-08 10.31.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/195699de-4222-1a74-229e-add29e624dc7.png">
##レイヤーを作成する
###名前はわかればなんでもいい、アップロードで先ほど作った圧縮ファイルを選択、ランタイムは以下の感じで。
<img width="1344" alt="スクリーンショット 2020-05-08 10.35.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/c0d6fbf2-b56e-8579-94c3-e2946edac63a.png">

##レイヤーをLambda関数に連携
関数のページに移動
<img width="1327" alt="スクリーンショット 2020-05-08 10.36.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/b94d3aa5-51b2-6b74-37c7-25e8c3bb9c54.png">
<img width="1323" alt="スクリーンショット 2020-05-08 10.36.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/e174c5be-d499-0bd7-7b8e-27e69990eb4f.png">
追加をクリック
<img width="907" alt="スクリーンショット 2020-05-08 10.37.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/69510ea5-d6a4-2249-85c7-01818331cbb5.png">
##確認
###関数画面でレイヤーで読み込めていたら成功
<img width="1325" alt="スクリーンショット 2020-05-08 10.37.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/90c1f72c-69bc-ea01-262b-d1d8759317fb.png">


#環境変数設定
###関数名をクリックして下へスクロール、環境変数の項目を探す、編集をクリック
<img width="1352" alt="スクリーンショット 2020-05-08 10.37.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/8f014020-25f8-ab13-f16a-26f12e950d3e.png">
<img width="1320" alt="スクリーンショット 2020-05-08 10.38.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/092585d3-e7d8-0dc5-07f4-8c2f7e29deae.png">
##以下のように入力して保存する（値には先日作ったLINEBotのものを入れる）
<img width="911" alt="スクリーンショット 2020-05-08 10.40.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/87cfa571-bffc-031f-4274-387434be121d.png">
##入力例
<img width="888" alt="スクリーンショット 2020-05-08 10.40.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/6438c961-b2c4-40b6-d210-16fcf3cfb4a6.png">

##確認、以下のようになってたら成功
<img width="1346" alt="スクリーンショット 2020-05-08 11.13.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/e610f383-6ff9-e5a4-44ec-2e36fdb57c19.png">


#終わりに
これであとはコードを書いてwebhookURLを設定するだけでサーバーレスlinebotが完成します！
明日の記事をお楽しみに！

本記事：[LINEBotをみんなで作ろう〜レイヤーとAPIgateway設定編](https://qiita.com/inoue2002/items/ab226d9836a891b01bc9)
次の記事：[LINEBotをみんなで作ろう〜コードを実装編](https://qiita.com/inoue2002/items/dbbd862d6149c83f6513)

[LINEBotをみんなで作ろう〜環境構築編〜](https://qiita.com/inoue2002/items/a87df2b520f8b6e37f42)
[LINEBotをみんなで作ろう〜LINEBot is 何？編](https://qiita.com/inoue2002/items/3a5019c07801bcf5ff75)
[LINEBotをみんなで作ろう〜おうむ返しbotを作ろう編〜](https://qiita.com/inoue2002/items/dcf40d5ebfe2454796fa)
[LINEBotをみんなで作ろう〜色々なメッセージを送ってみよう編](https://qiita.com/inoue2002/items/35fab5b7901aa94fafd2)
[LINEBotをみんなで作ろう〜Messageを分岐させるぞ編](https://qiita.com/inoue2002/items/650eca3f7dd6a5fccb63)
[LINEBotをみんなで作ろう〜AWSアカウントを作るぞ編](https://qiita.com/inoue2002/items/ad945981150c859911fc)