Slide 1

Slide 1 text

0 GitHub Custom Actionのレシピ 2025-04-04 第119回NearMe技術勉強会 @yujiosaka

Slide 2

Slide 2 text

1 第103回のまとめ:GitHub Custom Actionを公開した https://github.com/marketplace/actions/adr-sync

Slide 3

Slide 3 text

2 GitHub Custom Actionとは? • パッケージをインストールしなくても、GitHub Actionsのstepsに 数⾏追加するだけでどのレポジトリからでも実⾏できる • withを⽤いて設定できる こういうやつ

Slide 4

Slide 4 text

3 実態はただのGitHubレポジトリ https://github.com/actions/checkout

Slide 5

Slide 5 text

4 ADR Syncの設定 steps: - name: Run ADR Sync Action uses: yujiosaka/adr-sync@v1 with: github-token: ${{ secrets.GH_TOKEN }}

Slide 6

Slide 6 text

5 GitHub Custom Actionに必要最低限の設定 action.yml name: "ADR Sync" description: "A GitHub custom action to synchronize ADRs with GitHub Discussions" author: "Yuji Isobe" inputs: ... github-token: description: "GitHub token with necessary permissions to synchronize ADRs" required: true runs: using: "node20" main: "dist/index.js" Marketplaceのリスティングとオートコンプリートで使⽤される

Slide 7

Slide 7 text

6 GitHub Custom Actionに必要最低限の設定 action.yml name: "ADR Sync" description: "A GitHub custom action to synchronize ADRs with GitHub Discussions" author: "Yuji Isobe" inputs: ... github-token: description: "GitHub token with necessary permissions to synchronize ADRs" required: true runs: using: "node20" main: "dist/index.js" withで指定できる設定

Slide 8

Slide 8 text

7 GitHub Custom Actionに必要最低限の設定 action.yml name: "ADR Sync" description: "A GitHub custom action to synchronize ADRs with GitHub Discussions" author: "Yuji Isobe" inputs: ... github-token: description: "GitHub token with necessary permissions to synchronize ADRs" required: true runs: using: "node20" main: "dist/index.js" 今のところnode12、node16、node20、 docker、compositeしか指定できない

Slide 9

Slide 9 text

8 GitHub Custom Actionに必要最低限の設定 action.yml name: "ADR Sync" description: "A GitHub custom action to synchronize ADRs with GitHub Discussions" author: "Yuji Isobe" inputs: ... github-token: description: "GitHub token with necessary permissions to synchronize ADRs" required: true runs: using: "node20" main: "dist/index.js" 実⾏するファイル

Slide 10

Slide 10 text

9 nodeを使⽤する時に便利なパッケージ • @actions/core: withで指定した設定を受け取ったり、アウトプットを定義できる • @actions/github: コンテキスト(イベント名やコミットハッシュ等)を受け取れる import * as core from "@actions/core"; import * as github from "@actions/github"; const context = github.context; const arg1 = core.getInput("arg1"); console.log(`This event is triggered by ${context.eventName} with arg1: ${arg1}`);

Slide 11

Slide 11 text

10 dockerを使⽤する例 action.yml name: 'Hello World' description: 'Greet someone and record the time' inputs: who-to-greet: description: 'Who to greet' required: true runs: using: 'docker' image: 'yujiosaka/hello-world' args: - ${{ inputs.who-to-greet }} entrypointに渡す引数

Slide 12

Slide 12 text

11 dockerを使⽤する例 Dockerfile FROM alpine:3.10 COPY entrypoint.sh /entrypoint.sh ENTRYPOINT ["/entrypoint.sh"]

Slide 13

Slide 13 text

12 dockerを使⽤する例 entrypoint.sh #!/bin/sh -l echo "Hello $1" time=$(date) echo "time=$time" >> $GITHUB_OUTPUT action.ymlで渡された引数

Slide 14

Slide 14 text

13 name: 'Hello World' description: 'Greet someone' inputs: who-to-greet: description: 'Who to greet' required: true runs: using: "composite" steps: - name: Set Greeting run: echo "Hello $INPUT_WHO_TO_GREET." shell: bash env: INPUT_WHO_TO_GREET: ${{ inputs.who-to-greet }} compositeを使⽤する例 通常のactionsと同様に stepsを定義するだけ (shellスクリプトだけで  いい時に便利)

Slide 15

Slide 15 text

14 注意点 Linux MacOS Windows Docker ◯ × × JavaScript ◯ ◯ ◯ Composite △ △ △ Runnerの環境ごとにstepを書き分けなければいけない

Slide 16

Slide 16 text

15 JavaScriptがおすすめ 15

Slide 17

Slide 17 text

16 Marketplaceに公開する⼿順 16

Slide 18

Slide 18 text

17 (GitHub Releaseを作成するために)タグをPushする 個⼈的にはsemantic-releaseがおすすめ(余談) $ git tag v1.0.0 $ git push origin v1.0.0 https://github.com/semantic-release/semantic-release

Slide 19

Slide 19 text

18 GitHub Releaseを作成するときにチェックを⼊れるだけ

Slide 20

Slide 20 text

19 あとは恨み節 19

Slide 21

Slide 21 text

20 Bun/Deno使わせてよ‧‧‧ • Runnerの環境に依存させないために、他のパッケージやバイナリに依存させられない • npm installやビルドを⾛らせることができないので、ビルド済みのファイルをコミッ トしないといけない • せめてBun/Denoが使えたらTypeScriptを直接実⾏できるのに(Node22から型情報を 無視して実⾏できるオプションが加わるからそれ待ちか?)

Slide 22

Slide 22 text

21 actions/coreとactions/githubは使えるようにしといてよ‧‧‧ • actions/coreとactions/githubはGitHub Custom Actionを作成するのにほぼ必須だが、 初めから使えるようになっているわけではないので、npm installしないといけない • でも、GitHub Custom Action実⾏時にnpm installが⾛るわけではないので、 node_modulesごとコミットするか(やりたくない)、パッケージも含めてビルドし て、ビルド後のファイルをコミットしないといけない (当然)こっちにした

Slide 23

Slide 23 text

22 { "name": "adr-sync", "version": "1.0.0", "description": "A GitHub custom action to synchronize ADRs with GitHub Discussions.", "type": "module", "scripts": { "build": "ncc build src/index.ts --minify", "check": "biome check .", "check:write": "biome check --write .", "prepare": "husky", "test": "vitest run", "test:watch": "vitest" }, ... } package.json TypeScriptのコンパイル、 パッケージのバンドル、 圧縮して、dist/index.jsを作成 (dist/index.jsもコミット必要)

Slide 24

Slide 24 text

23 Thank you