Decision Making of Meshi in Serverless and Isormorphic Style

#WeJS 20181024

Transcript

1. ServerlessでIsomorphicに GohanをKetteiしてみた @Seri-Nazu
2. お昼迷いません？
3. お昼迷うじゃないですか(強引) • 「何食べたい？」->「何でもいい～」 • 「何でもいいよな～～でも美味しそうなもの食べたいよな～～」ってときありが ち。 • ありがちすぎてみんなもう作ってるしソースコードもいくらでもある • そもそもお昼は社内でお弁当を食べることが多い • とりあえず自分で作ってみるか！
4. 使う技術スタック • ぐるなびAPI(無料で使えて嬉しい) • LINE Bot • AWS Lambda • AWS API Gateway • AWS S3 • React
5. 構成図 すごい偏見なんですがイン フラやってる人大体この図 好きじゃないですか？
6. ぐるなびAPIの実装 割とコードとしてはあっさり。 • クエリをぐるなびAPIの GETのクエリに載せる • request-promiseでGET する • awaitで結果を待つ • 「画像URLがあるものだけ 取得」 • 結果の配列をresponse
7. LINE APIの実装 意外と長い(画像はめっちゃ省 略しました) • LINE Botの署名情報を確 認 • 「接続確認」の処理だった ら200を返すだけ • 「位置情報」でなかったら 位置情報を送るようリプラ イ
8. LINE APIの実装② • 「位置情報」を使って、 Lambda上のぐるなびAPI を叩く • レストランがなかった場合 はリプライ • あった場合、レストラン一 件一件を「Flex Message」形式に変換し てリプライする • ↑でめっちゃハマった
9. It Works!! Reactの方も(ある程度) ちゃんと動いてるんですが ちょっと時間がないので割 愛
10. 良かったところ • Lambdaすごい ◦ サーバのこと、関数の呼び出され方を意識から外せる ◦ ミニマムにすぐ始められる ◦ GUIで設定できることが多い • API Gatewayすごい ◦ CORS設定をGUIで一発でできるのはいい体験だった。
11. ハマったところ • CORS設定を倒せなくてかなりハマった ◦ ずっとプレフライトリクエストでこけていた ◦ API Gatewayのリソースを作成し直したところ動いた……？ • 豊島区にいるのに江東区に住んでることにされる問題 ◦ 取得精度とかの実装の問題っぽい？教えて下さい…。 ◦ 「httpsじゃないとJSの位置情報取得APIを使えない」
12. 今後トライしていきたい • LINE Messaging APIのLambdaをもっときれいに書きたい • Reactで実装したクライアントを改良したい ◦ ぐるなび側で検索条件いっぱい指定できる
13. まとめ • サーバのことを一秒も考えずにご飯をサジェストできた。 • LINE Botを割とサクサクっと動かすことができた。 • Lambdaガンガンやっていきたい :muscle:
14. Thank you, for your attention.