Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

作ってみた構成例 ● Laravel + Vue.js (JS) ● Elixir + Phoenix (JS) ● Laravel + Vue.js (TS) ● Nuxt.js + Express (TS) ← 今回はこれの話 ● Nuxt.js + Firebase (TS) 今回は主に個人で開発するサービスの話

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

create-nuxt-appがとても良かった ● サーバーアプリケーションを選択できる( Express等) ● UIフレームワークを選択できる( Buefy等) ● axiosモジュールを使うか等 ● テストライブラリを入れるかなど( Jest等) ● Lintをどうするか ● 最初からnodemonでwatchしてくれてる GitHubのIssueではTypeScriptの話も出てるので期待(?)

Slide 8

Slide 8 text

なぜNuxt.js+Express? MySQL使いたかった。 元々FirebaseのFirestoreで開発していたが…… ● RDBに慣れているのでどうしてもデータを正規化したくなってしまう ● 今後色々集計なども作りたいのでクエリが弱いのがいつも不安 ● セキュリティをしっかりしたり Functionsで書く → サーバーサイド自分で書くのと結局同じことをしているような気になってきた ● 個人サービスなので無料枠がどうしても気になる ● モデルにTypeScriptが使いたい 結局自分でサーバー側も書くことに

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

辛かったところ

Slide 15

Slide 15 text

ひたすらハマる 色々なパッケージの組み合わせで構築するので、新しいものを使ったり、新しい組み合わせが発生す るとその度ハマる ● セッションをMySQLにするだけでハマる ● 下手に開発中ts-nodeを使ったりしたので本番ビルドだけエラーが出たりする ● ローカルの本番ビルド&実行は動くのに本番サーバーでは動かない ● TypeORMだけパスがずれて動かない ● テストだけ動かない とにかく何でも入って最初から動く Laravelがめちゃくちゃ恋しくなった

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

サーバーどうするか

Slide 19

Slide 19 text

現在色々候補はある なるべく無料でサーバーサイドレンダリングや DBの利用もしたい ● Heroku(DBの容量が不安) ● Google App Engine(スペックが不安) ● Now(DBがない。Now2だとNuxt.js動かないかも) ○ nuxt/now-builderでた! ● Google Compute Engine(何でもできるけど管理が面倒) ● Google Cloud Run(試したいけど無料だとスペックは GAEと同等 まだベータなので合うリージョンがなかった)

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

prefetch Nuxt.js2.4から。リンク先の先読み。 忘れていたが、貧弱なサーバーだと負荷が怖いので無効化したい ● で無効化可能 ● nuxt.config.jsのrouter.prefetchLinksでグローバルに設定

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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