今回はGitLabのパイプラインエディタについて紹介します。

背景

パイプラインエディタは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."

# 追加したJob
test01:
  stage: test
  script: 
    - echo "This is test01 job."
  
# 追加した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"] # needsを追加
  script: 
    - echo "This is test01 job."
  
test02:
  stage: test
  script: 
    - echo "This is test02 job."

deploy:
  stage: deploy
  needs: ["test02"] # needsを追加
  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が追加されています。