# Flutter GitHub ActionsでFirebase Hostingにデプロイする方法

## 目次

1. はじめに

2. 前提条件

3. 開発環境のセットアップ

   3.1 Flutterプロジェクトの設定

   3.2 Firebaseプロジェクトの設定

4. GitHub Actionsの設定

   4.1 ワークフローの作成

   4.2 シークレットの設定

5. Firebase Hostingへのデプロイ

   5.1 デプロイジョブの作成

   5.2 デプロイの実行

6. CI/CDパイプラインの最適化

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

8. まとめ

## 1. はじめに

モバイルアプリの開発において、FlutterとFirebaseは非常に強力な組み合わせです。本記事では、GitHub Actionsを使用して、FlutterアプリをFirebase Hostingに自動デプロイする方法を具体的に説明します。CI/CD（継続的インテグレーション／継続的デプロイメント）を導入することで、開発サイクルを高速化し、品質向上を図りましょう。

## 2. 前提条件

このガイドを進めるにあたり、以下のものを準備してください。

- 基本的なFlutterの知識

- Firebaseアカウントとプロジェクト

- GitHubアカウントおよびFlutterプロジェクトを含むリポジトリ

- GitHub Actionsの基本的な理解

## 3. 開発環境のセットアップ

### 3.1 Flutterプロジェクトの設定

まず、Flutter SDKをインストールし、Flutterプロジェクトを作成します。

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

### 3.2 Firebaseプロジェクトの設定

Firebase CLIをインストールして、Firebaseプロジェクトを設定します。

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

Firebase Hosting用に必要なファイル `firebase.json` と `.firebaserc` が生成されます。プロジェクトのディレクトリに移動して、ホスティングターゲットを設定してください。

## 4. GitHub Actionsの設定

### 4.1 ワークフローの作成

プロジェクトのルートに`.github/workflows/firebase-hosting.yml`というファイルを作成します。このファイル内で、ワークフローのステップを定義します。

**firebase-hosting.yml**:

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

### 4.2 シークレットの設定

GitHubリポジトリにて、シークレットを設定します。`FIREBASE_SERVICE_ACCOUNT`にはFirebaseプロジェクトのサービスアカウントキーJSONを設定します。

## 5. Firebase Hostingへのデプロイ

### 5.1 デプロイジョブの作成

GitHub Actionsでデプロイジョブを作成し、Firebase CLIコマンドが使用できるようにします。

### 5.2 デプロイの実行

`.github/workflows/`に配置したワークフローをGitHubにプッシュすると、自動的にワークフローがトリガーされ、Firebase Hostingへデプロイされます。

## 6. CI/CDパイプラインの最適化

ビルド時間やデプロイ時間を短縮するために、以下の最適化を考慮してみてください。

- VIPS（テストにかかる時間が長い場合、テストケースを優先順位付けする）

- キャッシュの活用（`actions/cache`を利用して`pubspec.lock`などをキャッシュ）

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

デプロイに失敗する場合は、以下のポイントを確認してください。

- Firebase CLIの設定に誤りがないか

- ワークフローで指定したシークレット情報が正確か

- ビルド対象ブランチが目的のものになっているか

## 8. まとめ

GitHub Actionsを活用することで、FlutterアプリをFirebase Hostingへ自動デプロイするCI/CDパイプラインを構築することができました。これにより、コードの変更がGitHubにプッシュされる度に、最新のアプリケーションがFirebase上で公開されます。開発を効率化し、品質を向上させるために、このパイプラインを最適化し続けることが重要です。

以上が、FlutterアプリをGitHub Actionsを使用してFirebase Hostingにデプロイする具体的な方法です。これにより、よりシームレスな開発体験を得ることができます。

# Flutter GitHub ActionsでFirebase Hostingにデプロイする方法

## 目次

1. はじめに

2. 前提条件

3. 開発環境のセットアップ

   3.1 Flutterプロジェクトの設定

   3.2 Firebaseプロジェクトの設定

4. GitHub Actionsの設定

   4.1 ワークフローの作成

   4.2 シークレットの設定

5. Firebase Hostingへのデプロイ

   5.1 デプロイジョブの作成

   5.2 デプロイの実行

6. CI/CDパイプラインの最適化

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

8. まとめ

## 1. はじめに

モバイルアプリの開発において、FlutterとFirebaseは非常に強力な組み合わせです。本記事では、GitHub Actionsを使用して、FlutterアプリをFirebase Hostingに自動デプロイする方法を具体的に説明します。CI/CD（継続的インテグレーション／継続的デプロイメント）を導入することで、開発サイクルを高速化し、品質向上を図りましょう。

## 2. 前提条件

このガイドを進めるにあたり、以下のものを準備してください。

- 基本的なFlutterの知識

- Firebaseアカウントとプロジェクト

- GitHubアカウントおよびFlutterプロジェクトを含むリポジトリ

- GitHub Actionsの基本的な理解

## 3. 開発環境のセットアップ

### 3.1 Flutterプロジェクトの設定

まず、Flutter SDKをインストールし、Flutterプロジェクトを作成します。

```bash

flutter create my_flutter_app

cd my_flutter_app

```

### 3.2 Firebaseプロジェクトの設定

Firebase CLIをインストールして、Firebaseプロジェクトを設定します。

```bash

npm install -g firebase-tools

firebase login

firebase init

```

Firebase Hosting用に必要なファイル `firebase.json` と `.firebaserc` が生成されます。プロジェクトのディレクトリに移動して、ホスティングターゲットを設定してください。

## 4. GitHub Actionsの設定

### 4.1 ワークフローの作成

プロジェクトのルートに`.github/workflows/firebase-hosting.yml`というファイルを作成します。このファイル内で、ワークフローのステップを定義します。

**firebase-hosting.yml**:

```yaml

name: Flutter Firebase Hosting

on:

  push:

    branches: 

      - main

jobs:

  build-deploy:

    runs-on: ubuntu-latest

    steps:

    - name: Checkout

      uses: actions/checkout@v2

    - name: Set up Flutter

      uses: subosito/flutter-action@v2

      with:

        flutter-version: '3.0.0' # 最新版を指定

    - name: Install dependencies

      run: flutter pub get

    - name: Build web release

      run: flutter build web --release

    - name: Deploy to Firebase Hosting

      uses: FirebaseExtended/action-hosting-deploy@v0

      with:

        repoToken: ${{ secrets.GITHUB_TOKEN }}

        firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}

        channelId: live

```

### 4.2 シークレットの設定

GitHubリポジトリにて、シークレットを設定します。`FIREBASE_SERVICE_ACCOUNT`にはFirebaseプロジェクトのサービスアカウントキーJSONを設定します。

## 5. Firebase Hostingへのデプロイ

### 5.1 デプロイジョブの作成

GitHub Actionsでデプロイジョブを作成し、Firebase CLIコマンドが使用できるようにします。

### 5.2 デプロイの実行

`.github/workflows/`に配置したワークフローをGitHubにプッシュすると、自動的にワークフローがトリガーされ、Firebase Hostingへデプロイされます。

## 6. CI/CDパイプラインの最適化

ビルド時間やデプロイ時間を短縮するために、以下の最適化を考慮してみてください。

- VIPS（テストにかかる時間が長い場合、テストケースを優先順位付けする）

- キャッシュの活用（`actions/cache`を利用して`pubspec.lock`などをキャッシュ）

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

デプロイに失敗する場合は、以下のポイントを確認してください。

- Firebase CLIの設定に誤りがないか

- ワークフローで指定したシークレット情報が正確か

- ビルド対象ブランチが目的のものになっているか

## 8. まとめ

GitHub Actionsを活用することで、FlutterアプリをFirebase Hostingへ自動デプロイするCI/CDパイプラインを構築することができました。これにより、コードの変更がGitHubにプッシュされる度に、最新のアプリケーションがFirebase上で公開されます。開発を効率化し、品質を向上させるために、このパイプラインを最適化し続けることが重要です。

以上が、FlutterアプリをGitHub Actionsを使用してFirebase Hostingにデプロイする具体的な方法です。これにより、よりシームレスな開発体験を得ることができます。

Flutter GitHub ActionsでFirebase Hostingにデプロイする方法

目次

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