このたび、CircleCI のビジュアルコンフィグエディター (VCE) がオープンソースプロジェクトとして一般公開されました。VCE を使用すると、CircleCI 設定ファイルの作成や編集を、視覚的なローコード開発環境でドラッグアンドドロップ操作により行うことができます。

VCE は、いわば、CircleCI 設定ファイルの構成要素の編集や設定ファイルの生成ができるノードグラフエディターです。使いやすく効率的なビジュアルインターフェースで、スムーズに CI/CD パイプラインを作成し、CircleCI プラットフォームを操作できます。

VCE を開発した狙いは、パイプライン開発を視覚的な操作で円滑に進められるツールをみなさまに提供することです。Configuration as Code のデファクトスタンダード言語である YAML からの切り替えを進めることが目標ではありません。この記事では、VCE を利用するメリット、VCE の要素や対応機能、一般的なユースケースを紹介し、VCE でパイプラインをセットアップする具体的な手順について説明します。

ビジュアルコンフィグエディターのユースケース

ビジュアルコンフィグエディターには、構成要素の定義と用途の記述をはじめとして、設定ファイルを編集するうえで必要な機能がすべて揃っています。YAML の代わりとなる視覚的要素が豊富に用意されており、ローコードで開発を行うことができます (適切な Orb を使えばノーコード開発も可能です！)。

CircleCI をこれから活用するみなさんにとって、ビジュアルコンフィグエディターには次のようなメリットがあります。

  • YAML を習得や記述しなくても設定ファイルを作成できる
  • 1 クリックで CircleCI Orb にアクセスし、人気の高いサービスとすぐに連携できる
  • タグやブランチフィルタリングを視覚的に管理できる
  • 入力値をリアルタイムで検証できる
  • 設定ファイルの作成を効率化し、自信を持ってパイプラインを組み立てられる

CircleCI に慣れたみなさんにも、ビジュアルコンフィグエディターには次のようなメリットがあります。

  • 変更を簡単に加えられ、YAML ファイル全体を見直す必要がなくなる
  • ワークフローオーケストレーションをプレビューできる
  • プロジェクトの CI パイプラインについて同僚が目で見てわかるように説明できる
  • Orb の高度な機能を手軽に利用できる

ビジュアルコンフィグエディターに備わっている機能

VCE には、パイプライン設定ファイルを作成するうえで必要なものがすべて用意されており、ビジュアライザー、インスペクター、出力 の 3 つのペインで構成されています。

VCE のユーザーインターフェース

ビジュアライザー ペインはノードグラフエディターであり、ここでワークフローの作成や編集を行います。

インスペクター ペインでは、設定ファイルの各種構成要素の作成や確認、編集を行います。

出力 ペインは組み込みのコードエディターであり、設定ファイルが YAML 形式で表示されます。

ビジュアルコンフィグエディターを使用してパイプラインをセットアップする方法

それでは実際の作業の進め方を見ていきましょう。このセクションでは、Vue.js で書かれたサンプルのフロントエンドアプリケーションをテストおよびデプロイするパイプラインを、VCE でセットアップする方法について解説します。解説に沿って実際に作業を行う場合は、Continuous Food Delivery サンプルプロジェクトをフォークして使用してください。ご自身の (できれば Node ベースの) プロジェクトを使用してもかまいません。

準備する

記事の手順に従って VCE でのパイプラインの管理方法を体験する場合は、CircleCI の無料アカウントと Heroku アカウントも必要になります。まだお持ちでない場合は登録してください。Heroku にログインしたら、ダッシュボードに移動し、[New (新規)] をクリックして [Create new app (新規アプリを作成)] を選択します。ここで設定したアプリ名は、後で必要になるのでメモしておいてください。これで、Heroku に必要なセットアップは完了です。

VCE のホームページにアクセスして、VCE で設定ファイルの作成を始めましょう。

テストジョブをパイプラインに追加する

うれしいことに、このプロジェクトで CI を動作させるために必要な作業はほとんどありません。VCE では Orb がサポートされているので、パッケージ化された各種設定ファイルを手軽に利用して、お好みのサービスをプロジェクトに連携できます。VCE で Orb をパイプラインに追加するには、[Orb] の横にある [+] ボタンをクリックして、使用する Orb を選択します。

この例では、Node.js Orb を使用して、ワークフローにテストを追加することにしましょう。Node.js は人気の Orb なので、Orb メニューの先頭に配置されています。この Orb をクリックすると、パイプラインで使用できるジョブ、コマンド、Executor が表示されます。テストジョブを追加するために、node/test ジョブを ビジュアライザー ペインにドラッグします。依存関係のインストールとキャッシュは自動で行われます。ただし、今回の Continuous Food Delivery アプリの場合、実行するテストを node/test ジョブに指示するために、プロパティをいくつか追加する必要があります。

ワークフローステージにドロップした node/test ジョブをクリックして、設定を行います。サンプルリポジトリ内の package.json ファイルに、このプロジェクトのスクリプトについて必要な情報が含まれています。

{
  "name": "sample-javascript-cfd",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint",
    "start": "vue-cli-service serve"
  }

上記コードのとおり、Continuous Food Delivery サンプルアプリにはエンドツーエンドテスト (test:e2e) と単体テスト (test:unit) の 2 種類のテストが用意されています。e2e テストは詳細な設定が必要になるため、今回の node/test ジョブでは run-command パラメーターを test:unit に設定することにしましょう。

サンプルアプリケーションのテスト

デプロイジョブを追加する

パイプラインにテストを追加したことで、自信を持って Heroku にデプロイできるようになりました。次は Orb を検索して、CircleCI 承認済みの Heroku Orb のジョブをインポートしてみましょう。先ほどと同じように、Inspector ペインの [Orb] セクションに移動して、[+] をクリックします。検索バーに「Heroku」と入力して、Heroku Orb を選択します。 次に、heroku/deploy-via-git ジョブを ビジュアライザー ペインにドラッグします。テストジョブをデプロイジョブの実行条件として設定するために、node/test ジョブと heroku/deploy-via-git ジョブをグラフで接続します。具体的には、テストジョブの横にあるノードをクリックしたまま、デプロイジョブにドラッグします。

テストをデプロイジョブに追加する

Heroku でプロジェクトをデプロイするには、Heroku プロジェクトに設定したアプリ名をデプロイジョブで指定する必要があります。冒頭でメモしておいたアプリ名を、このジョブのプロパティの app-name フィールドに入力してください。

Heroku などのサードパーティのサービスに接続する場合、一般的には API キーが必要になります。後でコンテキストに追加する必要があるため、プロジェクトのセットアップの前に Heroku の API キーを取得しておいてください。コンテキスト自体はまだ作成していませんが、Heroku ジョブで cfd-deploy コンテキストを使用するよう設定します。

もう少し手を加えましょう。開発において、コミットのたびにデプロイしたいというケースはあまりありません。リポジトリのmain ブランチに変更が加えられた場合にのみデプロイジョブが実行されるように、Onlyフィルターを = main に設定します。 ブランチを main に設定

パイプラインのジョブを実行するタイミングを制御する方法としては、ブランチフィルタリングという機能を使ったやや高度なものもあります。ビジュアライザー ペイン左上のFilter Target や Valueを指定することで、各種フィルタリングがワークフローに与える影響を視覚的に確認できます。

VCE のフィルタリング機能

すべての手順が完了すると、最終的に生成される設定ファイルは次のようなものになります。

# This configuration has been automatically generated by the CircleCI Config SDK.
# For more information, see https://github.com/CircleCI-Public/circleci-config-sdk-ts
# SDK Version: 0.9.0-alpha.14
# VCE Version: v0.10.0
# Modeled with the CircleCI visual config editor.
# For more information, see https://github.com/CircleCI-Public/visual-config-editor
version: 2.1
setup: false
jobs: {}
workflows:
  build-and-deploy:
    jobs:
      - node/test:
          run-command: test:unit
          pkg-manager: yarn
      - heroku/deploy-via-git:
          context:
            - cfd-deploy
          requires:
            - node/test
          filters:
              branches:
                  only:
                    - main
          app-name: cfd-sample
orbs:
  node: circleci/node@5.0.2
  heroku: circleci/heroku@1.2.6

このサンプルを実際に VCE で開くと、生成された設定ファイルとワークフロー図が表示されます。

パイプラインのビルドが成功するか検証する

設定ファイルの作成が無事に完了しました。これを CircleCI パイプラインで使用するには、フォークしたサンプルプロジェクトにある既存の config.yml ファイルの内容に、生成した設定ファイルをコピー & ペーストします。変更のプッシュ(英語)も忘れず行いましょう。

最後は CircleCI での作業です。プロジェクトを追加する前に、Heroku の認証情報をジョブにセキュアに渡せるように、コンテキストを作成する必要があります。まず、Heroku アプリケーションのページで Heroku トークンを新たに生成します。次に、CircleCI Web アプリで、[Organization Settings (組織の設定)] > [Contexts (コンテキスト)] に移動します。前のセクションで設定した名前 cfd-deploy でコンテキストを作成し、環境変数 HEROKU_API_KEY と API キーの値を追加します。

コンテキストの作成

これで、CircleCI にプロジェクトを追加する準備が整いました。プロジェクトダッシュボードに移動し、サンプルプロジェクトの [Set Up Project (プロジェクトをセットアップ)] ボタンをクリックしましょう。次に、[Use <existing config.yml> in my repo (リポジトリにある <既存の config.yml> を使用する)] を選択します。メインブランチ名を入力し、[Continue (続行)] をクリックします。これにより、セットアップしたパイプラインのビルドがトリガーされます。

パイプラインが想定どおりに動けばビルドに成功し、Heroku でアプリケーションが利用可能になります。お疲れさまでした。ビジュアルコンフィグエディターを使用して、CircleCI 上に自動テスト・デプロイパイプラインを作成できました。

CircleCI でセットアップされたプロジェクト

おわりに

ビジュアルコンフィグエディターは、あらゆるレベルの CircleCI ユーザーが CI パイプラインのオーケストレーションとメンテナンスを行える新しいツールです。初めてのパイプライン構築はもちろん、新しいチームメンバーのオンボーディング、複雑な設定ファイルレビューの円滑化といった場面でも、難解な YAML を相手に余計な苦労をすることなく、CircleCI クラウドプラットフォームならではの強力な機能を余すところなく活用できます。

VCE プロジェクトはオープンソースです。コミュニティのみなさまのご協力を心からお待ちしています。ぜひ、GitHub にあるコントリビューションガイド (英語) をご覧になり、プロジェクトにご参加ください。Discuss の VCE コミュニティのトピックでも、コメントを募集しています。Discord にも VCE のコミュニティがありますので、#visual-config-editor チャンネルでプロジェクトに関するご意見をお寄せください。

もっと高度な Configuration as Code ソリューションを探している方には、VCE の基盤テクノロジーである CircleCI config SDK もおすすめです。CircleCI config SDK の詳細や、この SDK でネイティブの JavaScript または TypeScript から CircleCI 設定ファイルを生成する方法に興味がありましたら、GitHub のオープンソース CircleCI config SDK プロジェクトをぜひチェックしてください。