Nuxt.js & Firebase & Netlifyでの 爆速プロトタイピングと 本格運用への足がかり

Transcript

1. Nuxt.js & Firebase & Netlifyでの 爆速プロトタイピングと 本格運用への足がかり ~ 秋のJavaScript祭 2018/11/17 ~ 渡邊達明＠株式会社クリモ
2. ◉ 自己紹介 ◉ Webサービス開発３種の神器 ◉ Nuxt.jsはいいぞ ◉ Firebaseはいいぞ ◉ Netlifyはいいぞ ◉ 本格運用への足がかり ◉ まとめ 目次
3. 自己紹介 ◉ 渡邊 達明（わたなべ たつあき） ◉ twitterとか: @nabettu ◉ 富士通株式会社→面白法人カヤック→独立 ◉ 妻（代表）と法人設立 ◉ Webフロントエンド（Vue.jsやNuxt.js）＆ アプリエンジニア（React Native）
4. ◉ 妻がママ向け・保育士向けのメディア運営 ◉ 私が受託開発と、メディアの技術周り担当 ◉ 空いた時間でWebサービス開発 株式会社クリモ
5. みなさん Webサービス 作ってますか？
6. ◉ SPAフレームワークワーク ◉ Firebase ◉ Netlify 私の考えるフロントエンドエンジニアの Webサービス開発三種の神器 これらを使って爆速でWebサービス開発しよう！
7. ※SPAフレームワークは宗派があるので、 　適宜お好みのものに置き換えてください。 ◉ 軽量なものがいい人はRiot.jsやHyperappでも ◉ React派の人はNext.jsでも ◉ メディア系作るならGatsby.js や Gridsome でも ◉ アプリも見据えているならReact Native , Anguar.js + Ionic, Monaca などなど... 今回は私の好みでNuxt.jsで話を進めます。
8. Nuxt.jsはいいぞ
9. Nuxt.js使うとなにが嬉しいか ◉ ルーティングや状態管理などの欲しい機能がだいたい入っ てるからさっと本質的な開発に取り組める ◉ 困っても日本語のドキュメントが豊富 ◉ 状況に合わせてSSRにも静的サイトにも対応 Vue.jsがわかっていれば、とにかくさっと作れる！ 今日はjsのイベントで、みんな結構色々使ってるだろうからここはそんなに 話しません
10. Firebaseはいいぞ
11. Firebaseとは ◉ ユーザー認証がめっちゃ楽に実装できるBaaS ◉ NoSQLデータベースが↑の認証つかって読み書き管理が楽 ◉ リアルタイム用DBや画像などのストレージももちろんある ◉ FaaSが上記の機能と連携（認証も）してすぐ使える ◉ サーバーレスでAPI経由ですべてこなせます！
12. Firebaseはいいぞ① ユーザー認証の開発がめっちゃ楽 コードを書かずにユーザーログインが実装出来ます。 管理画面でポチポチーっとするだけ。メールアドレス以外に もSNSログインももちろんOK。SMSも
13. Firebaseはいいぞ② 認証に紐付いてDBやストレージが管理できて楽 ◉ FirestoreというNoSQLのDB ◉ ファイルストレージ が利用できクライアントから直接操作が実行できる。 その際独自のルール設定で、権限管理をユーザー認証に紐づ けて管理できるので、自分以外読み書き出来ないDBやスト レージの権限管理などが楽にできる。
14. Firebaseはいいぞ③ リアルタイム通信がWebSocket使わなくてもできるよ Realtime DBというチャットなどの実装に特化したデータベース があり、JavascriptSDKを入れておくと、クライアントサイドから 読み書きができる。 しかもListenerをセットしておくと、DBの変更を勝手に検知して 設定したコードを実行することもできるスグレモノ （Firestoreもできるけどラグが大きい）
15. Firebaseはいいぞ④ FaaSも簡単に導入できるよ Firebase FunctionsというAWS LambdaのようなNode.jsの関 数が使えます。 しかも「DBの変更を検知して動作」などの、他の機能との連携 も楽ちん！ Node.jsで動くので工夫すればSSRなども出来ます。
16. Netlifyはいいぞ
17. Netlifyとは ◉ 静的サイトホスティングサービス ◉ GitHubなどのリポジトリと連携して、自動でサイトホ スティングができる ◉ 静的サイト公開のための便利機能がたくさん詰まっ ている
18. Netlifyはいいぞ① Gitでブランチ切ってプッシュすると 自動でブランチ毎の公開サイトがつくられる ◉ 本番サイト ◉ テストサイト ◉ 新機能のプルリクエストのサイト など、用途に応じてなんとブランチを切るだけでそれぞれの 確認用サイトが出来上がる！ webhookでビルドなどももちろんできます。
19. Netlifyはいいぞ② ビルドも自動でやってくれるぞ distやpublicディレクトリをpushすんのかしないのか問題が 解決します。pushしないでビルドCircle CIなどに任せていた 人も、Netlifyで完結するので管理が楽になります。 しかもyarnなども自動でやってくれて、package.jsonに scriptsでbuildがあればもう設定いらず！
20. Netlifyはいいぞ③ 便利機能がたくさんあるよ ◉ 独自ドメイン設定 & HTTPS化 ◉ フォームの設置と投稿管理 ◉ gitにpushする独自CMS ◉ プリレンダリング ◉ Functions(Lambdaラッパー) などなど。。。。とにかく静的サイトの公開において問題になる 事への解決策が取り揃っています。
21. ◉ フロントのみでSPAサイトを作って ◉ サーバーサイド構築は最小限で済ませて ◉ すぐにサイト公開ができる これら３つを組み合わせて、、、 結果爆速でWebサービスが作れる！
22. みなさんも三種の神器を使いこなして 爆速開発していきましょう！ でも、運用が大変 だったり かゆいところが あるんでしょう？ わかる
23. 三種の神器を使った Webサービスの 本格運用への足がかり マジウケるｗｗｗ ためしがきの例も少し ギャルと一緒に説明するトラ！
24. 作ってます
25. 静的サイトジェネレータって OGPの出し分け出来なくない？① Functionsで一部のパスだけ SSRな機能を作って、 本サイトにリダイレクトする ◉ 基本的には決まったコンテンツにしか出来ない ◉ CGMなどでOGP芸をやるときに困る
26. 静的サイトジェネレータって OGPの出し分け出来なくない？② NetlifyにPrerenderingという機能があり、 JSでのレンダリング結果をキャッシュして 持っておいてくれる機能を使う ※キャッシュがたまるまで少し時間がかかるためメディア系ならいける ◉ メディアなどの決まったコンテンツの場合で、 　　いちいち全部ジェネレートしないで動的に出す場合
27. Firebaseはただの コンテンツ管理させるにはだるくない？ Contentfulというヘッドレス CMSでフォントの管理をし ています。 admin権限のデータなどを 別途用意するとかにも便利
28. Firebaseって プロジェクト５個しか作れなくない？ どう考えても少ないっしょ 申請すると結構すぐ上限を上 げてくれます。 私も今30個くらいプロジェクト あります。。。
29. DBを非正規化すると クライアントサイドjoinだるくない？① 例) データproductAを取得してから 　 imageAをとってjoinして表示。 ◉ Joinするコードが増えて辛い ◉ Joinしてから画像表示すると遅い
30. DBを非正規化すると クライアントサイドjoinだるくない？② 1. urlなどの必要なデータのみ functionsを使って productAにも入れるようにする 2. procductAとimageAをくっつけた データをfunctionsで作っておく。 そのデータはリードオンリー。 クライアントは元データだけ更新
31. ってかFirestoreも更新検知できる とか言ってるくせに遅くない？ その部分だけでいいので、 Realtime DataBaseを使おう! ◉ まだ東京リージョンが来てない！ ◉ 間にfunctionsを挟んだりするとfunctionsは立ち上がりが遅いた め、その影響が出る
32. Firestoreって全文検索とかないわけ？ を使おう! Firestoreのデータを全部突っ込んで、検索可能にできます しかもalgolia経由の検索がめっちゃ早い ◉ ありません。全体的にQueryがしょぼいです
33. やっぱ私SDKとか知らんし、RESTにしたいん ですけど ◉ Firebase functionでREST APIを生やして使うこ とも出来ます ◉ その際にFirebase Authの認証情報を使って functionsの実行を制御出来たりもします！ ◉ ルールの設定が複雑怪奇になるくらいなら、 functionsに寄せて作ったほうが楽な場合もありま す
34. 気づいちゃったんだけど、 なんかNetlifyのCDN遅くない？ 本番環境だけfirebase hostingを使おう!笑 確認用にNetlifyを利用 でもこないだ大型調達したからきっと改善するはず。。。！ ちょっと遅い、、、（ざっくり測ってみた） ◉ Cloudfront,FirebaseHosting：50ms〜100ms ◉ Netlify：150~180 ms ◉ Github Pages：250~400 ms
35. ◉ 三種の神器で爆速開発を始めよう！ ◉ とはいえ開発効率はいいけど弱点もある ◉ でもプラスアルファで補える場合も多々あります！ ◉ 辛くなったら一部だけ使うとかに切り替えてもいい まとめ
36. Vue.jsとFirebaseの本、Netlifyの本を書いているので ぜひ買って下さい！ ◉ AmazonでKindle ◉ BoothでPDF が買えます！！！ 宣伝です
37. 質問あればTwitterでもどうぞ。 お仕事も少し募集してます！ https://twitter.com/nabettu https://nabettu.com Thanks!
38. cometsについて こちらの発表は、専用サイトに コメントするとコメントが 発表者のスライドに表示されます。 https://comets.nabettu.com/?id=jsfes ちなみにFirebaseとNetlifyで動いています。