コンテンツにスキップ

AstroサイトをMicrosoft Azureにデプロイする

AzureはMicrosoftのクラウドプラットフォームです。Microsoft AzureのStatic Web Appsサービスを使用してAstroサイトをデプロイできます。

このガイドでは、Visual Studio Codeを使用してGitHubに保存されているAstroサイトをデプロイする方法を説明します。その他のセットアップについては、Azure Pipelinesタスクの使用に関するMicrosoftのガイドをご覧ください。

前提条件

このガイドを進めるためには以下が必要です。

Azureのアカウントとサブスクリプションキー。ここで無料のAzureアカウントを作成できます。
アプリのコードがGitHubにプッシュされていること。
Visual Studio CodeのSWA拡張機能。

デプロイ方法

プロジェクトをVS Codeで開きます。
Static Web Apps拡張機能を開いてAzureにサインインし、+ ボタンをクリックして新しいStatic Web Appを作成します。使用するサブスクリプションキーを指定するように求められます。
拡張機能によって起動したウィザードに従い、アプリに名前を付け、フレームワークのプリセットを選択し、アプリのルート（通常は/）とビルドされたファイルの場所/distを指定します。AstroはAzureのビルトインテンプレートにはリストされていないため、customを選択する必要があります。ウィザードが実行され、リポジトリの.githubフォルダにGitHub Actionを作成します。（このフォルダがまだ存在していない場合は自動的に作成されます。）

GitHub Actionがアプリをデプロイします（GitHub上のリポジトリのActionsタブから進行状況を確認できます）。正常に完了すれば、Browse WebsiteボタンをクリックしてSWA拡張機能の進行状況ウィンドウに表示されているアドレスからアプリを確認できます（これはGitHub Actionの実行後に表示されます）。

既知の問題

作成されるGitHub Actionのyamlはnode 14の使用を前提としています。これはAstroのビルドが失敗することを意味します。これを解決するには、プロジェクトのpackage.jsonファイルに次のスニペットを追加します。

  "engines": {
    "node": ">=18.0.0"
  },

公式リソース

Microsoft Azure Static Web Apps のドキュメント

コミュニティリソース

AstroウェブサイトをAzure Static Web Appsにデプロイする

その他のデプロイガイド

コミュニティ