■ はじめに

Githubカスタムアクション (Github Custom Action) を扱う可能性があるので
まずは、Hello world的な簡単なものでいいので、
どんな感じになるのかを試してみる

【１】Githubカスタムアクション (Github Custom Action)
【２】アクションの種類
　１）Docker コンテナー
　２）JavaScript
　３）複合アクション
【３】メタデータ ファイル名
　１）使用上の注意
　２）アクションの置き場
　３）branding (ブランディング)
　４）runs
【４】Hello world
　０）前提条件
　１）リポジトリの作成
　２）action.ymlの作成
　３）index.jsの作成
　４）ローカルでのテスト
　５）GitHub Actionsでのテスト

【１】Githubカスタムアクション (Github Custom Action)

* GitHub Actionsで実行できるアクション（※）を独自に作成したもの

※ アクション

　workflow内のuses: で使うやつで、
例えば、よく使う「actions/checkout@v4」とか
「actions/setup-python@v4」とかがそう。

https://docs.github.com/ja/actions/creating-actions
https://docs.github.com/ja/actions/creating-actions/about-custom-actions

【２】アクションの種類

１）Docker コンテナー ... Linuxのみ
２）JavaScript
３）複合アクション

https://docs.github.com/ja/actions/creating-actions/about-custom-actions#types-of-actions

１）Docker コンテナー

* Docker コンテナー生成し、その上で動くアクション

https://docs.github.com/ja/actions/creating-actions/about-custom-actions#docker-container-actions

* 詳細は、以下の関連記事を参照のこと

Github Custom Action ～ Docker コンテナー～
https://dk521123.hatenablog.com/entry/2024/06/28/030619

２）JavaScript

* JavaScriptで書かれたアクション

https://docs.github.com/ja/actions/creating-actions/about-custom-actions#javascript-actions

３）複合アクション

* 複数ワークフロー ステップを 1 つのアクション内で組み合わせることができる

https://docs.github.com/ja/actions/creating-actions/about-custom-actions#composite-actions
https://docs.github.com/ja/actions/creating-actions/creating-a-composite-action

* 詳細は、以下の関連記事を参照のこと

Github Custom Action ～複合アクション～
https://dk521123.hatenablog.com/entry/2024/06/29/021837

【３】メタデータファイル名

* アクションのメタデータ（action.yml or action.yaml）を記述する必要がある
* 構文の詳細については、以下の公式ドキュメントを参照

https://docs.github.com/ja/actions/creating-actions/metadata-syntax-for-github-actions

action.yml

# [1] アクションの名前
name: 'hello_world_demo'
description: 'This is just hello world...'
# [2] ブランディング (branding)
branding:
  icon: upload-cloud
  color: blue
# [3] 入力値
inputs:
  input_id1:
    description: 'This is a sample input'
    required: true
    default: 'Hi, world'
# [4] 出力値
outputs:
  output_id1:
    description: 'This is a sample output1'
# [5] Action種類
runs:
  using: 'node16'
  main: 'index.js'

１）使用上の注意

* ファイル名は、action.yml または action.yaml で必須

https://docs.github.com/ja/actions/creating-actions/about-custom-actions#types-of-actions
https://docs.github.com/ja/actions/creating-actions/metadata-syntax-for-github-actions

２）アクションの置き場

* 以下の公式ドキュメントに記載

https://docs.github.com/ja/actions/creating-actions/about-custom-actions#choosing-a-location-for-your-action

[1] アクションを他ユーザーが使用しない場合

* アクションのファイルは、リポジトリのどの場所に保存していい

[2] コードを 1 つリポジトリで組み合わせる場合

* アクションは .github ディレクトリに保存するといい
* e.g. .github/actions/{Action名}/action.yml

３）branding (ブランディング)

* Optional (任意設定)
* GitHub Marketplace でのアイコンおよびアイコン色を指定

構文
https://docs.github.com/ja/actions/creating-actions/metadata-syntax-for-github-actions#branding
アイコン種類
https://feathericons.com/

４）runs

* Action の種類などを指定

https://docs.github.com/ja/actions/creating-actions/metadata-syntax-for-github-actions#runs

javascript の場合
https://docs.github.com/ja/actions/creating-actions/metadata-syntax-for-github-actions#runs-for-javascript-actions

【４】Hello world

* JavaScript のGithub Custom Action を作成してみる

０）前提条件

* 以下がインストールされていること
 + git
 + Node.js (npm --version で確認)

Node.js ～環境構築編～
https://dk521123.hatenablog.com/entry/2021/11/06/000000

１）リポジトリの作成

mkdir hello-world-action
cd hello-world-action

# プロジェクト初期化
npm init -y

# Git初期化
git init
git add .
git commit -m "initial commit for hello world of custom action"

最終的な主なフォルダ構成

hello-world-action
├─.github
│  └─workflows
│        └─ demo.yml
├─action.yml
├─index.js
├─package.json
└─node_modules

２）action.ymlの作成

* プロジェクト直下に、action.ymlを作成

action.yml

# アクションの名前
name: 'hello_world_demo'
# アクションの説明
description: 'This is just hello world...'
branding:
  icon: upload-cloud
  color: blue
inputs:
  # 入力値のID
  input_id1:
    # 入力値の説明
    description: 'This is a sample input'
    # 必須かどうか
    required: true
    # デフォルト値
    default: 'Hi, world'
  # input_id2: ...
outputs:
  # 出力値のID
  output_id1:
    # 出力値の説明
    description: 'This is a sample output1'
  # output_id2: ...
runs:
  using: 'node16'
  # 実行するJavaScriptファイル
  main: 'index.js'

３）index.jsの作成

* プロジェクト直下に、index.jsを作成する

[1] @actions/coreパッケージをインストールする

* GitHub Actions Toolkit の@actions/coreパッケージをインストールする

https://github.com/actions/toolkit

# @actions/coreパッケージをインストール
npm install @actions/core

[2] index.js を作成する

const core = require('@actions/core');

try {
  const input1 = core.getInput('input_id1', { required: true});

  core.setOutput('output_id1', input1);
} catch (error) {
  core.setFailed(error.message);
}

補足：JavaScript アクションで失敗終了を設定する
https://docs.github.com/ja/actions/creating-actions/setting-exit-codes-for-actions#setting-a-failure-exit-code-in-a-javascript-action

/**
JavaScript のアクションを作成する場合は、
アクション ツールキット @actions/core パッケージを使用して
メッセージをログに記録し、エラー終了コードを設定できます。
次に例を示します。
*/

try {
  // something
} catch (error) {
  core.setFailed(error.message);
}

４）ローカルでのテスト

Windows の場合

# Step1: 入力設定
# 入力値のIDにINPUT_を付けて全て大文字にした環境変数を設定
$ SET INPUT_INPUT_ID1='Hello world!!'

# 確認
$ set INPUT
INPUT_INPUT_ID1='Hello world!!'

# Step2: 実行
$ node index.js
::set-output name=output_id1::'Hello world!!'

Linux の場合

$ export INPUT_INPUT_ID1='Hello world!!'
$ echo $INPUT_INPUT_ID1
$ node index.js

５）GitHub Actionsでのテスト

* 以下の「.github/workflows/demo.yml」を追加し、
　Githubリポジトリに追加し、Workflowを実行すれば、
　以下の【出力結果】ような出力が得られるはず

【出力結果】
Run echo Hello world!!!?
Hello world!!!?

.github/workflows/demo.yml

name: DemoCustomAction

on:
  workflow_dispatch:
jobs:
  demo-custom-action:
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@v4
      - name: Call Demo action
        id: call-demo
        uses: ./
        with:
          input_id1: 'Hello world!!!?'
      - name: Show result
        run: |
          echo ${{ env.output_id1 }}
        env:
          output_id1: ${{ steps.call-demo.outputs.output_id1 }}

参考文献

https://aadojo.alterbooth.com/entry/2023/05/23/180453

プログラムの超個人的なメモ

Memo for Programming.

【Github】Github Custom Action ～入門編～

■ はじめに

目次

【１】Githubカスタムアクション (Github Custom Action)

【２】アクションの種類

１）Docker コンテナー

２）JavaScript

３）複合アクション

【３】メタデータファイル名

１）使用上の注意

２）アクションの置き場

３）branding (ブランディング)

４）runs

【４】Hello world

０）前提条件

１）リポジトリの作成

２）action.ymlの作成

３）index.jsの作成

４）ローカルでのテスト

５）GitHub Actionsでのテスト

参考文献

関連記事

■ はじめに

目次

【１】Githubカスタムアクション (Github Custom Action)

【２】アクションの種類

１）Docker コンテナー

２）JavaScript

３）複合アクション

【３】メタデータ ファイル名

１）使用上の注意

２）アクションの置き場

３）branding (ブランディング)

４）runs

【４】Hello world

０）前提条件

１）リポジトリの作成

２）action.ymlの作成

３）index.jsの作成

４）ローカルでのテスト

５）GitHub Actionsでのテスト

参考文献

関連記事

【３】メタデータファイル名