🚀

【開発効率化】VS CodeからNext.jsアプリをAzure App Serviceに直接デプロイする方法

に公開
Azure
Next.js
VS Code
App Service
tech

はじめに

こんにちは或いはこんばんは。Ryuzakiです。

仕事の関係でAzure App Serviceへアプリをデプロイすることがよくあります。VS Codeから直接デプロイできるのは知っていたのですが、いざ試してみると体験が良かったため、今更ながらやり方を共有したいと思います。

Next.jsプロジェクトを題材とした記事はそれほどないため、それなりに有益なはずです。
（まぁ正直言語やフレームワークによる手順の差異はそれほどないのですが…）

デプロイ手順

それでは早速、VS CodeからAzure App Serviceへのデプロイ手順を紹介していきます。

1. デプロイするNext.jsプロジェクトを準備

今回は、Vercelが提供している学習教材（next-learn）のリポジトリを題材として使用します。具体的には次のリポジトリを利用します。

https://github.com/vercel/next-learn/tree/main/dashboard/final-example

VS CodeからAzure App Serviceへの直接デプロイを試してみたいけど適当なNext.jsプロジェクトが手元にないという場合は、以下のコマンドを用いて上記のリポジトリをセットアップすることが可能です。

npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/final-example"

2. 必要な拡張機能をVS Codeへインストール

VS CodeでAzure App Serviceにデプロイするには、専用の拡張機能が必要です。
以下の手順でインストールします。

  1. VS Codeの拡張機能タブを開く（左側のアクティビティバーで四角が4つ重なったアイコン）
  2. 検索欄に「Azure App Service」と入力
  3. Azure App Service for Visual Studio Code (Preview)をインストール

https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azureappservice

3. デプロイしないファイルを.vscode/settings.jsonに明記

デプロイ時には、ローカル開発環境に関連するファイルやディレクトリを除外する必要があります。.vscode/settings.jsonに以下の設定を追記しましょう。

.vscode/settings.json
{
    "appService.zipIgnorePattern": [
        "node_modules{,/**}",
        ".vscode{,/**}",
        ".env{,/**}"
    ]
}

この設定により、node_modulesディレクトリ、.vscodeディレクトリ、.envファイルがデプロイから除外されます。

4. Azureへのサインインを実施

VS CodeからAzureリソースを操作するために、Azureアカウントへのサインインが必要です。

  1. VS Codeのアクティビティバーに新たに追加されたAzureのアイコンをクリック
  2. サイドバーの一番上部に表示される「Sign in to Azure…」をクリック
  3. ブラウザが自動的に開き、Microsoftアカウントでのサインイン画面が表示される
  4. 通常のAzureへのサインイン手順に従って認証を完了

すでにブラウザ側でAzureアカウントにサインイン済みであれば、特に追加認証の必要もなく、サインインが完了します。

5. Azure App Serviceで新しいWebアプリを作成

次に、実際にアプリケーションを実行するためのApp Serviceインスタンスを作成します。

  1. 「アクティビティバーのAzureアイコン」＞「Resources」＞「利用するサブスクリプション」＞「App Services」を右クリック

  2. 表示されたメニューから「Create New Web App…」を選択

  3. ダイアログに従って以下の情報を設定します：

    • リージョン：Webアプリをデプロイするリージョンを選択（例：Japan East）
    • Webアプリの名称を入力（例：app-nextjs-dashboard）
    • ランタイムスタック：Node.jsを選択（例：Node 22 LTS）
    • App Serviceプラン：利用する価格プランを選択（例：Free (F1)）

App Serviceの作成には数分かかることがあります。なお、進捗状況は、VS Codeの下部の出力パネル（「Output」タブ）から確認できます。

6. 各種環境変数を設定

Next.jsアプリケーションが正常に動作するために必要な環境変数を設定します。

  1. 「アクティビティバーのAzureアイコン」＞「Resources」＞「利用するサブスクリプション」＞「App Services」＞「対象Webアプリ」＞「Application Settings」を右クリック
  2. 表示されたメニューから「Add New Settings…」を選択
  3. ダイアログに従って、設定したい環境変数名と値を入力

この例では、Next.jsのダッシュボードアプリに必要な以下の環境変数を設定します。

  • POSTGRES_URL
  • POSTGRES_PRISMA_URL
  • POSTGRES_URL_NON_POOLING
  • POSTGRES_USER
  • POSTGRES_HOST
  • POSTGRES_PASSWORD
  • POSTGRES_DATABASE
  • AUTH_SECRET
  • AUTH_URL

7. Next.jsプロジェクトをデプロイ

環境設定が完了したら、いよいよNext.jsプロジェクトをデプロイします。

  1. 「アクティビティバーのAzureアイコン」＞「Resources」＞「利用するサブスクリプション」＞「App Services」＞「対象Webアプリ」を右クリック
  2. 表示されたメニューから「Deploy to Web App…」を選択
  3. デプロイ対象のプロジェクトを確認するダイアログが開くので、対象のものを選択
  4. デプロイを確認する旨のポップアップが表示されるので、「Deploy」をクリック

デプロイ処理が開始されると、VS Codeの出力パネルにログが表示されます。これにより、デプロイの進行状況やエラーを確認することができます。

デプロイは基本的には1~2分程度で完了しますが、プロジェクトのサイズや選択したApp Serviceプランによっては数十分かかることもあります。

8. デプロイしたWebアプリを確認

デプロイが完了したら、実際にWebアプリが正しく動作しているか確認します。

  1. 「アクティビティバーのAzureアイコン」＞「Resources」＞「利用するサブスクリプション」＞「App Services」＞「対象Webアプリ」を右クリック
  2. 表示されたメニューから「Browse Website」を選択

ブラウザが自動的に開き、デプロイしたWebアプリのURLが表示されます。

おわりに

今回は、VS CodeからAzure App ServiceへNext.jsアプリケーションを直接デプロイする方法を紹介しました。VS Codeの拡張機能を使うことで、コマンドラインツールの複雑な操作を覚えたり、Azure Portalを開いたりすることなく、開発環境から直接デプロイができるのは非常に便利です。

この記事がAzure App Serviceをアプリケーション基盤として用いる際の開発生産性の向上を図ろうとしている方の参考になれば幸いです。ここまでお読みいただき、ありがとうございました。

Discussion