[入門]GitHub Actions ~全てのエンジニアのための備忘録~

こんにちは。KOUKIです。

とある企業でWebエンジニアをしています。

どこの企業でもVersion Control Systemを使っていると思いますが、その代表的なツールとしてGitHubを知らないエンジニアはいない(と信じたい)と思っています。

本記事では、GitHub Actionsの使い方を備忘として残しておきたいと思います。

<目次>

GitHub Actionsとは?

GitHub Actionsは、ソフトウェア開発におけるワークフローを自動化するためのツールです。

ワークフローとは、開発者がGitHubのリポジトリ内で、「ビルド/テスト/パッケージング/リリース/デプロイ」など様々な処理を自動で実行するための枠組みのことを指します。

開発者側では、2つの概念を組み合わせてワークフローを作成します。

タスク(実行したい内容)
アクション(どのように起動するか)

このアクションが実行されると、GitHub Server内でVirtual Machine Instance(Runner)が立ち上がります(ここからはGitHub側のお仕事です)。

そこで、タスクに定義した内容がJobとして実行されます。

Virtual Machine InstanceはLinuxはもちろん、Windows, Macも選択できるので幅広いOSでの検証にも利用できます。もちろんDocker Containerも利用可能です。

流れをまとめると以下のようになります。

Event(PushやMergeなど)が発生
Workflowが実行
Virtual Environment立ち上げ(Runner)
Job実行
タスクに設定されたStepごとにActionが実行

細かいことはハンズオンを通して、お伝えできればなと思います。

ワークフローの作成

ワークフローを作成しましょう。

GitHub リポジトリの作成

GitHubのリポジトリを作成します。

作成したリポジトリをローカルに取り込んでしておきましょう。

mkdir sample-github-actions
cd sample-github-actions/
git init
git remote add origin https://github.com/hoge/sample-githuub-actions.git

mkdir sample-github-actions

cd sample-github-actions/

git init

git remote add origin https://github.com/hoge/sample-githuub-actions.git

フォルダの作成

GitHub Actionsでワークフローを作成するためには、.github/workflowsフォルダ内にyamlを設置する必要がある。

# このフォルダ内にyamlを設置していく
mkdir -p .github/workflows
touch .github/workflows/simple.yml

# このフォルダ内にyamlを設置していく

mkdir -p .github/workflows

touch .github/workflows/simple.yml

尚、yaml形式でGitHub Actionsを実装していきます。

# 参考
# https://docs.github.com/ja/actions/learn-github-actions/workflow-syntax-for-github-actions#about-yaml-syntax-for-workflows

# Workflow名
name: Shell Commands
# イベントトリガー
# Git Pushした時にこのワークフローを実行する
on: [push]

jobs:
  # job名(任意の名前で良い)
  run-shell-commmand:
    # virtual machineの形式を指定
    runs-on: ubuntu-latest
    # jobのステップ
    steps:
      # ステップ名
      - name: echo a string
        run: echo "Hello World"
      # ステップ2
      - name: multiline script
        run: | # 複数のコマンドを記載したいときは|(パイプ)で繋ぐ
          node -v
          npm -v

# 参考

# https://docs.github.com/ja/actions/learn-github-actions/workflow-syntax-for-github-actions#about-yaml-syntax-for-workflows

# Workflow名

# イベントトリガー

# Git Pushした時にこのワークフローを実行する

on: [push]

jobs:

# job名(任意の名前で良い)

run-shell-commmand:

# virtual machineの形式を指定

runs-on: ubuntu-latest

# jobのステップ

steps:

# ステップ名

- name: echo a string

run: echo "Hello World"

# ステップ2

- name: multiline script

run: | # 複数のコマンドを記載したいときは|(パイプ)で繋ぐ

node -v

npm -v

コメントにパラメータの詳細を記載してますが、より深く知りたい人はここを参考にしてください。

Git Push

先ほどのコードでは、Git Pushを実行するとワークフローを起動するように設定しました。

実際に確認してみましょう。

git add -A
git commit -m "first workflow"
git push --set-upstream origin master

git add -A

git commit -m "first workflow"

git push --set-upstream origin master

GitHubのリポジトリを確認してみましょう。

Pushされたことが確認できました。

次に、「Actions」タブに移動します。

simple.ymlファイルに実装したrun-shell-commandジョブが登録されていることがわかります。

ステップの詳細も確認できます。

OKですね。

エラーになった時の挙動

誤ったコマンドなどを指定して、エラーになった時の挙動を確認してみましょう。

name: Shell Commands
on: [push]

jobs:
  run-shell-commmand:
    runs-on: ubuntu-latest
    steps:
      - name: echo a string
        # run: echo "Hello World"
        run: eecho "Hello World" # eechoを指定
      - name: multiline script
        run: |
          node -v
          npm -v

on: [push]

jobs:

run-shell-commmand:

runs-on: ubuntu-latest

steps:

- name: echo a string

# run: echo "Hello World"

run: eecho "Hello World" # eechoを指定

- name: multiline script

run: |

node -v

npm -v

「eecho」という存在しないコマンドを指定しました。GitHubにPushしてみましょう。

$ git commit -am "update simple.yml"
$ git push

1 2	$ git commit -am "update simple.yml" $ git push

さて、GitHub Actionsの方はどうなっているでしょうか。

エラーで止まってますね!

デバッグログの出力

GitHubの設定で、デバッグログを出力できます。

その為には、ACTIONS_RUNNER_DEBUGをGitHubに設定します。

まずは、Settings -> Secretsから「New repository secret」ボタンを押下しましょう。

遷移先に、Secret情報を入力するフォームが現れるので、下記の値を入力して、「Add secret」ボタンを押下します。

ACTIONS_RUNNER_DEBUG : true

1	ACTIONS_RUNNER_DEBUG : true

処理が問題なく完了すれば、ACTIONS_RUNNER_DEBUGは、Secret情報として登録されます。

同じ手順で、「ACTIONS_STEP_DEBUG : true」も登録しておきましょう。

ここまでの作業が完了したら、先ほどエラーになっていたワークフローを再実行します。

今度は、「debug」が出力されたことがわかりますね^^

様々なshell

デフォルトでは、スクリプトはBash上で動きます。
(ただしWindowsを除く)

jobs.<job_id>.steps[*].shellを見るとたくさんのshellを選択できることがわかります。

Supported platform	`shell` parameter	Description	Command run internally
All	`bash`	The default shell on non-Windows platforms with a fallback to `sh`. When specifying a bash shell on Windows, the bash shell included with Git for Windows is used.	`bash --noprofile --norc -eo pipefail {0}`
All	`pwsh`	The PowerShell Core. GitHub appends the extension `.ps1` to your script name.	`pwsh -command ". '{0}'"`
All	`python`	Executes the python command.	`python {0}`
Linux / macOS	`sh`	The fallback behavior for non-Windows platforms if no shell is provided and `bash` is not found in the path.	`sh -e {0}`
Windows	`cmd`	GitHub appends the extension `.cmd` to your script name and substitutes for `{0}`.	`%ComSpec% /D /E:ON /V:OFF /S /C "CALL "{0}""`.
Windows	`pwsh`	This is the default shell used on Windows. The PowerShell Core. GitHub appends the extension `.ps1` to your script name. If your self-hosted Windows runner does not have PowerShell Core installed, then PowerShell Desktop is used instead.	`pwsh -command ". '{0}'"`.
Windows	`powershell`	The PowerShell Desktop. GitHub appends the extension `.ps1` to your script name.	`powershell -command ". '{0}'"`.

例えば、pythonを指定する場合は、以下のようにします。

name: Shell Commands
on: [push]

jobs:
  run-shell-commmand:
    runs-on: ubuntu-latest
    steps:
      - name: echo a string
        run: echo "Hello World"
      - name: multiline script
        run: |
          node -v
          npm -v
      # Pythonを指定
      - name: python Command
        run: |
          import platform
          print(platform.processor())
        shell: python

on: [push]

jobs:

run-shell-commmand:

runs-on: ubuntu-latest

steps:

- name: echo a string

run: echo "Hello World"

- name: multiline script

run: |

node -v

npm -v

# Pythonを指定

- name: python Command

run: |

import platform

print(platform.processor())

shell: python

stepsの2番目の「python Command」に注目してほしいです。ここでPythonのコマンドを実行しています。

shellとして、「python」を選択していることもわかると思います。

GitHubにPushします。

git add .
git commit -m "add python"
git push

git add .

git commit -m "add python"

git push

GitHubページに飛ぶとPythonコードの実行結果が確認できます。

もう一個、Windowsも試してみましょうか。

name: Shell Commands
on: [push]

jobs:
  run-shell-commmand:
    runs-on: ubuntu-latest
    steps:
      - name: echo a string
        run: echo "Hello World"
      - name: multiline script
        run: |
          node -v
          npm -v
      - name: python Command
        run: |
          import platform
          print(platform.processor())
        shell: python
  # Windows
  run-windows-commands:
    runs-on: windows-latest
    steps:
      - name: Directory PowerShell
        run: Get-Location
      - name: Directory Bash
        run: pwd
        shell: bash

on: [push]

jobs:

run-shell-commmand:

runs-on: ubuntu-latest

steps:

- name: echo a string

run: echo "Hello World"

- name: multiline script

run: |

node -v

npm -v

- name: python Command

run: |

import platform

print(platform.processor())

shell: python

# Windows

run-windows-commands:

runs-on: windows-latest

steps:

- name: Directory PowerShell

run: Get-Location

- name: Directory Bash

run: pwd

shell: bash

新しく「run-windows-commands」を作成し、そこにスクリプトを実行しました。

runs-onに「windows-latest」を指定しているので、WindowsのPoserShellが動くはずです。それを確認するために「Get-Location」コマンドを使っています。

GitHubにPushをしましょう。

git add .
git commit -m "add windows"
git push

git add .

git commit -m "add windows"

git push

ご覧の通り、Jobが二つに増えました。これらのJobはパラレルで動きます。

コマンドも問題なく実行されています。

OKですね。

Jobの依存関係

ちなみに、「run-shell-commmand」Jobの後に「run-windows-commands」を実行したい場合は、needsオプションを付与します。

name: Shell Commands
on: [push]

jobs:
  run-shell-commmand:
    runs-on: ubuntu-latest
    steps:
      - name: echo a string
        run: echo "Hello World"
      - name: multiline script
        run: |
          node -v
          npm -v
      - name: python Command
        run: |
          import platform
          print(platform.processor())
        shell: python
  run-windows-commands:
    runs-on: windows-latest
    # run-shell-commandの後で実行
    needs: [run-shell-commmand]
    steps:
      - name: Directory PowerShell
        run: Get-Location
      - name: Directory Bash
        run: pwd
        shell: bash

on: [push]

jobs:

run-shell-commmand:

runs-on: ubuntu-latest

steps:

- name: echo a string

run: echo "Hello World"

- name: multiline script

run: |

node -v

npm -v

- name: python Command

run: |

import platform

print(platform.processor())

shell: python

run-windows-commands:

runs-on: windows-latest

# run-shell-commandの後で実行

needs: [run-shell-commmand]

steps:

- name: Directory PowerShell

run: Get-Location

- name: Directory Bash

run: pwd

shell: bash

GitHubにPushします。

git add .
git commit -m "add needs options"
git push

git add .

git commit -m "add needs options"

git push

GitHubを確認すると以下のようになってました。

run-shell-command -> run-windows-commandsの順にJobが実行されています。

3rd-party Actionを利用する

これまでは、Shellコマンドなどで実行したいスクリプトを直接コードに書いてましたが、他の人が開発したActionを利用することができます。

例えば、hello -world-javascript-actionを利用してみましょう。

このアクションは挨拶を返すだけの単純なものですが、デモが簡単に行えます。

ひとまず。Action用のファイルを用意しましょう。

touch .github/workflows/actions.yml

1	touch .github/workflows/actions.yml

このファイルにGitHub Actionsを記載します。

name: Actions Workflow

on: [push]

jobs:
  run-github-actions:
    runs-on: ubuntu-latest
    steps:
      - name: Simple JS Action
        id: greet
        # Actionを利用する
        # https://github.com/actions/hello-world-javascript-action
        # -> actions/hello-world-javascript-action@ブランチ名 or タグ名 or commmit ID
        # uses: actions/hello-world-javascript-action@master
        uses: actions/hello-world-javascript-action@v1
        # Inputを指定
        with:
          # README.mdに記載されていたinput変数(who-to-greet)とinput値(Selfnote)
          who-to-greet: Selfnote
      - name: Log Greeting Time
        run: echo "${{ steps.greet.outputs.time }}"

on: [push]

jobs:

run-github-actions:

runs-on: ubuntu-latest

steps:

- name: Simple JS Action

id: greet

# Actionを利用する

# https://github.com/actions/hello-world-javascript-action

# -> actions/hello-world-javascript-action@ブランチ名 or タグ名 or commmit ID

# uses: actions/hello-world-javascript-action@master

uses: actions/hello-world-javascript-action@v1

# Inputを指定

with:

# README.mdに記載されていたinput変数(who-to-greet)とinput値(Selfnote)

who-to-greet: Selfnote

- name: Log Greeting Time

run: echo "${{ steps.greet.outputs.time }}"

説明はコメントに書いてあるので割愛させていただくとして、GitHubにPushしましょう。

git add .
git commit -m "add javascript actions"
git push

git add .

git commit -m "add javascript actions"

git push

GItHubページを見てみましょう。

OKですね。ちなみに、「Log Greeting Time」はこんな感じになってます。

GitリポジトリをCheckoutする

GitHubの「actions/checkout」にて、GitHubリポジトリのCheckoutができます。

name: Actions Workflow

on: [push]

jobs:
  run-github-actions:
    runs-on: ubuntu-latest
    steps:
      - name: List Files
        run: |
          pwd
          ls -a
      - name: checkout
        uses: actions/checkout@v1
      - name: List Files After Checkout
        run: |
          pwd
          ls -a

on: [push]

jobs:

run-github-actions:

runs-on: ubuntu-latest

steps:

- name: List Files

run: |

pwd

ls -a

- name: checkout

uses: actions/checkout@v1

- name: List Files After Checkout

run: |

pwd

ls -a

これで自分のリポジトリがCheckoutされるはずなので、実際にPushして確認してみましょう。


# checkout確認用のファイル
touch test.yaml
git add .
git commit -m "Add checkout"
git push

# checkout確認用のファイル

touch test.yaml

git add .

git commit -m "Add checkout"

git push

GitHub Actions画面を開きます。

「List Files」と「List Files After Checkout」を比較してみましょう。

gitやtest.yamlが存在しているので、Checkoutが確認できましたね。

また、GitHub Actionsには環境変数が用意されているのでこれらを使うともっといい感じにできます。

name: Actions Workflow

on: [push]

jobs:
  run-github-actions:
    runs-on: ubuntu-latest
    steps:
      - name: List Files
        run: |
          pwd
          ls -a

          # GitHub環境変数
          echo $GITHUB_SHA
          echo $GITHUB_REPOSITORY
          echo $GITHUB_WORKSPACE
          echo "${{ github.token }}"

          # 環境変数を利用してのgit操作
          git clone git@github:$GITHUB_REPOSITORY
          git checkout $GITHUB_SHA
      - name: checkout
        uses: actions/checkout@v1
      - name: List Files After Checkout
        run: |
          pwd
          ls -a

on: [push]

jobs:

run-github-actions:

runs-on: ubuntu-latest

steps:

- name: List Files

run: |

pwd

ls -a

# GitHub環境変数

echo $GITHUB_SHA

echo $GITHUB_REPOSITORY

echo $GITHUB_WORKSPACE

echo "${{ github.token }}"

# 環境変数を利用してのgit操作

git clone git@github:$GITHUB_REPOSITORY

git checkout $GITHUB_SHA

- name: checkout

uses: actions/checkout@v1

- name: List Files After Checkout

run: |

pwd

ls -a

GITHUB_SHAなどが環境変数です。下記は、公式サイトからの引用です。

Environment variable	Description
`CI`	Always set to `true`.
`GITHUB_WORKFLOW`	The name of the workflow.
`GITHUB_RUN_ID`	リポジトリ内でユニークな各実行に対する番号。この番号は、ワークフローの実行をやり直しても変化しません、
`GITHUB_RUN_NUMBER`	リポジトリ内の特定のワークフローの各実行に対するユニークな番号。この番号は、ワークフローの最初の実行時に1で始まり、新たな実行ごとにインクリメントされます。この番号は、ワークフローの実行をやり直しても変化しません、
`GITHUB_JOB`	The job_id of the current job.
`GITHUB_ACTION`	The unique identifier (`id`) of the action.
`GITHUB_ACTION_PATH`	The path where your action is located. You can use this path to access files located in the same repository as your action. This variable is only supported in composite actions.
`GITHUB_ACTIONS`	Always set to `true` when GitHub Actions is running the workflow. You can use this variable to differentiate when tests are being run locally or by GitHub Actions.
`GITHUB_ACTOR`	The name of the person or app that initiated the workflow. For example, `octocat`.
`GITHUB_REPOSITORY`	The owner and repository name. For example, `octocat/Hello-World`.
`GITHUB_EVENT_NAME`	The name of the webhook event that triggered the workflow.
`GITHUB_EVENT_PATH`	The path of the file with the complete webhook event payload. For example, `/github/workflow/event.json`.
`GITHUB_WORKSPACE`	The GitHub workspace directory path, initially empty. For example, `/home/runner/work/my-repo-name/my-repo-name`. The actions/checkout action will check out files, by default a copy of your repository, within this directory.
`GITHUB_SHA`	The commit SHA that triggered the workflow. For example, `ffac537e6cbbf934b08745a378932722df287a53`.
`GITHUB_REF`	The branch or tag ref that triggered the workflow. For example, `refs/heads/feature-branch-1`. If neither a branch or tag is available for the event type, the variable will not exist.
`GITHUB_REF_NAME`	The branch or tag name that triggered the workflow run.
`GITHUB_REF_PROTECTED`	`true` if branch protections are configured for the ref that triggered the workflow run.
`GITHUB_REF_TYPE`	The type of ref that triggered the workflow run. Valid values are `branch` or `tag`.
`GITHUB_HEAD_REF`	Only set for pull request events. The name of the head branch.
`GITHUB_BASE_REF`	Only set for pull request events. The name of the base branch.
`GITHUB_SERVER_URL`	Returns the URL of the GitHub server. For example: `https://github.com`.
`GITHUB_API_URL`	Returns the API URL. For example: `https://api.github.com`.
`GITHUB_GRAPHQL_URL`	Returns the GraphQL API URL. For example: `https://api.github.com/graphql`.
`RUNNER_NAME`	The name of the runner executing the job.
`RUNNER_OS`	ジョブを実行しているランナーのオペレーティングシステム。取り得る値は`Linux`、`Windows`、`macOS`のいずれか。
`RUNNER_ARCH`	The architecture of the runner executing the job. Possible values are `X86`, `X64`, `ARM`, and `ARM64`.
`RUNNER_TEMP`	ランナー上の一時ディレクトリへのパス。このディレクトリは、各ジョブの開始及び終了時点で空になります。ランナーのユーザアカウントが削除する権限を持っていない場合、ファイルは削除されないことに注意してください。
`RUNNER_TOOL_CACHE`	GitHubホストランナーにプレインストールされているツールを含むディレクトリへのパス。詳しい情報については、「GitHub ホストランナーの仕様」を参照してください。

GitHubにPushしてみましょう。

git add .
git commit -m "add git"
git push

git add .

git commit -m "add git"

git push

GitHub Actionsを確認してみましょう。

なんかエラーになってますね。

git cloneの箇所でエラーになってますね。

Check Outを使わないとできないのかな。

下記をコメントアウトして、もう一度Pushしましょう。

          # 環境変数を利用してのgit操作
          # git clone git@github:$GITHUB_REPOSITORY
          # git checkout $GITHUB_SHA

# 環境変数を利用してのgit操作

# git clone git@github:$GITHUB_REPOSITORY

# git checkout $GITHUB_SHA

git add .
git commit -m "add git2"
git push

git add .

git commit -m "add git2"

git push

GitHub Actionsを確認してみましょう。

今度は、OKですね。

環境変数も確認できますね。

次回

GitHub Actionsをマスターすればもう怖いものなしですね。

次回(があれば)は、よりアドバンスな内容をお届けしたいと思うので、ご期待くださいませ。

それでは、また!

プログラミング記事

月	火	水	木	金	土	日
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

[入門]GitHub Actions ~全てのエンジニアのための備忘録~

GitHub Actionsとは?

ワークフローの作成

GitHub リポジトリの作成

フォルダの作成

Git Push

エラーになった時の挙動

デバッグログの出力

様々なshell

Jobの依存関係

3rd-party Actionを利用する

GitリポジトリをCheckoutする

次回

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

GitHub Actionsとは?

ワークフローの作成

GitHub リポジトリの作成

フォルダの作成

Git Push

エラーになった時の挙動

デバッグログの出力

様々なshell

Jobの依存関係

3rd-party Actionを利用する

GitリポジトリをCheckoutする

次回

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

Kubernetes(k8s)を学ぼう3! Networking編 - Po…

[React]~Admin画面5:ログイン認証とログアウトの実装 ~

[JavaScript]Arrayデータを小分けする(chunk)する方法！

DjangoでGraphQLを学ぼう！〜Mutation〜

[React]~Ambassador画面: React環境構築~

React~基礎編~サイコロアプリケーション

[React]~Admin画面12:Profileの実装~

[Go言語]sync.Poolって結構便利だって気がついた件~初学者向け~

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル