社内のSlackで流れてきて知ったのですが、Visual Studio Codeの拡張機能にCircleCIが追加されていたので、早速触ってみました。
リリース日を見てみると2022/11に公開されていたみたいです。
CircleCIとは
CircleCIは、クラウドベースの継続的インテグレーション（CI）および継続的デリバリー（CD）プラットフォームの1つで、 ビルド、テスト、およびデプロイのパイプラインを簡単に構築できるようにするサービスです。
Visual Studio Codeとは
Visual Studio Code (VS Code)は、Microsoftによって開発された無料のオープンソースの統合開発環境(IDE)です。
↓🔰インストールから始める方はこちら🔰↓
Visual Studio Codeをインストールしよう(Mac編) 2023/02/24 改訂版 - Speaker Deck
手順
拡張機能のインストール
次のリンクの拡張機能をインストールしてください。
↓🔰VS Codeで拡張機能のインストールが初めての方はこちら🔰↓
Visual Studio Codeで拡張機能をインストールしてみよう - Speaker Deck
サインイン
拡張機能をインストールしてからCircleCIを表示すると、このような画面が出てきます。 内容を見てみるとサインインが必要そうなので、「Sigin to CircleCI」をクリックします。
パーソナルアクセストークンの登録が必要そうなので、CircleCIの画面からトークを発行します。
CircleCIにアクセスしたら、左下にある自分のアイコンをクリックして設定画面を開きます。
設定画面が表示されたら、「Personal API Tokens」＞「Create New Token」をクリックします。
トーク名を入力します。今回は「vscode」としています。
画面上にトークンが表示されたら、コピーしてVS Codeに戻ります。
VS Codeに戻ったら先ほどコピーしたトークンを貼り付けて「Connect to CircleCI」をクリックします。
接続に成功したメッセージが表示されたら成功です。
プロジェクトの選択
拡張機能でCircleCIを使用するためには、対象にするプロジェクトを選択する必要があります。 まだ、1度も使用したことない方は何も表示されません。
プロジェクトをフォロー(プロジェクトが表示さていない人のみ)
選択したいプロジェクトが表示されていない場合は、CircleCI側でフォローしていない可能性があります。
VS Code上のリンクからCircleCIのプロジェクトを表示して、追加したいプロジェクトをフォローしましょう。
フォロー後に選択肢に表示されない場合は、VS Code自体を再起動してみてください。 コマンドパレットから実行できます。
実行結果を確認
問題なく選択されたこのようにコミットの一覧が表示されます。
他にもワークフローの詳細を見たり、テストやアーティファクトの内容を見たりすることもできるようです。
SSHデバッグ
CircleCIの目玉機能の1つと言えば、SSHデバッグではないでしょうか。この機能を使用することで、実行中のインスタンスに入って詳細な調査をすることができるようになります。
よくアンチパターンと言われがちな、プッシュデバッグをやってしまうのですが、この機能を使用することでそのようなことをすることなく調査できるのでいいですね。
そんな機能をVS Code からでも手軽に使用できるようになっていました。小さくて見えにくいのですが「SSH」と記載された再実行ボタンをクリックすることで実装することができます。
その際にGitHubの認証に使用しているいSSHキーの指定を求められるので、選択します。
無事に成功するとVS Code のターミナルを使用してSSHで接続することができるようになります。
まとめ
開発をしているとVS Codeを中心にあれこれ作業をしたくなるので、他画面に移動する機会を減らしたい派なのですが、この機能はそれを叶えてくれるものでした。
すべての機能がサポートされている訳ではないですが、CircleCIを使用てCI/CDを回していく上での必要最小限な機能はサポートされているのでないかと思っています。今後の機能追加なども楽しみですね。
開発プロジェクトでCircleCIを採用することがあれば、必ずインストールしたいと思える拡張機能の1つになりそうです。
ぜひ、皆さんも触ってみてはいかがでしょうか。
