🐱

Flutter × GitHub Actionsを使ったCIをやった

2024/06/05に公開

Flutter

🔥 モチベ

CI/CDってよく聞くしこれまでのプロジェクトでも導入されてたけど実際自分でやったことないな。
必須スキルだしやるしか。
どうやらGitHub Actionsを使えば簡単にCI/CDできるらしい...。

🎯 対象

そもそも...CI/CDってなに？な人
GitHub Actions使ったことないぞ！な人

🤔 読んでわかること

そもそもCI/CDやると何が嬉しいのかわかる！(知ってるって方は本編へSKIP)
GitHub Actionsの導入の仕方がわかる！

※サンプルプロジェクトのため、デプロイ(CD)までは行いません🙇‍♂️

🙌 CI/CDやると何が嬉しいの？

とりあえずChatGPTに聞いてみた。（オーキド博士カスタム）

要するに...

CI(継続的インテグレーション)のメリット

GitHubでmainなど特定のブランチにマージやプルリクがあるたびに自動で以下を行うため

静的解析
自動テスト

バグの早期発見や品質の向上に繋がると言うメリットがあるみたい。

CD(継続的デリバリーまたは継続的デプロイメント)のメリット

自動的にデプロイされる

そのため、手動デプロイの手間が省ける、デプロイ時のヒューマンエラーが起こらないと言うメリットがあるみたい。

であれば、やらないわけにはいきませんね。

📚 本編

基本的なCIワークフローを記載していきます。
何を実行するかは、プロジェクトに合わせて設定してください。

実装までの3Step

先に流れだけ紹介。

GitHubリポジトリにGitHub Actionsワークフローファイルを追加
ワークフローファイルの内容を設定する
GitHub Actionsの有効化

Step by Stepで実装していく

1. GitHubリポジトリにGitHub Actionsワークフローファイルを追加

ルートディレクトリに .github/workflows/{file_name}.yml を作成します。
こんな感じ。

デプロイまでは行わないので flutter_ci.yml と言う名前にしました。

2. ワークフローファイルの内容を設定する

先ほど作成した flutter_ci.yml の中に実行したいジョブを記載します。
解説は少し長くなるので、とりあえず先に完成系をお見せします。

name: Flutter CI

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build-android:
    runs-on: ubuntu-latest // build-iosとは異なる点に注意

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Flutter
        uses: subosito/flutter-action@v2
        with:
          flutter-version: '3.22.1'

      - name: Install dependencies
        run: flutter pub get

      - name: Analyze code
        run: flutter analyze

      - name: Run tests
        run: flutter test

      - name: Build Android
        run: flutter build apk --release

  build-ios:
    runs-on: macos-latest  // build-androidとは異なる点に注意

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Flutter
        uses: subosito/flutter-action@v2
        with:
          flutter-version: '3.22.1'

      - name: Install dependencies
        run: flutter pub get

      - name: Analyze code
        run: flutter analyze

      - name: Run tests
        run: flutter test

      - name: Build iOS
        run: flutter build ios --no-codesign

今回は

androidビルド用
iOSビルド用
2つのジョブを実行するようにしています。

各項目やステップの解説

name: Flutter CI/CD

name: このワークフローの名前を指定します。GitHub ActionsのUIで識別しやすくするために使用されます。

on:
  pull_request:
    branches:
      - main
  push:
    branches:
      - main

on: このワークフローが実行されるトリガーを指定します。
- pull_request: プルリクエストが作成または更新されたときにワークフローを実行します。branchesで指定されたブランチに対するプルリクエストのみが対象となります。
- push: 指定されたブランチにコードがプッシュされたときにワークフローを実行します。この例では、mainブランチへのプッシュが対象です。

jobs:
  build:

jobs: このワークフローで実行されるジョブのリストを定義します。ここでは、build という名前のジョブが定義されています。

runs-on: ubuntu-latest

runs-on: ジョブが実行される仮想マシンの種類を指定します。この例では、最新のUbuntu環境で実行されます。androidビルドを行う場合はこれを指定します。

runs-on: macos-latest

runs-on: ジョブが実行される仮想マシンの種類を指定します。この例では、最新のMacOS環境で実行されます。iOSビルドを行う場合はこれを指定します。

steps:

steps: ジョブ内で実行される一連のステップを定義します。

    - name: Checkout repository
      uses: actions/checkout@v2

name: ステップの名前を指定します。GitHub Actionsのログに表示されます。
uses: 既存のアクションを使用します。ここでは、actions/checkout@v2を使用してリポジトリのコードをチェックアウトします。

    - name: Set up Flutter
      uses: subosito/flutter-action@v2
      with:
        flutter-version: '3.22.1'  # flutterプロジェクトで設定しているバージョンを記載

uses: Flutterのセットアップを行うアクションを使用します。subosito/flutter-action@v2 を使用しています。
with: アクションに渡すパラメータを指定します。ここでは、flutter-version に 3.22.1 を指定して、開発中のflutterバージョンに合わせています。

    - name: Install dependencies
      run: flutter pub get

run: このステップで実行されるコマンドを指定します。ここでは、flutter pub get を実行して、プロジェクトの依存関係をインストールします。

    - name: Analyze code
      run: flutter analyze

run: flutter analyze コマンドを実行して、コードの静的解析を行います。
✅ analysis_options.yaml 内で適切な静的解析を設定する必要があります。

    - name: Run tests
      run: flutter test

run: flutter test コマンドを実行して、ユニットテストを実行します。
✅ flutterProjects内のtestディレクトリ内にテストプログラムを作成必要があります。

    - name: Build APK
      run: flutter build apk --release

run: flutter build apk --release コマンドを実行して、Android用のリリースビルドを作成します。

    - name: Build iOS
      run: flutter build ios --no-codesign

run: このステップで実行されるコマンドを指定します。この例では、flutter build ios --no-codesign コマンドが実行されます。
- --no-codesign オプションを指定することで、コード署名プロセスがスキップされ、署名のための設定や証明書が不要になります。これにより、ビルドプロセスが簡略化され、ビルド時間が短縮されます。

その他の機能などについては、公式ドキュメントを確認してください！

3. GitHub Actionsの有効化

最後に作成したファイルをプッシュして完了！！
今回の設定であれば

mainブランチにプッシュされた時
mainブランチにプルリク作成された時
に、自動的にCIが実行されます。
実行結果🙆

お疲れ様でした🍻

📃 今回のコード

今回のコードはGitHubに挙げていますのでご参考までに。

😆 おまけ

オーキド博士はアプリ開発にも興味を持っているみたいwww

何歳なんか知らんけどバイタリティ高くて尊敬しますわ...。
博士の言う通りPokeAPIを使ってサンプルアプリ作成したら勉強になりそう。