このチュートリアルでは、 Nuxt 3 アプリケーションを Azure Static Web Apps にデプロイする方法について説明します。 Nuxt 3 では、サーバーと API ルートを含む ユニバーサル (クライアント側とサーバー側) のレンダリングがサポートされています。 追加の構成なしで、ユニバーサル レンダリングを使用して Nuxt 3 アプリを Azure Static Web Apps にデプロイできます。 アプリが Static Web Apps GitHub Action または 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 に移動します。
[ リソースの作成] を選択します。
静的 Web アプリを検索します。
[ 静的 Web アプリ] を選択します。
を選択してを作成します。
[基本] タブで、次の値を入力します。
プロパティ 価値 Subscription Azure サブスクリプション名。 リソース グループ my-nuxtjs-group 名前 my-nuxt3-app プランの種類 無料 Azure Functions API のリージョンとステージング環境 最も近いリージョンを選択します。 ソース GitHub [GitHub でサインイン] を選択し、GitHub で認証します。
次の GitHub 値を入力します。
プロパティ 価値 組織 ご自分の希望する GitHub 組織を選択します。 リポジトリ 以前に選択したリポジトリを選択します。 ブランチ メイン を選択します。 [Build Details]\(ビルドの詳細\) セクションで、[Build Presets]\(ビルドのプリセット\) ドロップダウンから [Custom]\(カスタム\) を選択し、既定値をそのままにします。
[ アプリの場所] ボックスに「 / 」と入力します。
API の 場所で、ボックス に「.output/server 」と入力します。
[出力の場所] ボックスに「.output/public」と入力します。
確認と作成
[確認および作成] を選択して、詳細がすべて正しいことを確認します。
[ 作成] を選択して静的 Web アプリの作成を開始し、デプロイ用に GitHub Actions をプロビジョニングします。
デプロイが完了したら、[リソースに移動] を選択します。
[ 概要 ] ウィンドウで、 URL リンクを選択して、デプロイされたアプリケーションを開きます。
Web サイトがすぐに読み込まれない場合は、バックグラウンドの GitHub Actions ワークフローがまだ実行されています。 ワークフローが完了したら、ブラウザーを更新して Web アプリを表示できます。
リポジトリのアクションに移動して、アクション ワークフローの状態を確認できます。
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 デプロイ プリセット のドキュメントを参照してください。