Azure Static Web Apps 上でユニバーサル レンダリングを使用した Nuxt 3 サイトをデプロイする
このチュートリアルでは、Nuxt 3 アプリケーションを Azure Static Web Apps にデプロイする方法について説明します。 Nuxt 3 では、サーバーと API ルートを含むユニバーサル (クライアント側とサーバー側) レンダリングがサポートされています。 追加構成を行うことなく、ユニバーサル レンダリングを使用した Nuxt 3 アプリを Azure Static Web Apps にデプロイできます。 アプリが Static Web Apps の GitHub アクションまたは Azure Pipelines タスクに組み込まれている場合、Nuxt 3 によってアプリは静的資産および Azure Static Web Apps と互換性のある Azure Functions アプリに自動的に変換されます。
前提条件
- アクティブなサブスクリプションが含まれる Azure アカウント。 無料でアカウントを作成できます。
- GitHub アカウント。 無料でアカウントを作成できます。
- Node.js 16 以降がインストールされている。
Nuxt 3 アプリを設定する
npx nuxi init nuxt-app を使用して、新しい Nuxt プロジェクトを設定できます。 このチュートリアルでは、新しいプロジェクトを使用する代わりに、既存のリポジトリ設定を使用して、Azure Static Web Apps 上でユニバーサル レンダリングを使用した Nuxt 3 サイトをデプロイする方法を示します。
http://github.com/staticwebdev/nuxt-3-starter/generate に移動します。
リポジトリに nuxt-3-starter という名前を付けます。
次に、新しいリポジトリをお使いのコンピューターにクローンします。 <YOUR_GITHUB_ACCOUNT_NAME> は、必ず自分のアカウント名に置き換えてください。
git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nuxt-3-starter新しくクローンされた Nuxt.js アプリに移動します。
cd nuxt-3-starter依存関係をインストールします。
npm install開発環境で Nuxt.js アプリを起動します。
npm run dev -- -o
http://localhost:3000 に移動してアプリを開きます。いつも使用しているブラウザーで、次の Web サイトが開かれます。 サーバーと API ルートを呼び出すボタンを選択します。
Nuxt 3 サイトをデプロイする
次の手順では、Azure Static Web Apps リソースを作成し、GitHub からアプリをデプロイするように構成する方法を示します。
Azure Static Web Apps リソースの作成
Azure Portal に移動します。
[リソースの作成] を選択します。
Static Web Apps を検索します。
Static Web Apps を選択します。
［作成］ を選択します
[基本] タブで、次の値を入力します。
プロパティ 値 サブスクリプション Azure サブスクリプション名。 リソース グループ my-nuxtjs-group 名前 my-nuxt3-app [プランの種類] Free Azure Functions API のリージョンとステージング環境 最も近いリージョンを選択します。 ソース GitHub [GitHub でサインイン] を選択し、GitHub で認証します。
次の GitHub 値を入力します。
プロパティ 値 組織 ご自分の希望する GitHub 組織を選択します。 リポジトリ 以前に選択したリポジトリを選択します。 ブランチ [main](メイン) を選択します。 [Build Details](ビルドの詳細) セクションで、 [Build Presets](ビルドのプリセット) ドロップダウンから [Custom](カスタム) を選択し、既定値をそのままにします。
[App location](アプリの場所) ボックスに「 / 」と入力します。
[API の場所] ボックスに「.output/server」と入力します。
[出力先] ボックスに「.output/public」と入力します。
[Review and create] (確認および作成)
[確認および作成] を選択して、詳細がすべて正しいことを確認します。
[作成] を選んで、静的 Web アプリの作成を開始し、デプロイのための GitHub Actions をプロビジョニングします。
デプロイが完了したら、[リソースに移動] を選択します。
[概要] ウィンドウで、 [URL] リンクを選択して、デプロイしたアプリケーションを開きます。
Web サイトがすぐに読み込まれない場合は、バックグラウンドで GitHub Actions ワークフローがまだ実行されています。 ワークフローが完了したら、ブラウザーを最新の情報に更新して Web アプリを表示できます。
リポジトリの Actions に移動することで、Actions ワークフローの状態を確認できます。
https://github.com/<YOUR_GITHUB_USERNAME>/nuxt-3-starter/actions
変更を同期する
アプリを作成すると、Azure Static Web Apps によってリポジトリに GitHub Actions ワークフロー ファイルが作成されます。 ターミナルに戻り、次のコマンドを実行して、新しいファイルを含むコミットをプルします。
git pull
コードを更新して GitHub にプッシュし、アプリに変更を加えます。 GitHub Actions によって、アプリが自動的にビルドおよびデプロイされます。
詳細については、Azure Static Web Apps Nuxt 3 デプロイの事前設定ドキュメントを参照してください。