Slide 1
Slide 1 text
Vue.jsとFirebase Hostingで
サーバサイドレンダリング
@k2wanko
2017/7/7 v-meetup=”#4”
Slide 2
Slide 2 text
コキチーズ@k2wanko
- LINE株式会社
- セキュリティエンジニア
- 好きな言語はGo言語
- スプラトゥーン
エンジョイ勢
Slide 3
Slide 3 text
サーバサイドレンダリング
知ってますか？
✋
Slide 4
Slide 4 text
サーバサイドレンダリング
- サーバで仮想DOMからHTMLを書き出すこと
なぜするか？
- クローラーに対して
確実にコンテンツをインデックスしてもらうため
- ファーストビューを速くするため
Slide 5
Slide 5 text
コキチーズの過去の挑戦
http://qiita.com/koki_cheese/items/13426921f0b5861725e5
Slide 6
Slide 6 text
コキチーズの過去の挑戦
- GAE/GoでVue.jsのサーバサイドレンダリングをした
- gojaと言うES5をGoで実装したJSランタイムを使った
- setTimeoutとかないので自前で実装した
(後で作者の人がちゃんと作ってくれた)
- Node.js系のAPIはwebpackの
NodeSourcePluginでモックした。
- 色々ないので自分で実装する必要があり泣いた
結論： 辛かった
Slide 7
Slide 7 text
Firebase とは?
Slide 8
Slide 8 text
Firebase
- Googleが買収したBaaS
今はGoogleCloudPlatformに統合されている
- リアルタイムに同期してくれるデータベースなどが特徴
- 主にAndroid/iOSがメインだけどWebでも使える
Slide 9
Slide 9 text
Firebase Hostingとは?
Slide 10
Slide 10 text
Firebase Hosting
- 静的ファイルを配信してくれる
Firebaseのサービスの一つ
- 常時HTTP2接続
- CDNはFastlyを使ってる
- リダイレクトやルーティングを書き換えたりはできる
- 独自ドメインは登録するだけで
無料で証明書を発行してくれる(Let’s Encrypt)
Slide 11
Slide 11 text
元々Hostingは静的ファイルを
配信するだけだった
Slide 12
Slide 12 text
Google IO 2017
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Cloud Functions
- イベント駆動で実行できるNode.jsのPaaS
- AWSで言うところのlambda
- HTTPやPubSubをトリガーにできる、
Firebaseの色んなイベントを元にも起動できる。
- functions-samplesを見てみるとだいたいなんでもある
※ただし最適なやり方ではない場合があるので気をつけよう
例えば無駄に二度コールしてしまう実装とかある
- 従量課金プランにも無料枠があり
２００万コールまでは無料(2017/7/7現在)
- 無料プランだと
Googleのネットワークから外にはアクセスできない
Slide 15
Slide 15 text
HTTPトリガーの関数の書き方
deployは$ firebase deployだけで簡単にデプロイできる
Slide 16
Slide 16 text
Hosting + Cloud Functions
Slide 17
Slide 17 text
動的にコンテンツの生成が可能
hosting.rewritesにfunctionを追加すると呼び出せる。
上の設定は全てのパスのアクセスはindex関数を呼び出す。
ルーティングの優先順位は 静的ファイル > 関数
Slide 18
Slide 18 text
https://goo.gl/PSPhPq
DEMO
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
使ったライブラリ
Slide 21
Slide 21 text
vue-cli + webpack-simple
- Vue.jsのテンプレートを作成してくれるツール
- 標準のテンプレートのwebpack-simpleをベースに作った
- https://github.com/vuejs/vue-cli
Slide 22
Slide 22 text
vue-server-renderer
- Vue.jsでサーバサイドレンダリングするためのライブラリ
- 非同期でレンダリングしてくれる
- Bundleレンダリングをしてくれる
webpackでリソースをまとめたものからレンダリング
- 別vmでrequireとかも対応
requireごとにglobalを分離
- serialize-javascriptを使って安全にscriptに書き出す。
- https://www.npmjs.com/package/vue-server-renderer
Slide 23
Slide 23 text
VuexFire
- VueFireの作者が作ってるvuexに対応した
Firebaseリアルタイムデータベースのライブラリ
- 配列の場合SSRと相性が悪くて一度初期化する(Issue#87)
- https://github.com/posva/vuexfire
Slide 24
Slide 24 text
なぜSSRをCloud Functionsでやるか
Slide 25
Slide 25 text
なぜSSRをCloud Functionsでやるか
- リアルタイムデータベースをバックエンドにしたSPAを
簡単にSSRすることができる
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
使う時は同じAPIで利用可能
Slide 30
Slide 30 text
課題
- キャッシュをどこに持つか？
- Google App EngineならMemcachedがあるけどFunctionsにはない
- リアルタイムデータベースに持つか？
- GAEのMemcachedを使うか？
Slide 31
Slide 31 text
まとめ
- Firebase はWebでも使える！
- Hostingすごーい！便利！
- Cloud Functions最高！
- FirebaseバックエンドのSPAはSSRが簡単だった
- Cloud Functionsを使う場合は鍵の管理も不要で楽
- DEMOのコード
https://github.com/k2wanko/md-editor
Slide 32
Slide 32 text
Enjoy Functions