サーバで動かすには何が必要なの？
まずはローカル環境でいろいろ試すとは思いますが、
実際にプロダクトとしてサーバにローンチするにあたり、結局のところ
動作させるにはどんな環境が必要なのか？という軸でざっくり説明したいと思います。
なので、Nuxt.jsそのものがどんなものなのか、はここでは割愛させていただきます。
そもそも何故こんな記事を書こうと思ったのか
自身はPHPを中心としたバックエンドよりの仕事が多かったため、
Vue.jsやNuxt.jsの台頭によるフロントエンドの隆盛を横目で流し見していました。
さすがにこりゃいかん、と、思い始めたのも2018年あたりという…
で、細々と勉強をしている中で、文法作法はさて置き、いまいち分からなくなるのが
開発とローンチ(サーバ)での動作環境についてでした。
詰まるところ、ローカルではNode.jsやらnpmやらwebpackやらVueCLIやら
あれもこれもインストールして大盛り上がりな状態で開発していくんですが
ローンチするサーバには結局、どんな要件があれば動くの？ってところが非常に分かりにくかったんですね。
その切り口でシンプルに解説している投稿もなく
(もしかしたら昨今のフロントエンドエンジニアは、肌感で当たり前になっていることなのかもしれないが…)
ここは自身に言い聞かせる意味でも、あえて記事にしておこうと思った次第です。
モード別に見るとこんな感じ
Nuxt.jsには、モードによりデプロイ結果が変わってくるという仕様があります。
| Universal(ユニバーサル) | Single Page App(シングルページアプリケーション) | Generate(静的ファイル生成) |
|---|---|---|
| ssr(サーバーサイドレタリング) | SPAってやつ | 生のhtmlを書き出し |
| UIレンダリング全体を担う | ミドルウェアとして組み込む, プログラムの一部として使う | vueファイルからhtmlに生成してしまう |
| 静的ホスティング不可 | 静的ホスティング可(buildしたdist一式アップすれば動く) | 静的ホスティング可(buildしたdist一式アップすれば動く) |
| サーバにNode.jsいる | サーバにNode.js不要 | サーバにNode.js不要 |
| phpと同じように、サーバ側でレンダリングしてhtmlを作成してからレスポンス返す | フロントにてjsでhtmlをレンダリングするので、初回が遅い。あと、jsでhtml生成なので、SEO的に弱い | ただのhtmlサイト。ある意味では最強の状態 |
| SEO OK | SEO△ 個別のメタやOG× | SEO OK |
| いろいろコスト高い | コスト低い | コスト低い |
| サクサク | 初回重い | 普通 |
| 中～大規模サイト | LP,小～中規模 | ALL |
※デフォルトはユニバーサルモード
なんというか、つまり
サーバ側でNode.jsさんがごにょごにょしてページを作ってからフロントに返し、フロントはそれをただ表示するだけ、か、
とりあえず最初に材料まるっとフロントに渡して、フロントのjsさんが頑張ってごにょごにょしてページをレンダリングして表示させるか、
はたまた、なんてことない生のhtmlのただの静的なサイトにするか、
という三つのやり口があるんです。
余談ですが、静的htmlのジェネレートもできるんだ、ってちょっと驚きでした。
これ、MT(MovableType)みたいな使い方もできるんだ…って。
あと、SPAのところで一つ補足
ダイナミックレンダリングって技術があるようで、
ボットのクロール用にはhtmlを読ませて、ブラウザからの人のアクセス時にはSPAのjsからの描画を見せるみたいな
使い分けを行うこともできるらしい。
しかし、SSR移行までの一時しのぎ、的な位置づけのようで、
定着させる必須技術というわけではないだ。
こう考えると、はっきりしてくるんですが、
ユニバーサル、つまりSSRするときは、当たり前ですがサーバ要件にnode必須ということですね。
で、SPAとなるとサーバ側でレンダリグする必要はないので、サーバにnodeは不要、ローカルの開発環境にだけあればよいですし、
Generateでも同じことですね。
結局のところ
Node.jsがいるんです。ただそれは、ローカルの開発環境には必須ということであり
SSRモードで利用しないのであれば、サーバにNode.jsは不要です。
という、ものすごく単純で当たり前のことに行き着くのでした。
Nuxt.jsをプロジェクトに導入する場合は、
必ずサーバ要件でNode.jsが使えるかどうか確認してからにしましょう。
SSRでいくぜ！なんて息巻いてみても、後でやっぱりできませんでした…なんてことがないようにね！