はじめに
Azure Static Web Appsを使って、Nuxt3サイトをデプロイしてみました。Azure Static Web Appsは、静的なウェブアプリケーションのホスティングとデプロイをシンプルに行えるMicrosoft Azureのサービスです。
開発環境
- Windows 11
- Nuxt.js 3.0.0-rc.6
- npm 8.19.4
- Node.js 16.20.0
実装
Nuxt 3 アプリを設定する
-
http://github.com/staticwebdev/nuxt-3-starter/generate に移動します。
GitHubへのログインを求められた場合は、ログインしてください。 -
リポジトリ名を入力し、リポジトリの公開範囲を選択します。私はリポジトリ名を「nuxt-app-test」とし、プライベートリポジトリに設定しました。
設定が終わったら[Create repository]を選択します。
-
作成したリポジトリをお使いのコンピューターにクローンします。
git clone [作成したリポジトリのURL] -
クローンされた Nuxt.js アプリに移動します。
cd nuxt-app-test -
依存関係をインストールします。
npm install -
Nuxt.js アプリを起動します。
末尾に「-- -o」をつけてコマンドを実行すると、自動的にアプリ画面に移動します。npm run dev -- -o
アプリ画面は以下の通りです。
Nuxt 3 サイトをデプロイする
-
Azure Portal に移動します。
-
[リソースの作成] を選択します。
-
Static Web Appsもしくは静的Webアプリと検索し、[Static Web Apps]もしくは[静的Webアプリ]を選択します。
-
[作成] を選択します。
-
[基本] タブで、以下の値を入力します。
-
[GitHub でサインイン] を選択し、遷移した認証画面にある[Authorize Azure-App-Service-Static-Web-Apps]を選択します。
-
以下のように GitHub 値を入力します。
-
[確認および作成]を選択し、項目がすべて正しければ、[作成]を選択します。デプロイが開始されます。
-
デプロイが完了すると、「展開が成功しました」という通知が来ます。その通知に表示されている[リソースに移動]を選択します。
「保存されていない編集は破棄されます。」というダイアログが表示された場合は[OK]を選択します。ここでの「保存されていない変更」とは、先ほど作成した静的Webアプリのことではなく、現在表示されている画面の内容を示すため、保存は不要です。
-
アプリを作成すると、Azure Static Web Apps によって、リポジトリに GitHub Actions ワークフロー ファイルが作成されます。
ターミナルに戻り、以下のコマンドを実行して、新しいファイルを含むコミットをプルします。git pull
プルした後は、普段の開発と同じく、コードを変更してプッシュします。
GitHub Actions によって、プッシュのタイミングでアプリが自動的にビルドおよびデプロイされるため、非常に便利です。
おわりに
Azure Static Web Appsを使って、Nuxt3プロジェクトを作成してみました。
Azure Static Web Appsを使えば簡単にWebアプリをビルドすることができ、変更のリリースもGitHubで管理することができるので、非常に便利です。
ぜひ、試してみてください。
最後までお読みいただき、ありがとうございました！
記事に関する質問等ございましたら、コメントもしくは以下のDMにてよろしくお願いします。
参考文献