株式会社クリモ CTO 渡邊達明OG画像のためだけのFunctionsで、htmlベタ書き&リダイレクトをやめるんだ~ Firebase Meetup #15 2019/12/03 ~
View Slide
◉ 自己紹介と最近作っているもの◉ ためしがきの歴史◉ Netlifyはいいぞ◉ Cloud Runを使おう目次
◉ 渡邊 達明(わたなべ たつあき)◉ Twitter,GitHub: @nabettu◉ 富士通株式会社→面白法人カヤック→独立◉ 妻(代表)と二人で法人◉ ネイティブアプリ(React Native with Expo)& Webフロント(Nuxt.js,React.js)& Firebase周りが専門です自己紹介
NTTコミュニケーションズ社内ベンチャー発リアルタイムスポーツ実況解説アプリサッカーJ1の配信始めます!SpoLive
tabmemoタブで仕分けできるメモアプリ
作ってます
- FirebaseのHostingを使ってSPAで作っているサービス1年半ほど前のためしがきを作る際の話。。。フォントをシェアしたらOG画像を変えたいぞ〜SPAだけどシェアされる毎にhtmlのmetaを変えたい。。。
なんとかSPA&サーバーレスでできないか考えた結果。。。1. /share/:id のパスだけfunctionsにつなぐ2. OG画像を含んだmetaだけ書いたhtmlを返す3. トップページへリダイレクトという方式にしよう!
公開したらめちゃバズったTwitterトレンドに載ったりはてブが2000以上ついたりした。サービスについてブログを書いたら、ブログも500はてブその後SPAで静的サイトホスティングをしているFirebaseマンのお手軽OG画像書き換え方式デファクトになっていった・・・
あの頃はよかったが、最近はもっといい代替手段が出てきているので紹介します。- レスポンスが遅い・URLリダイレクトを挟む- htmlをfunctions内に書いておくのでメンテもしづらいUXもDXも悪い部分のデメリットも解決!あれから1年半ほどたち、、
NetlifyのPrerenderingを使おう
Netlifyとは◉ 静的サイトホスティングサービス◉ GitHubなどのリポジトリと連携して、自動でサイトホスティングができる◉ 静的サイト公開のための便利機能がたくさん詰まっている
◉ SPAなどのJavaScriptでのレンダリング結果をキャッシュしておいて、Twitterのクローラなどに返却してくれる機能◉ (Netlifyでは https://prerender.io/ を利用しています。)Prerenderingとは
◉ JavaScriptでページのレンダリング時にmeta情報を書き換えたhtmlをキャッシュしてくれるこれを使うと・・・SPAなのにOG画像の出し分けができます!
1. Firebase HostingからNetlifyに移行します。2. share/:id ページを用意して以下のjsを3. ページ読み込み開始時 window.prerenderReady = false3. JavaScriptでmeta情報を書き換えます4. 3.終了後に window.prerenderReady = true5. 必要であればtopページへrouterでpush具体的なSPAでのOG画像の替え方
Netlifyの本を書いているのでぜひ買って下さい!◉ Amazonで買えます!!!宣伝です
実動作してるサンプル #EmojiMashupperhttps://emoji.nabettu.com/
- FunctionsだとFirestoreのデータをadminSDKで使えたのが便利だったのに!- 認証情報をごにょごにょしてレンダリングしたい!- Netlify便利なんだけどCDN遅いんだよなとかの人は・・・とはいえFunctionsも便利な部分はあった
CloudRunを使ってSSRをしよう
CloudRunとは- こないだGAになった、サーバーレスでコンテナ化したアプリを展開できるサービス- Nuxt.jsとかのSSRできるSPAライブラリを突っ込んで動かそう!- Firebase Hostingともつなげられる!- SSRと別でコンテナ化したAPIサーバーとかも同じドメインでサクッとおいておける
みなみさんの本がめっちゃ詳しいオススメです!Nuxt.jsとFirebaseの組み合わせで開発している人必読!詳しくはこちらで!
質問あればTwitterでもhttps://twitter.com/nabettucometsでもどうぞ→Thanks!
cometsについてこちらの発表は、専用サイトにコメントするとコメントが発表者のスライドに表示されます。https://comets.nabettu.com/?id=FJUGちなみにFirebaseとNetlifyで動いています。