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
930
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
LiteXとオレオレCPUで作る自作SoC奮闘記
msyksphinz
0
610
Amazon CloudWatchで始める エンドユーザー体験のモニタリング
o11yfes2023
0
190
改めて学ぶ Trait の使い方 / phpcon odawara 2025
meihei3
1
660
PicoRabbit: a Tiny Presentation Device Powered by Ruby
harukasan
PRO
2
210
AWS全冠芸人が見た世界 ~資格取得より大切なこと~
masakiokuda
5
5.9k
20250413_湘南kaggler会_音声認識で使うのってメルス・・・なんだっけ?
sugupoko
1
480
4/17/25 - CIJUG - Java Meets AI: Build LLM-Powered Apps with LangChain4j (part 2)
edeandrea
PRO
0
100
より良い開発者体験を実現するために~開発初心者が感じた生成AIの可能性~
masakiokuda
0
180
いつも初心者向けの記事に助けられているので得意分野では初心者向けの記事を書きます
toru_kubota
2
310
Webアプリを Lambdaで動かすまでに考えること / How to implement monolithic Lambda Web Application
_kensh
7
1.3k
アセスメントで紐解く、10Xのデータマネジメントの軌跡
10xinc
1
430
彩の国で始めよう。おっさんエンジニアから共有したい、当たり前のことを当たり前にする技術
otsuki
0
150
Featured
See All Featured
Embracing the Ebb and Flow
colly
85
4.6k
Building Adaptive Systems
keathley
41
2.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.2k
How to train your dragon (web standard)
notwaldorf
90
6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
550
For a Future-Friendly Web
brad_frost
176
9.7k
GitHub's CSS Performance
jonrohan
1030
460k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Speed Design
sergeychernyshev
29
900
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