Azure へのホスティングもサポートする Nuxt3 が RC になりました
2022 年 4 月 20 日に次世代の NuxtJS である Nuxt3 の RC がリリースされました。詳細は 公式ドキュメント に譲りますが、Nuxt2 とは内部のアーキテクチャを含めて全てが新しく変わっています。そして、さまざまなクラウドホスティングプロバイダーへのデプロイにも最初から対応しています。
この記事では私の推しである Azure に Nuxt3 をホスティングする方法などを紹介していきたいと思います。
Nitro による Node.js サーバーへのデプロイ
Nuxt3 ではいくつかの レンダリングモード がサポートされており、その方法によってデプロイのアプローチも変わります。最もシンプルなのは、Full Static Generation を使った Client-side only rendering で、この場合はビルド時に生成された静的ファイルをホスティングサービスにデプロイ（ほぼファイルのアップロード）するだけです。ただし、Nuxt3 の RC 時点ではまだ Full Static Generation がサポートされていないので、現時点ではこの方法は試せません。
現在利用できるレンダリングモードは、Hybrid Rendering と呼ばれる方法で、従来の Universal Rendering をベースにルートによってクライアントサイドのみで処理することもできるような仕組みです。この方法は、クライアントサイドとサーバーサイドの両方からコンテンツが配信されるので、いわゆる SSR にも対応しています。ただし、デプロイ環境には Node.js のサーバーが必要になります。
Nuxt3 では、サーバーサイドの仕組みに新たなエンジンである Nitro が採用されました。したがって、サーバーが必要になる Hybrid Rendering のデプロイではこの Nitro の仕組みを使うことになります。ちなみに Nitro は Nuxt3 とセットで使われていますが、Nitro 単独でも利用することができ、OSS リポジトリも unjs という別 Org で開発されています。
Azure では 2 つのデプロイ方法をサポート
Nuxt3 ではベータ時点から、Netlify や Vercel といったフロントエンドで人気のあるホスティングプロバイダーをサポートしており、Azure も最初からサポートされています。しかも、Azure では 2 つのデプロイ方法をサポートしており、これには結構びっくりしました（Nuxt チームがわりと Azure にも力を入れてくれているという意味で）。
まず 1 つめは、Azure におけるフロントエンドのホスティング環境である Azure Static Web Apps(以下 SWA) です。ここで Hybrid Rendering がサポートできているのは、SWA にビルトイン API 機能（実態は Azure Functions）があるからです。将来的に Nuxt3 が Static Generation をサポートしたら、その場合は SWA がベストな選択になると思います（Blob の静的ホスティングも使えますが）。
2 つめとして、Azure Functions です。これには少しびっくりしました。なぜなら、通常 Azure で UI を含む Node.js のアプリケーションをデプロイするのは App Service(Web App) だからです。しかし、Nuxt3 ではあえて Azure Functions を採用しサーバーレス環境でのホスティングをサポートしています。API 用途として使われることが多い Azure Functions のホスト URL を実行して Nuxt の UI がきちんと返ってくるのは不思議な感じがしましたが、Azure Functions の仕組み的には元々できるようになっているそうです（by shibayan）。
Zero Config Providers である Azure Static Web Apps
詳細なデプロイ手順は、Nitro の公式ドキュメントに書かれているので、ここではあえて紹介しません。公式通りにやれば問題なくデプロイできるはずです（現時点では .output/server/.gitkeep の作成が必要な点だけ注意してください）。
SWA へのデプロイは非常に簡単です。通常、Nitro ではデプロイの方法毎にプリセットを明示的に指定したり、プロバイダー毎の設定ファイルが必要になるのですが、SWA では GitHub Actions によるビルドワークフローが自動生成されることもあり、Nitro と SWA が連動した設定レス（Zero Config）を実現しています。これは、Nitro のドキュメントで Zero Config Providers と呼ばれており、SWA の他には netlify, stormkit, vercel だけが指定されています（AWS, Firebase, Cloudflare などは現時点で Zero Config 対象外）。
Azure Functions を使ったホスティングのメリット
もうひとつのデプロイ方法である Azure Functions ですが、どのような観点で SWA と使い分けをすべきでしょうか。これは、さすがに Nitro のドキュメントにも書かれていないので、一応 Azure スペシャリストのはしくれである私の解釈で説明してみます。
SWA ではビルトインの Azure Functions は Consumption Plan が使われるようになっています。そして、現時点ではビルトインの Azure Functions がデプロイできるリージョンは限られています（しかも日本リージョンは対象外）。ここまで解説すれば、Azure に詳しい方ならピンとくると思いますが、以下のような制約がある場合は、Azure Fucntions によるデプロイを選択すべきでしょう。
- API のコールドスタートを避けたい
- API を東日本などの希望リージョンにデプロイしたい
- API から仮想ネットワークのリソースにアクセスさせたい
上記はすべて SWA ビルトインの Azure Functions の Consumption Plan では実現できませんので、ユースケースに応じて Functions Premium か App Service Plan を選択するようにしましょう。
Nuxt3 はまだ RC がリリースされたばかりですが、おそらく数ヶ月以内に実現する正式リリースをはじめ Nuxt2 でサポートされていた Full Static Generation などの魅力的な機能も徐々にサポートされていくはずです。Vue3 が登場してはや 3 年くらい経過しますが、ようやく Vue 系のフルスタックフレームワークである Nuxt が次世代のフロントエンドアーキテクチャやエコシステムをサポートする時代がきそうです。とても楽しみですね！