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

# :dog: 自己紹介

## コキチーズ

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

<div align="center"><img width="120" alt="profile" src="https://qiita-image-store.s3.amazonaws.com/0/15818/bbd9fff9-219c-1cb8-4599-86af5bdd4495.png">
<img width="120" alt="profile" src="https://qiita-image-store.s3.amazonaws.com/0/15818/dee77d2b-bec9-d36b-135e-e312d3af60ac.png"></div>

---

# :warning: 注意
- 「ゼロから始める」を言いたかっただけ([アニメ](http://zeronosyo.com/)やってるし仕方ないね)
- ゼロ = [Node.js](https://nodejs.org/ja/)と[Vue.js](https://jp.vuejs.org/)と[GAE/Go](https://cloud.google.com/appengine/docs/go/)について雰囲気をわかっている人
- 「GAE/GoとCloud Functionsでサーバーサイドレンダリング」するよ

---

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

```js: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()
  }
}
```

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

---

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

```js: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()
  }
})
```

```bash
$ firebase deploy --only functions
```

---

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

---

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

---

# 過去の挑戦

[Vue.jsのサーバーサイドレンダリングをGAE/Goでやる #vuejs #golang](http://qiita.com/koki_cheese/items/13426921f0b5861725e5)

- 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でサーバーサイドレンダリング

<div align="center"><img width="547" alt="01.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/15818/a7a839b8-5973-3429-be6b-d274979c4503.jpeg"></div>

---

# でも、できない！！:rage:

--- 

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

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

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

(Google翻訳)

---

# やっぱり できないらしい:sob:

---

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

<div align="center"><img width="547" alt="02.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/15818/d505b400-799a-2f89-27e0-77e749362eea.jpeg"></div>

---

# DEMO<br>[goo.gl/pdwAvi](https://goo.gl/pdwAvi)<br><div align="center"><img width="200" alt="QR" src="https://qiita-image-store.s3.amazonaws.com/0/15818/59b35683-88de-686b-0334-15db67cced14.png"></div>

--- 

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

---

# Tips

- 構造化したログを書きたい場合は[@google-cloud/logging](https://www.npmjs.com/package/@google-cloud/logging)が使える
- [Cloud Functions Emulator](https://github.com/GoogleCloudPlatform/cloud-functions-emulator)があってFirebase対応しようとしてるができているのか謎<br>デプロイしてしまうのが楽<br>もしくはUnit Testを書こう
- FunctionsのHTTP Triggerはエッジキャッシュに乗るので無料枠でも枠の数値以上にレスポンスを捌くことができるかも<br>詳しくは @sinmetal さんの [GCP エッジキャッシュ](http://qiita.com/sinmetal/items/37c105a098174fb6bf77) へ
- [functions-sample](https://github.com/firebase/functions-samples)はサンプルがたくさんで参考になる。

---

# まとめ
- [DEMOのソース](https://github.com/k2wanko/gae-gcf-vue-ssr-example)
- `gcloud`より`firebase-tools`のがデプロイが簡単
- GoのHTML TemplateをServer Side Renderingで置き換えたい(願望)

---

# Enjoy<br>Cloud Functions<br>for Firebase!