GitHub Actionsのカスタムアクションを公開する

GitHub Actionsのカスタムアクションを公開する 2023.12.14 YORIFUJI MITSUNORI

自己紹介 • YORIFUJI MITSUNORI • @yorifuji on X / GitHub / Zenn • 金融系スタートアップのiOSエンジニア

今日の発表はこちらの記事をベースにした内容になります https://zenn.dev/yorifuji/articles/feec2c0294c7f9

• https://zenn.dev/yorifuji/articles/feec2c0294c7f9

GitHub Actions https://github.co.jp/features/actions

• https://github.co.jp/features/actions

name: check on: pull_request permissions: contents: read GitHub ActionsでFlutterの 静的解析を実行するワーク フローの例（yamlファイ ル） jobs: analysis: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: subosito/flutter-action@v2 - run: flutter pub get - run: flutter analyze

name: check on: pull_request permissions: contents: read 今回はワークフローの作り 方ではなく、ワークフロー で利用するアクションを作 成する話 jobs: analysis: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: subosito/flutter-action@v2 - run: flutter pub get - run: flutter analyze

私が作成・公開したアクションはこちら☝ fl https://github.com/marketplace/actions/ utter-analyze-commenter

• https://github.com/marketplace/actions/flutter-analyze-commenter

CI（静的解析）が失敗した時にログの内容を確認するのは面倒

Flutterのソースコードの静的解析の 結果をPull Requestにレビューコメ ントとして書き込むアクションを作 成しました

name: flutter-analyze-commenter example on: pull_request permissions: contents: read pull-requests: write 使い方はワークフローに アクションを追加するだ け jobs: analysis: runs-on: ubuntu-latest steps: ... - run: flutter analyze --write=flutter_analyze.log - uses: yorifuji/flutter-analyze-commenter@v1 if: ${{ !cancelled() }} with: analyze_log: flutter_analyze.log

元々は別のツールを利用していた • Problem MatchersとDangerを組み合わせて同様の作業を行なっていた • 以下の点が不満 • 2つツールでコメントのフォーマットの挙動に違いがある • ワークフローの他にもファイルの配置などのセットアップが必要 • Dangerは高機能で多用途である反面、Rubyの依存ライブラリのインス トールが必要、オーバースペックに感じていた

• https://github.com/actions/toolkit/blob/main/docs/problem-matchers.md

作成したアクションへの乗り換えで削除できたファイル・ワークフローの記述

アクションを作って公開する方法

GitHub Marketplace • GitHub公式・OSSのGitHub Appsやアクションが公開されている • 探せば必要なものは大体ある • レピュテーション（⭐）が少ないマイナーなActionを利用するときは セキュリティリスクなどに注意

Marketplaceにアクションを登録する手順 • これだけ • GitHubにpublic repositoryを作成 • アクションの定義を書いたaction.ymlを作成 • カスタムアクションの処理を実装 • GitHub上でReleaseを作成して公開 • 詳しい手順はこちら • https://docs.github.com/ja/actions/creating-actions/publishing-actions-in-githubmarketplace

• https://docs.github.com/ja/actions/creating-actions/publishing-actions-in-github-marketplace

action.yml の記述例（実際のアクションから抜粋）

name: "Flutter Analyze Commenter"
description: "Auto comment on PRs based on Flutter Analyze results"
inputs:
analyze_log:
description: "Path to the Flutter analyze log"
required: true
runs:
using: composite
steps:
- uses: actions/github-script@v7
env:
ANALYZE_LOG: ${{ inputs.analyze_log }}
VERBOSE: ${{ inputs.verbose }}
with:
script: |
const analyzeLog = process.env.ANALYZE_LOG;
...

カスタムアクションの実装方法 • Docker コンテナー アクション • コンテナを使って実行環境をパッケージ化する方式 • 必要なツールや依存関係をコンテナで管理できるので一貫性と信頼性を担保しやすい • 現状はLinux（ubuntu） のランナーでのみ利用できる（macOSやWindowsは利用不可） • JavaScript アクション • Node.jsを使ってJavaScriptのコードを実行するアクション • TypeScriptでの開発も可能（最終的にJavaScriptが生成できるならなんでも良い）、複雑な実装をするならおすすめ • 複合アクション（Comosite Action） • 普段使っているワークフローから処理を切り出すイメージ • シェルスクリプトでの実装が基本 • uses: が利用可能なので通常のアクションも利用できる

actions/github-script
// 例：hello world

• 複合アクションでJavaScriptを使った処
理を記述できるアクション

- uses: actions/github-script@v7
with:
script: console.log('Hello, JavaScript')

// 例：GithubのREST APIを使ってIssueを取得
- uses: actions/github-script@v7
with:
script: |
github.rest.issues.get({
issue_number: context.issue.number,
owner: context.repo.owner,
repo: context.repo.repo,
})

作成したカスタムアクションの実装詳細 • Flutterの静的解析の出力内容（テキスト）を解析してファイル名、行番号、 メッセージ（警告）などを取得する • ファイル名・行番号・メッセージをもとにGitHubのREST APIを使ってPRに 対して書き込む • PRに対して修正（追加）コミットが発生したら古くなった（Outdatedな） コメントを更新 or 削除 • PRからコメントを全件取得して最新の静的解析の結果と突合

リリース作業 • 開発が終わったらGitHub上でReleaseを 作成する • リポジトリのトップにaction.ymlが存在 するとアクション専用のRelease画面が 表示される • Marketplaceへのpublishを指定できる • yml記述内容、READMEのチェック

公開🎉

ありがとうございました