dskst's diary

Life and Tech Blog

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事前設定されたワークフローテンプレートで始めるに沿ってやってみよう。

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

少し応用

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);
}
4. パッケージを入れる

$ npm init -y
$ npm install @actions/core
$ npm install @actions/github

5. 全部コミットする!!

本来 node_module はコミットするべきではないが、 GitHub Actions がコンテナ上で実行されるため以下のような対応が必要になる

  • node_module をコミット
  • zeit/ncc で node_mocule を1ファイルにまとめてコンパイルしてコミット
  • GitHub Actions で npm install をする
  • release タグのみに node_module を追加する ← Githubが推奨してる
6. うまくいくとこんな感じになるよ!

f:id:dskst9:20200521221159p:plain

まとめ

コンテナが動き、プログラムが動くということは「なんでもできちゃうよね!」ということ。
お疲れさまでした!

QA

Q: run: の後のパイプは何?
A: パイプが無いとワンラインにまとめられてしまう。 f:id:dskst9:20200517153159p:plainf:id:dskst9:20200517153210p:plain

Q: 環境依存の変数とかってどう管理するの?
A: secretsという機能がある
※GITHUB_* は予約変数なので使用しないこと

こんなこともできる

  • 複数のジョブで共有するコンテナを使う
  • 各ステップで並列で動作するコンテナを使う
  • 作成した成果物を保存する(Artifacts)

遊びたかったら、公式DocGitHub Actions · GitHubJavaScript アクションを作成する - GitHub ヘルプにいくと色々あるよ。

ハンズオンのソースはこちらにアップしてるよ。
github.com