Nuxt3アプリをAzure Static Web Appsにデプロイする

概要

Azure Static Web Apps では、ユニバーサルレンダリングを使用した Nuxt3 アプリケーションのデプロイをサポートしています。
本記事では、実際に Nuxt3 アプリケーションを Azure Statice Web Apps にデプロイしてみようと思います。

https://learn.microsoft.com/ja-jp/azure/static-web-apps/deploy-nuxtjs

Nuxt3 アプリを作成

まずはnpx nuxi initで Nuxt3 アプリケーションを作成します。
プロジェクト名は nuxt-azure-static-webapp-sample としています

npx nuxi init nuxt-azure-static-webapp-sample

Azure Static Web Apps でホストするためのビルド設定

Azure Static Web Apps でホストするために Nuxt3 のビルド設定を変更する必要があります。

https://nuxt.com/deploy/azure

設定を変更する前に、通常時時のビルドとビルド成果物にどんな差分があるかを確認してみましょう。

# 初期状態でのビルド
yarn build

プロジェクト作成直後にビルドすると、ビルド成果物（.outputディレクトリ配下）は以下のような構造になります。

通常時はpublicとserverディレクトリが存在し、アプリケーションのエントリーポイントは.output/server/index.mjsとなります。

次に Azure Static Web Apps でホストするためのビルド設定--preset=azureオプションを指定して実行します。

# azure static web apps 向けのビルド
yarn build --preset=azure

--preset=azureオプションを指定してビルドすると、ビルド成果物（.outputディレクトリ配下）は以下のような構造になります。

特徴としては、.output/public配下にはindex.htmlが存在し、.output/server配下にはfunctionsディレクトリが存在します。
この時点で、Azure Functions に馴染みがある方はお気づきかもしれませんが、.output/server配下にはfunctionsディレクトリは Azure Functions の HTTP トリガーのプロジェクトになっています。

つまり--preset=azureオプションを指定してビルドすると、静的なサイト部分（.output/public配下）と動的なサーバ部分（.output/server）に成果物が分かれる仕組みなっています。

この部分を確認するために、Azure Static Web Apps CLIを使って動作を見てみましょう。

# SWA CLIでのプレビュー
npx @azure/static-web-apps-cli start .output/public --api-location .output/server

起動すると、http://localhost:4280/では Web サイト側が、http://localhost:7071/では Azure Functions 側が立ち上がります。

ここまででローカル環境での動作が確認できたので、実際に Azure Static Web Apps にデプロイをする準備をしましょう。

まずpackage.jsonでbuildコマンドの引数に先ほどの--preset=azureオプションが常に渡される状態にします。
さらに Azure Static Web Apps で node v18 を利用するために engines 部分で node のバージョンを 18 以上に設定しておきます。

{
  // 抜粋
  // build設定
  "scripts": {
    "build": "nuxt build --preset=azure"
  },
  // Azure Static Web Appsでnode v18 を利用するための設定
  "engines": {
    "node": ">=18.0.0"
  }
}

ここまででプロジェクト側の準備は完了です。

GitHub リポジトリの作成と Azure Static Web Apps のリソースの作成

Azure Static Web Apps のリソースを作成する前にプロジェクトのソースコードを管理する GitHub リポジトリを作成し、ローカルのコードを上げておきます。

https://github.com/wf-yamaday/nuxt-azure-static-webapp-sample

こうすることで、Azure Static Web Apps のリソース作成時に GitHub からデプロイするプロジェクトを選択できます。

続いて Azure ポータルから Azure Static Web Apps リソースを作成します。
「デプロイの詳細」部分では先にコードを上げておいた GitHub リポジトリを選択し、「ビルドの詳細」ではビルドのプリセットで「Nuxt 3」を選択します。

Azure Static Web Apps とセットでデプロイされる Azure Functions リソースの配置リージョンは「East Asia」にしました。

構成が完了する、GitHub リポジトリ側に GitHub Actions のワークフローファイルが作成されています。
Actions が正常に実行されると Azure Static Web Apps 上の状態が「準備完了」になります。

実際にブラウザからもアクセスすると Nuxt のアプリケーションが確認できます。

これで Azure Statice Web Apps に Nuxt3 のアプリケーションをデプロイできました。

変更を反映する

デプロイが完了したので、プロジェクトに変更を加えてみます。

まずserver/api/hello.tsファイルを作成し、API の定義を行います。

export default defineEventHandler((event) => {
  return {
    hello: 'world',
  };
});

続いてapp.vueをpages/index.vueに書き換え、先に定義した API の/api/helloを呼び出すようにします。

<script setup lang="ts">
const { data } = await useFetch('/api/hello');
</script>

<template>
  <div>Nuxt3 App</div>
  <pre>{{ data }}</pre>
</template>

ここまでの変更をコミットし GitHub リポジトリにプッシュします。
GitHub Actions のワークフローが実行され、Static Web Apps 側も更新されます。

再度ページにアクセスすると以下のように更新されていることがわかります。

/api/helloに直接アクセスすると以下のように JSON 形式でレスポンスも取得でき API 側も正常に動いていることがわかります。

まとめ

本記事では、実際に Nuxt3 アプリケーションを Azure Statice Web Apps にデプロイしてみました。
--preset=azureオプションを指定してビルドすることでビルド成果物の構造が変わるのはなかなか面白いですね。
API などサーバ側での処理が必要な部分は Azure Functions が使われていることがわかりました。
s
本記事の内容が役に立てれば幸いです。