Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nuxt.js & Firebase & Netlifyでの 爆速プロトタイピングと 本格運用...
Search
tatsuaki watanabe
November 17, 2018
Technology
3
840
Nuxt.js & Firebase & Netlifyでの 爆速プロトタイピングと 本格運用への足がかり
tatsuaki watanabe
November 17, 2018
Tweet
Share
More Decks by tatsuaki watanabe
See All by tatsuaki watanabe
4:3のスライド
nabettu
0
250
React Native for WebでもOGP対応がしたい! ~ TECH STAND #2 React Native 2020/12/18 ~
nabettu
1
6.3k
React Navigationを使って React Native WebでSPAを試してみた ~ React Native Meetup 2020/5/29 ~
nabettu
8
9.5k
OG画像のためだけのFunctionsで、 htmlベタ書き&リダイレクトをやめるんだ
nabettu
3
1.6k
React Nativeにおける ExpoとFirebaseの活用 Webとの共通化 ~ React Native Tokyo 2019/09/03 ~
nabettu
2
1.3k
A story till the netlify fun book is made
nabettu
0
630
Netlifyはいいぞ #技術同人誌再販Night
nabettu
1
450
声をかけられるフリーランスエンジニアになるには
nabettu
5
1.3k
2016-01-25いいとも発表Atomパッケージ
nabettu
0
140
Other Decks in Technology
See All in Technology
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.5k
All you need to know about InnoDB Primary Keys
lefred
0
120
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
1
1.3k
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
2
880
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
Ask! NIKKEI RAG検索技術の深層
hotchpotch
13
2.8k
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
10
2.7k
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
110
7日間でハッキングをはじめる本をはじめてみませんか?_ITエンジニア本大賞2025
nomizone
2
1.4k
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
710
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
12
4.5k
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
35
1.6k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
A designer walks into a library…
pauljervisheath
205
24k
Code Review Best Practice
trishagee
66
17k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Site-Speed That Sticks
csswizardry
3
370
Being A Developer After 40
akosma
89
590k
Optimizing for Happiness
mojombo
376
70k
What's in a price? How to price your products and services
michaelherold
244
12k
Transcript
Nuxt.js & Firebase & Netlifyでの 爆速プロトタイピングと 本格運用への足がかり ~ 秋のJavaScript祭 2018/11/17
~ 渡邊達明@株式会社クリモ
◉ 自己紹介 ◉ Webサービス開発3種の神器 ◉ Nuxt.jsはいいぞ ◉ Firebaseはいいぞ ◉ Netlifyはいいぞ
◉ 本格運用への足がかり ◉ まとめ 目次
自己紹介 ◉ 渡邊 達明(わたなべ たつあき) ◉ twitterとか: @nabettu ◉ 富士通株式会社→面白法人カヤック→独立
◉ 妻(代表)と法人設立 ◉ Webフロントエンド(Vue.jsやNuxt.js)& アプリエンジニア(React Native)
◉ 妻がママ向け・保育士向けのメディア運営 ◉ 私が受託開発と、メディアの技術周り担当 ◉ 空いた時間でWebサービス開発 株式会社クリモ
みなさん Webサービス 作ってますか?
◉ SPAフレームワークワーク ◉ Firebase ◉ Netlify 私の考えるフロントエンドエンジニアの Webサービス開発三種の神器 これらを使って爆速でWebサービス開発しよう!
※SPAフレームワークは宗派があるので、 適宜お好みのものに置き換えてください。 ◉ 軽量なものがいい人はRiot.jsやHyperappでも ◉ React派の人はNext.jsでも ◉ メディア系作るならGatsby.js や Gridsome
でも ◉ アプリも見据えているならReact Native , Anguar.js + Ionic, Monaca などなど... 今回は私の好みでNuxt.jsで話を進めます。
Nuxt.jsはいいぞ
Nuxt.js使うとなにが嬉しいか ◉ ルーティングや状態管理などの欲しい機能がだいたい入っ てるからさっと本質的な開発に取り組める ◉ 困っても日本語のドキュメントが豊富 ◉ 状況に合わせてSSRにも静的サイトにも対応 Vue.jsがわかっていれば、とにかくさっと作れる! 今日はjsのイベントで、みんな結構色々使ってるだろうからここはそんなに
話しません
Firebaseはいいぞ
Firebaseとは ◉ ユーザー認証がめっちゃ楽に実装できるBaaS ◉ NoSQLデータベースが↑の認証つかって読み書き管理が楽 ◉ リアルタイム用DBや画像などのストレージももちろんある ◉ FaaSが上記の機能と連携(認証も)してすぐ使える ◉
サーバーレスでAPI経由ですべてこなせます!
Firebaseはいいぞ① ユーザー認証の開発がめっちゃ楽 コードを書かずにユーザーログインが実装出来ます。 管理画面でポチポチーっとするだけ。メールアドレス以外に もSNSログインももちろんOK。SMSも
Firebaseはいいぞ② 認証に紐付いてDBやストレージが管理できて楽 ◉ FirestoreというNoSQLのDB ◉ ファイルストレージ が利用できクライアントから直接操作が実行できる。 その際独自のルール設定で、権限管理をユーザー認証に紐づ けて管理できるので、自分以外読み書き出来ないDBやスト レージの権限管理などが楽にできる。
Firebaseはいいぞ③ リアルタイム通信がWebSocket使わなくてもできるよ Realtime DBというチャットなどの実装に特化したデータベース があり、JavascriptSDKを入れておくと、クライアントサイドから 読み書きができる。 しかもListenerをセットしておくと、DBの変更を勝手に検知して 設定したコードを実行することもできるスグレモノ (Firestoreもできるけどラグが大きい)
Firebaseはいいぞ④ FaaSも簡単に導入できるよ Firebase FunctionsというAWS LambdaのようなNode.jsの関 数が使えます。 しかも「DBの変更を検知して動作」などの、他の機能との連携 も楽ちん! Node.jsで動くので工夫すればSSRなども出来ます。
Netlifyはいいぞ
Netlifyとは ◉ 静的サイトホスティングサービス ◉ GitHubなどのリポジトリと連携して、自動でサイトホ スティングができる ◉ 静的サイト公開のための便利機能がたくさん詰まっ ている
Netlifyはいいぞ① Gitでブランチ切ってプッシュすると 自動でブランチ毎の公開サイトがつくられる ◉ 本番サイト ◉ テストサイト ◉ 新機能のプルリクエストのサイト など、用途に応じてなんとブランチを切るだけでそれぞれの
確認用サイトが出来上がる! webhookでビルドなどももちろんできます。
Netlifyはいいぞ② ビルドも自動でやってくれるぞ distやpublicディレクトリをpushすんのかしないのか問題が 解決します。pushしないでビルドCircle CIなどに任せていた 人も、Netlifyで完結するので管理が楽になります。 しかもyarnなども自動でやってくれて、package.jsonに scriptsでbuildがあればもう設定いらず!
Netlifyはいいぞ③ 便利機能がたくさんあるよ ◉ 独自ドメイン設定 & HTTPS化 ◉ フォームの設置と投稿管理 ◉ gitにpushする独自CMS
◉ プリレンダリング ◉ Functions(Lambdaラッパー) などなど。。。。とにかく静的サイトの公開において問題になる 事への解決策が取り揃っています。
◉ フロントのみでSPAサイトを作って ◉ サーバーサイド構築は最小限で済ませて ◉ すぐにサイト公開ができる これら3つを組み合わせて、、、 結果爆速でWebサービスが作れる!
みなさんも三種の神器を使いこなして 爆速開発していきましょう! でも、運用が大変 だったり かゆいところが あるんでしょう? わかる
三種の神器を使った Webサービスの 本格運用への足がかり マジウケるwww ためしがきの例も少し ギャルと一緒に説明するトラ!
作ってます
静的サイトジェネレータって OGPの出し分け出来なくない?① Functionsで一部のパスだけ SSRな機能を作って、 本サイトにリダイレクトする ◉ 基本的には決まったコンテンツにしか出来ない ◉ CGMなどでOGP芸をやるときに困る
静的サイトジェネレータって OGPの出し分け出来なくない?② NetlifyにPrerenderingという機能があり、 JSでのレンダリング結果をキャッシュして 持っておいてくれる機能を使う ※キャッシュがたまるまで少し時間がかかるためメディア系ならいける ◉ メディアなどの決まったコンテンツの場合で、 いちいち全部ジェネレートしないで動的に出す場合
Firebaseはただの コンテンツ管理させるにはだるくない? Contentfulというヘッドレス CMSでフォントの管理をし ています。 admin権限のデータなどを 別途用意するとかにも便利
Firebaseって プロジェクト5個しか作れなくない? どう考えても少ないっしょ 申請すると結構すぐ上限を上 げてくれます。 私も今30個くらいプロジェクト あります。。。
DBを非正規化すると クライアントサイドjoinだるくない?① 例) データproductAを取得してから imageAをとってjoinして表示。 ◉ Joinするコードが増えて辛い ◉ Joinしてから画像表示すると遅い
DBを非正規化すると クライアントサイドjoinだるくない?② 1. urlなどの必要なデータのみ functionsを使って productAにも入れるようにする 2. procductAとimageAをくっつけた データをfunctionsで作っておく。 そのデータはリードオンリー。
クライアントは元データだけ更新
ってかFirestoreも更新検知できる とか言ってるくせに遅くない? その部分だけでいいので、 Realtime DataBaseを使おう! ◉ まだ東京リージョンが来てない! ◉ 間にfunctionsを挟んだりするとfunctionsは立ち上がりが遅いた め、その影響が出る
Firestoreって全文検索とかないわけ? を使おう! Firestoreのデータを全部突っ込んで、検索可能にできます しかもalgolia経由の検索がめっちゃ早い ◉ ありません。全体的にQueryがしょぼいです
やっぱ私SDKとか知らんし、RESTにしたいん ですけど ◉ Firebase functionでREST APIを生やして使うこ とも出来ます ◉ その際にFirebase Authの認証情報を使って
functionsの実行を制御出来たりもします! ◉ ルールの設定が複雑怪奇になるくらいなら、 functionsに寄せて作ったほうが楽な場合もありま す
気づいちゃったんだけど、 なんかNetlifyのCDN遅くない? 本番環境だけfirebase hostingを使おう!笑 確認用にNetlifyを利用 でもこないだ大型調達したからきっと改善するはず。。。! ちょっと遅い、、、(ざっくり測ってみた) ◉ Cloudfront,FirebaseHosting:50ms〜100ms ◉
Netlify:150~180 ms ◉ Github Pages:250~400 ms
◉ 三種の神器で爆速開発を始めよう! ◉ とはいえ開発効率はいいけど弱点もある ◉ でもプラスアルファで補える場合も多々あります! ◉ 辛くなったら一部だけ使うとかに切り替えてもいい まとめ
Vue.jsとFirebaseの本、Netlifyの本を書いているので ぜひ買って下さい! ◉ AmazonでKindle ◉ BoothでPDF が買えます!!! 宣伝です
質問あればTwitterでもどうぞ。 お仕事も少し募集してます! https://twitter.com/nabettu https://nabettu.com Thanks!
cometsについて こちらの発表は、専用サイトに コメントするとコメントが 発表者のスライドに表示されます。 https://comets.nabettu.com/?id=jsfes ちなみにFirebaseとNetlifyで動いています。