自己紹介

コキチーズ

@k2wanko
Switchフレンドコード 4038-0559-8402
kokicheese@friends.nico
フロントエンドとGoとGoogle関連の技術が大好きなフレンズ
社会人１ヶ月目の研修中

注意

「ゼロから始める」を言いたかっただけ(アニメやってるし仕方ないね)
ゼロ = Node.jsとVue.jsとGAE/Goについて雰囲気をわかっている人
「GAE/GoとCloud Functionsでサーバーサイドレンダリング」するよ

Cloud Functions とは

GoogleのサーバーでJavaScript(Node.js)を実行できるサービス
Open Betaなので仕様変更ドントコイみたいな気持ちで使う
（たぶんガッツリ変わることは無いと思うけど）
HTTPやGCSやCloud PubSubなどのイベントをトリガーに起動できる
GASみたいなもの
gcloudコマンドでデプロイするもの

index.js

exports.helloWorld = (req, res) => {
  if (req.body.message === undefined) {
    res.status(400).send('No message defined!')
  } else {
    console.log(req.body.message);
    res.status(200).end()
  }
}

$ gcloud beta functions deploy helloworld --stage-bucket cloud-functions --trigger-http

Cloud Functions for Firebase とは

Cloud Functionsと同じものそこにFirebaseのイベントが受け取れるようになったやつ
FirebaseのRealtimeDatabaseやAuthやAnalyticsなどのイベントが受け取れるやつ
イベントをコードに直接書いてfirebase deployだけでデプロイできるので最高
あくまでイベントを受け取って実行するのでデータベースへの書き込みを事前にバリデーションとかはできない

index.js

const functions = require('firebase-functions')
exports.helloWorld = functions.https.onRequest(req, res) => {
  if (req.body.message === undefined) {
    res.status(400).send('No message defined!')
  } else {
    console.log(req.body.message);
    res.status(200).end()
  }
})

$ firebase deploy --only functions

用途

書き込まれたメッセージをPush通知したり
カスタム認証のエンドポイントにしたり
アップロードされた画像のリサイズをしたり
データベースの内容をBigQueryにインポートしたり
SlackのBot作ったり
GAEでサーバーサイドレンダリングができる。

GAEでサーバーサイドレンダリングができる

過去の挑戦

Vue.jsのサーバーサイドレンダリングをGAE/Goでやる #vuejs #golang

GAE/GoだけでVue.jsのサーバサイドレンダリングをやる。
Go実装のJSランタイムでJavaScriptを評価している。
GAE/Goで完結しているのでプロジェクトの見通しが良い

課題

クライアントとサーバーで一貫したAPIクライアントを作るのがめんどい
Vue.jsの最新に追従するのがしんどい
webpack.config.jsが変態になる

Node.js互換のGo実装のJSランタイムが出てきたら時代は変わるかも
今のところサーバーサイドレンダリングするにはNode.jsを使うのが現実的
そう思っていた時に現れたのが

Cloud Functions

で

Cloud Functions for Firebase

Cloud Functions for Firebaseに期待していたこと

Firebase Hostingでサーバーサイドレンダリング

でも、できない！！

もしかしたらできないのか聞いてみた

Q: 私はFirebaseホスティングとSSRを使用します。
HTTPトリガー応答をルーティングすることはできますか？

A: そこFirebaseホスティングのためのコンテンツをレンダリングするために、クラウド機能を使用する方法は現在ありませんが、我々は前にこのことに関心を聞いたし、我々は間違いなく機能の別の投票としてカウントします:)

(Google翻訳)

やっぱりできないらしい

というわけで僕が考える、いいんではと思う構成

DEMO
goo.gl/pdwAvi

この構成の課題

GAEにキャッシュするためのAPIを作らねばならない(DEMOでは作ってない)
webpack.config.jsがキモい (Server Side Rendring全てに言えるかも?)

Tips

構造化したログを書きたい場合は@google-cloud/loggingが使える
Cloud Functions EmulatorがあってFirebase対応しようとしてるができているのか謎
デプロイしてしまうのが楽
もしくはUnit Testを書こう
FunctionsのHTTP Triggerはエッジキャッシュに乗るので無料枠でも枠の数値以上にレスポンスを捌くことができるかも
詳しくは @sinmetal さんの GCP エッジキャッシュへ
functions-sampleはサンプルがたくさんで参考になる。

まとめ

DEMOのソース
gcloudよりfirebase-toolsのがデプロイが簡単
GoのHTML TemplateをServer Side Renderingで置き換えたい(願望)

Enjoy
Cloud Functions
for Firebase!

ゼロから始めるCloud Functions for Firebase🔥