Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Firebaseで ポートフォリオサイトを作ってみた / Make a portfolio site with Firebase
Kentaro Matsushita
October 03, 2018
Programming
0
350
Firebaseで ポートフォリオサイトを作ってみた / Make a portfolio site with Firebase
社内LT
Kentaro Matsushita
October 03, 2018
Tweet
Share
More Decks by Kentaro Matsushita
See All by Kentaro Matsushita
Denoで簡単なCLIツールを作ってみる / Try to make a simple CLI tool with Deno
kentarom
0
220
GatsbyJSで作った個人ブログの構成を色々見直してみた / Improve my personal blog made with GatsbyJS
kentarom
1
95
Webサイトパフォーマンスを継続的に計測したい!!! / I want to continuously measure my website performance!!!
kentarom
2
210
Actions ToolkitではじめるGitHub Action開発 / Getting started creating a GitHub Action with Actions Toolkit
kentarom
2
1.1k
GitHub Gistを使って、アクティビティを可視化しよう / Let's try visualizing your activity using the GitHub Gist
kentarom
1
430
OGP画像を生成するNode.jsのライブラリを作ってみた / Create a Node.js module for generating Open Graph image
kentarom
1
6k
チームをよしなにする立場を経験して学んだこと / Things I have learned in leading the team
kentarom
0
440
AWSの既存サービスを活用して、 障害検知・復旧を迅速化するカラクリ / JAWS-UG Kanazawa x OpsJAWS
kentarom
2
2.8k
DMM.comの認証基盤を支えるエラー通知の仕組み / AWS Dev Day Tokyo 2018 Lightning Talk
kentarom
2
12k
Other Decks in Programming
See All in Programming
What's new in Android development tools まとめ
mkeeda
0
220
Embracing commonMain for Android Development - Droidcon SF 2022
handstandsam
4
230
Value and Record Types
hschwentner
0
540
GitHubのユーザー名を変更した後のあれこれ
tahia910
0
120
JSのウェブフレームワークで高速なルーターを実装する方法
usualoma
1
1.3k
1時間半で克服するJavaScriptの非同期処理/async_javascript_kokufuku
marchin1989
2
590
パターンマッチングを学んで新しいJavaの世界へ!Java 18までの目玉機能をおさらいしよう / Java 18 pattern matching
ihcomega56
3
370
Airflowはすごいぞ!
hankehly
0
370
即、New Relic / New Relic NOW!
uzulla
0
270
Mobile Product Engineering
championswimmer
0
290
Branching out to Jetpack Compose
chrisbanes
4
1.1k
Angular‘s Future without NgModules: Architectures with Standalone Components @enterJS
manfredsteyer
PRO
0
180
Featured
See All Featured
A designer walks into a library…
pauljervisheath
196
16k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
19
1.4k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.1k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.1k
Git: the NoSQL Database
bkeepers
PRO
415
59k
The Pragmatic Product Professional
lauravandoore
19
2.9k
Designing for Performance
lara
597
63k
Typedesign – Prime Four
hannesfritz
33
1.3k
We Have a Design System, Now What?
morganepeng
35
2.9k
In The Pink: A Labor of Love
frogandcode
131
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
120k
Automating Front-end Workflow
addyosmani
1351
200k
Transcript
Firebaseで ポートフォリオサイトを作ってみた Kentaro Matsushita 2018/10/03
⾃⼰紹介 • 2016年新卒⼊社 • プラットフォーム事業本部アカウントサービスチーム • アカウント基盤の開発・運⽤を担当しています • JavaScript /
TypeScript / AWS / React / Go • かゆいところに⼿が届くツールを開発するのが好きです Kentaro Matsushita @kentaro-m @_kentaro_m
アジェンダ • ポートフォリオサイトを作る理由 • ポートフォリオサイトを作る⽅法 • 困っている点と感想
アジェンダ • ポートフォリオサイトを作る理由 • ポートフォリオサイトを作る⽅法 • 困っている点と感想
エンジニアとして2年働いて できることも少しずつ増えてきた
ブログを書いたり、 LTをしたり、 個⼈開発をしたり…
成果物があるゆる場所に散らばっていた
⼀覧性が⾼い形式で成果物をまとめたい
ポートフォリオサイトを作る 解決⽅法
None
None
None
ポートフォリオサイトの概要 • 制作期間 8⽇(9⽉16⽇〜9⽉24⽇) • 制作費⽤ 0円(Firebase無料枠内) • 機能 QiitaやGitHub、Speaker Deckなどの表⽰ • 使⽤技術 Next.js、Firebase
ポートフォリオサイトの概要 • リポジトリをForkして、設定ファイルを変更、 デプロイでポートフォリオサイトが公開できます • https://github.com/kentaro-m/portfolio • 興味ある⽅はお試しください • 動作には料⾦プランをBlazeプラン
(従量課⾦) に変更が必要
アジェンダ • ポートフォリオサイトを作る理由 • ポートフォリオサイトを作る⽅法 • 困っている点と感想
まずは技術選定から!
使ったことがない技術で構築したい ReactでSSRするアプリケーションを 構築するためのフレームワーク アプリ開発のための便利サービスを 数多く提供 (認証、DB、etc ) (詳細はググってください)
Firebaseで構築する⽅法を 調査しました
アーキテクチャ ユーザー Firebase Hosting Cloud Functions for Firebase 外部サービスから データ取得
2 リクエスト 1 SSRする 3 結果を表⽰ 4 ユーザーにページが表⽰されるまでの流れ
Firebase Hosting • 静的コンテンツをホスティングするサービス • CDNを利⽤したキャッシュ配信に対応 • SSL証明書⾃動適⽤ • アクセス制限は不可
• AWSでS3とCloudFront、ACMを組み合わせて やっていたことがこれだけでできる
リクエストをCloud Functionsで処理させる すべてのリクエストをCloud Functionsで 処理させるように記述
Cloud Functions for Firebase • イベントドリブンで関数を実⾏するサービス • HTTPSリクエストトリガーで関数の実⾏が可能 • 200万回実⾏/⽉の無料枠がある
• 無料プランでは外部ネットワークにアクセスできない • AWSで⾔うところのLambdaのようなもの
リクエストをCloud Functionsで処理する
ポートフォリオサイト公開までの流れ 1. Next.jsアプリケーションを作成 2. Firebaseに新規プロジェクト作成 3. Firebase CLIでログイン 4. デプロイ実⾏
5. サイト公開
サンプルコードを動かしてみよう • 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
アジェンダ • ポートフォリオサイトを作る理由 • ポートフォリオサイトを作る⽅法 • 困っている点と感想
困っている点 • ページの表⽰速度が遅い • Cloud Functionsがローカル実⾏できない
ページの読み込み速度が遅い • 読み込み速度が8.2秒 (10⽉3⽇測定)
ページの読み込み速度が遅い • 初期データを取得するgetInitialProps()で外部APIにアクセスしている • API呼び出し結果をキャッシュしたい • キャッシュの設定 (Cache-Controlヘッダー) ができてない •
キャッシュの設定を追加したい • Cloud Functionsのロケーション (us-central1) になっている • tokyoリージョン (asia-northeast1) で動作するようにしたい
Cloud Functionsのローカル実⾏ができない • ⼿順通りに実⾏してもエラーが出る • Next.jsアプリケーションは単体で動作するので開発には⽀障なし
Firebaseを使ってみての感想 • 導⼊が⾮常に簡単 • サンプルコードは15分もあれば、デプロイまでできる • 運⽤⾯に関してはまだよくわからないです • ⾮常に多くのサービスがあり、開発者を助けてくれる •
アプリそのものの開発に集中できる
とりあえずFirebaseを 触ってみましょう!