Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

まずは技術選定から！

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

アーキテクチャ ユーザー Firebase Hosting Cloud Functions for Firebase 外部サービスから
 データ取得 2 リクエスト 1 SSRする 3 結果を表⽰ 4 ユーザーにページが表⽰されるまでの流れ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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