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
3D生成AIのための画像生成
kosukeito
2
540
Microsoft Fabric vs Databricks vs (Snowflake) -若手エンジニアがそれぞれの強みと違いを比較してみた- "A Young Engineer's Comparison of Their Strengths and Differences"
reireireijinjin6
1
110
もう難しくない!誰でもカンタンDocker入門 〜30分であなたのPCにアプリを立ち上げる〜
devops_vtj
0
130
4/17/25 - CIJUG - Java Meets AI: Build LLM-Powered Apps with LangChain4j (part 2)
edeandrea
PRO
0
140
ビジネスとデザインとエンジニアリングを繋ぐために 一人のエンジニアは何ができるか / What can a single engineer do to connect business, design, and engineering?
kaminashi
2
780
Рекомендации с нуля: как мы в Lamoda превратили главную страницу в ключевую точку входа для персонализированного шоппинга. Данил Комаров, Data Scientist, Lamoda Tech
lamodatech
0
830
2025-04-24 "Manga AI Understanding & Localization" Furukawa Arata (CyberAgent, Inc)
ornew
2
300
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
140
コスト最適重視でAurora PostgreSQLのログ分析基盤を作ってみた #jawsug_tokyo
non97
1
810
ここはMCPの夜明けまえ
nwiizo
32
12k
エンジニアリングで組織のアウトカムを最速で最大化する!
ham0215
1
260
Compose におけるパスワード自動入力とパスワード保存
tonionagauzzi
0
150
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
13
810
Measuring & Analyzing Core Web Vitals
bluesmoon
7
400
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
RailsConf 2023
tenderlove
30
1.1k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Code Review Best Practice
trishagee
67
18k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Faster Mobile Websites
deanohume
306
31k
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