### Azure Static Web Apps にローカルから直接デプロイする手順

# 目次
1. はじめに
2. 必要なツールのインストール
   2.1 Git
   2.2 Azure CLI
   2.3 Azure Static Web Apps CLI
3. Azure アカウントの設定
4. プロジェクトの準備
   4.1 プロジェクトの作成
   4.2 ビルド設定ファイルの用意
5. Azure Static Web Apps のセットアップ
   5.1 Azure ポータルへのアクセス
   5.2 リソースの作成
6. ローカルからのデプロイ
   6.1 デプロイコマンドの実行
   6.2 デプロイの確認
7. 環境変数の設定
8. まとめ

---

# はじめに
Azure Static Web Apps は、Azure が提供する静的な Web アプリケーションを簡単にデプロイできるホスティングサービスです。この記事では、ローカル環境から直接 Azure Static Web Apps にデプロイする手順を解説します。

# 必要なツールのインストール
Azure Static Web Apps にデプロイするには、いくつかのツールが必要です。

## 2.1 Git
Git はバージョン管理システムで、Azure Static Web Apps へのデプロイに使用されます。インストールされていない場合は、[Gitの公式サイト](https://git-scm.com/)からインストールしてください。

## 2.2 Azure CLI
Azure CLI (コマンドラインインターフェイス) は、Azure リソースを管理するためのツールです。以下のコマンドを実行してインストールできます。

![img](/mosaic-code.jpg)

## 2.3 Azure Static Web Apps CLI
Azure Static Web Apps CLI は、ローカルでの開発、デプロイをサポートするためのツールです。npm を使用してインストールできます。

![img](/mosaic-code.jpg)

# Azure アカウントの設定
Azure CLI を使用して Azure にログインします。

![img](/mosaic-code.jpg)

ブラウザが開き、Azure アカウントにサインインできます。サインインが完了すると、CLI が正常に認証されたことを示すメッセージが表示されます。

# プロジェクトの準備

## 4.1 プロジェクトの作成
デプロイしたいプロジェクトを作成します。既存のプロジェクトがある場合は、このステップをスキップできます。

![img](/mosaic-code.jpg)

## 4.2 ビルド設定ファイルの用意
プロジェクトのルートに `staticwebapp.config.json` ファイルを追加し、ビルドおよび出力ディレクトリを設定します。

![img](/mosaic-code.jpg)

# Azure Static Web Apps のセットアップ

## 5.1 Azure ポータルへのアクセス
Azure ポータルにアクセスし、新しい Static Web Apps リソースを作成します。

## 5.2 リソースの作成
運用するリージョンを選択し、新しい Static Web Apps の名前を指定してリソースを作成します。

# ローカルからのデプロイ

## 6.1 デプロイコマンドの実行
プロジェクトディレクトリで以下のコマンドを実行して、Azure Static Web Apps にデプロイします。

![img](/mosaic-code.jpg)

## 6.2 デプロイの確認
Azure ポータルでデプロイのステータスを確認し、アプリが正常に稼働しているかを確認します。

# 環境変数の設定
Azure ポータルの Static Web Apps の設定にアクセスし、必要な環境変数を設定します。

# まとめ
Azure Static Web Apps を使用すると、ローカルから直接プロジェクトを迅速にデプロイし、管理することが可能です。このプロセスは、フロントエンド開発者にとって迅速な開発サイクルを可能にします。この記事の手順を実施することで、簡単に Azure にアプリケーションをデプロイし始めることができます。

[^1]: デプロイに必要な条件や制約については、最新の Azure ドキュメンテーションを確認してください。 [cv:issue_marketplace_engineer]

### Azure Static Web Apps にローカルから直接デプロイする手順

# 目次
1. はじめに
2. 必要なツールのインストール
   2.1 Git
   2.2 Azure CLI
   2.3 Azure Static Web Apps CLI
3. Azure アカウントの設定
4. プロジェクトの準備
   4.1 プロジェクトの作成
   4.2 ビルド設定ファイルの用意
5. Azure Static Web Apps のセットアップ
   5.1 Azure ポータルへのアクセス
   5.2 リソースの作成
6. ローカルからのデプロイ
   6.1 デプロイコマンドの実行
   6.2 デプロイの確認
7. 環境変数の設定
8. まとめ

---

# はじめに
Azure Static Web Apps は、Azure が提供する静的な Web アプリケーションを簡単にデプロイできるホスティングサービスです。この記事では、ローカル環境から直接 Azure Static Web Apps にデプロイする手順を解説します。

# 必要なツールのインストール
Azure Static Web Apps にデプロイするには、いくつかのツールが必要です。

## 2.1 Git
Git はバージョン管理システムで、Azure Static Web Apps へのデプロイに使用されます。インストールされていない場合は、[Gitの公式サイト](https://git-scm.com/)からインストールしてください。

## 2.2 Azure CLI
Azure CLI (コマンドラインインターフェイス) は、Azure リソースを管理するためのツールです。以下のコマンドを実行してインストールできます。

```bash
# MacOS
brew install azure-cli

# Windows
winget install Microsoft.AzureCLI

# Linux
curl -sL https://aka.ms/InstallAzureCLIDeb | sudo bash
```

## 2.3 Azure Static Web Apps CLI
Azure Static Web Apps CLI は、ローカルでの開発、デプロイをサポートするためのツールです。npm を使用してインストールできます。

```bash
npm install -g @azure/static-web-apps-cli
```

# Azure アカウントの設定
Azure CLI を使用して Azure にログインします。

```bash
az login
```

ブラウザが開き、Azure アカウントにサインインできます。サインインが完了すると、CLI が正常に認証されたことを示すメッセージが表示されます。

# プロジェクトの準備

## 4.1 プロジェクトの作成
デプロイしたいプロジェクトを作成します。既存のプロジェクトがある場合は、このステップをスキップできます。

```bash
mkdir my-static-app
cd my-static-app
```

## 4.2 ビルド設定ファイルの用意
プロジェクトのルートに `staticwebapp.config.json` ファイルを追加し、ビルドおよび出力ディレクトリを設定します。

```json
{
  "output_location": "build"
}
```

# Azure Static Web Apps のセットアップ

## 5.1 Azure ポータルへのアクセス
Azure ポータルにアクセスし、新しい Static Web Apps リソースを作成します。

## 5.2 リソースの作成
運用するリージョンを選択し、新しい Static Web Apps の名前を指定してリソースを作成します。

# ローカルからのデプロイ

## 6.1 デプロイコマンドの実行
プロジェクトディレクトリで以下のコマンドを実行して、Azure Static Web Apps にデプロイします。

```bash
swa deploy --subscription-id [YOUR_SUBSCRIPTION_ID] --folder build
```

## 6.2 デプロイの確認
Azure ポータルでデプロイのステータスを確認し、アプリが正常に稼働しているかを確認します。

# 環境変数の設定
Azure ポータルの Static Web Apps の設定にアクセスし、必要な環境変数を設定します。

# まとめ
Azure Static Web Apps を使用すると、ローカルから直接プロジェクトを迅速にデプロイし、管理することが可能です。このプロセスは、フロントエンド開発者にとって迅速な開発サイクルを可能にします。この記事の手順を実施することで、簡単に Azure にアプリケーションをデプロイし始めることができます。

[^1]: デプロイに必要な条件や制約については、最新の Azure ドキュメンテーションを確認してください。 

Azure Static Web Apps にローカルから直接デプロイする手順

目次

続きを読むには単価診断を受けてください（30秒）