(こちらはCircleCI Config SDK + Visual Config Editor | Write config with code or drag and drop!の参考訳です)
CircleCI Config SDK + Visual Config Editor | コンフィグをドラッグ＆ドロップで！
CircleCI コミュニティ・パートナーエンジニアリングチームは、本日(10/20)から早期プレビューを開始した２つの新しいオープンソースプロジェクトについてアナウンスいたします。
プレビュー期間中は前バージョンと互換性のない変更が高い頻度でされる可能性があります
目次
-
Visual Config Editor
- 画面上にCircleCIのコンフィグ要素をドラッグ＆ドロップし、要素間をビジュアルに繋ぎ合わせ、ボタンをクリックすることで、CircleCIのconfig.ymlファイルを生成します。
-
CircleCI Config SDK
- JavaScriptやTypeScriptを使ってCircleCIのコンフィグを生成、管理します(他の言語についても近日公開予定)。
Visual Config Editor
画面上にCircleCIのコンフィグ要素をドラッグ＆ドロップし、要素間をビジュアルに繋ぎ合わせ、ボタンをクリックすることで、CircleCIのconfig.ymlファイルを生成します。
GitHubリポジトリ: GitHub - CircleCI-Public/visual-config-editor: Generate your CircleCI configuration files by building a visual map of your project's workflows.
ライブアプリケーション: Visual Config Editor - CircleCI
動画プレビュー:
機能:
- 複数のWorkflowタブをサポート
- 再利用可能なExecutorやJobを定義、追加
- パラレル、シーケンシャル、分岐などの複雑なワークフローの実行をサポート
- バージョン 2.0 互換の全command(step)をサポート
近日公開予定:
- コンフィグの解析(コンフィグ・ビジュアル間の双方向で作業可能)
- CircleCI 2.1 コンフィグの機能サポート
CircleCI Config SDK
JavaScriptやTypeScriptを使ってCircleCIのコンフィグを生成、管理します(他の言語についても近日公開予定)。
GitHubリポジトリ: GitHub - CircleCI-Public/circleci-config-sdk-ts: Generate CircleCI Configuration YAML from JavaScript or TypeScript. Use Dynamic Configuration and the Config SDK together for live generative config.
ドキュメント: Home · CircleCI-Public/circleci-config-sdk-ts Wiki · GitHub
APIドキュメント: @circleci/circleci-config-sdk
NPMパッケージ: @circleci/circleci-config-sdk - npm
使用例
const CircleCI = require('@circleci/circleci-config-sdk');
// Config インスタンスの生成
const myConfig = new CircleCI.Config();
// 新規 Workflow の作成
const myWorkflow = new CircleCI.Workflow('myWorkflow');
myConfig.addWorkflow(myWorkflow);
// Executor インスタンスの作成
// Executor は Job の中で直接使用可能
// (Config に別途 add する必要はない)
const nodeExecutor = new CircleCI.executor.DockerExecutor('cimg/node:lts');
// Job を作成し、Config に追加
const nodeTestJob = new CircleCI.Job('node-test', nodeExecutor);
myConfig.addJob(nodeTestJob);
// Job に Step を追加
nodeTestJob
.addStep(new CircleCI.commands.Checkout())
.addStep(
new CircleCI.commands.Run({
command: 'npm install',
name: 'NPM Install',
}),
)
.addStep(
new CircleCI.commands.Run({
command: 'npm run test',
name: 'Run tests',
}),
);
// Job を Workflow に追加
myWorkflow.addJob(nodeTestJob);
// `CircleCI.Config` の `stringify()` 関数を呼び出すことで対応する CircleCI YAML を取得
const MyYamlConfig = myConfig.stringify();
上の例を実行すると、変数 MyYamlConfig には次に挙げる CircleCI コンフィグが格納されます:
version: 2.1
setup: false
jobs:
node-test:
docker:
- image: cimg/node:lts
resource_class: medium
steps:
- checkout: {}
- run:
command: npm install
name: NPM Install
- run:
command: npm run test
name: Run tests
workflows:
myWorkflow:
jobs:
- node-test: {}
ドキュメント添付の使用例 や Wiki もあわせてご参照ください。
FAQ
FAQは GitHub Wiki: FAQ · CircleCI-Public/circleci-config-sdk-ts Wiki · GitHub にて公開しています。
ユースケース
Config SDKを使うことで、弊社が思いもしないような素敵な事があなたにはできると信じています。もし、何かアイデアをお探しでしたら、この辺りに取り組んでみてはいかがでしょう？
動的なコンフィグ生成
CircleCIは最近、“セットアップ ワークフロー” 機能をリリースしました。最初に実行されるワークフローにより、２番目以降に引き続き実行されるワークフローが作成され、実行が引き継がれる機能です。現在のところ、この機能はあらかじめ複数のコンフィグファイルを用意しておき、条件に合わせて実行し分けるために使用されているケースが多いようです。
Config SDK を使うことで、最初に実行されるワークフローの実行時に、JavaScriptで実装したロジックに従ってコンフィルファイルを生成し、実行を引き継ぐことができる様になります。
検証用のサンプルはこちらをご覧ください: circleci-config-sdk-ts/sample/01-dynamic-workflow-javascript at main · CircleCI-Public/circleci-config-sdk-ts · GitHub
プライベートな、パッケージ可能な、再利用可能なコンフィグ
コンフィグを見てみた時に、特定のcommandやexecutor, job(あるいはワークフロー全体)を何度となく使用してはいないでしょうか？ しばしば利用するCircleCIコンフィグは、あなたのプロジェクト用に標準のNPMパッケージライブラリー化してみてはいかがでしょう？
CircleCIをお使いでしたら、CircleCI Orbについては既にご存じかと思います。コンフィグをCircleCIネイティブなYAMLコンフィグファイルの形でパッケージ化する仕組みです。
一方、Config SDKを使う事で、CircleCIコンフィグのあらゆる機能を(ワークフロー全体であっても)カプセル化する事ができ、NPMのようなお気に入りのJavaScriptパッケージマネージャー／リポジトリで管理することが可能になります。パッケージマネージャーが持つアクセス管理(チームへのアクセス付与)もご利用いただけます。
ツール
ライブラリには、ブラウザ上で動作するビルドツールとコマンドラインから使用できるツールが用意されています。先ほどご紹介した Visual Config Editor もConfig SDKを使って実装されています。