Web アプリを Azure Static Web Apps にデプロイする
この記事では、任意のフレームワークを使用して新しい Web アプリを作成し、ローカルで実行した後に、Azure Static Web Apps にデプロイします。
前提条件
このチュートリアルを完了するには、以下が必要です。
| リソース | 説明 |
|---|---|
| Azure サブスクリプション | アカウントがない場合は、無料でアカウントを作成することができます。 |
| Node.js | バージョン 20.0 以降をインストールします。 |
| Azure CLI | バージョン 2.6x 以降をインストールします。 |
テキスト エディターも必要です。 Azure を使用する場合は、Visual Studio Code をお勧めします。
この記事で作成したアプリは、Linux、macOS、Windows、または Linux 用 Windows サブシステムなど、任意のプラットフォームで実行できます。
Web アプリを作成する
- ターミナル ウィンドウを開きます。
コードに適したディレクトリを選択し、次のコマンドを実行します。
npm create vite@latest swa-vanilla-demo -- --template=vanilla cd swa-vanilla-demo npm install npm run devこれらのコマンドを実行すると、開発サーバーによって Web サイトの URL が出力されます。 リンクを選択して、既定のブラウザーで開きます。
コードに適したディレクトリを選択し、次のコマンドを実行します。
npx --package @angular/cli@latest ng new swa-angular-demo --ssr=false --defaults cd swa-angular-demo npm startこれらのコマンドを実行すると、開発サーバーによって Web サイトの URL が出力されます。 リンクを選択して、既定のブラウザーで開きます。
コードに適したディレクトリを選択し、次のコマンドを実行します。
npm create vite@latest swa-react-demo -- --template react cd swa-react-demo npm install npm run devこれらのコマンドを実行すると、開発サーバーによって Web サイトの URL が出力されます。 リンクを選択して、既定のブラウザーで開きます。
コードに適したディレクトリを選択し、次のコマンドを実行します。
npm create vite@latest swa-vue-demo -- --template vue cd swa-vue-demo npm install npm run devこれらのコマンドを実行すると、開発サーバーによって Web サイトの URL が出力されます。 リンクを選択して、既定のブラウザーで開きます。
- Cmd/Ctrl+C を選択して、開発サーバーを停止します。
Azure で静的 Web アプリを作成する
静的 Web アプリは、Azure portal、Azure CLI、Azure PowerShell、または Visual Studio Code (Azure Static Web Apps 拡張機能を使用) を使用して作成できます。 このチュートリアルでは、Azure CLI を使用します。
Azure CLI にサインインします。
az login既定では、このコマンドはブラウザーを開いてプロセスを完了します。 Azure CLI では、この方法が環境で機能しない場合、さまざまな方法のサインインをサポートします。
複数のサブスクリプションがある場合は、サブスクリプションを選択する必要があります。 次のコマンドを使用して、現在のサブスクリプションを表示できます。
az account showサブスクリプションを選択するには、
az account setコマンドを実行します。az account set --subscription "<SUBSCRIPTION_NAME_OR_ID>"リソース グループを作成する。
リソース グループは、Azure リソースをまとめてグループ化するために使用されます。
az group create -n swa-tutorial -l centralus --query "properties.provisioningState"-nパラメーターはサイト名を参照し、-lパラメーターは Azure の場所名です。 コマンドは成功またはエラー メッセージのみを返す、--query "properties.provisioningState"で終了します。新しく作成したリソース グループに静的 Web アプリを作成します。
az staticwebapp create -n swa-demo-site -g swa-tutorial --query "defaultHostname"-nパラメーターはサイト名であり、-gパラメーターは Azure リソース グループの名前です。 前の手順と同じリソース グループ名を指定してください。 静的 Web アプリはグローバルに配布されるため、アプリのデプロイ方法にとって場所は重要ではありません。このコマンドは、Web アプリの URL を返すように構成されています。 ターミナル ウィンドウからブラウザーに値をコピーして、デプロイされた Web アプリを表示できます。
デプロイ用に構成する
次の内容を含む
staticwebapp.config.jsonファイルをアプリケーション コードに追加します。{ "navigationFallback": { "rewrite": "/index.html" } }フォールバック ルートを定義すると、サイトはドメインに対して行われた要求に対して
index.htmlファイルをサービスできます。このファイルを使用している場合は、このファイルをソース コード管理システム (git など) にチェックインします。
Azure Static Web Apps (SWA) CLI をプロジェクトにインストールします。
npm install -D @azure/static-web-apps-cliSWA CLI は、サイトをクラウドにデプロイする前に、ローカルでサイトを開発およびテストするのに役立ちます。
プロジェクトの新しいファイルを作成し、
swa-cli.config.jsonという名前を付けます。swa-cli.config.jsonファイルでは、サイトをビルドして展開する方法について説明します。このファイルが作成されると、
npx swa initコマンドを使用してその内容を生成できます。npx swa init --yes配布用のアプリケーションをビルドします。
npx swa buildSWA CLI を使用して Azure にサインインします。
npx swa login --resource-group swa-tutorial --app-name swa-demo-site前のセクションで作成したものと同じリソース グループ名と静的 Web アプリ名を使用します。 ログインしようとすると、必要に応じてブラウザーが開き、プロセスが完了します。
警告
Angular v17 以降では、選択できる出力パスのサブディレクトリに再頒布可能ファイルが配置されます。 SWA CLI は、ディレクトリの特定の場所を認識しません。 次の手順では、このパスを正しく設定する方法を示します。
プロジェクトで生成された index.html ファイルを dist/swa-angular-demo/browser フォルダー内で見つけます。
SWA_CLI_OUTPUT_LOCATION環境変数を、index.html ファイルを含むディレクトリに設定します。export SWA_CLI_OUTPUT_LOCATION="dist/swa-angular-demo/browser"
サイトを Azure にデプロイする
静的 Web アプリにコードをデプロイします。
npx swa deploy --env production
アプリケーションのデプロイには数分かかる場合があります。 完了すると、サイトの URL が表示されます。
ほとんどのシステムでは、サイトの URL を選択して既定のブラウザーで開くことができます。
リソースをクリーンアップする (省略可能)
他のチュートリアルを続行しない場合は、Azure リソース グループとリソースを削除します。
az group delete -n swa-tutorial
リソース グループを削除すると、そのグループに含まれるすべてのリソースが削除されます。 この操作は元に戻せません。