8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?