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とExpressでWebサービスを作ってみた
Search
dala00
April 25, 2019
Programming
0
1.6k
Nuxt.jsとExpressでWebサービスを作ってみた
dala00
April 25, 2019
Tweet
Share
More Decks by dala00
See All by dala00
Freelance Talk Session Kansai
dala00
0
41
A-FrameでWebVR
dala00
1
170
Laravelでサービスを作った時にやったこと
dala00
1
720
Laravel + Vue.jsでサービスを作成&運営してみて
dala00
1
500
何でも書ける技術者向けコミュニティCrieit - 制作物天下一武道会
dala00
0
57
Other Decks in Programming
See All in Programming
PHPでOfficeファイルを取り扱う! PHP Officeライブラリを プロダクトに組み込んだ話
hirobe1999
0
730
ISUCONってなんだか難しそう……!!でも、初めてのISUCONにPHPで挑戦してきました!
kotomin_m
0
260
Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
840
Docker ハンズオン / docker-hands-on
suzukihoge
48
15k
document.write再考
brn
5
1.8k
Kotlinを用いたDSL的な設計手法と使用上の注意
kohii00
2
490
使えるマークダウンライブラリを探した結果 RailsアプリケーションからRustを使うことになった話
fursich
0
150
Deep Dive into the Symfony Security Component
hhamon
1
180
オレオレkaggle開発環境に Formatter/Linter入れてみた
stgkrt
0
350
php-src debug マニュアル
onopon
1
650
PHPアプリケーションのスケーラビリティと 信頼性を革新する nginx+ngx_mrubyとGoの融合
pyama86
2
220
RISC-V カスタムのためのツールチェーン拡張 ― GNU Binutils と GCC の拡張・コミュニティへの参加編 (未完成版)
a4lg
0
190
Featured
See All Featured
Atom: Resistance is Futile
akmur
258
25k
Thoughts on Productivity
jonyablonski
57
3.7k
Build your cross-platform service in a week with App Engine
jlugia
223
17k
A Tale of Four Properties
chriscoyier
150
22k
Infographics Made Easy
chrislema
237
17k
jQuery: Nuts, Bolts and Bling
dougneiner
57
7.1k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
4
1.4k
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
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たいへんだけど楽しいのは楽しい