Nuxt3 サイトを Azure Static Web Apps にデプロイする（VSCode 拡張機能で）
Nuxt 3 では、様々なホスティングサービスへのデプロイを最小限の設定で行えるよう、あらかじめいくつかの選択肢が用意されています。
今回は、その中でも Azure Static Web Apps を使ってサイトを公開する方法と、その利点をまとめてみました。
Azure Static Web Apps とは
Microsoft Azure は Microsoft が提供するクラウドサービスの総称で、AmazonのAWS、GoogleのGCPと並ぶ3大クラウドサービスの一角となっています。
その中で Azure Static Web Apps は、名前の通り静的ウェブサイトをホスティングするためのサービスです。類似するGCPのFirebase Hostingと同様、Azure Functions でサーバーレスアプリケーションをデプロイして連携させることもできます。
ちなみにAzureはAWSに次いで2位のシェアを持っているはずなのですが、エンジニア界隈でAzureを使っている人の話をあまり聞いたことがありません。私自身も大昔に勉強会でアカウントを作っただけでほとんど初めて触れるので、Azure自体を初めて使う方に向けて丁寧に進めていきます。
Azure を選ぶ理由は？
上述の Deployment Presets に入っているサービスリストの中でも、Nuxt 3 のサーバーエンジン Nitro のページで Zero-Config Provider として指定されているものがあり、現在は azure、cloudflare_pages、 netlify、stormkit、vercel がリストされています。
Nuxt 3のデフォルト動作であるSSRモードは、サーバーサイドでの処理を必要とするため、本来であれば環境構築のための設定や準備が必要なのですが、Preset に入っているサービスであればドキュメントが用意されているので、比較的簡単に環境構築を進められます。
中でも Zero-Config のサービスはプリセットの自動検知などもサポートされているため、圧倒的に設定が楽です。
Azure へのデプロイの流れ
Nuxt 3 リポジトリの作成
Nuxt 3のサイト構築そのものについてはこの記事では取り扱わないので、初期化のみ行います。
npx nuxi init nuxt-app
code nuxt-app
yarn install
Azure にデプロイする方法の選択肢について
Azure Static Web Apps のデプロイ設定については、Azure CLI、Azure Portal、Visual Studio Code 拡張機能 という3通りの方法が提供されています。
この記事ではその中でも、Visual Studio Code 拡張機能を使用してデプロイするという方法を試してみます。
Azure CLIを使う場合は下記のページに沿って進めていくだけで行えます。
また、AzurePortal（ダッシュボード）を使う方法についても、他の方が書かれた下記の記事が参考になると思いますので、ぜひそちらをご確認ください。
※2023年2月には公式にチュートリアルが公開されたので、以前よりさらに簡単になっています。
Azure拡張機能・アカウントの事前準備
拡張機能を使う場合の手順については上記のページに沿って進めていきます。
前提条件
まず、事前にこれらのアカウントが必要です。といってもAzureアカウントと拡張機能以外は大体の方が持っていることでしょう。
Azure拡張機能をインストールしたら、サイドバーにAzureアイコンが追加されるのでそれを開き、トップから「Sign in to Azure」をクリックします。（ここでアカウント作成もできるようです。）
ブラウザが自動で開くのでサインインしたら事前準備は完了です。
VSCode上でウェブアプリの作成
F1 キーでコマンドパレットを開き、Create Static Web App... を選択します。
この時、git init を行っていない場合は自動的に初期化が行われます。GitHubリポジトリと連携させていない場合は以下のようなウィンドウが出るので、Create を選択します。
また、Azure 拡張機能に GitHub のアカウントの利用権限を渡す必要があります。これも Allow を押して自動でブラウザが開くので許可するだけです。
設定が終わると以下のようなウィンドウが出るので、指示に従ってサイト名を入力します。
GitHub リポジトリがない場合はGitHubリポジトリ名を決めるステップが1つ増えます。
リージョンは東京……と言いたいところですが、Azure Static Web Apps に東京リージョンはなく、East Asia は香港リージョンです。お好きな場所を選択してください。
ビルドの事前設定では Custom を選び、アプリケーションの場所は / 、アウトプットの場所は .output/public と入力します。
2023年2月現在は Nuxt 3 プリセットがリストに追加されているので、これを選べば良いです。
ステップが全て完了すると、処理が開始し、少し待つと以下のような通知が出て、サイトが公開されます。
たったこれだけで、VSCodeのAzureのリソースグループ、GitHubのプライベートリポジトリ、GitHub Actionsの CI 設定ファイル が自動で作られ、GitHub の main ブランチへのマージをトリガーにしてGitHub Actionsが走り、自動でデプロイされます。これが全てMicrosoft製品で完結しているというのが驚きです。
GitHub Actions のページを開くと以下のようにデプロイの手順が完了していることがわかります。
「Build And Deploy」ステップを開くと以下のようにデプロイが完了し、URLが確認できます。
Api ディレクトリを変更
これでサイトの公開が完了していたら非常に楽だったのですが、残念ながらサイトを開いても404になってしまいました。
これは、Create Static Web Appの標準設定には API の URL を定義するステップがなく、デフォルトの /api/ が使われてしまうためです。
自動で作られているGitHub Actionsの設定ファイル .github/workflows/azure-static-web-apps-****.yml を開き、api_location を .output/server に変更してプッシュします。
（おそらくコマンドパレットで Create Static Web App... (Advanced) を選べばこの設定もできたと思うのですが、ステップが倍以上になるので後から直した方が楽だと思いました）
ちなみにこのGitHub Actions の進行状況もAzure 拡張機能上で確認できます。
デプロイが完了すると以下のようにサイトが表示されました！🎉
Azure を選ぶメリット
VSCode上で全ての作業が完結する
Azure × VSCode × GitHub Actions の組み合わせが全てMicrosoft傘下にあることから生まれる一貫したデプロイ体験は、他のホスティングサービスとは一線を画す部分です。
ブラウザもCLIも一切使わずにVSCode上でデプロイまで進めて、しかもCI/CD設定がGitHubで完結している（Cloud Build や Codebuild を介する必要がない）というのは、初めてこのようなサービスにデプロイする際のハードルを非常に下げてくれると思います。
その反面、ダッシュボードである Azure Portal の設定は使いやすいとは言いにくく、AWSやGCPに慣れている人にとっては戸惑う部分かもしれません。
拡張性の高い Zero-Config Provider
冒頭で Azure は Zero-Config Provider のリストに指定されていると書きました。実際に、今回の手順を見て頂けると、NITRO_PRESET に azure を指定しなくても勝手に Azure 向けにビルドされていることがわかると思います。
同じゼロコンフィグである Vercel や Netlify のデプロイ・ホスティングの手軽さは素晴らしいですが、良くも悪くもサーバーレスホスティングに特化しているため拡張性に乏しい部分があります。
（Nuxt3の事例ではありませんが、Zenn が 脱Vercelした際の記事を読むとこのあたりのジレンマをイメージしやすいかもしれません。）
その点で Azure は、Vercel並みの設定しやすさでありながら、AWSやGCPと同じ段階的な課金設定やデータベース追加といった柔軟な運用を行いたい場合にプラットフォームを引っ越さなくて良いという、まさに良いとこどりのようなサービスになり得るかもしれません。
料金体系はやや複雑
懸念点としては、まず料金体系やサービス間の関係性がわかりにくいこと。
例えば、Azure Static Web Appsの料金 のページを見ると、無料プランの他には ￥1,230/月の標準プランしか記載がありません。、「一定の枠まで無料の従量課金プラン」がないため、個人開発で有料プランに上げるのはかなり抵抗があります。
では東京リージョンにデプロイするためには月1200円の有料プランが必須なのか？ というと、Azure Functionsには従量課金プランが提供されているので、こちらを使えるのではないかと思うのですが……。
Static Web Apps を使わずに Azure Functions 単体で静的サイトを作成する方法がよくわからず、拡張機能から関数を作成しようとすると別のエラーが出て……というところで挫折してしまいました。
（azure-functions もプリセットに指定されているので、機会があればこちらも試してみたいところです。）
このあたり、Firebase の Spark → Blaze プランのようにスムーズに従量課金に切り替えられないのは、せっかく Hosting と Functions の両方がプリセットに指定されているだけに勿体ない部分だと感じました。
日本語資料の不足
この問題に関連して、公式ドキュメント以外の情報、特に国内での利用例が非常に少ないというところもネックです。シェア1位のAWS、Firebaseを擁するGCPに比べて、特にフロントエンド開発でAzureやAzure Static Web Appsを使っている例があまりにも少なく、上記のような情報を調べるのも一苦労です。公式ドキュメントは比較的充実してはいるのですが……。
例えば Azure Static Web Appsは stale-while-revalidate に対応しているのか、無料で利用できるのか？ みたいなところも、調べても確証を得ることはできませんでした。
こういった Azure 特有の癖を理解しなければならないという部分はあり、Zero Config のみを理由にAWSやGCPから乗り換えても良い、とまでは言えないかなと思いました。
とはいえ、上手く使いこなせれば非常に高機能なサービスであるのは間違いありませんし、特に、拡張機能やGitHub Actionsとの高度な統合はかなり革新的な体験なので、興味があれば一度体験してみて損はなさそうです。
特に、Vercel や Netlify と比較して、Freeプランの範囲だけで見れば設定の手軽さも遜色ないので、とりあえず無料枠で触ってみて、気に入ったら＆不満が出てきたら Azure Functions や Azure Front Door など他のサービスも含めた運用を検討してみる、というのが良さそうです。
ひとまず、この記事が Azure Static Web Apps × Nuxt3でサイト構築・公開を行おうとしている方の参考になれば幸いです！
参考記事
Nuxt 3 にデプロイするシリーズ
これまでに書いたNuxt3関連記事
Discussion