次の方法で共有

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

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

[前提条件]

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

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

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

  1. 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. 静的 Web アプリを検索します。

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

  5. を選択してを作成します。

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

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

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

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

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

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

    プロパティ 価値
    アプリの場所 ボックスに「 / 」と入力します。
    API の場所 このボックスは空のままにします。
    出力場所 ボックスに out と入力してください。

3. 確認と作成

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

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

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

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

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

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 Actions ファイルに移動します。 .github/workflows/azure-static-web-apps-<your site ID>.yml

  3. ビルドおよびデプロイジョブを更新して、環境変数をIS_STATIC_EXPORTtrueに設定します。

        - 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. 削除アクションを確認するには、[ はい ] を選択します。

次のステップ

カスタム ドメインを設定する

  • Last updated on