目次
GitHub Actionsとは
開発ワークフローのすべてのステップを自動化する仕組み。
例えばローカルでESLintをインストールしている場合、npm run eslintのようなコマンドでESLintを実行するが、GitHub Actionsを設定すればGitHubにプッシュされたら自動的にESLintを実行するなどの自動化ができる。
GitHub Actionsの設定方法
まずリポジトリを作成するところから説明するので、GitHubのリポジトリ作成ページからgithub-actions-eslintというリポジトリを作成してください。(ESLintの自動化のサンプルを作成します)
手順はRepository nameにgithub-actions-eslintと入力してAdd .gitignoreをNodeに設定して「Create repository」ボタンを押すだけです。
次にActionsのタブをクリックしてGitHub Actionsに必要な.ymlファイルを作成します。
Actionsのページ内に「set up a workflow yourself」というデフォルトの.ymlファイルを作成するページへのリンクがあるのでこれをクリックします。
「set up a workflow yourself」の遷移先の右上に「start commit」をいうボタンがあるので、これを押して表示されるポップアップの「Commit new file」を押してmain.ymlファイルをコミットします。
GitHub Actionsの.ymlファイルは「.github/workflows/」に保存されています。
git cloneでローカルで確認
前述の.ymlファイルの作成まで完了したら一旦git cloneでローカルに保存して確認します。
git clone https://github.com/[アカウント]/github-actions-eslint.git
git cloneが完了したら「cd github-actions-eslint」で移動します。
github-actions-eslint内の「.github/workflows/main.yml」にGitHubで作成したymlファイルがあるので開いてください。(.githubは不可視フォルダ)
開くと以下のようなコードが確認できます。
# This is a basic workflow to help you get started with Actions name: CI # Controls when the workflow will run on: # Triggers the workflow on push or pull request events but only for the "main" branch push: branches: [ "main" ] pull_request: branches: [ "main" ] # Allows you to run this workflow manually from the Actions tab workflow_dispatch: # A workflow run is made up of one or more jobs that can run sequentially or in parallel jobs: # This workflow contains a single job called "build" build: # The type of runner that the job will run on runs-on: ubuntu-latest # Steps represent a sequence of tasks that will be executed as part of the job steps: # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it - uses: actions/checkout@v3 # Runs a single command using the runners shell - name: Run a one-line script run: echo Hello, world! # Runs a set of commands using the runners shell - name: Run a multi-line script run: | echo Add other actions to build, echo test, and deploy your project.
コメントがたくさんあるので正規表現の「^\s*#.+\n」でコメントと改行を置換して削除してください。
実行すると以下のようになります。
※ 正規表現がよくわからない場合は以下をコピペで問題ないです。
name: CI on: push: branches: [ "main" ] pull_request: branches: [ "main" ] workflow_dispatch: jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Run a one-line script run: echo Hello, world! - name: Run a multi-line script run: | echo Add other actions to build, echo test, and deploy your project.
コメントと空行が削除されてシンプルになりました。
main.ymlの概要
name:
ワークフローの名前です。
ワークフローは、1つ以上のジョブを実行する設定可能な自動化されたプロセスです。
デフォルトだとCI (Continuous Integration) という名前になっています。
on:
on:にはワークフローの実行を引き起こせるイベントが定義されています。
デフォルトのmain.ymlにはpush, pull_request, workflow_dispatchが定義されており、これはプッシュ、プルリク、手動実行のときにワークフローが実行されます。(手動実行についてはあとで説明)
on: push: branches: [ "main" ] pull_request: branches: [ "main" ] workflow_dispatch:
jobs:
ワークフローは1つ以上のジョブで構成されており、それらのジョブはデフォルトでは並列に実行されます。
jobsにはbuild:というジョブがデフォルトであり、build:の配下にあるruns-on:で指定したランナー環境で実行されます。(通常はubuntu-latestを設定しておけば問題ない)
runs-on:の次のsteps:には各ステップの処理を書きます。
main.ymlのsteps:は以下のようになっていますが、これは「uses: actions/checkout@v3」でレポジトリのデータを読み込んだあと、「name: Run a one-line script」を「run: echo Hello, world!」で実行して、次に「name: Run a multi-line script」を「run: | (以下略)」で実行しています。
run:が複数行の場合は「 |」をrun:のあとに追加して複数行の処理を以下のように書きます。
jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Run a one-line script run: echo Hello, world! - name: Run a multi-line script run: | echo Add other actions to build, echo test, and deploy your project.
試しにname: CIから始まるコメントなしのmain.ymlを保存してgit addで追加したとgit commitしてgit pushしてみてください。
git add .github/workflows/main.yml git commit -m "main.ymlのコメントを削除" git push
プッシュが完了したあとにGitHubのActionsを見るとmain.ymlのコメントを削除 CI #2のコミットのrun:のechoの処理などが確認できる。
※ 作成者のアカウントでないとJobsのRun a one-line scriptの部分などを開いて実行結果の詳細を見れないため、ご自身のGitHubアカウントで試して確認してください。
main.ymlでon: => push: => branches: [ "main" ] というmainブランチにプッシュされたらワークフローを実行するよう書いていたので実行されました。
on: push: branches: [ "main" ]
pull_request: も設定したのでプルリクも同じワークフローが実行される。
workflow_dispatch: はイベントではなくワークフローのページのRun workflowのボタンを押して手動で実行する。
背景色が青の箇所には「This workflow has a workflow_dispatch event trigger.」と書かれています。
ESLintをGitHub Actionsで実行する
次にESLintをインストールしてプッシュ後にGitHub Actionsのワークフローで実行できるようにします。
まず以下のコマンドでESLintをインストールする。
ルール設定を簡略化するためにCybozuのESLintルールをインストールしています。
npm init -y; npm i -D eslint @cybozu/eslint-config
次にtouchコマンドで.eslintrc.ymlというファイルを作成します。
touch .eslintrc.yml
.eslintrc.ymlファイルには以下のように書いて保存します。
env: browser: true extends: '@cybozu'
次にESLintで処理するためのJavaScriptファイルをjs/hello.jsで作成します。
mkdir js touch js/hello.js
hello.jsの中身はテストのためセミコロンなしでconsole.log('Hello')と書いてください。
設定したESLintのルールではセミコロンなしだとwarningが表示されます。
console.log('Hello')
次にnpm run eslintコマンドでjsフォルダ内のすべてのJavaScriptファイルを対象にするためにpackage.jsonのscriptsに下記を追加します。
"scripts": {
"eslint": "eslint js/**/*.js"
},
これでnpm run eslintコマンドでESLintが実行可能になりました。
ESLintを実行すると「warning Missing semicolon」とセミコロンがないと警告が表示されます。
ここまでできたら一旦すべてコミットしてください。(pushはまだしない)
git add --all git commit -m "ESLintとhello.jsを追加"
GitHub Actionsでも実行可能にする
GitHub Actionsでもnpm run eslintでESLintを実行するには.github/workflows/main.ymlにnpm ciとnpm run eslintを実行する処理を追加します。(run: echo〜は削除します)
npm ciはpackage-lock.jsonから依存関係をインストールします。
※ npn ciはnpm runを実行するのに必要です。
name: CI on: push: branches: [ "main" ] pull_request: branches: [ "main" ] workflow_dispatch: jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: ci run: npm ci - name: ESLint run: npm run eslint
ここまでできたらコミットしてプッシュしてください。
git add .github/workflows/main.yml git commit -m "main.ymlにESLintの処理を追加" git push
プッシュしたらGitHub Actionsのワークフローのページを開いてください。
main.ymlにESLintの処理を追加 CI #3 が新たに実行されており、ESLintの処理などが確認できます。
ワークフローでwarningはアイコンが変わらない
GitHub ActionsのワークフローではESLintでwarningが発生したとしても⚠️(warning)のアイコンは表示されないです。
もしセミコロンなしをエラー扱いにする場合は.eslintrc.ymlにルールを追記します。
env: browser: true extends: '@cybozu' rules: semi: error
追加したらコミットしてプッシュしてください。
git add .eslintrc.yml git commit -m ".eslintrc.ymlにsemi: errorのルール追加" git push
再びワークフローのページを開いて確認すると、今度はセミコロンなしはエラーを返すようになったのでワークフロー上でもエラーと判定されてアイコンも✅ではなく❌になっています。
まとめ
GitHub Actionsは難しそうに見えるが、GitHub Actionsのタブから「set up a workflow yourself」をクリックしてmain.ymlを作成して、ここに設定を書けばローカルで実行しているnpm runがGitHub Actionsでも簡単に実行できる。
CSSのLinterとしてよく使用されるStylelintなども同様の手順で設定できる。
作成するための手順は少ないので何度か試せばすぐに習得することができるだろう。
今回作成したリポジトリは下記のURLなので、ご参考までに。
https://github.com/iwbjp/github-actions-eslint