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

社内LT

Transcript

1. Firebaseで

   ポートフォリオサイトを作ってみた
   Kentaro Matsushita
   2018/10/03
   

   View Slide

2. ⾃⼰紹介
   • 2016年新卒⼊社
   • プラットフォーム事業本部アカウントサービスチーム
   • アカウント基盤の開発・運⽤を担当しています
   • JavaScript / TypeScript / AWS / React / Go
   • かゆいところに⼿が届くツールを開発するのが好きです
   Kentaro Matsushita
   @kentaro-m @_kentaro_m
   

   View Slide

3. アジェンダ
   • ポートフォリオサイトを作る理由
   • ポートフォリオサイトを作る⽅法
   • 困っている点と感想
   

   View Slide

4. アジェンダ
   • ポートフォリオサイトを作る理由
   • ポートフォリオサイトを作る⽅法
   • 困っている点と感想
   

   View Slide

5. エンジニアとして2年働いて

   できることも少しずつ増えてきた
   

   View Slide

6. ブログを書いたり、

   LTをしたり、
   個⼈開発をしたり…
   

   View Slide

7. 成果物があるゆる場所に散らばっていた
   

   View Slide

8. ⼀覧性が⾼い形式で成果物をまとめたい
   

   View Slide

9. ポートフォリオサイトを作る
   解決⽅法
   

   View Slide

10. View Slide

11. View Slide

12. View Slide

13. ポートフォリオサイトの概要
    • 制作期間 8⽇（9⽉16⽇〜9⽉24⽇）
    • 制作費⽤ 0円（Firebase無料枠内）
    • 機能   QiitaやGitHub、Speaker Deckなどの表⽰
    • 使⽤技術 Next.js、Firebase
    

    View Slide

14. ポートフォリオサイトの概要
    • リポジトリをForkして、設定ファイルを変更、

    デプロイでポートフォリオサイトが公開できます
    • https://github.com/kentaro-m/portfolio
    • 興味ある⽅はお試しください
    • 動作には料⾦プランをBlazeプラン (従量課⾦) に変更が必要
    

    View Slide

15. アジェンダ
    • ポートフォリオサイトを作る理由
    • ポートフォリオサイトを作る⽅法
    • 困っている点と感想
    

    View Slide

16. まずは技術選定から！
    

    View Slide

17. 使ったことがない技術で構築したい
    ReactでSSRするアプリケーションを

    構築するためのフレームワーク
    アプリ開発のための便利サービスを

    数多く提供 (認証、DB、etc )
    （詳細はググってください）
    

    View Slide

18. Firebaseで構築する⽅法を

    調査しました
    

    View Slide

19. アーキテクチャ
    ユーザー Firebase Hosting
    Cloud Functions
    for Firebase
    外部サービスから

    データ取得
    2
    リクエスト
    1
    SSRする
    3
    結果を表⽰
    4
    ユーザーにページが表⽰されるまでの流れ
    

    View Slide

20. Firebase Hosting
    • 静的コンテンツをホスティングするサービス
    • CDNを利⽤したキャッシュ配信に対応
    • SSL証明書⾃動適⽤
    • アクセス制限は不可
    • AWSでS3とCloudFront、ACMを組み合わせて

    やっていたことがこれだけでできる
    

    View Slide

21. リクエストをCloud Functionsで処理させる
    すべてのリクエストをCloud Functionsで

    処理させるように記述
    

    View Slide

22. Cloud Functions for Firebase
    • イベントドリブンで関数を実⾏するサービス
    • HTTPSリクエストトリガーで関数の実⾏が可能
    • 200万回実⾏/⽉の無料枠がある
    • 無料プランでは外部ネットワークにアクセスできない
    • AWSで⾔うところのLambdaのようなもの
    

    View Slide

23. リクエストをCloud Functionsで処理する
    

    View Slide

24. ポートフォリオサイト公開までの流れ
    1. Next.jsアプリケーションを作成
    2. Firebaseに新規プロジェクト作成
    3. Firebase CLIでログイン
    4. デプロイ実⾏
    5. サイト公開
    

    View Slide

25. サンプルコードを動かしてみよう
    • 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
    

    View Slide

26. アジェンダ
    • ポートフォリオサイトを作る理由
    • ポートフォリオサイトを作る⽅法
    • 困っている点と感想
    

    View Slide

27. 困っている点
    • ページの表⽰速度が遅い
    • Cloud Functionsがローカル実⾏できない
    

    View Slide

28. ページの読み込み速度が遅い
    • 読み込み速度が8.2秒 (10⽉3⽇測定)
    

    View Slide

29. ページの読み込み速度が遅い
    • 初期データを取得するgetInitialProps()で外部APIにアクセスしている
    • API呼び出し結果をキャッシュしたい
    • キャッシュの設定 (Cache-Controlヘッダー) ができてない
    • キャッシュの設定を追加したい
    • Cloud Functionsのロケーション (us-central1) になっている
    • tokyoリージョン (asia-northeast1) で動作するようにしたい
    

    View Slide

30. Cloud Functionsのローカル実⾏ができない
    • ⼿順通りに実⾏してもエラーが出る
    • Next.jsアプリケーションは単体で動作するので開発には⽀障なし
    

    View Slide

31. Firebaseを使ってみての感想
    • 導⼊が⾮常に簡単
    • サンプルコードは15分もあれば、デプロイまでできる
    • 運⽤⾯に関してはまだよくわからないです
    • ⾮常に多くのサービスがあり、開発者を助けてくれる
    • アプリそのものの開発に集中できる
    

    View Slide

32. とりあえずFirebaseを

    触ってみましょう！
    

    View Slide