今回はGitLabのパイプラインエディタについて紹介します。
docs.gitlab.com
背景
パイプラインエディタはGitLabのUIから .gitlab-ci.yml
を編集・テストできる機能です。具体的には以下のような機能を提供しています。
Edit
: パイプラインエディタ画面では .gitlab-ci.yml
を直接修正し、コミットすることが可能です。
Validate
: .gitlab-ci.yml
の編集中は、CI/CD パイプラインのベーシックな構文チェックが実行され、誤った箇所を指摘します。また Validate
タブで検証を実施すると、 rules
needs
などのロジックに不適切な部分がないか、より詳細にチェックできます。
Visualize
: Visualize
タブでは、.gitlab-ci.yml
で定義したパイプラインが可視化されます。また include
キーワードを使っている場合は、参照先のファイルも確認できます。
パイプラインエディタは gitlab-ci.yml
に対する構文チェックをリアルタイムで行いつつ、パイプラインの修正を可能にします。GitLabに限らずCI/CDフローの定義ファイルを検証するには、修正後にコミットして実際に動かすことしかチェックできないこともあります。この機能は、実際にテストする前に構文チェックを行い、タイポなど単純なミスに素早く気付くことができます。
検証
今回は pipeline-editor-test
というProjectで検証をしました。
ここでは以下のような .gitlab-ci.yml
を使用します。
stages:
- build
- test
- deploy
build:
stage: build
script:
- echo "This is build stage."
test:
stage: test
script:
- echo "This is test stage."
deploy:
stage: deploy
script:
- echo "This is deploy stage."
パイプラインエディタの表示
パイプラインエディタは ビルド
→ パイプラインエディタ
から表示します。
パイプラインエディタは以下の4つのタブを利用できます。
編集
: ここでは画面上で .gitlab-ci.yml
を編集できます。また編集中に構文的に問題があると、その旨を画面上に表示します。また変更内容をコミットしてパイプラインを起動したり、パイプライン画面にも移動できます。
視覚化
: ここでは .gitlab-ci.yml
の内容を可視化し、視覚的に理解できるようサポートします。例えば .gitlab-ci.yml
に needs
が設定されていると、Job間の依存関係が線で表現されます。また include
を含む場合、対象のファイルに移動もできます。
検証
: ここでは .gitlab-ci.yml
の挙動をシミュレーションし、想定通り動作するか確認できます。
完全な設定
: ここでは 編集
での自動チェックよりもさらに詳細なチェック (ロジックを含む) を行うことができます。
まず 編集
では自動的に .gitlab-ci.yml
の構文チェックを行い、問題があればUIに表示します。
視覚化
では、以下のように各Jobがどのstageで実行されるか表示されます。
検証
では以下のような画面が表示されます。検証時点では デフォルトブランチへのGitプッシュイベント
しか選択できませんが、 パイプラインの検証
を選択します。
すると .gitlab-ci.yml
に対してシミュレートを行い、問題なければ以下のように表示されます。
最後に 完全な設定
では、ロジックを含んだより詳細なチェックを行います。完全な設定
では編集はできず閲覧のみ可能です。
新しいJobを追加する
まずは冒頭紹介した .gitlab-ci.yml
をパイプラインエディタ上で修正する例です。ここでは test
stageに別のJobを追加します。修正後は以下のように、 test
Jobを削除して test01
test02
という2つのJobを追加します。
stages:
- build
- test
- deploy
build:
stage: build
script:
- echo "This is build stage."
test01:
stage: test
script:
- echo "This is test01 job."
test02:
stage: test
script:
- echo "This is test02 job."
deploy:
stage: deploy
script:
- echo "This is deploy stage."
ここで修正中の画面の例を出すと、例えば以下の画像ではJobを定義するときに script:
または trigger:
というキーワードが欠けており、構文エラーであることを表示しています。
これを修正するとエラーは表示されず、代わりにCIの設定が有効であることを表示します。
修正が完了したので、これをリポジトリに反映します。ここでは main
ブランチに向けてコミットします。
コミットするとパイプラインが実行され、パイプラインへのリンクも表示されます。
リンクを押してパイプライン画面に移動し、Jobの実行結果などを確認できます。
Job間に依存関係を与える
続いて needs:
キーワードを使ってJob間の依存関係を設定する場合を見てみます。なお修正前の .gitlab-ci.yml
を可視化すると以下のように表示されます。
ここで以下のように .gitlab-ci.yml
を修正してみます。
stages:
- build
- test
- deploy
build:
stage: build
script:
- echo "This is build stage."
test01:
stage: test
needs: ["build"]
script:
- echo "This is test01 job."
test02:
stage: test
script:
- echo "This is test02 job."
deploy:
stage: deploy
needs: ["test02"]
script:
- echo "This is deploy stage."
needs
キーワードを含むと、視覚化
では以下のように、依存関係にあるJob間に線が引かれます。
なお、パイプライン画面でも ジョブの依存関係
を選択することで依存関係は表示されます。
include でテンプレートを呼び出す
最後に include
キーワードを含む場合を見てみます。include
については以前紹介しました。
techstep.hatenablog.com
パイプラインエディタは include
にも対応しており、include
で利用するファイルの表示、 include
で呼び出したJobを含む.gitlab-ci.yml
の表示などができます。
以下の画像では include-local-test
というProjectをパイプラインエディタで見た場合を表示しています。このProjectでは2つのテンプレートを include:local
で呼び出していますが、 include
を含む場合はテンプレートファイルへの名前が表示され、これを選択すると対象のテンプレートの場所まで画面が遷移します。
また 完全な設定
タブに移動すると、include:local
で指定したテンプレートの内容も含めた .gitlab-ci.yml
の内容が表示されます。ここでは前の画面で表示されていた include:
以降の内容は消え、テンプレートで定義していた test-from-include
deploy
という2つのJobが追加されています。