サーバレスアーキテクチャでLINE BOTが多分作れるようになるハンズオン

サーバレスアーキテクチャで
LINE BOTが
多分作れるようになる
ハンズオン
2020/12/19
Yoshiki Kobayashi

View Slide

Hello World!!!
2
器用貧乏な何でも屋
本職はサーバサイド。フロントも好き。SQLは苦手。オ
ブジェクト指向はまだいまいち使いこなせないくせに
クラス使って書くことの方が多い。
得意な言語はJavaScript(ES5, ES6)、Ruby。最近
GolangとTypeScriptがアツい。実はインフラの方が
経歴が長い人。
Yoshiki
Kobayashi
@yoshi0202
https://code-plum.dev
@codeplumdev

View Slide

過去の資料
3
定期的にこんな感じで
ゆるーくやらせてもらっています
過去の資料はこちら https://speakerdeck.com/yoshi0202
よかったらスターつけてください！！！！

View Slide

1. 本日のハンズオンについて
2. 今日の成果物
3. サーバレスアーキテクチャの説明
4. じゃあデメリットは？
5. Lambdaを設定してみる
6. API Gatewayを使うよ
7. LINEと連携してみよう
8. APIと連携してみよう
9. オリジナル要素を入れるには
10. 最後に
本日のアジェンダ
4

View Slide

本日のハンズオンについて
1
5

View Slide

6
みなさま
本日はお集まりいただき
ありがとうございます

View Slide

7
12月。
今年ももう終わりを
迎えますね。

View Slide

8
今年、どうでした？

View Slide

9
僕は

View Slide

10
めっちゃいろいろ活動できた
環境も変わった
● 転職(上流現場の何でも屋 → 自社サ開発エンジニア)
● オンラインLT(メンター繋がりで二回ほど)
● オンラインハンズオン(試験的なもの含め二回)
● オフラインハンズオン登壇(本日含め二回目)
● 利用言語(Golang, Java, Kotlin)
プライベートもいろいろ変わったので興味ある人は忘年会か何かで聞いてね

View Slide

11
つどいのみなさまのおかげで
ハンズオン実施の機会が
頂けてます
本当に感謝

View Slide

本日はハンズオンです
有意義な時間になるように頑張
ります
12

View Slide

13
スライドについて
● ページ単位でのスライドの写真撮影はご遠慮ください
● スライドはSpeakerDeckにアップロードします
● 再配布や再利用はSpeakerDeckを参照してください
● ハンズオン中はコピペが多いのでGoogleスライドを使うと楽
だと思います

View Slide

14
ハンズオンについての諸注意
● 基本的には全員ペースを合わせて進めていきます
● プレゼンでは無いので質問は随時受け付けます
● わからないところあれば気軽に声をかけてください
● 前回に引き続き写真撮影大歓迎です
● 途中で何度か休憩を挟む予定です
● AWSを使います(料金的なところが気になる人はご連絡ください )

View Slide

15
ハンズオンについての諸注意②
● 2020年12月時点のAWS、LINEをベースにしてます
● サービス仕様が変わることもあります ※
● ハンズオン当日までに画面が変わってたら泣く
● オンライン参加の方はマイクミュートでお願いします
● ガヤスレッドをSlackに建てるのでそこに質問ください
● もちろんmeetで話しかけてもらってもOKです！
● みんなでわいわい楽しくやりましょう！！！！！

View Slide

16
(余談) しっかりとフラグ回収して
AWS の画面キャプチャ全部撮り直した話
なんか増えてる・・・
Lambdaの画面めちゃくちゃ
変わっとるやんけ！！

View Slide

今日の成果物
2
17

View Slide

今日の成果物
18
今日作るもの
サーバレスアーキテクチャな
LINE BOT

View Slide

今日の成果物
19
いろいろ細かい説明は後にして
おいてまずはどんなものかをご
紹介

View Slide

今日の成果物
20

View Slide

今日の成果物
21
意外と簡単につくれるので
誰か便利なもの作ったら
共有してください
っていうか是非作って欲しい
最後までやるとわかりますが

View Slide

今日の成果物
22
こんなのあったらいいよね〜
とか
こうしたら面白いよね〜
みたいな意見
大歓迎です

View Slide

今日の成果物
23
本日の目標
● サーバレスアーキテクチャの概念を理解する
● サーバレスのメリットデメリットを理解する
● LINEアカウントとのやりとりの方法を理解する
● LINE BOTが作れるようになる
● Lambda + API Gateway を組み合わせた感動に触れる

View Slide

サーバレスアーキテクチャの説明
3
24

View Slide

25
では早速始めていきますよ

View Slide

26
そもそも
サーバレスアーキテクチャを
使っていく前に

View Slide

27
サーバレス
アーキテクチャってなんだ

View Slide

28
サーバーレス・コンピューティング（Serverless computing）と
は、クラウド・プロバイダーがアプリケーションに必要なマシン・リ
ソースの割り当てを動的に管理し、事前に購入されたことに基づ
く請求ではなく、各アプリケーション要求を満たすために使用さ
れる個々のリソース量に基づいた請求を行うようなクラウド・コン
ピューティングの実行モデル（英語版）である。 [1]
サーバレスとは
By Wikipedia

View Slide

29
アーキテクチャ（architecture）は、英語で「建築学」、「建築
術」、「構造」を意味する語である。
アーキテクチャとは
By Wikipedia

View Slide

30
相変わらずWikipediaさんは
難しい説明が好きだなぁ

View Slide

31
めちゃくちゃざっくり簡単にいうと
アプリケーションを動かすのに
サーバを必要としないアプリ
ケーションの構成！！

View Slide

32
皆さんの頭の中
どゆこと？
具体例無いの？

View Slide

33
今までの構成
アクセスする人 Webアプリケーション
アプリケーションサーバ
(例だとEC2)
データベースサーバ
(例だとRDS)
ブラウザを介して
アクセス(リクエスト)
サーバで処理した結果を
ブラウザに返却(レスポンス)
いろいろ
連携
いろいろ
連携

View Slide

34
サーバレスアーキテクチャ
(Lambda + API Gateway + DynamoDBを使った例)
アクセスする人 Webアプリケーション
API Gateway Lambda DynamoDB
リクエストを
API Gatewayで受ける
Lambdaで
任意の処理を実行
(使うなら)DynamoDBとかも
使ってデータ保存も可

View Slide

35
こんな感じで
アプリケーションを動かす時に
EC2とかRDSを必要としない設
計思想で作られたアプリケー
ション

View Slide

36
なんとなく
イメージできましたか？

View Slide

37
でもこれって
何が嬉しいんや

View Slide

38
サーバレスでない構成で
アプリケーションを構築する時の
ことを考えてみる
メリットを理解するために

View Slide

39
サービス開始時のお話
ここからの話は
全てフィクションです

View Slide

40
例えば
「通知、キュー、1TB以上のレコードが保存できるス
トレージ、動画ストリーミングの機能を実装したアプリ
ケーションを2週間ぐらいで実装したい！」
って要望、どうします？

View Slide

41
例えば
A. 納期が短すぎるとプロマネを
問い詰める

View Slide

42
● 通知機能
○ アプリで無理やりできなくはないけど・・・
● キューイング
○ 規模は？どのくらいの感覚でキューが貯まる？？
● 大容量ストレージ
○ Webサーバと兼任しても良いけどメンテがなぁ
● ビデオストリーミング
○ いや、どんな技術使えばええんや

View Slide

43
あと
単純に
仕組みが良くわからんくて
調査に時間かかりません？

View Slide

44
コーディングに必要な期間も
めっちゃ長くなりそう

View Slide

45
サーバレスアーキテクチャを採用すると
ある程度
物が準備されてるから
それなりの物は簡単に作れる

View Slide

46
● 通知機能
● キューイング
● 大容量ストレージ
● ビデオストリーミング
Amazon Simple Notification Service
Amazon SQS
Amazon S3
AWS Media Services
(よく知らない)

View Slide

47
例えば2
「問い合わせフォームが欲しいんだけどアクセスもそ
んなにないから、できる限り低コストで作ってもらえ
ないかなぁ。あ、カスタマイズできないし
GoogleFormは使いたくないや！！」

View Slide

48
例えば2
A. いやGoogleForm使おうよ

View Slide

49
● アクセスがそんなにない
○ 低スペックのサーバでも余るぐらいのリソース
● アプリの規模が小さくて局所的に利用
○ サーバ構築めんどくさいなぁ
● できる限り小コスト
○ サーバ24時間起動してるのもったいない

View Slide

50
サーバを構築せずアプリケー
ションを起動できるから構築の
手間もない

View Slide

51
あと、使う時だけ動くから24時間
環境が動いていることがなくて
小コスト&リソースが余ることがな
い

View Slide

52
● アクセスがそんなにない
➢ 最低限のリソースで起動できる
● アプリの規模が小さくて局所的
➢ 画面ポチポチでリソース作れるから楽
● できる限り小コスト
➢ 使う時だけ利用するからコストダウン可能

View Slide

53
例えば3
「絶対に落ちないシステム作ってよ！
小林くんなら余裕だよね〜〜〜www」

View Slide

54
例えば3
A. そんなものは作れません

View Slide

55
● 絶対に落ちないの求めるかぁ・・・
○ サーバ100台用意しようが落ちる時は落ちる
○ アクセススパイク時スケーリングが間に合わない
○ 事前にアクセスが読めないとつらい
○ でもぶっちゃけ落ちないシステムなんて存在しない
○ (タイムリーだけどGoogleもこの前落ちてたしね)

View Slide

56
裏側で勝手にスケーリングしてく
れるからスケーリング考えなくて
良い

View Slide

57
処理単位で動くのでスペック(と
いう表現は正しいか微妙だけど)
もそのタイミングで変更可能

View Slide

58
でも
急なスケーリングには耐えられ
ないけどね

View Slide

59
● 多くの機能を簡単に
● できる限り短納期で
● コストもそこまでかからず
● よしなにスケーリングしてくれる
そんな都合の良いシステムが作れますよ
まとめると

View Slide

じゃあデメリットは？
4
60

View Slide

61
そんな素晴らしい

View Slide

62
やっぱりメリットもあれば
デメリットもあるという
ことを知っておこう

View Slide

①なんやかんや落ちる
②環境に依存しちゃう
③バージョンアップ対応
63

View Slide

64

View Slide

65
なんやかんや落ちる

View Slide

66
オペミスによりS3が逝く
新機能追加でDynamoDBが逝く
オペミスによりELBが逝く
データセンターの空調が死んで
EC2が逝く

View Slide

67
まあ、AWSも
システムなので・・・
落ちる時は落ちる

View Slide

68

View Slide

69
環境に依存しちゃう
会社の都合でAWS→GCPとか
やる時にめちゃくちゃ苦労する
(試される環境非依存なアーキ
テクチャ)

View Slide

70
偉い人が突然
「AWSが値上げしたから
安いところに乗り換えろ」
みたいなこと普通にありそう

View Slide

71
S3ガンガンに使う〜〜とか、
ぐらいならまだしも
Kinesis系とかSageMaker系
(ML)とか辛そう
※GCPとAzureあんま知らないので代替はあるかも

View Slide

72

View Slide

73
バージョンアップ対応
AWS「APIのバージョンアップし
ます！昔のAPIは急に使えなく
なります！！！」
プログラマ「」

View Slide

74
バージョンアップ対応
これ、
まあまあよくあることです

View Slide

75
やっぱりメリットもあれば
デメリットもあるという
ことを知っておこう

View Slide

76
(もちろんケースにはよるが)
積極的に取り入れて良いと
個人的には思います

View Slide

77
Tips ①
最近あった切ない事

View Slide

Lambdaを設定してみる
5
78

View Slide

79
長々と説明しましたが
今日は手を動かすハンズオン
早速Lambdaを使ってみよう

View Slide

80
っと
その前に

View Slide

81
Lambda is 何

View Slide

82
めちゃくちゃ簡単にいうと
アプリケーションをその都度動
かせる実行環境
FaaS(Function as a Service)
とか言われる

View Slide

83
使える言語は？
Java、Go、PowerShell、
Node.js、C#、Python、Ruby
とかとか
https://aws.amazon.com/jp/lambda/faqs/

View Slide

84
使える言語は？
あくまで言語が使えるだけなの
で、フレームワークを動かしたり
は(物によるけど)今はできな
いってことで

View Slide

85
細かいことを考えるよりも
一回使ってみよう！！

View Slide

86
Lambdaで
Fizz Buzz
動かしてみるの巻

View Slide

87
AWSログイン後
検索バーからlambda を検索

View Slide

88
そしたら右上の方にある「関数
の作成」を選択！

View Slide

89
関数名を適当に入力して、右下の関数の作成を選択！

View Slide

90
(余談)画面が違う人はここを確認
オフになっていることを確認！

View Slide

91
(ちなみに)ここのランタイムで言語が選択できます
今回はせっかくなので
(というよりも僕の都合上ですが)
Node.js 12.x のランタイムで
やっていこうと思います

View Slide

92
作成後画面

View Slide

93
作成後画面ここでテスト実行できる
ログとか見られる
ここにコード書いていく！
これでデプロイする
(詳しくは後述)

View Slide

94
では実際にコードを
書いていこう

View Slide

95
こちらのコードをLambdaにコピペ！
exports.handler = async (event) => {
const max = 50;
for (let i = 1; i <= max; i++) {
if (i % 3 === 0 && i % 5 === 0) {
console.log("Fizz Buzz")
} else if (i % 3 === 0) {
console.log("Fizz")
} else if (i % 5 === 0) {
console.log("Buzz")
} else {
console.log(i)
}
}
};

View Slide

96
そしたら
右上の[デプロイ]ボタンを
押すことを忘れずに
これ！！！！！

View Slide

97
(ちょっとだけデプロイについて補足)
Lambdaではコード修正の度に
毎回新しいコンテナが作られ、
新規作成されたコンテナにアプ
リケーションがデプロイされます

View Slide

98
今動いてる
アプリケーション
v0.1
デプロイを実行
デプロイ後の
アプリケーション
v0.2
古いアプリケーションコンテナ
を破棄して
新しいアプリケーションコンテ
ナが作成される
①
②

View Slide

99
コードが書けたので
次はテストを実行して
Fizz Buzzを体験してみる

View Slide

100
テストパラメータを設定
右上のテストボタンを選択して
テストパラメータを設定していく

View Slide

101
テストイベントの設定
イベント名は適当に入力
パラメータは初期で
OK
右下の作成ボタンを選択

View Slide

102
テストを実行！すると…？？

View Slide

103
下の部分にFizz Buzzの結果が表示された

View Slide

104
こんな感じで
Lambdaを使うと
ブラウザ上で簡単にアプリケー
ションを実行することができる

View Slide

105
このままでも充分すごいんだけど
API Gatewayと
組み合わせることで
真価が発揮されるsugoiやつ

View Slide

106
ではでは早速
API Gatewayと
組み合わせてみよう

View Slide

API Gateway を使うよ
6
107

View Slide

API Gatewayを使うよ
108
細かいことはおいといて、
API Gatewayと組み合わせて
みよう

View Slide

109
その前に

View Slide

110
API Gateway
Is
何

View Slide

111
HTTP(HTTPS)の
リクエストの受け口

View Slide

112
えと、つまり
HTTP通信を
API Gatewayで受けるって
どういうこと？

View Slide

113
サーバでリクエストを受け取る時のイメージ
http://example.comに
アクセス
ブラウザに
レスポンスを返却
なんか
アプリがいろいろ動いてる
EC2

View Slide

114
API Gatewayでリクエストを受け取る時のイメージ
http://example.comに
アクセス
ブラウザに
レスポンスを返却
Lambda
DynamoDB
Amazon
SQS
Amazon
SNS
アクセスは
API Gateway
で受け取る
連携するサービスを
自由に選択

View Slide

115
API Gateway + Lambdaを使うと
HTTPのリクエストを
トリガーに様々な操作に繋げる
ことができる

View Slide

116
ちょっとだけ
思い出してみよう

View Slide

117
Lambdaを実行するには
このボタンを押さないといけな
かった

View Slide

118
API Gateway + Lambdaを使うと
HTTPリクエストを受け取る
↓
予め用意しておいた
Lambdaの実行
に繋げることができる

View Slide

119
さっそく
API Gatewayの設定に
入っていく

View Slide

120
AWSログイン後検索バー
からAPI Gateway を検索

View Slide

121
右上の APIを作成
を選択！

View Slide

122
APIタイプは
HTTP API

View Slide

123
[統合を追加]から
さっき作ったLambdaを選択
適当なAPI名を入力

View Slide

もうちょっとで
終わります・・・
124
アクセスするパスは / で
HTTPメソッドはGET

View Slide

このまま次へで
ヨシ！
125

View Slide

作成を選択！！！
126

View Slide

API Gatewayの設定完了
127

View Slide

早速アクセスしてみよう
128
人によってURLが異なるので、
各自クリック

View Slide

129
あれ・・・

View Slide

130
さっきFizz Buzz を Lambdaに書いたのに・・・

View Slide

131
ちょっくら
Lambda、
見直してみますかね

View Slide

132
なぜブラウザに [null] と表示されるのか
const max = 50;
for (let i = 1; i <= max; i++) {
if (i % 3 === 0 && i % 5 === 0) {
} else if (i % 3 === 0) {
console.log("Fizz")
} else if (i % 5 === 0) {
console.log("Buzz")
} else {
console.log(i)
}
}
};

View Slide

133
const max = 50;
for (let i = 1; i <= max; i++) {
if (i % 3 === 0 && i % 5 === 0) {
} else if (i % 3 === 0) {
console.log("Fizz")
} else if (i % 5 === 0) {
console.log("Buzz")
} else {
console.log(i)
}
}
};
そもそもこのコード、
console.log()で
ログ出力するだけで
レスポンス返してなくね？？？
なぜブラウザに [null] と表示されるのか

View Slide

134
Fizz Buzzのコードをこんな感じに変えてみてください
const max = 50;
let arr = [];
for (let i = 1; i <= max; i++) {
if (i % 3 === 0 && i % 5 === 0) {
arr.push("Fizz Buzz");
} else if (i % 3 === 0) {
arr.push("Fizz");
} else if (i % 5 === 0) {
arr.push("Buzz");
} else {
arr.push(i);
}
}
return {data: arr}
};

View Slide

135
コード変更したらデプロイボタンを忘れずに！
これ！！！！！

View Slide

デプロイしたらもう一回APIにア
クセスしてみよう
136
人によってURLが異なるので、
各自クリック

View Slide

137
Fizz Buzzの結果がブラウザに表示された
簡単にAPI 作れましたすごい！！！

View Slide

138
こんな感じで
明示的に関数をreturn しない
とレスポンスが返らないのです。

View Slide

139
ではではお待ちかね
次はLINEと連携します
よ〜〜〜〜〜〜〜〜

View Slide

140
(余談) JavaScriptは明示的にreturnしないと値が返らない
function test() {
var a = “aaaaa”
return a
}
function test2() {
var a = “aaaaa”
}
console.log(test()); // “aaaaa”
console.log(test2()); // undefined

View Slide

141
(余談) Rubyの動きは個人的に不気味
def test
a = “aiueo”
end
def test2
a = “aiueo”
return a
end
def test3
“aiueo”
end
p test # “aiueo”
p test2 # “aiueo”
p test3 # “aiueo”
明示的にreturnしなくても最後に評価された式が返却される

View Slide

142
(余談)こんな事が発生するから
一律明示的に書いてあげた方が良いと思うタイプ
def test(bool)
If bool
return “true”
end
“false”
end
def test2(bool)
If bool
“true”
end
“false”
end
p test(true) # “true”
p test(true) # “false”

View Slide

143
Tips ②
最近
買ったもの

View Slide

LINEと連携してみよう
7
144

View Slide

145
遂にLINEと連携します！
スマホの準備はできてますか

View Slide

146
の前に・・・
いくつか準備しておく必要
と
理解しておく必要があります

View Slide

147
準備
LINE Developerで
プロバイダとアカウントを
作成しよう

View Slide

148
LINE Developerについてちょっとだけ説明
https://developers.live.biz/
事前にログイン確認はしてある・・よね・・？

View Slide

149
LINE Developerについてちょっとだけ説明
公式アカウントが作れたり
API Tokenが置いてある
開発者向けの管理画面

View Slide

150
LINE Developer consoleにログインして
Providerを作成
クリック

View Slide

151
適当な名前を入力してProviderを作成

View Slide

152
こんな画面になります

View Slide

153
Create Messaging API Channel を選択

View Slide

154
適当に項目を入力していきます
友達登録した時の名前になるので
愛着が湧くやつ！
説明(なんでもOK)
ぶっちゃけなんでもOK
ぶっちゃけなんでもOK

View Slide

155
適当に項目を入力していきます
二つの項目にチェックを入れて
Createを選択

View Slide

156
アカウント完成

View Slide

157
最終的には
このアカウントに
メッセージを送って
Lambdaと連携して
良い感じにします

View Slide

158
じゃあ早速組み込み！
の前に・・・

View Slide

159
LINEからのメッセージって
どうやったら受け取れるんや

View Slide

160
っていうか
LINEの仕組みって
どうなっとるんや

View Slide

161
登場人物
API
Gateway
Lambda
スマートフォン
(LINE アプリ)
さっき作った
アカウント

View Slide

162
まずここに着目
API Gateway
Lambda
(LINE アプリ)
さっき作った
アカウント
“こんにちは！” ってメッセージ送信
“こんにちは！○○さん”
ってメッセージを送信元に
返信
Webhookイベント送信
Lambdaキック
なんらかしらの
処理結果を載せて
Messaging APIを実行
LINE Messaging API
(LINEが用意したAPI)

View Slide

普段やってるように誰かにメッセージを送るのと同様
今回はさっき作ったアカウントにメッセージを送信するような動き
をイメージしてください
163
スマートフォン → LINEアカウント
Aさん Bさん
アカウント間の
メッセージのやりとり

View Slide

164
次はここ
API Gateway
Lambda
(LINE アプリ)
さっき作った
アカウント
返信
Lambdaキック
LINE Messaging API

View Slide

165
LINEアカウント → API Gateway
LINEアカウントにメッセージが送られると、LINEのサーバから
API GatewayにHTTPリクエストが送られる
この仕組みをWebhookと呼ぶ
メッセージ送信
任意のリクエスト先
HTTPリクエスト
(Webhook)送信
今回の例だとここが
API GatewayのURLになる
(LINE アプリ)
テストBOT Aさん
テストBOT Bさん
テストBOT Cさん

View Slide

166
ここの仕組みがわかりづらい
ので
もう少し噛み砕くよ

View Slide

167
LINEアカウント → API Gateway
「作成したLINEのアカウント」にメッセージが送られたことの通知
をもらうイメージ
“こんにちは！”って
メッセージ送信
Webhook送信先として
作成した
API Gateway
msg:
“こんにちは！ ”
From: “○○”
Msg: “こんにちは！ ”
LINEの
サーバ的な
物
From: “○○”
To: “テストBOT”
Msg: “こんにちは！ ”
〇〇って人からテストBOTっていう
アカウントにメッセージ来たから、内
容と一緒に通知(Webhook)しとこ
これがWebhookと呼ばれる物
“こんにちは！”って
メッセージが届く！
(LINE アプリ)
画面で設定したWebhookURLに通
知

View Slide

168
最後はこれ！
API Gateway
Lambda
(LINE アプリ)
さっき作った
アカウント
返信
Lambdaキック
LINE Messaging API

View Slide

169
Lambda → LINE
任意のアカウント(今回だと送り元)に
任意のメッセージを送る
BOTからメッセージが返却されてく
る！
msg:
“こんにちは！テス
トBOTです”
LINEの
サーバ的な
物
To: “〇〇”
Msg: “こんにちは！テ
ストBOTです”
メッセージをリクエストに付与
“こんにちは！テストBOTです”
ってメッセージを送信
Lambda
LINE の用意したMessaging API
をLambdaから実行
(LINE アプリ)

View Slide

170
ポイント
Webhookへのレスポンスは
あくまでLambdaを実行する
トリガー

View Slide

171
ポイント
実際にアプリ(ユーザ側アカウン
ト)にメッセージを送るのは
LambdaからLINEのAPIを実
行する

View Slide

172
流れを再掲
API Gateway
Lambda
(LINE アプリ)
さっき作った
アカウント
返信
Lambdaキック
LINE Messaging API
Webhookイベントへのレスポンス
で
はなく
Messaging APIを実行して
Lambdaからメッセージを送信

View Slide

173
一通り説明が完了したので
LINEとの組み込みに
入っていく

View Slide

174
まずは
LINEからメッセージ送信
↓
その内容をそのまま返信
するオウム返しBOTを
作っていく

View Slide

175
いつものごとく
ソースコードはすでに
用意済みです

View Slide

176
ソースコードはこちらから
https://github.com/yoshi0202/serverless-handson
Cloneしたあとブランチを
切り替えてください

View Slide

177
Clone & ブランチの切り替え
ターミナルを開き任意のフォルダでgit clone
$ git clone https://github.com/yoshi0202/serverless-handson
※エディタで開けるような箇所がCloneするのが良さそう！
移動
$ cd serverless-handson
ブランチの切り替え
$ git checkout hello-lambda

View Slide

178
cloneしたディレクトリ
こんな感じのZipファイルが
存在していませんか？

View Slide

179
ここでLambdaへデプロイ
する方法のおさらい

View Slide

180
Lambda画面の再掲ここでテスト実行できる
ログとか見られる
ここにコード書いていく！
これでデプロイする
(詳しくは後述)

View Slide

181
いままではブラウザ画面で
直接ソースコード書いてた

View Slide

182
でもそれだと・・・
● Git管理どうするの？
○ ブラウザで直接デプロイできるので管理しづらい
● 規模が大きくなった時にブラウザコーディングはつらい
○ そうだよねぇ〜
● やっぱりお気に入りのエディタで開発したい！
○ Vimを崇めよ・・・
● (npmモジュール追加したい時どうするんだ・・？)

View Slide

183
そんな課題を解決できる機能
ローカルで開発して
ソースコードをZipファイルに圧
縮してそのファイルを
デプロイする方法がある

View Slide

184
「Zip」がわからない人
聞いてください

View Slide

185
Tips ③
休憩中にでもアイコン好きなのに設
定しておくとより楽しいかも

View Slide

186
さっそく先ほどのzipを
Lambdaにデプロイしていく

View Slide

187
先ほど作成したLambdaのここを開く
その後さっきCloneしたソースコード内[api_v1.zip]を
選択してデプロイしてみよう！

View Slide

188

View Slide

189
コーディングしてた部分がこんな感じに変わったらOK

View Slide

190
次は
LINEからのWebhook通信の
受け口を
API Gateway に
用意してあげる

View Slide

191
設定箇所でいうとこいつ
API Gateway
Lambda
(LINE アプリ)
さっき作った
アカウント
返信
Lambdaキック
LINE Messaging API

View Slide

192
先ほど作ったAPI Gatewayを開き
左側のルートを選択

View Slide

193
現在だと ‘/’ というルーティングしかないので、
‘/hello’ っていうルーティングを作っていきます

View Slide

194
Createボタンを押したあと、
こんな感じで画面を編集
LINEからのWebhookはPOSTでく
るのでPOSTを選択
/hello というルーティングを追加

View Slide

195
（余談）ルートってなに？
Railsでいうと
routes.rbみたいなもの
Rails.application.routes.draw do
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
namespace :book do
get '/index', to: 'book#index'
get '/search', to: 'book#search'
end
end

View Slide

196
routes.rbに設定がないと
事前に設定しておかないと
エラーになったと思います。
それと同じような感じ

View Slide

197
作成した /hello を設定していく
/hello の下のPOSTをクリック

View Slide

198
API Gateway初期設定の時のLambda設定をそのまま使う
初回に作成したLambda設定を選
択
統合をアタッチする
を選択

View Slide

199
/hello の隣に LambdaマークがついたらOK

View Slide

200
最後に
API Gatewayに割り振られているURLを
コピーしておこう

View Slide

201
次は
LINE側の設定を
変更してく

View Slide

202
LINE Developersにアクセスし、
先ほど作ったBOTの[Messaging API]を選択

View Slide

203
Webhook settings の欄にある
Webhook URL の Editを選択

View Slide

204
先ほどコピーした API GatewayのURL
+
/helloを入力して Updateを選択！

View Slide

205
ボタンが [Verify]に変わると思うので
押してみる

View Slide

206
問題なく設定できていれば
Success と表示されるはず
できない人は声かけてください〜

View Slide

207
もう少し続きます〜
引き続きLINE側の設定を
やっていきます

View Slide

208
細かい設定を続けていきます
Webhookを利用するので
ここをクリック

View Slide

209
細かい設定を続けていきます
Auto-replyは無効にしたいので
editを選択

View Slide

210
(心の声)
なぜ全く違う画面に遷移するんだLINEよ・・・
うっとおしいのでオフ！
今回は使わないのでオフ！

View Slide

211
設定後はこんな感じ！
※あいさつメッセージとか応答メッセージとか
どんなものか聞きたい人は聞いてください

View Slide

212
元の画面に戻ってブラウザを更新すると
Auto-reply, Greeting messagesが
DisabledになっていればOK
LINE Developers画面側の
ページを更新してから確認！

View Slide

213
最後に Channel access token を発行！
(LINE API 使うために必要なAPI キーみたいなもの)
このボタンをクリック！
次に使うのでコピーしておく！

View Slide

214
API キーとか
APIの概念がわからない人
聞いてください

View Slide

215
以上で
LINE側の設定は完了

View Slide

216
(余談)
先ほど発行したchannel access token(以下token)
Long-lived バージョンといって有効期限がありません。
LINE 側の見解としては
「Long-lived使わずに
有効期限付きのtoken使ってくれや〜」
ってことっぽいです。
(前職でもそうやってた)
https://developers.line.biz/ja/reference/messaging-api/#issue-channel-access-token

View Slide

217
(余談)
Q. なぜ Long-livedを使っているか
A.コーディング長くなるから
&
取得したAPIキーを保存しておく領域(DB等)の連携が
必要になり今回のハンズオンの主旨とは異なるから

View Slide

218
(余談)
簡単に言えば
本来は違うAPIキー使った方が良いよ！
&
その方が安全だよ！
ってことです。捕捉まで。

View Slide

219
最後ですよ〜
さっきコピーした
channel access tokenを
Lambdaに設定していく

View Slide

220
ところで
機密情報(今回だとToken)
の扱いって
どんな感じにしたら良いか
覚えてます？？

View Slide

221
①ソースコードに直接書く
②DBに保存する
③環境変数から呼び出す

View Slide

222
それぞれ
メリットデメリットは
ありますが、
①はNGかなぁ〜

View Slide

223
今回はDBも使わないので
③の方法でやります

View Slide

224
設定してたLambdaに戻りまして
編集ボタンをクリック

View Slide

225
設定してたLambdaに戻りまして
選択

View Slide

226
LINE_TOKEN というキー名で変数を追加 & 保存
LINE_TOKEN というキー名にして
ください！
さっきコピーしてきた
TOKENを貼り
付け

View Slide

227
TOKENが保存されていればOK

View Slide

228
ちょっとだけプログラム見てみる
LINE_TOKENは
この辺りで使ってます興味がある人は追ってみてね

View Slide

229
以上で
LINE
+
API Gateway
+
Lambda
の設定が完了！！！

View Slide

230
さて
お楽しみの動作確認

View Slide

231
LINE Developers にあったQRコード
これをLINEで読み取ってみると・・・

View Slide

232
友達登録できた

View Slide

233
実際にメッセージを送ってみると・・・
スタンプとかLINE絵文字は
非対応なので
メッセージだけで勘弁してくれ

View Slide

234
Lambdaと一緒に動いてる

View Slide

235
以上で
サーバレスアーキテクチャを
使ったLINE BOT の構築を
することができた

View Slide

236
プログラムは用意されてたけど
意外と簡単だったでしょう？？

View Slide

237
API Gateway + Lambda
を使わないとどうなってたか

View Slide

238
● たった二つのルーティングのためにEC2を用意
➢ 規模が少ないのにコストが見合わないなぁ
● っていうかEC2準備でめっちゃ時間かかる
➢ デプロイカリキュラムのつらみを思い出してくれ
● ターミナルはほぼ操作してない
➢ (慣れて欲しいけど)CLIアレルギーの人でも簡単

View Slide

239
作る物によってはメリットが生き
てくるので
積極的に
使っていきたいところ

View Slide

240
というわけで
以上！！！！
サーバレスアーキテクチャで
LINE BOTが多分作れるように
なる
ハンズオンでした！！！

View Slide

241
・・・ん？？？

View Slide

242
(まだだ、まだ終わらんよ！)
(実はガンダム知らない)

View Slide

243
普段だと
普段だともう少し
プログラムの説明して終わり
って感じなのですが

View Slide

244
今日は長時間頂けているので
もう少し実用的な物に
仕上げてみますか。
年末スペシャルということで

View Slide

245
ということで
突然神からこんな
お告げ(無茶振り)がきました
最近Qiita追えてないのう。
このBOTに「Qiitaください」って
メッセージを送ったら
Qiitaの新着記事を返信できるようにしてくれんかのう

View Slide

246

View Slide

247
そんなこんなでお待ちかね
外部APIと連携してみます
今回はQiitaだ！

View Slide

248
Tips ④
皆様の年末のご予定は？
僕は飲んだくれます

View Slide

外部APIと連携してみよう
8
249

View Slide

250
今回は
QiitaのAPIと連携します
一度全体像の整理

View Slide

251
全体像再掲
API Gateway
Lambda
(LINE アプリ)
さっき作った
アカウント
返信
Lambdaキック
LINE Messaging API

View Slide

252
ここを少しいじってあげるよ〜
API Gateway
Lambda
(LINE アプリ)
さっき作った
アカウント
返信
Lambdaキック
LINE Messaging API
条件によって
QiitaAPIを実行

View Slide

253
いつものごとくプログラムは用意済みです
先ほどCloneしたリポジトリの内部でブランチを切り替えます
ブランチの切り替え
$ git checkout qiita-articles
api_v2.zip
ってファイルが現れているか確認

View Slide

254
早速Lambdaにデプロイしてみる
api_v2.zipを先ほどのLambda画面でアップロード

View Slide

255
ここで少し、
Lambdaがキックされて
からの導線を追ってみよう

View Slide

256
API Gateway 経由でキックされたあと、
${ファイル名}.handler関数が実行され
る

View Slide

257
設定したLINE_TOKEN(環境変数)の存
在チェックを実施
event.rawPathでアクセスしてきたURL
パスを取得可能
パスによってswitch文で分岐
V2になってこっち側を弄ってるので
IndexControllerを追っていく

View Slide

258
Webhook経由で送られてきたメッセー
ジ内容をここでチェック
①文字列に[Qiita], [qiita], [キータ]が
含まれる場合はArticleControllerを実
行
②それ以外の場合は
DefaultControllerを実行
(役割的にはエラーハンドリング
)

View Slide

259
①ArticleController
Qiitaから取得してきた最新記事を
LINE
に送信できるメッセージの形に変換
作成した配列を渡して
LINEの
MessagingAPIを実行してメッセージを
送信

View Slide

260
②DefaultController
アカウントに送信したい任意の文字列を
配列で設定

View Slide

261
ここでも細かい説明は
割愛しますので
気になる人いたら追ってみてく
ださい
(ハンズオン終わった後に質問してもらっても大丈夫です)
その他のDTOとかmoduleとかもろもろ

View Slide

262
Lambdaへの細かい導線が
わかってきたところで
残りの作業

View Slide

263
LINE側に設定してる
Webhook URLを変更してあげる必要がある
V2になって ‘/hello’ → ‘/’ を
使うようになったので変更が必要

View Slide

264
もう一個だけ設定する必要が
あります！

View Slide

Q. 残りの設定が必要な箇所は
どこでしょう？？
せっかくなので
考えてみる & 見直してみよう
265

View Slide

266
ヒントは次のページ

View Slide

267
‘/’ って、どのHTTPメソッドの設定してたっけ
API Gateway
Lambda
(LINE アプリ)
さっき作った
アカウント
返信
Lambdaキック
LINE Messaging API

View Slide

268
A. LINEからのWebhook通信はPOSTなので
‘/’ にPOSTを追加してあげる必要がある！
/hello にPOSTが設定されていたので
同じように / にPOSTを追加してみる

View Slide

269
パスとしては ‘/’ を設定
POSTメソッドを指定

View Slide

270
新しく作成した ‘/’ の POSTを選択
統合をアタッチするを選択

View Slide

271
GETに設定していたlambdaと同様の物
を設定
統合をアタッチする
を選択

View Slide

272
Lambdaマークがつけば準備完了

View Slide

273
これで諸々の準備は
完了です
神様からのお告げ(無茶振り)
に応えることができるか・・

View Slide

274
緊張の瞬間・・・

View Slide

275
(たぶん)成功してるはず

View Slide

276
Qiitaを含まない文字への対応もできてる

View Slide

277
こんな感じでLINE BOTが
できました
みなさまお疲れ様です。

View Slide

278
普段身の回りでよく使う
アプリとかサービスと
連携できる喜び、楽しみ
わかって貰えると凄く嬉しい

View Slide

オリジナル要素を入れるには
9
279

View Slide

280
さてさて
ハンズオンの題材としては
これで終了です

View Slide

281
実際やってみて
「あ、これくらいなら
つくれるかも！」
ってなってくれると
嬉しい

View Slide

282
ここで一つ
更に良くするには
どうすればよいか
考えてみましょう

View Slide

283
Q. 現状の課題は何？

View Slide

284
使い辛いポイント
● 検索できないのイケてないよなぁ
○ 検索機能を入れてみる
● ページングできないのイケてないよなぁ
○ リクエストにパラメータ付与して「次へ」って打ったら次の5
件とか取得できるようにしてみる
● 最新しか記事しか取得できないのイケてないよなぁ
○ LGTM順、ストック順で取得できるようにしてみる

View Slide

285
もっと使いやすくするには
● Qiitaって打つのめんどくさい
○ LINEのリッチメニューとか使ってみる
● Qiita以外にも対応したい
○ まずは一問一答から機能を増やしてみる
● Slackとかと連携してみたい
○ Slackの仕組みも一緒に調べて機能を追加してみる

View Slide

286
やれることは
いろいろある

View Slide

何を追加したら便利か
何ができると嬉しいか
どんな物がユーザに
喜ばれるか
287

View Slide

こんな物を考えていくと
自然とオリジナリティが
出てくると思います
288

View Slide

ただ作品を仕上げる
じゃなくて
愛着のあるシステムに
仕上げてみてください
289

View Slide

ま、僕偉そうな事
言えないんだけどね
290

View Slide

最後に
10
291

View Slide

これで本当に
本日のハンズオンは
終了となります
最後に
292

View Slide

約300Pにも及ぶスライドと
ハンズオンに
お付き合い頂き
本当に
ありがとうございました
最後に
293

View Slide

最後に
294
本日勉強したこと
● サーバレスアーキテクチャの概念を理解した
○ そもそもどんな構成なのか
○ アーキテクチャ採用時のメリットデメリット
● LINE アカウントが作れるようになった
○ 公式アカウントの作成方法
○ プログラムとの連携方法

View Slide

最後に
295
本日勉強したこと
● LINE アカウントとのやりとりができるようになった
○ WebHookの概念
○ Messaging API を使ったメッセージ送信
● API Gateway + Lambda を組み合わせてAPIが作れた
○ EC2未構築でリクエストの受け口が作れた
○ Lambdaキックまでの流れを理解することができた
○ Lambdaにプログラムをデプロイすることができた

View Slide

最後に
296
ここまでできれば
免許皆伝です

View Slide

最後に
297
最後にアンケートにご協力ください
URL: https://forms.gle/hHqpJddprbV1f3P6A
「こんなことが聞きたい！」
「こんな題材でハンズオンやりたい！」みたいなご意見
「楽しかった！」「ためになった！」みたいな
一言が次回へのモチベーションになります
どんなにくだらない事でも良いので是非ご意見ください

View Slide

最後に
298
締めの言葉
終わりっす！！！！！！
最後に好きな絵文字で締めます

To be continued …?

View Slide

Thank you for listening !!
299
全体通して聞きたいこと、
不明点などあれば
なんでも質問してください！！
来年も何卒宜しくお願いします
良いお年を〜〜〜

View Slide

サーバレスアーキテクチャでLINE BOTが多分作れるようになるハンズオン

サーバレスアーキテクチャでLINE BOTが多分作れるようになるハンズオン

Yoshiki Kobayashi

More Decks by Yoshiki Kobayashi

Other Decks in Programming

Featured

Transcript