LoginSignup
8
2

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-05-08

この記事は下記の #GWアドベントカレンダー の 7日目の記事になります。

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

はじめに

こちらの内容は超初心者向けです。
公式ドキュメントを読める方はこちらをお読みいただく方が正確です。

昨日の記事をご覧になってない方はぜひ。
こちらの記事はGWアドベントカレンダーを通してLINEBotをサーバレスで作れるようになろう!ということを目標に書いている記事です。

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

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

lambda関数を作成

昨日の記事で作ったAWSアカウントでログインする

コンソールへ行く

検索欄にlambdaを入力、検索候補に出てくるLambdaをクリックする

スクリーンショット 2020-05-08 10.08.10.png

Lambdaの画面が出てくると右上でリージョンを確認する。(デフォルトがオハイヨになっていることが多い、お好きなリージョンをセ選択する)

スクリーンショット 2020-05-08 10.08.29.png

関数を作成するをクリック

スクリーンショット 2020-05-08 10.09.00.png

以下の画像の通り、関数名、ランタイム、ロール等の設定を行う、できたら作成ボタンをクリック

スクリーンショット 2020-05-08 10.09.51.png
スクリーンショット 2020-05-08 10.10.02.png

以下の画面が出てきたら成功

スクリーンショット 2020-05-08 10.11.01.png

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

APIgateway作成

一度AWSの一番最初の画面に戻って、検索欄にapigatewayと入力しAPIGatewayを選択する

スクリーンショット 2020-05-08 10.11.43.png

RESTAPIを構築

スクリーンショット 2020-05-08 10.13.13.png

API名、エンドポイントタイプなどを設定

スクリーンショット 2020-05-08 10.13.53.png

アクション→メゾットの作成

スクリーンショット 2020-05-08 10.15.15.png

POST設定

スクリーンショット 2020-05-08 10.16.00.png

スクリーンショット 2020-05-08 10.16.31.png

スクリーンショット 2020-05-08 10.17.16.png
スクリーンショット 2020-05-08 10.17.32.png
スクリーンショット 2020-05-08 10.18.07.png
*ヘッダーの追加をクリック

名前の欄にX-Line-Signatureと入力、必須にチェックを入れる

スクリーンショット 2020-05-08 10.19.42.png

APIのデプロイ

スクリーンショット 2020-05-08 10.19.52.pngスクリーンショット 2020-05-08 10.31.30.png

スクリーンショット 2020-05-08 10.20.27.png

確認

Lambdaの関数の画面へ行き、以下の写真のように関数にAPIGatewayが連携されていれば成功
スクリーンショット 2020-05-08 10.21.00.png

レイヤー作成

ターミナルを開き、デスクトップに移動します cd deskTop

スクリーンショット 2020-05-08 10.29.31.png

ディレクトリの作成 mkdir nodejs

スクリーンショット 2020-05-08 10.29.43.png

nodejsディレクトリに移動cd nodejs

スクリーンショット 2020-05-08 10.29.54.png

npm初期処理npm init -y

スクリーンショット 2020-05-08 10.30.05.png

lineBot-SDKをインストール npm i @line/bot-sdk

スクリーンショット 2020-05-08 10.30.23.png

デスクトップにnodejsディレクトリがあるか確認

スクリーンショット 2020-05-08 10.30.40.png

そいつを圧縮

スクリーンショット 2020-05-08 10.30.54.png

lambdaのページを開き、レイヤーの設定画面へ移動する

スクリーンショット 2020-05-08 10.31.08.png
スクリーンショット 2020-05-08 10.31.30.png

レイヤーを作成する

名前はわかればなんでもいい、アップロードで先ほど作った圧縮ファイルを選択、ランタイムは以下の感じで。

スクリーンショット 2020-05-08 10.35.05.png

レイヤーをLambda関数に連携

関数のページに移動
スクリーンショット 2020-05-08 10.36.32.png
スクリーンショット 2020-05-08 10.36.49.png
追加をクリック
スクリーンショット 2020-05-08 10.37.11.png

確認

関数画面でレイヤーで読み込めていたら成功

スクリーンショット 2020-05-08 10.37.28.png

環境変数設定

関数名をクリックして下へスクロール、環境変数の項目を探す、編集をクリック

スクリーンショット 2020-05-08 10.37.56.png
スクリーンショット 2020-05-08 10.38.21.png

以下のように入力して保存する(値には先日作ったLINEBotのものを入れる)

スクリーンショット 2020-05-08 10.40.22.png

入力例

スクリーンショット 2020-05-08 10.40.48.png

確認、以下のようになってたら成功

スクリーンショット 2020-05-08 11.13.46.png

終わりに

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

本記事:LINEBotをみんなで作ろう〜レイヤーとAPIgateway設定編
次の記事:LINEBotをみんなで作ろう〜コードを実装編

LINEBotをみんなで作ろう〜環境構築編〜
LINEBotをみんなで作ろう〜LINEBot is 何?編
LINEBotをみんなで作ろう〜おうむ返しbotを作ろう編〜
LINEBotをみんなで作ろう〜色々なメッセージを送ってみよう編
LINEBotをみんなで作ろう〜Messageを分岐させるぞ編
LINEBotをみんなで作ろう〜AWSアカウントを作るぞ編

8
2
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
8
2