$30 off During Our Annual Pro Sale. View details »

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

Kentaro Matsushita
October 03, 2018
Programming
0
370

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

社内LT

Kentaro Matsushita

October 03, 2018
Tweet

More Decks by Kentaro Matsushita

See All by Kentaro Matsushita
Denoで簡単なCLIツールを作ってみる / Try to make a simple CLI tool with Deno
kentarom
0
350
GatsbyJSで作った個人ブログの構成を色々見直してみた / Improve my personal blog made with GatsbyJS
kentarom
1
140
Webサイトパフォーマンスを継続的に計測したい！！！ / I want to continuously measure my website performance!!!
kentarom
2
260
Actions ToolkitではじめるGitHub Action開発 / Getting started creating a GitHub Action with Actions Toolkit
kentarom
2
1.2k
GitHub Gistを使って、アクティビティを可視化しよう / Let's try visualizing your activity using the GitHub Gist
kentarom
1
490
OGP画像を生成するNode.jsのライブラリを作ってみた / Create a Node.js module for generating Open Graph image
kentarom
1
6.3k
チームをよしなにする立場を経験して学んだこと / Things I have learned in leading the team
kentarom
0
470
AWSの既存サービスを活用して、
障害検知・復旧を迅速化するカラクリ / JAWS-UG Kanazawa x OpsJAWS
kentarom
2
3.1k
DMM.comの認証基盤を支えるエラー通知の仕組み / AWS Dev Day Tokyo 2018 Lightning Talk
kentarom
2
12k

Other Decks in Programming

See All in Programming
競技プログラミングことはじめ
e869120
15
8.5k
JSConf JP 2022 introduce React Query
maminami373
0
850
SDPF ベアメタルサーバー / ハイパーバイザー開発における GitHub Actions を活用した CI 事例の紹介
yamy1114
0
110
はてなブログ作成から投稿までをGitHub Actionsで自動化する
myamashii
1
350
Elixirコミュニティ の歩き方〜国内オンライン編〜
elijo
3
900
Amazon EKS上の開発体験を最大化するプレビュー環境の作り方
katainaka0503
0
200
Unleashing the power of lazy objects in PHP 🪄
nicolasgrekas
2
370
Neo4j-Migrations: The lean way of applying database refactorings to Neo4j
michaelsimons
0
360
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
20
6.4k
E2Eテストから負荷試験シナリオを作ってみた / Why do we make a scenario of load testing from E2E testing scenarios
mackee
0
680
サーバーレスなメール送信システムをAWS CDKで構築し数千人規模の環境で運用した話 / aws dev day cdk mail
gotok365
2
680
The Engineer/Manager Pendulum (QCon SF 2022)
charity
0
370

Featured

See All Featured
Practical Orchestrator
shlominoach
178
8.9k
Ruby is Unlike a Banana
tanoku
92
9.5k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.7k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
20
6.4k
Documentation Writing (for coders)
carmenintech
49
2.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
270
12k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
27
19k
Three Pipe Problems
jasonvnalue
89
8.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
Art, The Web, and Tiny UX
lynnandtonic
282
18k
We Have a Design System, Now What?
morganepeng
37
5.8k

Transcript

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

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

    TypeScript / AWS / React / Go • かゆいところに⼿が届くツールを開発するのが好きです Kentaro Matsushita @kentaro-m @_kentaro_m

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

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

  5. エンジニアとして2年働いて
 できることも少しずつ増えてきた

  6. ブログを書いたり、
 LTをしたり、 個⼈開発をしたり…

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

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

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

  10. None
  11. None
  12. None

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

  14. ポートフォリオサイトの概要 • リポジトリをForkして、設定ファイルを変更、
 デプロイでポートフォリオサイトが公開できます • https://github.com/kentaro-m/portfolio • 興味ある⽅はお試しください • 動作には料⾦プランをBlazeプラン

    (従量課⾦) に変更が必要

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

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

  17. 使ったことがない技術で構築したい ReactでSSRするアプリケーションを
 構築するためのフレームワーク アプリ開発のための便利サービスを
 数多く提供 (認証、DB、etc ) （詳細はググってください）

  18. Firebaseで構築する⽅法を
 調査しました

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

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

  20. Firebase Hosting • 静的コンテンツをホスティングするサービス • CDNを利⽤したキャッシュ配信に対応 • SSL証明書⾃動適⽤ • アクセス制限は不可

    • AWSでS3とCloudFront、ACMを組み合わせて
 やっていたことがこれだけでできる

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

  22. Cloud Functions for Firebase • イベントドリブンで関数を実⾏するサービス • HTTPSリクエストトリガーで関数の実⾏が可能 • 200万回実⾏/⽉の無料枠がある

    • 無料プランでは外部ネットワークにアクセスできない • AWSで⾔うところのLambdaのようなもの

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

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

    5. サイト公開

  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

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

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

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

  29. ページの読み込み速度が遅い • 初期データを取得するgetInitialProps()で外部APIにアクセスしている • API呼び出し結果をキャッシュしたい • キャッシュの設定 (Cache-Controlヘッダー) ができてない •

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

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

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

    アプリそのものの開発に集中できる

  32. とりあえずFirebaseを
 触ってみましょう！