Circle CI環境構築


# はじめに

本記事ではCircle CI初心者の僕が、Circle CIのクラウド環境での実行(gitでpushするたびにテストを実行する)方法についてまとめていきます。

# Circle CIの環境構築

## 1)GitHubとの連携

Circle CIではGitHubとBitbucketの２つのサービスと連携できますが、GitHubとの連携のほうが多いと思うので、こちらでのやり方を記載していきます。

やり方としては**GitHubにログインした状態**でCircleCIのサイトから連携ボタンを押して、手順に沿って作業を進めてください。

## 2)プロジェクトの追加

GitHubでの認証が完了したらGitHubのプロジェクト(リポジトリ)をCircleCIでも作成します。
個人リポジトリかOrganizationリポジトリか、プライベートリポジトリでプロジェクト追加のやり方が異なるようですが、ここでは、個人＋Publicリポジトリでのやり方を記載します。

## 3)CircleCIの実行環境

最終的にはクラウド環境でのCircleCI実行をゴールとします。
そのために,まずはローカル環境での実行から始めていきます。

## 4)ローカルでのジョブ実行

**ジョブ**というのはステップのまとまりのことです。

**ステップ**とはCircleCIで実行されるコマンドのリストのことです。

ジョブを実行することで実行環境をゼロから築いて、終了すると削除するというようにテストを実行することができます。
この辺はCircleCIの入門的な知識なので以下の記事を参考にするとわかりやすいです。

[いまさらだけどCircleCIに入門したので分かりやすくまとめてみた](https://qiita.com/gold-kou/items/4c7e62434af455e977c2)

それではローカルでのジョブ実行をするための環境を作っていきましょう!

### 4-1)Circle CLIのインストール

ローカル環境でのジョブの実行はCircle CLIを用いて行います。
Circle CLIはDockerのコンテナ上で実行されるので、まだDockerをインストールしていない方はインストールしてから行いましょう。
ちなみに、CircleCIではDockerの基礎知識があれば基本的には大丈夫ですので、軽くDockerの触れてから作業することをおすすめしておきます。

それでは以下のコマンドを打ち込んでインストールしていきましょう。

```ruby:ターミナル
~ % curl -fLSs https://circle.ci/cli | bash
```

正常にインストールされると以下のメッセージが表示されます。

```ruby:ターミナル
Starting installation.
Installing CircleCI CLI v0.1.5879
Installing to /usr/local/bin
/usr/local/bin/circleci
```

CircleCI CLIのインストールが完了しました。
が、以下のメッセージが表示されたらアップデートをする必要があります。

```ruby:ターミナル
You are running 0.1.5879
A new release is available (0.1.6949)
You can update with `circleci update install`
```

このメッセージが表示されたら`circleci update install`コマンドを実行し、アップデートを行いましょう。

### 4-2)config.ymlファイルの作成

ジョブを行うためにはアプリディレクトリに`.circleciフォルダ`と、そのディレクトリ内に`config.ymlファイル`を作成する必要があります。
このファイル内にYAML形式で正しい構文を書かないと上部を実行することができません。

以下のコマンドを順に実行しましょう。

```ruby:ターミナル
% mkdir -p .circleci
% touch .circleci/config.yml
```

正常に作成できていたら`ls -al`コマンドで以下を確認できます。

```ruby:ターミナル
total 0
drwr-xr-x 3 xxxxx xxx 96 8 3 18:13 .
drwr-xr-x 20 xxxxx xxx 640 8 3 18:11 ..
drwr-xr-x 2 xxxx xxx 64 8 3 18:13 .circlci
```

このように表示されれば成功です。

### 4-3)config.ymlのバリデーション

CircleCI CLIには文法エラーや設定エラーがないか確認するコマンドが用意されています。
例えばrubyのCircleCIの構文は以下のようなものです。
この表記は公式で用意したものを少しカスタマイズしたものです。
**言語ごとに表記が公式で用意されている**ので確認してみてください。

```ruby:.circleci/config.yml
version: 2.1
orbs:
  ruby: circleci/ruby@0.1.2 

jobs:
  build:
    docker:
      - image: circleci/ruby:2.6.5-stretch-node
    executor: ruby/default
    steps:
      - checkout
      - run: gem install bundler:2.2.3
      - run:
          name: Which bundler?
          command: bundle -v
      - ruby/bundle-install
```

これにバリデーションコマンドを実行してみるといかが表示されます。

```ruby:ターミナル
% circleci config validate
config file at .circleci/config.yml is valid.
```

このように表示されればエラーがなく、正しい文法・設定だということがわかります。
ちなみにエラーだと以下が表示されます。

```ruby:ターミナル
Error:ERROR IN CONFIG FILE
エラーの原因
```

ファイルを作成し、記述したら実行前に１度実行してみましょう！

### 4-4)ジョブの実行

ジョブの実行には`circleci local execute`コマンドを使用します。

```ruby:ターミナル
% circleci local execute
Docker image digest: sha256:9c32926d78c37f0c050a02dd13dc1596b6e4621b1df9362cd51368fb957951a0

# 省略

====>> Preparing environment variables
Using build environment variables:
  BASH_ENV=/tmp/.bash_env-localbuild-1609201012
  CI=true
  CIRCLECI=true
  CIRCLE_BRANCH=
  CIRCLE_BUILD_NUM=
  CIRCLE_JOB=build
  CIRCLE_NODE_INDEX=0
  CIRCLE_NODE_TOTAL=1
  CIRCLE_REPOSITORY_URL=
  CIRCLE_SHA1=
  CIRCLE_SHELL_ENV=/tmp/.bash_env-localbuild-1609201012
  CIRCLE_WORKING_DIRECTORY=~/project

# 省略

Post-install message from sass:

Ruby Sass has reached end-of-life and should no longer be used.

* If you use Sass as a command-line tool, we recommend using Dart Sass, the new
  primary implementation: https://sass-lang.com/install

* If you use Sass as a plug-in for a Ruby web framework, we recommend using the
  sassc gem: https://github.com/sass/sassc-ruby#readme

* For more details, please refer to the Sass blog:
  https://sass-lang.com/blog/posts/7828841

Success!
```

`Success!`と表示されたらローカルでのジョブは成功です。

### クラウドで確認

実行したらGithubで変更をpushしてみましょう。
次にCircleCIのサイトに行って、確認してみましょう。
以下の画像の[success]の部分が[Runnin]になっていたらテストを実行しているということです。
この表示が[Failed]だったら、エラーがあるので、エラーを確認しましょう。
![c8dd22412e019b44a8a74420f056d2a8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/879778/973cc36b-0349-8429-0bde-6c02e3cd7619.png)

以上で環境構築は終了です。

# 参考文献

[『CircleCI実践入門──CI/CDがもたらす開発速度と品質の両立』](https://www.amazon.co.jp/CircleCI%E5%AE%9F%E8%B7%B5%E5%85%A5%E9%96%80%E2%94%80%E2%94%80CI-CD%E3%81%8C%E3%82%82%E3%81%9F%E3%82%89%E3%81%99%E9%96%8B%E7%99%BA%E9%80%9F%E5%BA%A6%E3%81%A8%E5%93%81%E8%B3%AA%E3%81%AE%E4%B8%A1%E7%AB%8B-WEB-PRESS-plus/dp/4297114119)