Try JAMstack using Firebase CMS "Flamelink"

1. Firebase製のCMS
『Flamelink』を使って
JAMstackに触れてみる
株式会社diffeasy
エンジニア 井上奈々

2. Instructions - 自己紹介-
井上 奈々（いのうえ なな）
株式会社diffeasy（ディフィージー）
“difficult to easy”
世界中のむずかしいを簡単にするエンジニア修行僧
2
Firebase
Nuxt
アニメ
声優Vue
Flutter
Rails 水泳 卓球Dart
コードギアス
Nunnally_Engr

3. Agenda -今日お話すること-
3
本日の
ハッシュタグ
#gcpug福岡
撮影
シェア
OK♪
diffeasy.inc
1. そもそもFlamelinkって何？
2. Nuxt & Firebase Hosting
3. Nuxt & Netlify
4. Nuxt & Netlify for JAMstack
5. パフォーマンス比較
6. まとめと感想

4. 4
本日の
ハッシュタグ
#gcpug福岡
撮影
シェア
OK♪
diffeasy.inc
Firebaseを利用したリアルタイムヘッドレスCMS！
1. What’s Flamelink?

5. 5
本日の
ハッシュタグ
#gcpug福岡
撮影
シェア
OK♪
diffeasy.inc
1. What’s Flamelink?
Firebase アプリ

6. 6
本日の
ハッシュタグ
#gcpug福岡
撮影
シェア
OK♪
diffeasy.inc
1. What’s Flamelink?
Firebase Realtime Database
【SDK利用時】

7. 7
本日の
ハッシュタグ
#gcpug福岡
撮影
シェア
OK♪
1. What’s Flamelink?
Cloud Storage for Firebase
diffeasy.incdif
オリジナルサイズの画像： 〜 flamelink / media /
リサイズされた画像： 〜 flamelink / media / sized

8. 2. Nuxt & Firebase Hosting
8
本日の
ハッシュタグ
#gcpug福岡
撮影
シェア
OK♪
diffeasy.inc

9. 3. Nuxt & Netlify
9
本日の
ハッシュタグ
#gcpug福岡
撮影
シェア
OK♪
diffeasy.inc

10. 4. Nuxt & Netlify for JAMstack
10
本日の
ハッシュタグ
#gcpug福岡
撮影
シェア
OK♪
diffeasy.inc

11. 5. Performance comparison
11
本日の
ハッシュタグ
#gcpug福岡
撮影
シェア
OK♪
diffeasy.inc
Nuxt
&
Firebase
Hosting

12. 12
本日の
ハッシュタグ
#gcpug福岡
撮影
シェア
OK♪
diffeasy.inc
5. Performance comparison
Nuxt
&
Netlify

13. 13
本日の
ハッシュタグ
#gcpug福岡
撮影
シェア
OK♪
diffeasy.inc
Nuxt
&
Netlify
for
JAMstack
5. Performance comparison

14. 14
本日の
ハッシュタグ
#gcpug福岡
撮影
シェア
OK♪
diffeasy.inc
Nuxt
×
Firebase Hosting
Nuxt
×
Netlify
Nuxt
×
Netlify for
JAMstack
パフォーマンス △ ○ ◎
API呼出し 毎回 毎回
ブログ更新
時のみ
Firebase
補足技術
(※1)
Firebase
Hosting
-
Cloud
Functions
for Firebase
6. Summary
※ 1 Flamelinkで標準で使っている Firebaseの機能とは別に学べる事です。 (あくまでもアーキテクチャーによる )

15. 15
本日の
ハッシュタグ
#gcpug福岡
撮影
シェア
OK♪
diffeasy.inc
Thank’s for your attention.
ご清聴ありがとうございました

16. Notice...
16
本日の
ハッシュタグ
#gcpug福岡
撮影
シェア
OK♪
diffeasy.inc
- 告知 -