Azure Static Web Apps 上でユニバーサルレンダリングを使用した Nuxt 3 サイトをデプロイする

[アーティクル]
06/28/2023

このチュートリアルでは、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.js アプリを開始する

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 デプロイの事前設定ドキュメントを参照してください。

カスタムドメインの設定

Azure Static Web Apps 上でユニバーサル レンダリングを使用した Nuxt 3 サイトをデプロイする