CircleCIの新UIでHello Worldしてみた

こんにちは、CX事業本部の若槻です。

現在、CI/CDサービスCircleCIでは新しいユーザーインターフェイス（新UI）が導入されつつあります。

• Introducing our redesigned UI: built for increased user productivity

そこで今回はCircleCIのドキュメントを参考にしつつ、この新UIからHello Worldをしてみました。

CircleCIのサインアップ

まず、ドキュメント[CircleCI を始める]をもとにCircleCIのサインアップを行います。連携させるVCSはGitHubです。

ユーザー登録ページにアクセスします。[GitHun でログイン]をクリックします。

CircleCIに連携するGitHubアカウントへのサインインを求められます。ID・パスワードを入力し[Sign in]をクリックして認証を行います。

CircleCIに付与される権限が示されるので確認したら[Authorize circleci]をクリックします。GitHubの場合はPublicおよびPrivateリポジトリの読み取り/書き込み権限、ユーザーメールアドレスの読み取り権限がCircleCIに付与されるようです。

GitHubのどのorganizationを連携するか選択を求められるので選択します。

すると[Projects]ページが開き、連携したGitHub組織からリポジトリが読み込まれていることがProject一覧から確認できます。ユーザーインターフェイスはすでに新UIになっていますね。

これでCircleCIへのGitHub連携によるサインアップができました。

Hello Worldをしてみる

次に、ドキュメント[Hello World]をもとにCircleCIでHello Worldをしてみます。

まずGitHubで新しいリポジトリを作ります。今回はcircleci-helloworldという名前で作りました。

すると、CircleCIのProject一覧に「circleci-helloworld」リポジトリがProjectとして自動で追加されました。このリポジトリの[Set Up Project]をクリックします。

[Add Config]をクリックします。

Pipeline一覧ページに自動遷移します。circleci-project-setupというブランチのwelcomeというworkflowが2つ開始されています。

GitHubでcircleci-helloworldリポジトリを見ると、circleci-project-setupブランチが作成され、ファイル.circleci/config.ymlが追加されていました。

また、circleci-helloworldリポジトリのデフォルトブランチがcircleci-project-setupブランチに変更されていました。（これはちょっと予想外の動作でした）

circleci-project-setupブランチに作成された.circleci/config.ymlファイルは以下のような内容でした。

# Use the latest 2.1 version of CircleCI pipeline process engine. See: https://circleci.com/docs/2.0/configuration-reference
version: 2.1
# Use a package of configuration called an orb.
orbs:
  # Declare a dependency on the welcome-orb
  welcome: circleci/welcome-orb@0.4.1
# Orchestrate or schedule a set of jobs
workflows:
  # Name the workflow "welcome"
  welcome:
    # Run the welcome/run job in its own container
    jobs:
      - welcome/run

workflowはどちらもSUCCESSとなりました。（なんで２つ走ったんだろう…）

次に、.circleci/config.ymlを以下の内容で更新してコミットします。

version: 2
jobs:
  build:
    docker: # Executor タイプです。他に machine、macOS という実行タイプを指定できます
      - image: circleci/node:4.8.2 # プライマリコンテナです。このなかでジョブコマンドが実行されます
    steps:
      - checkout # プロジェクトのディレクトリにあるコードをチェックアウトします
      - run: echo "hello world" # 「echo」コマンドを実行します

更新とコミットはGitHubのコンソールから行いました。

するとworkflowというworkflowが開始されました。

SUCCESSしたようです。workflowをクリックして開いてみます。

buildというジョブが確認できます。クリックして開いてみます。

buildジョブで実行されたステップが確認できます。exho "hello world"ステップを開いてみると、hello worldが標準出力されていました。

簡単ですがこれでCircleCIの新UIでHello Worldすることができました。

おわりに

以上、CircleCI初級者のわたしが新UIでサインアップからGitHub連携のビルドを行ってHello Worldをしてみるまでの一連の流れでした。

因みにわたしがどのくらい初級者かと言うと、

• 開発のCI/CDツールとしてCircleCIを使ってはいる（半年くらい）
• CircleCI自体のセットアップはしたことがない。自動実行されるWorkflowの成否を見守るくらい
• 使っているCircleCI環境はまだ旧UI。新UIを触ったことはほとんどなかった

くらいには初級者です。引き続きCircleCIを自分で触りまくって"新UIで"使いこなせるようになりたいと思います。

以上