初めて GitHub Actions (with JavaScript) を作るウォークスルー
この記事は、GitHub Actions の公式チュートリアルをやってみた、という日記です。
チュートリアルそのものではないので、注意してください。
GitHub Actions はひな形が用意してあります。便利〜。
Use this template
をクリックするとレポジトリ作成に進みます。
レポジトリの名前を入力すると、レポジトリができます。
作りたいものはなんとなくイメージしているけど、アクションを作るのはこれが初めて。
Hello World!
を出力するアクションを作るチュートリアルと、完成形のレポジトリが公開されているので、これに沿って一度手を動かして使ってみます。チュートリアルを一度なぞるだけで、理解度が変わってくるので、初めてなら(退屈そうに見えたとしても)手を動かすことをおすすめします。
サンプルのレポジトリを見てみましょう。
actions/hello-world-javascript-action: A template to demonstrate how to build a JavaScript action.
README.md
を見ると、このアクションの使い方がわかります。
This action prints "Hello World" or "Hello" + the name of a person to greet to the log
このアクションは、"Hello World" または "Hello" + 指定した名前 をログに表示します。
Input
に who-to-greet
に挨拶する相手の名前を指定します。
アウトプットとして、 time
挨拶をした時間 がわかるみたいです。
アクションの作り方は日本語でも紹介されています。 yatta~
いよいよ初めての GitHub Actions を作っていきます。
nodeの12の利用が推奨されているので、ローカル環境にnodeをインストールします。
最初は action.yml
の更新です。
テンプレートから作成したので、すでにサンプルの内容が書かれていますが、チュートリアルに沿って書き換えます。
action.yml
name: 'こんにちは、世界'
description: 'あいさつして、挨拶した時間を表示します'
inputs:
who-to-greet:
description: 'あいさつする相手'
required: true
default: '世界'
outputs:
time:
description: 'あいさつした時間'
runs:
using: 'node12'
main: 'dist/index.js'
次に、ツールキットをインストールします。ツールキットは、GitHub Actions につかえる便利なモジュールです。コンソールで以下のコマンドを実行します。
npm install @actions/core @actions/github
いよいよActionを書くぞ〜!
index.js
に書いていきます。
サンプルのコードを書くときはどこか一箇所でも変えてみると楽しいです。例えば今回は、あいさつを日本語にしてみました。
const core = require("@actions/core");
const github = require("@actions/github");
try {
const nameToGreet = core.getInput("who-to-greet");
console.log(`こんにちは ${nameToGreet}!`); // ログに出力
const time = new Date().toTimeString();
core.setOutput("time", time); // アウトプット
const payload = JSON.stringify(github.context.payload, undefined, 2);
console.log(`The event payload: ${payload}`);
} catch (error) {
core.setFailed(error.message);
}
処理ができたので、変更内容をコミットします。
git add action.yml index.js
git commit -m ":sparkles: Add actions"
action.yml
に main: 'dist/index.js'
と記述したので実行される index.js
は dist
配下のものになります。 npm run prepare
を実行すると、 ./dist/index.js
が追加されます。
git add ./dist
git commit -m ":wrench: npm run prepare"
完成したパッケージを試すためのコードを追加します。
.github/workflows/main.yml
on: [push] # アクションを実行するタイミング
jobs:
hello_world_job:
runs-on: ubuntu-latest
name: あいさつするよ〜
steps:
# プライベートリポジトリで実行する場合は、以下の二行が必要
- name: Checkout
uses: actions/checkout@v2
# アクションを実行する(あいさつログを出力)
- name: Hello world action step
uses: ./ # ルートディレクトリのアクションを実行する
id: hello
with:
who-to-greet: '世界'
# アウトプットを取得する
- name: Get the output time
run: echo "時間は {{ steps.hello.outputs.time }}"
git add .github/workflows/main.yml
git commit -m ":memo: Add script to execute action"
GitHub にプッシュします
git push
GitHub を開いて、 Action
タブを確認します。
すると、 .github/workflows/main.yml
の実行結果が確認できます。
アクションが実行されています!中身を見てみましょう。コミットのタイトルをクリックします。
あいさつはログに出力されています!
時間はどうでしょうか。
時間を保存したキーがうまく展開されていないみたいなので、修正します。 .github/workflows/main.yml
の{{ steps.hello.outputs.time }}
を ${{ steps.hello.outputs.time }}
に修正し git push
します。
steps
や hello
は .github/workflows/main.yml
の キーを表しています。
index.js
に記述した core.setOutput("time", time);
によって、 outputs.time
で時間が取得できます。
変更をプッシュすると、Actionは自動的に実行されます。
Yay! はじめての GitHub Actions が完成しました 🎉
GitHub Actions をマーケットプレイスに公開する場合は、 GitHubマーケットプレイスでのアクションの公開-GitHubDocs を参考にしましょう。
Discussion