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
1
1.7k
Google Analytics for Firebaseを 使うときに把握しておきたいこと / Keep in mind when using Google Analytics for Firebase
k2wanko
2
480
パスワードのない未来のための Firebaseで実装するFIDO2 / FIDO2 actualized by Firebase for the password-less future
k2wanko
5
2.3k
Firebase Auth& Performance Monitoring
k2wanko
0
340
What's New Firebase 2019 Q1 #FJUG #io19jp
k2wanko
5
2.5k
Firebase for Grow
k2wanko
5
920
gosecを試してみた話 / try gosec
k2wanko
1
3k
最近のFirebase / Recent Firebase
k2wanko
4
1.6k
Firebase Japan User Group Introduction 2018 #FJUG
k2wanko
0
590
Other Decks in Technology
See All in Technology
技術的負債を正しく理解し、正しく付き合う #phperkaigi / PHPerKaigi 2025
shogogg
7
1.7k
パスキー導入の課題と ベストプラクティス、今後の展望
ritou
7
1.1k
LINEギフトのLINEミニアプリアクセシビリティ改善事例
lycorptech_jp
PRO
0
150
Vision Language Modelを活用した メルカリの類似画像レコメンドの性能改善
yadayuki
9
1.1k
Compose MultiplatformにおけるiOSネイティブ実装のベストプラクティス
enomotok
1
190
Agile TPIを活用した品質改善事例
tomasagi
0
150
AIエージェント完全に理解した
segavvy
4
220
スケールアップ企業のQA組織のバリューを最大限に引き出すための取り組み
tarappo
4
810
お問い合わせ対応の改善取り組みとその進め方
masartz
0
140
ルートユーザーの活用と管理を徹底的に深掘る
yuobayashi
6
690
バックエンドエンジニアによるフロントエンドテスト拡充の具体的手法
kinosuke01
1
610
KCD Brazil '25: Enabling Developers with Dapr & Backstage
salaboy
1
120
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
521
39k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
Statistics for Hackers
jakevdp
797
220k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Into the Great Unknown - MozCon
thekraken
35
1.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
117
51k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Producing Creativity
orderedlist
PRO
344
40k
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