Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Nuxt.jsとExpressでWebサービスを作ってみた
dala00
April 25, 2019
Programming
0
950
Nuxt.jsとExpressでWebサービスを作ってみた
dala00
April 25, 2019
Tweet
Share
More Decks by dala00
See All by dala00
dala00
0
5
dala00
1
120
dala00
1
460
dala00
1
360
dala00
0
39
Other Decks in Programming
See All in Programming
adarapata
1
430
minecr
0
110
ajstarks
2
410
thatjeffsmith
0
1.3k
77web
2
2.3k
o0h
PRO
3
1.5k
yosuke_furukawa
PRO
1
250
kodetr
0
120
thatjeffsmith
0
620
sisshiki1969
1
220
takuyaa
4
470
devinjeon
2
830
Featured
See All Featured
skipperchong
8
780
imathis
479
150k
lauravandoore
10
1.7k
sugarenia
233
880k
lara
590
61k
dougneiner
56
5.4k
addyosmani
494
110k
paulrobertlloyd
71
3.7k
samlambert
237
10k
revolveconf
200
9.7k
morganepeng
94
14k
zakiwarfel
88
3.4k
Transcript
Nuxt.jsと Expressで サービスを作ってみた
自己紹介 Twitter: dala00 個人で色々とサービスを作っている(去年は5つ+ α) PHPメインだけどNode.js、Elixir、Firebase等何でも使ってリリースしたりする
作ってみた構成例 • Laravel + Vue.js (JS) • Elixir + Phoenix
(JS) • Laravel + Vue.js (TS) • Nuxt.js + Express (TS) ← 今回はこれの話 • Nuxt.js + Firebase (TS) 今回は主に個人で開発するサービスの話
作ったもの 100の質問メーカー 質問を作ったり回答したりできるサービス • Nuxt.js • Express • Buefy
None
アプリケーションの初期化 • nuxt-community/starter-template • nuxt-community/express-template • create-nuxt-app
create-nuxt-appがとても良かった • サーバーアプリケーションを選択できる( Express等) • UIフレームワークを選択できる( Buefy等) • axiosモジュールを使うか等 •
テストライブラリを入れるかなど( Jest等) • Lintをどうするか • 最初からnodemonでwatchしてくれてる GitHubのIssueではTypeScriptの話も出てるので期待(?)
なぜNuxt.js+Express? MySQL使いたかった。 元々FirebaseのFirestoreで開発していたが…… • RDBに慣れているのでどうしてもデータを正規化したくなってしまう • 今後色々集計なども作りたいのでクエリが弱いのがいつも不安 • セキュリティをしっかりしたり Functionsで書く
→ サーバーサイド自分で書くのと結局同じことをしているような気になってきた • 個人サービスなので無料枠がどうしても気になる • モデルにTypeScriptが使いたい 結局自分でサーバー側も書くことに
両方Node.jsでやってみてどうだったか 快適でもあり面倒でもあり …。
両方Node.jsにすると良いところ
セッションの連携が簡単 両方Node.jsである場合の一番の強み?
サーバー一つで可能 (ここでいうサーバーはインスタンスのことではなく サービスとして起動しておくサーバーアプリケーションのこと) 巨大なアプリケーションならそもそもフロントとサーバーを 別にしたほうが良いかもしれないが、 個人で作る小規模なレベルならシンプルで楽
interfaceとか使い回せる サーバー側でモデルをJSONに変換するときの型定義と、 Nuxt.js上で利用する場合の型定義を同じ interfaceで使いませる (モデル自体はちょっとつらい)
辛かったところ
ひたすらハマる 色々なパッケージの組み合わせで構築するので、新しいものを使ったり、新しい組み合わせが発生す るとその度ハマる • セッションをMySQLにするだけでハマる • 下手に開発中ts-nodeを使ったりしたので本番ビルドだけエラーが出たりする • ローカルの本番ビルド&実行は動くのに本番サーバーでは動かない •
TypeORMだけパスがずれて動かない • テストだけ動かない とにかく何でも入って最初から動く Laravelがめちゃくちゃ恋しくなった
ビルドが必要 Google Compute Engineの一番貧弱なメモリ0.6GBのサーバー • メモリが足りなくてビルドできない → スワップ設定 • 200秒くらいかかる → その間負荷が高すぎてサービスも止まる ユーザーが増えたりしてちゃんとしたい場合は
CIでデプロイ等必要
両方Node.jsでなくても良いかも Nuxt.js+他の言語のサーバーアプリケーションでも良さそう • 同じにするメリットはあるけど大変なとこもある • 慣れてるサーバーサイドのフレームワークを使ったほうが安心感がある • CIでデプロイするなら何でも良いと思うけど、小規模であれば Laravelとかだったら手動でpullするだけデプロイ終わったり
サーバーどうするか
現在色々候補はある なるべく無料でサーバーサイドレンダリングや DBの利用もしたい • Heroku(DBの容量が不安) • Google App Engine(スペックが不安) •
Now(DBがない。Now2だとNuxt.js動かないかも) ◦ nuxt/now-builderでた! • Google Compute Engine(何でもできるけど管理が面倒) • Google Cloud Run(試したいけど無料だとスペックは GAEと同等 まだベータなので合うリージョンがなかった)
結局Compute Engineに • ずっと無料枠 • メモリ低いけどGAEとかよりは高い • 最悪DBも同居させれば完全にほぼ無料
その他Nuxt.js上でやったこと
prefetch Nuxt.js2.4から。リンク先の先読み。 忘れていたが、貧弱なサーバーだと負荷が怖いので無効化したい • <n-link to="/about" no-prefetch> で無効化可能 • nuxt.config.jsのrouter.prefetchLinksでグローバルに設定
@nuxtjs/dotenv 必要な環境変数だけ指定も可能
解析や広告 直接配置できないのでmodulesに設定して利用 • @nuxtjs/google-tag-manager • @nuxtjs/google-analytics • @nuxtjs/google-adsense
まとめ • Nuxt.jsはとにかく色々揃ってて簡単にできるのでおすすめ • Vue.jsのみからNuxt.jsに変えるのは面倒なので作る前に考えた方が良い • 本番へのデプロイ方法も予め考えておいた方が良い • サーバーサイドは規模や用途、継続性など、色々な要素を元に考えて選定 •
全部Node.jsたいへんだけど楽しいのは楽しい