Nuxt3で作成したWebサイトをAzure Functionsにデプロイする方法を備忘録として残しておきます。

前提

os => windowns10
node => v16.17.0
Azure CLI => 2.35.0
Azure Functions Core Tools => 4.0.4653

Nuxt3プロジェクトの作成

公式サイトのスタートガイドをもとにNuxt3プロジェクトを作成します。

$ npx nuxi init <プロジェクト名> # プロジェクトの作成
$ code <プロジェクト名> # Visual Studio Codeで開く
$ npm install # 依存関係のインストール

ここまで実行したらローカル環境で正常に動作するか確認します。デフォルトだとhttp://localhost:3000でアクセスできます。

$ npm run dev

Azure Functionsにデプロイする

ローカルで作成したNuxt3プロジェクトをAzure Functionsにデプロイします。

Azureリソースの作成

AzurePortalでデプロイに必要なリソースグループと関数アプリを作成します。

関数アプリを作成するときは、ランタイムスタックをNode.js、バージョンを16LTSに指定します。

ビルドとデプロイ

Nuxtプロジェクトのビルドを行います。Nuxt3から環境変数NITRO_PRESETに値を設定することで各ホスティングプロバイダーに必要なファイルを生成してくれるようになりました。今回はAzure Functionsにデプロイするのでazure-functionsを設定しています。

$ SET NITRO_PRESET=azure-functions
$ npm run build

ビルドに成功したら以下のコマンドを実行してAzure Functionsにデプロイします。

$ cd .output

$ az login
$ az account set --subscription <サブスクリプションID>
$ az functionapp deployment source config-zip -g <リソースグループ名> -n <関数アプリ名> --src deploy.zip

$ func azure functionapp publish <関数アプリ名> --javascript