Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Server side rendering with Vue.js and Firebase ...
Search
k2wanko
July 07, 2017
Technology
3
13k
Server side rendering with Vue.js and Firebase Hosting
https://vuejs-meetup.connpass.com/event/58071/
k2wanko
July 07, 2017
Tweet
Share
More Decks by k2wanko
See All by k2wanko
Sales AI Cloud "ailead" TSConfig Strictly Adopted / セールスAIクラウド「ailead」の TSConfig厳格化対応した話 /
k2wanko
4
1.8k
Google Analytics for Firebaseを 使うときに把握しておきたいこと / Keep in mind when using Google Analytics for Firebase
k2wanko
2
490
パスワードのない未来のための Firebaseで実装するFIDO2 / FIDO2 actualized by Firebase for the password-less future
k2wanko
5
2.4k
Firebase Auth& Performance Monitoring
k2wanko
0
350
What's New Firebase 2019 Q1 #FJUG #io19jp
k2wanko
5
2.6k
Firebase for Grow
k2wanko
5
960
gosecを試してみた話 / try gosec
k2wanko
1
3.3k
最近のFirebase / Recent Firebase
k2wanko
4
1.6k
Firebase Japan User Group Introduction 2018 #FJUG
k2wanko
0
600
Other Decks in Technology
See All in Technology
Create Ruby native extension gem with Go
sue445
0
120
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
310
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
470
MagicPod導入から半年、オープンロジQAチームで実際にやったこと
tjoko
0
110
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
kawanoriku0
1
190
スクラムガイドに載っていないスクラムのはじめかた - チームでスクラムをはじめるときに知っておきたい勘所を集めてみました! - / How to start Scrum that is not written in the Scrum Guide 2nd
takaking22
1
160
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
230
人工衛星のファームウェアをRustで書く理由
koba789
15
8.2k
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
4
580
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
260
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
150
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
280
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
How STYLIGHT went responsive
nonsquared
100
5.8k
Statistics for Hackers
jakevdp
799
220k
Balancing Empowerment & Direction
lara
3
620
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
GraphQLとの向き合い方2022年版
quramy
49
14k
Facilitating Awesome Meetings
lara
55
6.5k
Typedesign – Prime Four
hannesfritz
42
2.8k
Writing Fast Ruby
sferik
628
62k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Making Projects Easy
brettharned
117
6.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Transcript
Vue.jsとFirebase Hostingで サーバサイドレンダリング @k2wanko 2017/7/7 v-meetup=”#4”
コキチーズ@k2wanko - LINE株式会社 - セキュリティエンジニア - 好きな言語はGo言語 - スプラトゥーン エンジョイ勢
サーバサイドレンダリング 知ってますか? ✋
サーバサイドレンダリング - サーバで仮想DOMからHTMLを書き出すこと なぜするか? - クローラーに対して 確実にコンテンツをインデックスしてもらうため - ファーストビューを速くするため
コキチーズの過去の挑戦 http://qiita.com/koki_cheese/items/13426921f0b5861725e5
コキチーズの過去の挑戦 - GAE/GoでVue.jsのサーバサイドレンダリングをした - gojaと言うES5をGoで実装したJSランタイムを使った - setTimeoutとかないので自前で実装した (後で作者の人がちゃんと作ってくれた) - Node.js系のAPIはwebpackの
NodeSourcePluginでモックした。 - 色々ないので自分で実装する必要があり泣いた 結論: 辛かった
Firebase とは?
Firebase - Googleが買収したBaaS 今はGoogleCloudPlatformに統合されている - リアルタイムに同期してくれるデータベースなどが特徴 - 主にAndroid/iOSがメインだけどWebでも使える
Firebase Hostingとは?
Firebase Hosting - 静的ファイルを配信してくれる Firebaseのサービスの一つ - 常時HTTP2接続 - CDNはFastlyを使ってる -
リダイレクトやルーティングを書き換えたりはできる - 独自ドメインは登録するだけで 無料で証明書を発行してくれる(Let’s Encrypt)
元々Hostingは静的ファイルを 配信するだけだった
Google IO 2017
None
Cloud Functions - イベント駆動で実行できるNode.jsのPaaS - AWSで言うところのlambda - HTTPやPubSubをトリガーにできる、 Firebaseの色んなイベントを元にも起動できる。 -
functions-samplesを見てみるとだいたいなんでもある ※ただし最適なやり方ではない場合があるので気をつけよう 例えば無駄に二度コールしてしまう実装とかある - 従量課金プランにも無料枠があり 200万コールまでは無料(2017/7/7現在) - 無料プランだと Googleのネットワークから外にはアクセスできない
HTTPトリガーの関数の書き方 deployは$ firebase deployだけで簡単にデプロイできる
Hosting + Cloud Functions
動的にコンテンツの生成が可能 hosting.rewritesにfunctionを追加すると呼び出せる。 上の設定は全てのパスのアクセスはindex関数を呼び出す。 ルーティングの優先順位は 静的ファイル > 関数
https://goo.gl/PSPhPq DEMO
None
使ったライブラリ
vue-cli + webpack-simple - Vue.jsのテンプレートを作成してくれるツール - 標準のテンプレートのwebpack-simpleをベースに作った - https://github.com/vuejs/vue-cli
vue-server-renderer - Vue.jsでサーバサイドレンダリングするためのライブラリ - 非同期でレンダリングしてくれる - Bundleレンダリングをしてくれる webpackでリソースをまとめたものからレンダリング - 別vmでrequireとかも対応
requireごとにglobalを分離 - serialize-javascriptを使って安全にscriptに書き出す。 - https://www.npmjs.com/package/vue-server-renderer
VuexFire - VueFireの作者が作ってるvuexに対応した Firebaseリアルタイムデータベースのライブラリ - 配列の場合SSRと相性が悪くて一度初期化する(Issue#87) - https://github.com/posva/vuexfire
なぜSSRをCloud Functionsでやるか
なぜSSRをCloud Functionsでやるか - リアルタイムデータベースをバックエンドにしたSPAを 簡単にSSRすることができる
None
None
None
使う時は同じAPIで利用可能
課題 - キャッシュをどこに持つか? - Google App EngineならMemcachedがあるけどFunctionsにはない - リアルタイムデータベースに持つか? -
GAEのMemcachedを使うか?
まとめ - Firebase はWebでも使える! - Hostingすごーい!便利! - Cloud Functions最高! -
FirebaseバックエンドのSPAはSSRが簡単だった - Cloud Functionsを使う場合は鍵の管理も不要で楽 - DEMOのコード https://github.com/k2wanko/md-editor
Enjoy Functions