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.8k
Nuxt.jsとExpressでWebサービスを作ってみた
dala00
April 25, 2019
Tweet
Share
More Decks by dala00
See All by dala00
Freelance Talk Session Kansai
dala00
0
48
A-FrameでWebVR
dala00
1
190
Laravelでサービスを作った時にやったこと
dala00
1
800
Laravel + Vue.jsでサービスを作成&運営してみて
dala00
1
550
何でも書ける技術者向けコミュニティCrieit - 制作物天下一武道会
dala00
0
66
Other Decks in Programming
See All in Programming
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.3k
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
20
3.6k
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
380
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.4k
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
110
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
160
XP, Testing and ninja testing
m_seki
3
190
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
390
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
430
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
440
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
120
FormFlow - Build Stunning Multistep Forms
yceruto
1
190
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
Statistics for Hackers
jakevdp
799
220k
Facilitating Awesome Meetings
lara
54
6.4k
Fireside Chat
paigeccino
37
3.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Language of Interfaces
destraynor
158
25k
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
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たいへんだけど楽しいのは楽しい