Tweet
Tweet

Slide 1

Slide 1 text

AbemaTV, Inc. All Rights Reserved
 AbemaTV, Inc. All Rights Reserved
 1 JavaScript/TypeScript Action 開発・運用の知見を大公開！ 2024-05-16 株式会社 AbemaTV, Shohei Ueda GitHub Actions Meetup Tokyo #3 Shohei Ueda

Slide 2

Slide 2 text

AbemaTV, Inc. All Rights Reserved
 2 ● 自己紹介 ● ABEMA について ● JavaScript/TypeScript Action ● ディレクトリ構成 ● action.yml のテスト INDEX ● 便利ライブラリ ● リリース戦略 ● Branch で実行させない ● 依存関係の定期更新 ● まとめ

Slide 3

Slide 3 text

AbemaTV, Inc. All Rights Reserved
 本日は JavaScript/TypeScript Action を開発・運用する上での 知見を紹介します！ 3 (個人の OSS なので ABEMA の話はないです)

Slide 4

Slide 4 text

AbemaTV, Inc. All Rights Reserved
 JavaScript/TypeScript Action 4 JavaScript/TypeScript でカスタム Action を書く

Slide 5

Slide 5 text

AbemaTV, Inc. All Rights Reserved
 5 GitHub Actions は一連の処理をスクリ プトとして使い回す手段がいくつかあり ます その一つに uses: で指定して使える公開 Action があります （Custom Action） JavaScript/TypeScript Action JavaScript で書けるので JS/TS 関連の資 産を活用することが可能です （もちろん TypeScript で書ける） Docker container として実行する方法も ありますが今日は JavaScript Action の お話！

Slide 6

Slide 6 text

AbemaTV, Inc. All Rights Reserved
 ディレクトリ構成 6 いたって普通です

Slide 7

Slide 7 text

AbemaTV, Inc. All Rights Reserved
 7 $ tree -d -a -L 2 -I .git . ├── .github │ ├── ISSUE_TEMPLATE │ └── workflows ├── .husky ├── .vscode ├── __tests__ │ └── classes ├── dist ├── scripts └── src └── classes ディレクトリ構成 いたってふつうです 特に慣習もルールもないです (action.yml が必要とかはある) ./dist/ のように TypeScript からビ ルドした JavaScript を置くディレク トリがあったりするくらい

Slide 8

Slide 8 text

AbemaTV, Inc. All Rights Reserved
 action.yml のテスト 8 ソースコード同様にテストしてあげましょう

Slide 9

Slide 9 text

AbemaTV, Inc. All Rights Reserved
 9 action.yml のテスト

Slide 10

Slide 10 text

AbemaTV, Inc. All Rights Reserved
 10 action.yml のテスト with: で渡した inputs は INPUT_* の形式で環境変数として提供さ れます。 default 値などをテストしています https://github.com/peaceiris/actions-gh-pages/blob/0b7567fde6f7517edcc13d8ffa2d89cd 8734d47c/__tests__/get-inputs.test.ts#L103

Slide 11

Slide 11 text

AbemaTV, Inc. All Rights Reserved
 便利ライブラリ 11 JavaScript/TypeScript Action 開発を便利に！

Slide 12

Slide 12 text

AbemaTV, Inc. All Rights Reserved
 12 @actions (actions/toolkit) ● @actions/core ● @actions/exec ● @actions/github ● @actions/glob ● @actions/io ● … JavaScript Action 開発に便利！ 便利ライブラリ @octokit ● @octokit/graphql ● … その他 ● @vercel/ncc: ビルド ● js-yaml など JavaScript 資産

Slide 13

Slide 13 text

AbemaTV, Inc. All Rights Reserved
 リリース戦略 13 v3.0.0, v3, 75d2e84710de30f6ff7268e08f310b60ef14033f

Slide 14

Slide 14 text

AbemaTV, Inc. All Rights Reserved
 14 Action の実行方法として以下を提供 ● v3.0.0 ● v3 ● 75d2e84710de30f6ff7268e08f 310b60ef14033f リリース戦略 1. GitHub Release を作成したタイミン グで v1.2.3 の git tag を作成 2. v1.2.3 git tag が作成された時に v1 major git tag を更新 JavaScript のビルドや major tag の更新 はスクリプトや workflow で自動化してま す

Slide 15

Slide 15 text

AbemaTV, Inc. All Rights Reserved
 15 リリース戦略 - major tag 更新する workflow

Slide 16

Slide 16 text

AbemaTV, Inc. All Rights Reserved
 Branch で実行させない 16 ユーザーにベストプラクティスを提供する

Slide 17

Slide 17 text

AbemaTV, Inc. All Rights Reserved
 17 常に実行エンドポイント dist/index.js を main branch など で利用可能にすると main branch 指定でユーザーは action を利用で きてしまう！ 後方互換性のない破壊的変更を入れ た場合に困る 😢 Branch で実行させない そこで以下のような方法がとれます 1. リリースの git tag でのみ dist/index.js を含める 2. リリースの git tag でのみ action.yml の runs.main を正し いものにする

Slide 18

Slide 18 text

AbemaTV, Inc. All Rights Reserved
 依存関係の定期更新 18 Dependabot, Renovate

Slide 19

Slide 19 text

AbemaTV, Inc. All Rights Reserved
 19 他のプロジェクト同様に Dependabot / Renovate を用いて 依存関係を定期的に更新しています 結構 pull-request 多いので確認す るの大変です 😇 依存関係の定期更新 そこで、先ほどの dist/index.js を Renovate pull-request で更新して います 差分が出るような更新であれば Files changed に出るのでどのような変更 があるか確認できます！（読めるとは 言ってない）

Slide 20

Slide 20 text

AbemaTV, Inc. All Rights Reserved
 20 依存関係の定期更新 - 差分を確認する

Slide 21

Slide 21 text

AbemaTV, Inc. All Rights Reserved
 まとめ 21 まい泉のミニバーガーおいしい

Slide 22

Slide 22 text

AbemaTV, Inc. All Rights Reserved
 22 JavaScript/TypeScript でカスタ ム Action を書けます！ JavaScript/TypeScript 資産を活 用でき、開発環境も同様に整備でき ます！ まとめ JavaScript/TypeScript Action を 開発するのに便利なライブラリがあり ます！ Action を利用するベストプラクティ スを考慮したリリース戦略を採用する と Good 👍

Slide 23

Slide 23 text

AbemaTV, Inc. All Rights Reserved
 Thank you! 23 peaceiris.com