Nuxt.js + Azure Web Apps でサクッと SSR 環境ができてしまった

Posted on

Nuxt.js には ユニバーサル SSR というビルド方式があり、これを選択すると自動的にサーバーサイドレンダリング（SSR）が有効になります。しかし、ユニバーサル SSR の構成は、Node.js の実行環境が必要になるため、デプロイする発行先によってはある程度複雑な設定を強いられる場合があり、これがフロントエンドエンジニアにとって少し面倒に感じられる原因になっている面がありました。

このエントリーでは、 VSCode と Azure App Service (Web App) を使って面倒な設定などから開放される Nuxt.js (SSR) のデプロイ方法を紹介します。

Nuxt.js のプロジェクトを ユニバーサル SSR で作成

Nuxt.js のプロジェクト新規作成にはいくつかの方法があると思いますが、ここでは現時点で最もポピュラーと思われる create-nuxt-app で作ることにします。デプロイ検証用なので、以下のように SSR 関係以外は最小限の設定で構築しました。

$ npx create-nuxt-app nuxt-appservice

create-nuxt-app v2.11.1
✨  Generating Nuxt.js project in nuxt-appservice
? Project name nuxt-appservice
? Project description My unreal Nuxt.js project
? Author name k-miyake
? Choose the package manager Npm
? Choose UI framework (Use arrow keys)
? Choose UI framework None
? Choose custom server framework Express
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools jsconfig.json (Recommended for VS Code)

一応、ローカルで動作確認を行っておきます。

$ npm i
$ npm run dev

http://localhost:3000 で Nuxt のアイコンが配置されたページが表示されれば成功です。

Azure App Servie (Web App) のインスタンス作成

デプロイ先となる Azure の App Service (Web App) をプロビジョニングします。
詳細な手順は Microsoft Learn に譲りますが、作成時の設定はこんな感じで良いかと。

Web App のプロビジョニング

ポイントは、オペレーティングシステムに Linux を 選択することと、 ランタイム スタックを Node にすることです（Node.js のバージョンは後でも変えられます）。

プロビジョニングが完了したら、以下のように2つの環境変数を App Settings に追加します。

App Settings

なんとクラウド側の設定はこれで終わりです。あまりにもあっさり終わるので少しびっくりしました。もしかすると現時点では、Azure App Service が最も簡単に Nuxt.js (SSR) の環境を構築できるプラットフォームのひとつかもしれません。

VSCode に Azure App Service 拡張を追加する

Nuxt.js を App Service にデプロイする方法はいくつかありますが、今回は VSCode から App Service にデプロイする方法でやってみたいと思います。もちろん、プロダクションでは GitHub Actions や Azure Pipelines などを使った CI/CD をおすすめします。

Visual Studio Code で Azure App Service for Visual Studio Code 機能拡張を追加します。

機能拡張有効後は、Azure アイコンをクリックして開くタブから Azure のアカウントに接続し、 デプロイする App Service があるサブスクリプションにチェックして VSCode で表示されるようにしておきます。

App Service 機能拡張タブ

VSCode からのデプロイ

デプロイする準備はできているので、実際に VSCode から Azure へ Nuxt.js をデプロイしていきます。

まず、Nuxt.js のプロジェクトルートのコンテキストメニュー（右クリック）から Deploy to Web App... を選択すると、ダイアログにデプロイ先の Web App 名が出てくるので選択します。

Deploy to Web App 開始

Deploy to Web App インスタンス選択

初回は、以下のようなダイアログが出てくるので、必ず Yes を選択するようにします。

Deploy to Web App 初回確認ダイアログ

もし、選択できなかった場合はデプロイに失敗するはずなので、プロジェクトルートの .vscpde/settings.json を以下のように作成してください。また、ローカル dev を実行した後にデプロイする場合は、 ".nuxt{,/**}" も追加しておきましょう。

{
  "appService.showBuildDuringDeployPrompt": true,
  "appService.zipIgnorePattern": [
    "node_modules{,/**}",
    ".vscode{,/**}",
    ".nuxt{,/**}"
  ]
}

しばらく待つと、デプロイ完了のダイアログが出るはずなので、Web App のサイトにアクセスして、ローカルと同じように Nuxt.js のアプリケーションが表示されればデプロイ成功です。

Deploy to Web App デプロイ完了ダイアログ

とても簡単な手順で Nuxt.js の SSR 環境がクラウド上にデプロイできました。以前までは、Azure App Service に Nuxt.js をデプロイするにはもう少し面倒な手順が必要でしたが、ここ数ヶ月で App Service for Linux にデプロイするための新しい仕組みとして、 github.com/Microsoft/Oryx というビルドツールが裏で動くようになった効果が大きいと思います。

Azure App Service は、こういう周辺ツールが OSS でどんどん開発されていくエコシステムが上手く機能していることもお気に入りの理由です。Let’s enjoy Nuxt & Azure App Service!