Server side rendering with Vue.js and Firebase Hosting

Transcript

1. 1.

   Vue.jsとFirebase Hostingで サーバサイドレンダリング @k2wanko 2017/7/7 v-meetup=”#4”

2. 2.

   コキチーズ@k2wanko - LINE株式会社 - セキュリティエンジニア - 好きな言語はGo言語 - スプラトゥーン エンジョイ勢

3. 3.

   サーバサイドレンダリング 知ってますか？ ✋

4. 4.

   サーバサイドレンダリング - サーバで仮想DOMからHTMLを書き出すこと なぜするか？ - クローラーに対して 確実にコンテンツをインデックスしてもらうため - ファーストビューを速くするため

5. 5.

   コキチーズの過去の挑戦 http://qiita.com/koki_cheese/items/13426921f0b5861725e5

6. 6.

   コキチーズの過去の挑戦 - GAE/GoでVue.jsのサーバサイドレンダリングをした - gojaと言うES5をGoで実装したJSランタイムを使った - setTimeoutとかないので自前で実装した (後で作者の人がちゃんと作ってくれた) - Node.js系のAPIはwebpackの

   NodeSourcePluginでモックした。 - 色々ないので自分で実装する必要があり泣いた 結論： 辛かった
7. 7.

   Firebase とは?

8. 8.

   Firebase - Googleが買収したBaaS 今はGoogleCloudPlatformに統合されている - リアルタイムに同期してくれるデータベースなどが特徴 - 主にAndroid/iOSがメインだけどWebでも使える

9. 9.

   Firebase Hostingとは?

10. 10.

    Firebase Hosting - 静的ファイルを配信してくれる Firebaseのサービスの一つ - 常時HTTP2接続 - CDNはFastlyを使ってる -

    リダイレクトやルーティングを書き換えたりはできる - 独自ドメインは登録するだけで 無料で証明書を発行してくれる(Let’s Encrypt)
11. 11.

    元々Hostingは静的ファイルを 配信するだけだった

12. 12.

    Google IO 2017

13. 13.

    None
14. 14.

    Cloud Functions - イベント駆動で実行できるNode.jsのPaaS - AWSで言うところのlambda - HTTPやPubSubをトリガーにできる、 Firebaseの色んなイベントを元にも起動できる。 -

    functions-samplesを見てみるとだいたいなんでもある ※ただし最適なやり方ではない場合があるので気をつけよう 例えば無駄に二度コールしてしまう実装とかある - 従量課金プランにも無料枠があり ２００万コールまでは無料(2017/7/7現在) - 無料プランだと Googleのネットワークから外にはアクセスできない
15. 15.

    HTTPトリガーの関数の書き方 deployは$ firebase deployだけで簡単にデプロイできる

16. 16.

    Hosting + Cloud Functions

17. 17.

    動的にコンテンツの生成が可能 hosting.rewritesにfunctionを追加すると呼び出せる。 上の設定は全てのパスのアクセスはindex関数を呼び出す。 ルーティングの優先順位は 静的ファイル > 関数

18. 18.

    https://goo.gl/PSPhPq DEMO

19. 19.

    None
20. 20.

    使ったライブラリ

21. 21.

    vue-cli + webpack-simple - Vue.jsのテンプレートを作成してくれるツール - 標準のテンプレートのwebpack-simpleをベースに作った - https://github.com/vuejs/vue-cli

22. 22.

    vue-server-renderer - Vue.jsでサーバサイドレンダリングするためのライブラリ - 非同期でレンダリングしてくれる - Bundleレンダリングをしてくれる webpackでリソースをまとめたものからレンダリング - 別vmでrequireとかも対応

    requireごとにglobalを分離 - serialize-javascriptを使って安全にscriptに書き出す。 - https://www.npmjs.com/package/vue-server-renderer
23. 23.

    VuexFire - VueFireの作者が作ってるvuexに対応した Firebaseリアルタイムデータベースのライブラリ - 配列の場合SSRと相性が悪くて一度初期化する(Issue#87) - https://github.com/posva/vuexfire

24. 24.

    なぜSSRをCloud Functionsでやるか

25. 25.

    なぜSSRをCloud Functionsでやるか - リアルタイムデータベースをバックエンドにしたSPAを 簡単にSSRすることができる

26. 26.

    None
27. 27.

    None
28. 28.

    None
29. 29.

    使う時は同じAPIで利用可能

30. 30.

    課題 - キャッシュをどこに持つか？ - Google App EngineならMemcachedがあるけどFunctionsにはない - リアルタイムデータベースに持つか？ -

    GAEのMemcachedを使うか？
31. 31.

    まとめ - Firebase はWebでも使える！ - Hostingすごーい！便利！ - Cloud Functions最高！ -

    FirebaseバックエンドのSPAはSSRが簡単だった - Cloud Functionsを使う場合は鍵の管理も不要で楽 - DEMOのコード https://github.com/k2wanko/md-editor
32. 32.

    Enjoy Functions