GitHub Actions ハンズオン資料

本記事は会社で使用したハンズオンの内容を記事にしたものです。
JavaScript アクションを作成する - GitHub ヘルプの内容を要約したものなので、詳細な情報を確認したい場合は公式Docを参照ください。

GitHub Actions とは？

GitHubのすべてのイベントでワークフローを起動する。コンテナアプリの構築、Webサービスの展開、レジストリへのパッケージの公開、またはプロジェクトへの新しいユーザーのウェルカムメッセージを自動化するなど、さまざまな用途でActionsを利用可能。

プッシュ、Issue、リリースなどのGitHubプラットフォームのイベントをトリガーとしてワークフローを起動することができる。
コミュニティが開発・保守し、ユーザが熟知・愛用しているサービスについて、対応するアクションを組み合わせて設定できる。

f:id:dskst9:20200517151548p:plain

GitHub Actions の衝撃

従来までは他のCI/CDツールを利用して、ビルドなどのイベントを実行していたが

すべてを GitHub で行うことが可能になる!!

GitHub Market Place

便利なテンプレートもマーケットプレイスで公開されている。

f:id:dskst9:20200517151619p:plain — https://github.com/marketplace?type=actions

シンプルな料金体系

f:id:dskst9:20200517151724p:plain — https://github.co.jp/features/actions

同時に実行できるワークフローはリポジトリごとに最大で20です。これを超えると、超過のワークフローはキューイングされます。
ワークフローの各ジョブは、最大で6時間まで実行できます。ジョブがこの制限に達すると、ジョブは終了させられ、完了できずに失敗します。
アカウント内のすべてのリポジトリに渡って並行に実行できるジョブ数は、利用しているGitHubのプランによります。この制限を超えた場合、超過のジョブはキューイングされます。

これは！！使わない手はないぞ！！

Hands-on

用語

Workflow: 実行する処理とその処理を実行する条件を定義したもの
Action: あらかじめ定義済みの処理

最初の一歩

公式doc事前設定されたワークフローテンプレートで始めるに沿ってやってみよう。

github-action-hands-on という名前のRepositoryを自分の Github に作成
Simple workflow を選択
何を定義するか理解したら、そのまま保存
ローカルリポジトリに clone して何かを追加して push!
下記のようなアクションを確認できるはず

少し応用

uses でアクションを指定する。
local アクションも指定できるので、トライ！

構成を理解する

|-- hello-world (repository)
|   |__ .github
|       └── workflows
|           └── my-first-workflow.yml
|       └── actions
|           |__ hello-world-action
|               └── action.yml

上記のようなフォルダ構成がテンプレートになる。

例えば、 hello-world-action/action.yml がアクション名 hello-world-action になる。action.yml のファイル名を変更することはできない。 action を分割することで、 workflow からコマンドを抜き出してパーツ化することができるようになる。

JavaScript を実行する

1. ローカルリポジトリにて諸々修正

$ cd .github/workflows
$ mv blank.yml main.yml
$ vim main.yml

name: Hello
 
on: [push]
 
jobs:
  build:
 
    runs-on: ubuntu-latest
 
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Hello world
        id: hello
        uses: ./.github/actions/hello-world
        with:
          who-to-greet: '名前を入れるyo'
      - name: Get the output time
        run: echo "The time was  ${{ steps.hello.outputs.time }}"

2. .github/action/hello-world/action.yml を作成する

$ mkdir -p .github/actions/hello-world
$ vim .github/actions/hello-world/action.yml

name: 'Hello World'
description: 'Greet someone and record the time'
inputs:
  who-to-greet: # id of input
    description: 'Who to greet'
    requiered: true
    default: 'World'
outputs:
  time: # id of output
    description: 'The time we greeted you'
runs:
  using: 'node12'
  main: '../../../index.js'

3. $ vim index.js

const core = require('@actions/core');
const github = require('@actions/github');
 
try {
  const nameToGreet = core.getInput('who-to-greet');
  console.log(`Hello ${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);
}