Slide 1
Slide 1 text
Cookbook 'App Engine'
合同勉強会in大都会岡山
2018/12/22
Masayuki Hayashida ( @hayashiki )
Slide 2
Slide 2 text
自己紹介
key value
名前 林田 賢行
Name Hayashida Masayuki
Github @hayashiki
所属 BULB株式会社 VR/機械学習/IoT
コミュニティ GCPUGオーガナイザー
その他 フルリモートワーカー
Slide 3
Slide 3 text
話すこと
AppEngine(GAE) Overview
構成パターン
API Endpoint
Webhook
SPA
With Firebase
Slide 4
Slide 4 text
AppEngineとは
GoogleCloud（GCP）の提供するPaaSサービス
・Web
アプリケーションに設定ファイルを書くだけですぐにデプロイ可能
・サーバメンテナンス不要
・オートスケール、圧倒的スピンアップの速さ
・独自ドメインが割り振られる
Slide 5
Slide 5 text
で、大事なポイントが
Slide 6
Slide 6 text
無料で運用できる枠がわりとある
個人でのサービス開発
スタートアップでの新規開発
検証用プロタイプ
社内の業務ハックツールなどなど
Slide 7
Slide 7 text
AppEngine ランタイム環境
対応言語 [Java, Python, PHP, Go, Nodejs]
例としてGoであれば、GAE/Goといった表記がされることが多い
正確にいうと、FlexibleEnvironment
は自由度の高いGAE
環境がある
例えばRuby
といった言語サポートも増えるのだが、無料枠がないこともあり、
今回の話の対象外としている
Slide 8
Slide 8 text
Hello World
app.yaml
runtime: go111
app.go
func main() {
http.HandleFunc("/", indexHandler)
port := os.Getenv("PORT")
log.Printf("Listening on port %s", port)
log.Fatal(http.ListenAndServe(fmt.Sprintf(":%s", port),
}
func indexHandler(w http.ResponseWriter, r *http.Request) {
if r.URL.Path != "/" {
http.NotFound(w, r)
return
}
fmt.Fprint(w, "Hello, World!")
}
Slide 9
Slide 9 text
デプロイ
$ gcloud app deploy
Slide 10
Slide 10 text
その他機能
Name Description
Datastore NoSQLデータベース
TaskQueue(Cloud Tasks) 非同期処理ができるタスクキュー
Cron(Cloud Sheduler) スケジューラ
GCPのAPI GCP全般
Logging,Debug機能も実はすごいんだが割愛・・・
Slide 11
Slide 11 text
Demo
Slide 12
Slide 12 text
Demo解説
Slide 13
Slide 13 text
構成パターン
Slide 14
Slide 14 text
APIエンドポイント パターン
API開発効率が非常にいい
バージョン,
サービス単位でエンドポイントを付与してデプロイが可能
カジュアルにエンドポイントがたてられる
Slide 15
Slide 15 text
エンドポイント命名
https://[VERSION]‑dot‑[SERVICE]‑dot‑[PROJECT].appspot.com
Slide 16
Slide 16 text
エンドポイント例
$ gcloud app deploy --version feature
$ gcloud app deploy --version master
target service: [base]
target version: [feature]
target url: [https://base-dot-goa-api01.appspot.com]
target service: [base]
target version: [master]
target url: [https://base-dot-goa-api01.appspot.com]
Slide 17
Slide 17 text
なにがいいの？
個人,開発機,モバイル向け,Mock用
ロールバック
トラフィック分割（A/B Test）
Slide 18
Slide 18 text
API開発はgoa使おう
goa
はGo
で実装されたDSL
API
雛形(
コード)
やSwagger(
ドキュメント)
を生成してくれる
すぐにAppEngine
にのせてデプロイすることができる。
Slide 19
Slide 19 text
まとめ
サーバ構築、運用しなくていいとかもう色々とびこえている感あり
コアなビジネスロジック書くところに集中できる環境
Slide 20
Slide 20 text
Webhook / Bot パターン
Webhookを介してWebサービス同士をつなぐ
イベント駆動でなく、定期処理も行うBot
Slide 21
Slide 21 text
Lineだとこんな設定画面
Slide 22
Slide 22 text
Slackだとこんな画面
Slide 23
Slide 23 text
Githubだとこんな画面
Slide 24
Slide 24 text
GithubでのBot・Webhook例
‑ PRの緊急重要ラベルを定期監視してSlackにPostするBotマン
‑ GithubとSlackのコメントのメンションをSyncさせる
Slide 25
Slide 25 text
まとめ
スケジューラ機能をつかった定期Bot
としても実装しやすい
FaaS
でよく使われる使い方である
アプリケーション単位でサービス管理したい場合に有効
Slide 26
Slide 26 text
SPA パターン
HTML,CSS,JavaScriptといったStaticファイルも一緒にデプロイ
可能だがリッチなUI/UXがほしい
Slide 27
Slide 27 text
Vuejsが手っ取り早い
index.htmlにVuejsのCDNを組み込めば簡単にSPAが実現可能
Slide 28
Slide 28 text
index.htmlにCDNをくみこむ
Slide 29
Slide 29 text
データバインディング
var app = new Vue({
el: '#app',
data: {
tasks: [],
newTask: "",
},
created: function() {
axios.get('/tasks')
.then((response) => {
this.tasks = response.data.items || []
})},
methods: {
addTask: function(task) {
let params = new URLSearchParams()
params.append('body', this.newTask)
axios.post('/tasks', params)
.then((response) => {
...
Slide 30
Slide 30 text
React, AngularでもSPA使いたい
Webpack build ビルド先をAppEngineのビルド先に出力
Slide 31
Slide 31 text
まとめ
BackendとFrontend、両方をデプロイすることが可能
Slide 32
Slide 32 text
With Firebase パターン
Slide 33
Slide 33 text
FirebaseAuthだけお借りするパターン
AppEngine
のアプリをFirebase
で認証する
Firebase
が使用するユーザーID
を借りて
それ以外の永続化データはDatastore
で管理する
Slide 34
Slide 34 text
FirebaseのFirestore
FirebaseのDataBase Firestoreを利用する
Slide 35
Slide 35 text
AppEngine + Firebase
お互いに得意な領域で役割をわける
Frontend側はUIを作り込むトコロ
バッチ処理、複雑なビジネスロジックを含む処理
例：1日1回バッチで数万件のアイテムを一括で情報更新、
XXば場合なレポートを作成し、全文検索Index更新し、
さらにビジネスロジックが云々・・・
Slide 36
Slide 36 text
・フロントエンドで、こみいった非同期処理、並行処理など辛み
ならばAppEnging/GOでGoroutinesをつかう
Slide 37
Slide 37 text
まとめ
FirebaseとAppEngineをハイブリッドに使おう
Slide 38
Slide 38 text
DDD!!!（どんどんデプロイ）
岡山AppEngineハンズオン
https://gcpug‑okayama.connpass.com
岡山Go勉強会
https://okayamago.connpass.com/
https://okayamago.connpass.com/event/112138/
Slide 39
Slide 39 text
ref
Next Currency‑GAEGo
https://speakerdeck.com/sonatard/next‑currency‑gaego
GolangのgoaでAPIをデザインしよう
https://tikasan.hatenablog.com/entry/2017/05/08/190000
App Engine アプリのユーザーを Firebase で認証する
https://cloudplatform‑jp.googleblog.com/2016/10/app‑engine‑
firebase.html