Nuxt.jsとExpressでWebサービスを作ってみた

Transcript

1. Nuxt.jsと Expressで サービスを作ってみた

2. 自己紹介 Twitter: dala00 個人で色々とサービスを作っている（去年は５つ＋ α） PHPメインだけどNode.js、Elixir、Firebase等何でも使ってリリースしたりする

3. 作ってみた構成例 • Laravel + Vue.js (JS) • Elixir + Phoenix

   (JS) • Laravel + Vue.js (TS) • Nuxt.js + Express (TS) ← 今回はこれの話 • Nuxt.js + Firebase (TS) 今回は主に個人で開発するサービスの話

4. 作ったもの 100の質問メーカー 質問を作ったり回答したりできるサービス • Nuxt.js • Express • Buefy

5. None

6. アプリケーションの初期化 • nuxt-community/starter-template • nuxt-community/express-template • create-nuxt-app

7. create-nuxt-appがとても良かった • サーバーアプリケーションを選択できる（ Express等） • UIフレームワークを選択できる（ Buefy等） • axiosモジュールを使うか等 •

   テストライブラリを入れるかなど（ Jest等） • Lintをどうするか • 最初からnodemonでwatchしてくれてる GitHubのIssueではTypeScriptの話も出てるので期待（？）

8. なぜNuxt.js+Express？ MySQL使いたかった。 元々FirebaseのFirestoreで開発していたが…… • RDBに慣れているのでどうしてもデータを正規化したくなってしまう • 今後色々集計なども作りたいのでクエリが弱いのがいつも不安 • セキュリティをしっかりしたり Functionsで書く

   →　サーバーサイド自分で書くのと結局同じことをしているような気になってきた • 個人サービスなので無料枠がどうしても気になる • モデルにTypeScriptが使いたい 結局自分でサーバー側も書くことに

9. 両方Node.jsでやってみてどうだったか 快適でもあり面倒でもあり …。

10. 両方Node.jsにすると良いところ

11. セッションの連携が簡単 両方Node.jsである場合の一番の強み？

12. サーバー一つで可能 （ここでいうサーバーはインスタンスのことではなく サービスとして起動しておくサーバーアプリケーションのこと） 巨大なアプリケーションならそもそもフロントとサーバーを 別にしたほうが良いかもしれないが、 個人で作る小規模なレベルならシンプルで楽

13. interfaceとか使い回せる サーバー側でモデルをJSONに変換するときの型定義と、 Nuxt.js上で利用する場合の型定義を同じ interfaceで使いませる （モデル自体はちょっとつらい）

14. 辛かったところ

15. ひたすらハマる 色々なパッケージの組み合わせで構築するので、新しいものを使ったり、新しい組み合わせが発生す るとその度ハマる • セッションをMySQLにするだけでハマる • 下手に開発中ts-nodeを使ったりしたので本番ビルドだけエラーが出たりする • ローカルの本番ビルド＆実行は動くのに本番サーバーでは動かない •

    TypeORMだけパスがずれて動かない • テストだけ動かない とにかく何でも入って最初から動く Laravelがめちゃくちゃ恋しくなった

16. ビルドが必要 Google Compute Engineの一番貧弱なメモリ0.6GBのサーバー • メモリが足りなくてビルドできない　 →　スワップ設定 • 200秒くらいかかる　→　その間負荷が高すぎてサービスも止まる ユーザーが増えたりしてちゃんとしたい場合は

    CIでデプロイ等必要

17. 両方Node.jsでなくても良いかも Nuxt.js＋他の言語のサーバーアプリケーションでも良さそう • 同じにするメリットはあるけど大変なとこもある • 慣れてるサーバーサイドのフレームワークを使ったほうが安心感がある • CIでデプロイするなら何でも良いと思うけど、小規模であれば Laravelとかだったら手動でpullするだけデプロイ終わったり

18. サーバーどうするか

19. 現在色々候補はある なるべく無料でサーバーサイドレンダリングや DBの利用もしたい • Heroku（DBの容量が不安） • Google App Engine（スペックが不安） •

    Now（DBがない。Now2だとNuxt.js動かないかも） ◦ nuxt/now-builderでた！ • Google Compute Engine（何でもできるけど管理が面倒） • Google Cloud Run（試したいけど無料だとスペックは GAEと同等 まだベータなので合うリージョンがなかった）

20. 結局Compute Engineに • ずっと無料枠 • メモリ低いけどGAEとかよりは高い • 最悪DBも同居させれば完全にほぼ無料

21. その他Nuxt.js上でやったこと

22. prefetch Nuxt.js2.4から。リンク先の先読み。 忘れていたが、貧弱なサーバーだと負荷が怖いので無効化したい • <n-link to="/about" no-prefetch> で無効化可能 • nuxt.config.jsのrouter.prefetchLinksでグローバルに設定

23. @nuxtjs/dotenv 必要な環境変数だけ指定も可能

24. 解析や広告 直接配置できないのでmodulesに設定して利用 • @nuxtjs/google-tag-manager • @nuxtjs/google-analytics • @nuxtjs/google-adsense

25. まとめ • Nuxt.jsはとにかく色々揃ってて簡単にできるのでおすすめ • Vue.jsのみからNuxt.jsに変えるのは面倒なので作る前に考えた方が良い • 本番へのデプロイ方法も予め考えておいた方が良い • サーバーサイドは規模や用途、継続性など、色々な要素を元に考えて選定 •

    全部Node.jsたいへんだけど楽しいのは楽しい