# 目次

1. はじめに

2. Azure Static Web Appsとは

3. GitHub Actionsとは

4. 構築・公開に必要な準備

   - 4-1. Azureのアカウント作成

   - 4-2. GitHubリポジトリの作成

   - 4-3. 必要なツールのインストール

5. Azure Static Web Appsの構築手順

   - 5-1. プロジェクトの初期設定

   - 5-2. GitHub Actionsの設定

   - 5-3. デプロイワークフローの作成

6. GitHub Actionsを使用したデプロイ手順

   - 6-1. ワークフローの起動

   - 6-2. デプロイのステータス確認

   - 6-3. ログの確認方法

7. トラブルシューティング

   - 7-1. よくあるエラーとその対処法

   - 7-2. デバッグのヒント

8. まとめ

# 1. はじめに

GitHub ActionsとAzure Static Web Appsを使用することで、静的ウェブアプリケーションを簡単に構築・公開できます。このガイドでは、Azure Static Web Appsの基本的な知識から、実際の構築・公開手順までを詳しく説明します。実施にあたってはAzureおよびGitHubのアカウントが必要となりますので、あらかじめご準備ください。

# 2. Azure Static Web Appsとは

Azure Static Web Appsは、Azureが提供するフルマネージドの静的ウェブアプリホスティングサービスです。Jamstackアーキテクチャを採用し、特にフロントエンドとバックエンドが分離された構成に最適化されています。GitHubまたはAzure DevOpsリポジトリへのコードのプッシュをトリガとして、Azureによるビルドおよびデプロイが自動的に行われ、簡単にウェブアプリを公開できます。

# 3. GitHub Actionsとは

GitHub Actionsは、GitHubが提供する継続的インテグレーション/デリバリー (CI/CD) サービスです。リポジトリのイベント（例えばプッシュ、プルリクエストなど）に応じて自動的にスクリプトを実行できるため、ビルドやテスト、デプロイの自動化が可能です。

# 4. 構築・公開に必要な準備

### 4-1. Azureのアカウント作成

Azure Static Web Appsを利用するにはAzureのアカウントが必要です。以下のURLから新規にアカウントを作成します。

1. [Azure公式サイト](https://portal.azure.com/)にアクセス

2. 新規登録メニューから必要な情報を記入してアカウントを作成

3. 無料試用を有効化（必要に応じて）

### 4-2. GitHubリポジトリの作成

GitHub Actionsを使うために、プロジェクト用のGitHubリポジトリを作成します。

1. [GitHub公式サイト](https://github.com/)にアクセス

2. 自身のアカウントでサインイン

3. 新規リポジトリを作成（public/privateの選択は任意）

### 4-3. 必要なツールのインストール

ローカル環境で必要なツールをインストールします。

- [Node.js](https://nodejs.org/)とnpm（JAMstackを構成する場合に推奨）

- Azure CLI（以下の手順でインストールします）

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

# 5. Azure Static Web Appsの構築手順

### 5-1. プロジェクトの初期設定

GitHubリポジトリに基本のプロジェクトファイルやディレクトリを作成します。

- `index.html`、`style.css`、`script.js`などを用意

- プロジェクトルートに`package.json`を作成

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

### 5-2. GitHub Actionsの設定

リポジトリの`.github/workflows`ディレクトリにワークフローファイルを配置します。

1. `.github/workflows/azure-static-web-apps.yml`を作成

2. 以下のようにワークフロー内容を記述

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

### 5-3. デプロイワークフローの作成

GitHubのSecretsにAzure Static Web Apps APIトークンを設定します。

1. AzureポータルでStatic Web Appリソースを作成

2. GitHubリポジトリのSettingsからSecretsを開く

3. `AZURE_STATIC_WEB_APPS_API_TOKEN`というキー名でAPIトークンを登録

# 6. GitHub Actionsを使用したデプロイ手順

### 6-1. ワークフローの起動

`git push`コマンドでソースコードをプッシュすることで、自動的にワークフローがトリガされます。

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

### 6-2. デプロイのステータス確認

GitHubのリポジトリページにアクセスし、Actionsタブでワークフローの実行状況を確認します。

### 6-3. ログの確認方法

成功または失敗の詳細を確認したい場合、GitHub Actionsのワークフロー詳細ページでログを確認します。具体的なエラーや警告が記録されています。

# 7. トラブルシューティング

### 7-1. よくあるエラーとその対処法

- **APIトークンの不一致**: AzureポータルでAPIトークンを再生成し、GitHub Secretsを更新

- **ビルドエラー**: `package.json`の依存関係やビルドスクリプトを確認し、不備がないかチェック

### 7-2. デバッグのヒント

- ローカルで`npm start`を試すことでビルドエラーの原因を特定

- ログに`DEBUG`モードを有効にする(`DEBUG=swa*`)ことで詳細出力を得る

# 8. まとめ

GitHub ActionsとAzure Static Web Appsを使用することで、CI/CDパイプラインを活用した効率的な静的ウェブアプリのデプロイが可能となります。シンプルなセットアップから始められ、スケーラビリティや保守性の高い構成を実現することができます。問題が発生した場合は、GitHub ActionsやAzureの公式ドキュメンテーションも併せて活用し、より深く理解を深めることでより効果的にプロジェクトを推進できるでしょう。

# 目次

1. はじめに

2. Azure Static Web Appsとは

3. GitHub Actionsとは

4. 構築・公開に必要な準備

   - 4-1. Azureのアカウント作成

   - 4-2. GitHubリポジトリの作成

   - 4-3. 必要なツールのインストール

5. Azure Static Web Appsの構築手順

   - 5-1. プロジェクトの初期設定

   - 5-2. GitHub Actionsの設定

   - 5-3. デプロイワークフローの作成

6. GitHub Actionsを使用したデプロイ手順

   - 6-1. ワークフローの起動

   - 6-2. デプロイのステータス確認

   - 6-3. ログの確認方法

7. トラブルシューティング

   - 7-1. よくあるエラーとその対処法

   - 7-2. デバッグのヒント

8. まとめ

# 1. はじめに

GitHub ActionsとAzure Static Web Appsを使用することで、静的ウェブアプリケーションを簡単に構築・公開できます。このガイドでは、Azure Static Web Appsの基本的な知識から、実際の構築・公開手順までを詳しく説明します。実施にあたってはAzureおよびGitHubのアカウントが必要となりますので、あらかじめご準備ください。

# 2. Azure Static Web Appsとは

Azure Static Web Appsは、Azureが提供するフルマネージドの静的ウェブアプリホスティングサービスです。Jamstackアーキテクチャを採用し、特にフロントエンドとバックエンドが分離された構成に最適化されています。GitHubまたはAzure DevOpsリポジトリへのコードのプッシュをトリガとして、Azureによるビルドおよびデプロイが自動的に行われ、簡単にウェブアプリを公開できます。

# 3. GitHub Actionsとは

GitHub Actionsは、GitHubが提供する継続的インテグレーション/デリバリー (CI/CD) サービスです。リポジトリのイベント（例えばプッシュ、プルリクエストなど）に応じて自動的にスクリプトを実行できるため、ビルドやテスト、デプロイの自動化が可能です。

# 4. 構築・公開に必要な準備

### 4-1. Azureのアカウント作成

Azure Static Web Appsを利用するにはAzureのアカウントが必要です。以下のURLから新規にアカウントを作成します。

1. [Azure公式サイト](https://portal.azure.com/)にアクセス

2. 新規登録メニューから必要な情報を記入してアカウントを作成

3. 無料試用を有効化（必要に応じて）

### 4-2. GitHubリポジトリの作成

GitHub Actionsを使うために、プロジェクト用のGitHubリポジトリを作成します。

1. [GitHub公式サイト](https://github.com/)にアクセス

2. 自身のアカウントでサインイン

3. 新規リポジトリを作成（public/privateの選択は任意）

### 4-3. 必要なツールのインストール

ローカル環境で必要なツールをインストールします。

- [Node.js](https://nodejs.org/)とnpm（JAMstackを構成する場合に推奨）

- Azure CLI（以下の手順でインストールします）

```bash

# Azure CLIのインストール（MacOSの場合）

brew install azure-cli

# Azure CLIのインストール（Windowsの場合）

Invoke-WebRequest -Uri https://aka.ms/installazurecliwindows -OutFile .\AzureCLI.msi; Start-Process msiexec.exe -Wait -ArgumentList '/I AzureCLI.msi /quiet /norestart'; rm .\AzureCLI.msi

```

# 5. Azure Static Web Appsの構築手順

### 5-1. プロジェクトの初期設定

GitHubリポジトリに基本のプロジェクトファイルやディレクトリを作成します。

- `index.html`、`style.css`、`script.js`などを用意

- プロジェクトルートに`package.json`を作成

```json

{

  "name": "my-static-web-app",

  "version": "1.0.0",

  "scripts": {

    "start": "serve"

  },

  "dependencies": {

    "serve": "^14.0.0"

  }

}

```

### 5-2. GitHub Actionsの設定

リポジトリの`.github/workflows`ディレクトリにワークフローファイルを配置します。

1. `.github/workflows/azure-static-web-apps.yml`を作成

2. 以下のようにワークフロー内容を記述

```yaml

name: Azure Static Web Apps CI/CD

on:

  push:

    branches:

      - main

jobs:

  build_and_deploy_job:

    runs-on: ubuntu-latest

    steps:

    - uses: actions/checkout@v2

    - name: Build And Deploy

      uses: Azure/static-web-apps-deploy@v1

      with:

        azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}

```

### 5-3. デプロイワークフローの作成

GitHubのSecretsにAzure Static Web Apps APIトークンを設定します。

1. AzureポータルでStatic Web Appリソースを作成

2. GitHubリポジトリのSettingsからSecretsを開く

3. `AZURE_STATIC_WEB_APPS_API_TOKEN`というキー名でAPIトークンを登録

# 6. GitHub Actionsを使用したデプロイ手順

### 6-1. ワークフローの起動

`git push`コマンドでソースコードをプッシュすることで、自動的にワークフローがトリガされます。

```bash

git add .

git commit -m "Initial commit for Static Web App"

git push origin main

```

### 6-2. デプロイのステータス確認

GitHubのリポジトリページにアクセスし、Actionsタブでワークフローの実行状況を確認します。

### 6-3. ログの確認方法

成功または失敗の詳細を確認したい場合、GitHub Actionsのワークフロー詳細ページでログを確認します。具体的なエラーや警告が記録されています。

# 7. トラブルシューティング

### 7-1. よくあるエラーとその対処法

- **APIトークンの不一致**: AzureポータルでAPIトークンを再生成し、GitHub Secretsを更新

- **ビルドエラー**: `package.json`の依存関係やビルドスクリプトを確認し、不備がないかチェック

### 7-2. デバッグのヒント

- ローカルで`npm start`を試すことでビルドエラーの原因を特定

- ログに`DEBUG`モードを有効にする(`DEBUG=swa*`)ことで詳細出力を得る

# 8. まとめ

GitHub ActionsとAzure Static Web Appsを使用することで、CI/CDパイプラインを活用した効率的な静的ウェブアプリのデプロイが可能となります。シンプルなセットアップから始められ、スケーラビリティや保守性の高い構成を実現することができます。問題が発生した場合は、GitHub ActionsやAzureの公式ドキュメンテーションも併せて活用し、より深く理解を深めることでより効果的にプロジェクトを推進できるでしょう。

目次

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