Github ActionsのActionをTypescriptで作って、公開してみた
内容
Github ActionsのActionを作成し、誰でも使えるようにするまでを記事にします。
作るActionは、github actions上にHelloと表示するだけの簡易的なものです。そのため、github actionsのactionの作成フローを知りたい人が想定読者です。
準備
- Typescriptのプロジェクトを用意する
- Github Repoを作成する
Typescriptのプロジェクトを用意する
今回は、こちらの記事で作成したプロジェクトを雛形として進めていきます。
Typescriptをbuildする環境があれば、どのような環境でもいいです。
特にこだわりがない人は、↑を使ってください。（本記事は、上記テンプレートを元に制作を進めます。）
Github Repoを作成する
Actionを作成するGithub Repoを作成し、Typescript環境をそのrepoにpushしてください。
私は、上記テンプレートを利用したため、プロジェクトrepoは、以下のようなディレクトリ構成になっています。(main.ts -> index.ts に変更しています。)
$ tree -a
.
├── .eslintrc.js
├── .prettierrc.json
├── dist
│ └── index.js
├── jest.config.js
├── package-lock.json
├── package.json
├── src
│ └── index.ts
├── tests
│ └── index.test.ts
└── tsconfig.json
実装する
- Actionのmetadataを設定するファイルを作成する
- hello.tsファイルを作成する
- github actions用にbuild toolをinstallする
- index.tsファイルにgithub actionsの処理を書く
Actionのmetadataを設定するファイルを作成する
action.ymlというファイル名で、Actionのメタデータを設定するファイルを作成します。
$ touch action.yml
$ vi action.yml
action.yml
name: 'Hello'
description: 'Hello Github Actions Template'
inputs:
name:
description: 'greeting'
required: true
default: 'yossy'
runs:
using: 'node16'
main: 'dist/index.js'
actions.yamlを追加後は、以下のようなディレクトリ構成になっています。
$ tree -a
.
├── .eslintrc.js
├── .prettierrc.json
├── action.yml
├── dist
│ └── index.js
├── jest.config.js
├── package-lock.json
├── package.json
├── src
│ └── index.ts
├── tests
│ └── index.test.ts
└── tsconfig.json
hello.tsファイルを作成する
次に、表示したい名前を引数に渡すと返り値としてHello ${name}! を返す関数をhello.tsファイル内に設定します。
$ touch src/hello.ts
$ touch tests/hello.test.ts
src/hello.ts
export function hello(name: string): string {
return `Hello ${name}!`
}
tests/hello.test.ts
import {hello} from '../src/hello'
describe('hello test', () => {
test('OK', async () => {
const res = hello("yossy")
expect(res).toBe("Hello yossy!")
})
})
github actions用にbuild toolをinstallする
github actionsでjavascriptのActionを公開する場合、node_modulesも一緒にcheck inする必要があります。しかし、node_modulesをcheck inするのは様々な問題の原因になりますので、@vercel/ncc モジュールを利用して、1ファイルに全てのソースがbuildされるようにします。
$ npm install --save-dev @vercel/ncc
package.jsonのbuildスクリプトを上記モジュールを利用したものに変更します。
package.json
{
"name": "gh-actions-ts-template",
"version": "1.0.0",
"description": "Github Actions Typescript Template",
"main": "index.js",
"scripts": {
"build": "ncc build src/index.ts -o dist",
...
},
...
}
これで、npm run buildを実行すると、dist/index.jsにmoduleも含めた全てのソースがbuildされるように設定できました。
index.tsファイルにgithub actionsの処理を書く
次に、index.tsファイルにAction実行時に実行する処理を記載していきます。
index.tsファイルを作成していく前に、Action作成時に便利なmoduleをinstallします。
$ npm install -S @actions/core
core moduleは、logレベルを設定してlogを表示したり、Secretを設定できたり、様々なことができる便利モジュールです。
このmoduleをinstallした状態で、index.tsファイルを作成していきます。
$ touch src/index.ts
index.ts
import * as core from '@actions/core'
import {hello} from './hello'
function run(): void {
try {
const name: string = core.getInput('name')
const helloMessage: string = hello(name)
core.info(helloMessage)
} catch (error) {
if (error instanceof Error) core.setFailed(error.message)
}
}
run()
他のgithub actionsから呼び出せるようにする
ソースの構築は完了したので、次は、github actionsのActionとして利用できるようにします。
リリースタグを切って、githubにpushする
他のrepositoryのGithub Actionsから、このActionsを呼び出せるようにしていきます。
手順はシンプルで、リリースタグを切って、githubにpushすれば、完了です。
$ git add .
$ git commit -m "release"
$ git tag -a -m "My first action release" v0.1
$ git push --follow-tags
github actoinsから呼び出す
github actionsを追加して、先ほどリリースしたActionを呼び出します。（今回は、実験のために、同一repositoryにworkflowを追加します）
$ mkdir -p .github/workflows
$ touch .github/workflows/test.yml
test.yml
name: CI
on:
push:
branches: [ "main" ]
pull_request:
branches: [ "main" ]
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Test Actions
uses: rara-tan/gh-actions-ts-template@v0.1
with:
name: "Tom"
上記のようにファイルを作成し、githubにpushします。すると、github actionsのworkflowにTomとログが表示されているのを確認できるかと思います。これで、パブリックなgithub actionsのactionを公開できました。
note
勉強法やキャリア構築法など、エンジニアに役立つ記事をnoteで配信しています。
Discussion