CircleCIやってみた！
はじめましてのご挨拶
こんにちは、無類の猫好きの者です。現在、我が家には3匹の女の子🐈️🐈️🐈️がおり、猫種としては上の子から、スコティッシュフォールド（10才）、アメリカンカール（7才）、ブリティッシュショートヘアー（3才）です。自由気ままに生きる彼女たちにいつも癒やされながら生活しております🐈️
初めての投稿というわけで、今回はCI/CDツールの雄、CircleCIの始め方を初心者向けにアカウント作成から、簡単なパイプラインの構築・実行・結果確認をご紹介したいと思います。
CircleCIとはなんぞや？
もっと安心して、もっと効率的に開発を進めたいなって思ったことはありませんか？
CircleCIは、開発フローを自動化し、より効率的で信頼性高くCI/CDを実現するプラットフォームです。
ビルド・テスト・デプロイの自動化を実現し、これによりバグを早期に発見したり、手作業によるミスを減らしたり、一貫性のあるビルドを実現することで品質の高いソフトウェアを維持できるようになります。
詳しくは、こちらのページも参照ください。
アカウント作成
なんといってもアカウントがないと何も始まらないので、以下のリンクにアクセスしてアカウントを作成しましょう。
上記ページから「サインアップ」ボタンを押下して、Emailアドレス、パスワードを作成し、いくつかの質問に答えてアカウントを作成してください。ログインが出来たら次に、 Start a new organizationに表示されているGet Startedをクリックして、Organization（組織）名を作成してください。※名前は任意のもので大丈夫です
公式のSign upドキュメントはこちらになります。
GitHubのレポジトリを用意
一旦、CircleCIの画面から離れてGitHub上にレポジトリを作成しましょう。
CircleCIがお試し用のレポジトリをいくつか用意してくれているので、試しにをこれ↓を使います。
自分のGitHubのアカウントへ上記レポジトリをFork（コピー）してみましょう。
下記のForkと表示されているところをポチッと押して「Create fork」してください。
config.ymlの設定
CircleCIでCI/CDパイプラインを構築する上で、最も重要なファイルが config.ymlです
プロジェクトのビルド、テスト、デプロイなどといった一連の処理をCircleCIに指示をするための設計書のようなものです。
それでは、forkしたリポジトリを使って設定ファイルconfig.ymlを作成していきたいと思います。
今回使用しているリポジトリには、すでにCircleCIでconfig.ymlファイルが、.circleci/config.ymlに配置されているのでそれをそのまま使いたいと思いますが、一から自分で作成する場合は、リポジトリのルート直下に.circleci/config.ymlを作成してください。
なにやら用意されているサンプルのコンフィグファイルを見てみると複雑なことやってそうに見えますが、今回は超簡単に動作を確認したいだけなので難しいことは考えず、すでに存在するconfig.ymlを上書きしてhello worldの出力と、用意されているテストを動かしてみたいと思います。
GitHub上で、すでにあるconfig.ymlにアクセスして、下記のものにまるっと上書きしてください。
version: 2.1 # CircleCIのコンフィグファイルのバージョン
jobs: # ジョブの定義
my1stjob: # ジョブ名
docker: # 使用するDockerイメージの指定
- image: cimg/node:14.13.0 # Node.jsがプリンターされたDockerイメージを指定
steps: # ジョブ内で実行するステップの定義
- checkout # リポジトリのソースコードをチェックアウト
- run: # コマンド実行①
name: echo hello world # ステップ名（CircleCIの画面に表示される）
command: echo "hello world" # 「hello world」を出力
- run: # コマンド実行②
name: Install dependencies # ステップ名（CircleCIの画面に表示される）
command: npm install # npm install コマンドで依存関係をインストール
- run: # コマンド実行③
name: Run Tests # ステップ名（CircleCIの画面に表示される）
command: npm run test # 「npm run test」コマンドでテストを実行
workflows: # ワークフローの定義
my-1st-workflow: # ワークフロー名
jobs: # ワークフロー内で実行するジョブ
- my1stjob # jobsで定義された「my1stjob」を実行
定義している内容をざっくりと説明すると、先ずは指定されたDockerイメージを使って連携先のGitHubのリポジトリ（今回だとcircleci-demo-javascript-react-app）をCheckoutして、その後に「hello world」を出力（コマンド実行①）、その後は、テストを走らせるために必要なnpmをインストール（コマンド実行②）して、テストを実行（コマンド実行③）させています。
※それぞれがなにをやっているかは、コメントもあわせてご参照ください。関連ドキュメントはこちら。
後、YAMLの文法解析はPipeline実行時にCircleCIがやってくれますが、もし、事前に自分で確認したい場合は、簡単にチェックできるこういったサイト↓も利用してみてください。
Online YAML Parser
CircleCIと連携
ここからはCircleCIの画面を操作して、GitHubとCircleCIを連携させていきたいと思います。
まずはProjectの作成です。画面左端のナビゲーション・メニューの「Projects」をクリックして、右上にある+Create Projectをクリック。
What would you like to do in your project? と表示された画面に遷移されるので、Build, test, and deploy your software applicationをクリック
Enter project details画面でプロジェクト名をつけてNext: set up a pipeline →をクリック
Let's get a pipline setup画面に遷移されるので、パイプライン名をつけてNext: choose a repo →をクリック
Let's choose a repo for your pipeline画面で+Addボタンをクリックして、 GitHubを選択してAuthorize in Githubをクリック。CircleCIとGitHub Appとのインテグレーションアクセス許可の画面がでてくるので許可をする。
その後、CircleCIとGitHubが連携されて、連携したGitHubアカウント上のレポジトリが表示されるので先程forkしたレポジトリcircleci-demo-javascript-react-appを選択してNext set up your confg →ボタンをクリック
Let's define what runs in your pipeline画面で、一つ前の手順で作成したconfg.ymlファイルが表示されるので、Next: set up triggers →をクリック
トリガー条件を設定する画面Let's set up your triggersに遷移するので、デフォルトで設定されているAll pushesのままNext: review and finish setup →をクリック
設定確認画面Review your setupに遷移するので、問題なければFinish setupをクリック。
これでパイプラインが動く準備は万全ですね！でも、今の状態だとPushイベントが発生しないとパイプラインが実行されないので、GitHubに戻って、先程のconfigファイルのコメント部分になんでもいいので文字を入力→commitしてPushイベントを発生させてみましょう！
Pipleline実行結果の確認
Pushイベントをトリガーにパイプラインが実行されていると思うので、CircleCIの画面で確認してみましょう！
CircleCIのUI左端のナビゲーションメニューのProjectsを選択して、プロジェクト一覧画面で作成したプロジェクト名の横にあるPipelinesをクリック！
おおー、なんか動いてる！作成したパイプラインのステータスがRunningになってると思います。
試しにStatusのRunning（すでにジョブが完了している場合はSuccess）をクリックして、その後にジョブをクリックしてジョブの実行結果見てみましょう！
config.ymlで設定されたステップがステップ毎に確認できますね〜。
試しにecho hello worldやRun Testsのステップをクリックしてみると、ステップで出力されたログが確認できると思います。これでもしパイプラインがこけても出力ログからなにが原因でエラーになってるのかUIから簡単に確認できますね！
無事にパイプラインが実行され、結果を確認できましたね！CircleCIを活用することで、開発の効率化と品質向上ができるようになります。是非、より複雑なワークフローや、デプロイの自動化にも挑戦してみてください！
CircleCIを触ってみたいと思った方へのご案内
CircleCIについてもっと知りたい方は、こちらからお問い合わせいただけます。
また、すぐに使ってみたい方は無料サインアップもご利用いただけます。
Happy building!
Discussion