# GitHub ActionsでAzure上にReactアプリを自動デプロイする方法

## 目次

1. はじめに

2. GitHub Actionsとは？

3. Azureとは？

4. Reactアプリケーションの準備

   1. Reactプロジェクトの初期化

   2. ビルドの設定

5. Azureアカウントの準備

   1. Azureアカウントの作成

   2. Azure App Serviceの作成

6. GitHubリポジトリのセットアップ

   1. リポジトリの作成

   2. ソースコードのプッシュ

7. GitHub Actionsのワークフロー設定

   1. ワークフローファイルの作成

   2. ビルドとテストの設定

   3. Azureへのデプロイの設定

8. セキュリティと認証情報の管理

   1. Azureサービスプリンシパルの生成

   2. GitHub Secretsに認証情報を設定

9. ワークフローの実行と自動デプロイの確認

   1. ワークフローのトリガー

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

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

11. まとめ

## 1. はじめに

GitHub Actionsは、自動化されたワークフローを簡単に作成できる強力な機能を提供します。このガイドでは、GitHub Actionsを使用してAzure上にReactアプリケーションを自動的にデプロイする方法を詳しく説明します。これにより、コードの更新をプッシュするたびに新しい変更がAzureに反映されるようになります。

## 2. GitHub Actionsとは？

GitHub ActionsはGitHubが提供するCI/CDツールで、リポジトリ内のコードの変更を自動化し、テストやデプロイなどのパイプラインを簡単に構築できるようにしています。また、イベントドリブンであり、特定の条件や時間に応じてワークフローを実行することができます。

## 3. Azureとは？

Azureは、Microsoftが提供するクラウドコンピューティングサービスです。多数のクラウドサービスを提供しており、中でもAzure App Serviceはウェブアプリケーションのホスティングとデプロイに最適です。

## 4. Reactアプリケーションの準備

### 4-1. Reactプロジェクトの初期化

まずは、新しいReactプロジェクトを作成します。以下のコマンドを実行し、作成します。

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

### 4-2. ビルドの設定

プロジェクトが作成されたら、プロダクションビルドを生成する設定も必要です。このビルドは、最終的なデプロイメントに使用されます。

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

## 5. Azureアカウントの準備

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

Azureのサービスを利用するには、アカウントを作成する必要があります。

Azureの公式サイトでサインアップし、無料のAzureアカウントを取得できます。

### 5-2. Azure App Serviceの作成

Azureポータルで新しいApp Serviceを作成します。App ServiceはReactアプリケーションがホストされる場所となります。

## 6. GitHubリポジトリのセットアップ

### 6-1. リポジトリの作成

GitHubで新しいリポジトリを作成し、ローカルのReactプロジェクトをこのリポジトリに関連付けます。

### 6-2. ソースコードのプッシュ

以下のコマンドでプロジェクトをリポジトリにプッシュします。

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

## 7. GitHub Actionsのワークフロー設定

### 7-1. ワークフローファイルの作成

プロジェクトリポジトリの`.github/workflows`ディレクトリに新しい`azure-deploy.yml`ファイルを作成します。

### 7-2. ビルドとテストの設定

ワークフローファイルにビルドとテストのステップを定義します。

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

### 7-3. Azureへのデプロイの設定

Azureへのデプロイを自動化するために、Azure Web AppsのGitHub Actionsを使用します。

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

## 8. セキュリティと認証情報の管理

### 8-1. Azureサービスプリンシパルの生成

Azure上で必要な認証情報を取得するために、Azure CLIを使ってサービスプリンシパルを生成します。

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

### 8-2. GitHub Secretsに認証情報を設定

生成されたサービスプリンシパル情報をGitHubのSecrets機能に保存します。GitHubリポジトリの「Settings」>「Secrets」から追加します。

## 9. ワークフローの実行と自動デプロイの確認

### 9-1. ワークフローのトリガー

プッシュやマージ操作をすると、定義したワークフローがトリガーされ、デプロイが実行されます。

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

GitHubのActionsタブでワークフローの進捗状況を確認し、AzureポータルでWebアプリケーションが正常に動作していることを確認します。

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

デプロイメントの過程でエラーが発生した場合、GitHub Actionsのログを確認してください。ここでは、一般的なエラーとその解決策をいくつか紹介します。

- **ビルドエラー**: Node.jsバージョンの不一致や依存関係の問題がないか確認してください。

- **Azure認証エラー**: 正しい認証情報がGitHub Secretsに設定されているか確認してください。

## 11. まとめ

この記事では、GitHub Actionsを使ってReactアプリケーションをAzure上に自動デプロイする方法を説明しました。これにより、開発者はコードの変更を自動的にプロダクション環境に反映させることができ、運用の効率化が図れます。また、CI/CDパイプラインにおけるセキュリティとスケーラビリティを確保するためのベストプラクティスも学びました。問題が発生した場合は、ログを確認することを習慣付けましょう。

# GitHub ActionsでAzure上にReactアプリを自動デプロイする方法

## 目次

1. はじめに

2. GitHub Actionsとは？

3. Azureとは？

4. Reactアプリケーションの準備

   1. Reactプロジェクトの初期化

   2. ビルドの設定

5. Azureアカウントの準備

   1. Azureアカウントの作成

   2. Azure App Serviceの作成

6. GitHubリポジトリのセットアップ

   1. リポジトリの作成

   2. ソースコードのプッシュ

7. GitHub Actionsのワークフロー設定

   1. ワークフローファイルの作成

   2. ビルドとテストの設定

   3. Azureへのデプロイの設定

8. セキュリティと認証情報の管理

   1. Azureサービスプリンシパルの生成

   2. GitHub Secretsに認証情報を設定

9. ワークフローの実行と自動デプロイの確認

   1. ワークフローのトリガー

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

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

11. まとめ

## 1. はじめに

GitHub Actionsは、自動化されたワークフローを簡単に作成できる強力な機能を提供します。このガイドでは、GitHub Actionsを使用してAzure上にReactアプリケーションを自動的にデプロイする方法を詳しく説明します。これにより、コードの更新をプッシュするたびに新しい変更がAzureに反映されるようになります。

## 2. GitHub Actionsとは？

GitHub ActionsはGitHubが提供するCI/CDツールで、リポジトリ内のコードの変更を自動化し、テストやデプロイなどのパイプラインを簡単に構築できるようにしています。また、イベントドリブンであり、特定の条件や時間に応じてワークフローを実行することができます。

## 3. Azureとは？

Azureは、Microsoftが提供するクラウドコンピューティングサービスです。多数のクラウドサービスを提供しており、中でもAzure App Serviceはウェブアプリケーションのホスティングとデプロイに最適です。

## 4. Reactアプリケーションの準備

### 4-1. Reactプロジェクトの初期化

まずは、新しいReactプロジェクトを作成します。以下のコマンドを実行し、作成します。

```bash

npx create-react-app my-react-app

```

### 4-2. ビルドの設定

プロジェクトが作成されたら、プロダクションビルドを生成する設定も必要です。このビルドは、最終的なデプロイメントに使用されます。

```bash

cd my-react-app

npm run build

```

## 5. Azureアカウントの準備

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

Azureのサービスを利用するには、アカウントを作成する必要があります。

Azureの公式サイトでサインアップし、無料のAzureアカウントを取得できます。

### 5-2. Azure App Serviceの作成

Azureポータルで新しいApp Serviceを作成します。App ServiceはReactアプリケーションがホストされる場所となります。

## 6. GitHubリポジトリのセットアップ

### 6-1. リポジトリの作成

GitHubで新しいリポジトリを作成し、ローカルのReactプロジェクトをこのリポジトリに関連付けます。

### 6-2. ソースコードのプッシュ

以下のコマンドでプロジェクトをリポジトリにプッシュします。

```bash

git init

git add .

git commit -m "Initial commit"

git branch -M main

git remote add origin <your-repository-url>

git push -u origin main

```

## 7. GitHub Actionsのワークフロー設定

### 7-1. ワークフローファイルの作成

プロジェクトリポジトリの`.github/workflows`ディレクトリに新しい`azure-deploy.yml`ファイルを作成します。

### 7-2. ビルドとテストの設定

ワークフローファイルにビルドとテストのステップを定義します。

```yaml

name: Deploy React App to Azure

on:

  push:

    branches:

      - main

jobs:

  build:

    runs-on: ubuntu-latest

    steps:

    - uses: actions/checkout@v2

    - name: Set up Node.js

      uses: actions/setup-node@v2

      with:

        node-version: '14'

    - name: Install dependencies

      run: npm install

    - name: Build

      run: npm run build

    - name: Run tests

      run: npm test

```

### 7-3. Azureへのデプロイの設定

Azureへのデプロイを自動化するために、Azure Web AppsのGitHub Actionsを使用します。

```yaml

  deploy:

    runs-on: ubuntu-latest

    needs: build

    steps:

    - uses: actions/checkout@v2

    - name: Azure WebApp Deploy

      uses: azure/webapps-deploy@v2

      with:

        app-name: 'your-app-name'

        slot-name: 'production'

        publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}

```

## 8. セキュリティと認証情報の管理

### 8-1. Azureサービスプリンシパルの生成

Azure上で必要な認証情報を取得するために、Azure CLIを使ってサービスプリンシパルを生成します。

```bash

az ad sp create-for-rbac --name "myApp" --role contributor \

    --scopes /subscriptions/{subscription-id}/resourceGroups/{resource-group} \

    --sdk-auth

```

### 8-2. GitHub Secretsに認証情報を設定

生成されたサービスプリンシパル情報をGitHubのSecrets機能に保存します。GitHubリポジトリの「Settings」>「Secrets」から追加します。

## 9. ワークフローの実行と自動デプロイの確認

### 9-1. ワークフローのトリガー

プッシュやマージ操作をすると、定義したワークフローがトリガーされ、デプロイが実行されます。

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

GitHubのActionsタブでワークフローの進捗状況を確認し、AzureポータルでWebアプリケーションが正常に動作していることを確認します。

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

デプロイメントの過程でエラーが発生した場合、GitHub Actionsのログを確認してください。ここでは、一般的なエラーとその解決策をいくつか紹介します。

- **ビルドエラー**: Node.jsバージョンの不一致や依存関係の問題がないか確認してください。

- **Azure認証エラー**: 正しい認証情報がGitHub Secretsに設定されているか確認してください。

## 11. まとめ

この記事では、GitHub Actionsを使ってReactアプリケーションをAzure上に自動デプロイする方法を説明しました。これにより、開発者はコードの変更を自動的にプロダクション環境に反映させることができ、運用の効率化が図れます。また、CI/CDパイプラインにおけるセキュリティとスケーラビリティを確保するためのベストプラクティスも学びました。問題が発生した場合は、ログを確認することを習慣付けましょう。

GitHub ActionsでAzure上にReactアプリを自動デプロイする方法

目次

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