Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Firebaseで
ポートフォリオサイトを作ってみた / Make a portfolio s...

Firebaseで
ポートフォリオサイトを作ってみた / Make a portfolio site with Firebase

社内LT

Kentaro Matsushita

October 03, 2018
Tweet

More Decks by Kentaro Matsushita

Other Decks in Programming

Transcript

  1. ⾃⼰紹介 • 2016年新卒⼊社 • プラットフォーム事業本部アカウントサービスチーム • アカウント基盤の開発・運⽤を担当しています • JavaScript /

    TypeScript / AWS / React / Go • かゆいところに⼿が届くツールを開発するのが好きです Kentaro Matsushita @kentaro-m @_kentaro_m
  2. アーキテクチャ ユーザー Firebase Hosting Cloud Functions for Firebase 外部サービスから
 データ取得

    2 リクエスト 1 SSRする 3 結果を表⽰ 4 ユーザーにページが表⽰されるまでの流れ
  3. サンプルコードを動かしてみよう • next.js/examples/with-firebase-hosting at canary · zeit/next.js · GitHub •

    Next.jsをFirebase Hostingで動作させるサンプルコード • https://github.com/zeit/next.js/tree/canary/examples/with-firebase-hosting • Next.js on Cloud Functions for Firebase with Firebase Hosting • サンプルコードを作成した開発者の記事 • https://codeburst.io/next-js-on-cloud-functions-for-firebase-with-firebase- hosting-7911465298f2
  4. ページの読み込み速度が遅い • 初期データを取得するgetInitialProps()で外部APIにアクセスしている • API呼び出し結果をキャッシュしたい • キャッシュの設定 (Cache-Controlヘッダー) ができてない •

    キャッシュの設定を追加したい • Cloud Functionsのロケーション (us-central1) になっている • tokyoリージョン (asia-northeast1) で動作するようにしたい