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
790
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
210
React Native for WebでもOGP対応がしたい! ~ TECH STAND #2 React Native 2020/12/18 ~
nabettu
1
5.9k
React Navigationを使って React Native WebでSPAを試してみた ~ React Native Meetup 2020/5/29 ~
nabettu
8
8k
OG画像のためだけのFunctionsで、 htmlベタ書き&リダイレクトをやめるんだ
nabettu
3
1.4k
React Nativeにおける ExpoとFirebaseの活用 Webとの共通化 ~ React Native Tokyo 2019/09/03 ~
nabettu
2
1.1k
A story till the netlify fun book is made
nabettu
0
520
Netlifyはいいぞ #技術同人誌再販Night
nabettu
1
370
声をかけられるフリーランスエンジニアになるには
nabettu
5
1.3k
2016-01-25いいとも発表Atomパッケージ
nabettu
0
120
Other Decks in Technology
See All in Technology
Evolutionary Optimization of Model Merging Recipes
fuyu_quant0
3
540
家族アルバム みてねで直面してきた技術的負債 / MIXI KAG 2024
isaoshimizu
17
7.7k
単回帰分析について数式を追いながら実装してみた
kentaitakura
0
500
技術広報経験0のEMがエンジニアブランディングをはじめてみた
coconala_engineer
1
130
#51 “Empowering Azure Storage with RDMA”
cafenero_777
3
210
統計的学習理論読み Chapter 2
kmatsui
1
250
2023 Japan AWS Jr.Championsに選出されての振り返りとこれから
hiropy877
1
130
サービス成長と共に肥大化するモノレポ、長くなるCI時間 / As services grow, monorepos get bigger and CI time gets longer
kohbis
5
2.1k
MongoDB Atlas Vectorsearchではじめる生成AIアプリ開発
chie8842
3
510
今さら聞けない!? AWSの生成AIサービス Amazon Bedrock入門!
minorun365
PRO
11
2.6k
BDD(Cucumber)コミュニティが無料提供しているコンテンツの紹介と現在起きている危機
nihonbuson
4
740
匠MethodとRDRAとICONIXとDDDで実現する一気通貫オブジェクト指向開発
haru860
4
2.1k
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
Building Adaptive Systems
keathley
29
1.8k
Optimizing for Happiness
mojombo
369
69k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
BBQ
matthewcrist
78
8.7k
Designing on Purpose - Digital PM Summit 2013
jponch
109
6.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
GraphQLの誤解/rethinking-graphql
sonatard
48
9.1k
4 Signs Your Business is Dying
shpigford
174
21k
Teambox: Starting and Learning
jrom
126
8.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
Producing Creativity
orderedlist
PRO
335
39k
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で動いています。