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?