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
Create a website using Spatial Web
akkeylab
0
310
GoのGenericsによるslice操作との付き合い方
syumai
3
710
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
380
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
Discover Metal 4
rei315
2
110
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
50
32k
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
350
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.8k
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
170
Goで作る、開発・CI環境
sin392
0
190
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
0
310
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Agile that works and the tools we love
rasmusluckow
329
21k
It's Worth the Effort
3n
185
28k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Automating Front-end Workflow
addyosmani
1370
200k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
230
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.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たいへんだけど楽しいのは楽しい