✏️

ワークフローの編集環境 [GitHub Actions]

2022/04/29に公開

2件

経緯

普段 GitHub Actions ワークフローの編集は GitHub 上のオンラインエディタで行っているのですが、挙動が怪しくなってしまったので^[1]ローカルで編集することにしました。

せっかくなのでオンラインとローカルそれぞれの編集環境についてまとめてみようと思います。

オンライン

GitHub にはオンラインでファイルを編集する機能があります。
GitHub Actions のワークフローを新規作成する際にも Actions タブの New workflow ボタンからテンプレートを選択するとオンラインエディタへ遷移します。

なぜオンラインエディタ？

オンラインエディタが便利なのは以下の点です。

保存（コミット）したらプッシュまでしてくれる
デフォルトのコミットメッセージがあるので入力不要
ワークフローファイルでは Linter 機能がある
View runs ボタンから実行ログの画面へ遷移できる

シングルクォート (') で囲わないといけないのを指摘してくれる。

Commit changes を押せば入力不要でプッシュまで実行される。

編集が終わったら View runs から実行ログへ。

コミット履歴が…

編集の度にコミットするので当然コミット履歴が汚れます。
コミットメッセージも大体デフォルトのままなので Update workflow.yml になっています。

これは GitHub Acitions をデバッグする上では（nektos/act を使わない限り）避けられないので、サンドボックスリポジトリで編集して完成後に清書するか PR を送るときに git rebase -i するようにしています。

やや不便な点

EditorConfig などの設定に従ってくれないので行末に無駄なホワイトスペースが残ってしまうことがあるのが難点。

ローカル

Visual Studio Code を利用するのがおすすめです。

デバッグは nektos/act を使うか、プッシュしてオンラインで実行ログを確認します。
以降はプッシュすることを前提に環境を構築します。

コミット

Ctrl + Shift + P で Git: Commit を選択してメッセージを入力します。
メッセージの入力が必須なのがちょっと不便。

ファイルの保存をトリガーに自動コミットできると便利なのですがそういう設定はなさそうです。
もし方法をご存知の方がいたら教えてください。

プッシュ

Ctrl + Shift + P で Git: Push を選択します。

プッシュの自動化

Visual Studio Code の設定でコミットされたら自動的にプッシュすることができます。
ただしワークスペース全体に影響してしまうので注意してください。

ファイル > ユーザー設定 > 設定 (Ctrl + ,) を開き、ワークスペースタブを選択します。
Git: Post Commit Command を push にすると自動プッシュしてくれます。

以下のファイルが生成されます。ファイルを直接作成しても問題ありません。

.vscode/settings.json

{
    "git.postCommitCommand": "push"
}

Linter

プッシュの設定だけでも良いのですが Linter も設定しておきます。

EditorConfig

https://editorconfig.org/

拡張機能をインストールして .editorconfig ファイルを用意すれば自動的に適用されます。

.editorconfig

root = true

[*.yml]
charset = utf-8
end_of_line = lf
trim_trailing_whitespace = true
indent_style = space
indent_size = 2
insert_final_newline = true

ワークフロー Linter

https://github.com/rhysd/actionlint

インストール方法は公式ドキュメントを参照してください。
手動で実行しても良いですし Git の pre-commit フックに設定すると便利かもしれません。

YAML Linter

https://github.com/adrienverge/yamllint

好みがあると思うので参考程度に。

.yamllint

---

extends: default

rules:
  brackets:
    min-spaces-inside: 1
    max-spaces-inside: 1
  comments-indentation: disable
  document-start:
    present: false
  indentation:
    spaces: 2
    indent-sequences: true
  line-length:
    max: 160
  truthy:
    check-keys: false

CI でも Lint

余談になってしまいますが CI で Linter を走らせるときは reviewdog を使うと PR の Files changed にコメントしてくれて便利です。

実行ログの確認

ブラウザで Actions タブを開いて確認するか gh run watch コマンドを使用します。

gh run watch は細かいログは見れませんがこんな感じでリアルタイムにステップの状態を表示してくれます。

> gh run watch
? Select a workflow run  [Use arrows to move, type to filter]
> * Update, PHP AST (SnowCait-patch-11) 4s ago


Refreshing run status every 3 seconds. Press Ctrl+C to quit.

✓ SnowCait-patch-11 PHP AST #183 · 2242338383
Triggered via push less than a minute ago

JOBS
- diff in 0s (ID 6219895719)
✓ parse in 16s (ID 6219895790)
  ✓ Set up job
  ✓ Run actions/checkout@v3
  ✓ Run shivammathur/setup-php@v2
  ✓ Run <?php
  ✓ Post Run actions/checkout@v3
  ✓ Complete job
✓ actionlint in 0s (ID 6219898461)

✓ Run PHP AST (2242338383) completed with 'success'

脚注

オンラインエディタのフィードバック先をご存知の方がいたら教えてください ↩︎

Discussion

雪猫

VS Code 拡張機能について書き忘れていた。
GitHub Actions 系の拡張機能いくつかあるみたいだけど、どれがいいんだろうか。

ちなみに自分の環境ではこれが入っていてワークフローの Lint をしてくれてた。
でもドキュメントでは一切触れられてなくて謎。

ここを参照しているみたい。

yaml.schemaStore.enable: When set to true, the YAML language server will pull in all available schemas from JSON Schema Store

これが true になっているからかな？

雪猫

JavaScript action を作る場合は npm の拡張機能を入れておくといいかも。