静的にレンダリングされた Next.js の Web サイトを Azure Static Web Apps にデプロイする

  • [アーティクル]

このチュートリアルでは、Next.js で生成された静的 Web サイトを Azure Static Web Apps にデプロイする方法について説明します。 Next.js の仕様の詳細については、スターター テンプレートの readme を参照してください。

前提条件

1. Next.js アプリを設定する

Next.js CLI を使用してアプリを作成するのではなく、スターター リポジトリを使用できます。 スターター リポジトリには、動的ルートをサポートする既存の Next.js アプリが含まれています。

最初に、お使いの GitHub アカウントに、テンプレート リポジトリから新しいリポジトリを作成します。

  1. [https://resources.azure.com](https://github.com/staticwebdev/nextjs-starter/generate ) に移動します

  2. リポジトリに nextjs-starter という名前を設定します

  3. 次に、新しいリポジトリをお使いのコンピューターに複製します。 <YOUR_GITHUB_ACCOUNT_NAME> をアカウント名に置き換えます。

    git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nextjs-starter

  4. 新しく複製された Next.js アプリに移動します。

    cd nextjs-starter

  5. 依存関係をインストールします。

    npm install

  6. 開発環境で Next.js アプリを起動します。

    npm run dev

  7. http://localhost:3000 に移動してアプリを開きます。いつも使用しているブラウザーで、次の Web サイトが開かれます。

Next.js アプリを開始する

フレームワークまたはライブラリを選択すると、選択した項目に関する詳細ページが表示されます。

詳細ページ

2. 静的アプリを作成する

次の手順では、アプリを Azure Static Web Apps にリンクする方法を示します。 Azure に移動すると、アプリケーションを運用環境にデプロイできます。

  1. Azure ポータルにアクセスします。

  2. [リソースの作成] を選択します。

  3. Static Web Apps を検索します。

  4. [Static Web App](静的 Web アプリ) を選択します。

  5. ［作成］ を選択します

  6. [基本] タブで、次の値を入力します。

    プロパティ 値
    サブスクリプション Azure サブスクリプション名。
    リソース グループ my-nextjs-group
    名前 my-nextjs-app
    [プランの種類] Free
    Azure Functions API のリージョンとステージング環境 最も近いリージョンを選択します。
    ソース GitHub

  7. [GitHub でサインイン] を選択し、プロンプトが表示されたら GitHub で認証します。

  8. 次の GitHub 値を入力します。

    プロパティ 値
    組織 適切な GitHub 組織を選択します。
    リポジトリ nextjs-starter を選択します。
    ブランチ [main](メイン) を選択します。

  9. [Build Details](ビルドの詳細) セクションで、 [Build Presets](ビルドのプリセット) から [Custom](カスタム) を選択します。 ビルド構成として、次の値を追加します。

    プロパティ 値
    App location (アプリの場所) ボックスに「/」と入力します。
    Api location (API の場所) このボックスは空のままにします。
    Output location (出力場所) ボックスに「out」 と入力します。

3. 確認と作成

  1. [確認および作成] を選択して、詳細がすべて正しいことを確認します。

  2. [作成] を選択して、App Service Static Web App の作成を開始し、デプロイのための GitHub Actions をプロビジョニングします。

  3. デプロイが完了したら、 [リソースに移動] を選択します。

  4. [概要] ウィンドウで、 [URL] リンクを選択して、デプロイしたアプリケーションを開きます。

Web サイトがすぐに読み込めない場合、ビルドはまだ実行中です。 Actions ワークフローの状態を確認するには、リポジトリの Actions ダッシュボードに移動します。

https://github.com/<YOUR_GITHUB_USERNAME>/nextjs-starter/actions

ワークフローが完了したら、ブラウザーを最新の情報に更新して Web アプリを表示できます。

これで、main ブランチに加えた変更によって、Web サイトの新しいビルドとデプロイが開始されます。

4. 変更を同期する

アプリを作成したとき、Azure Static Web Apps によってリポジトリに GitHub Actions ファイルが作成されました。 最新のものをローカル リポジトリにプルして、サーバーと同期します。

ターミナルに戻り、git pull origin main コマンドを実行します。

静的レンダリングの構成

既定では、アプリケーションはハイブリッド レンダリング Next.js アプリケーションとして扱われますが、静的サイト ジェネレーターとして継続的に使うには、デプロイ タスクを更新する必要があります。

  1. Visual Studio Code でリポジトリを開きます。

  2. Azure Static Web Apps によって .github/workflows/azure-static-web-apps-<your site ID>.yml のリポジトリに追加された GitHub Actions ファイルに移動します

  3. ビルド & デプロイ ジョブを更新して、IS_STATIC_EXPORT の環境変数を true に設定します。

        - name: Build And Deploy
        id: swa
        uses: azure/static-web-apps-deploy@latest
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: "upload"
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "" # Built app content directory - optional
        env: # Add environment variables here
          IS_STATIC_EXPORT: true

  4. 変更を git にコミットし、GitHub にプッシュします。

    git commit -am "Configuring static site generation" && git push

ビルドが完了すると、サイトは静的にレンダリングされます。

リソースをクリーンアップする

このアプリを引き続き使用しない場合は、次の手順を使用して Azure Static Web Apps インスタンスを削除することができます。

  1. Azure portal を開きます。
  2. 上部の検索バーから「my-nextjs-group」を検索します。
  3. グループ名を選択します。
  4. [削除] を選択します。
  5. [はい] を選択して、削除操作を確定します。

次のステップ

カスタム ドメインの設定