初心者必見！ CircleCIでHello Worldしてみよう！

# はじめに
今回はCircleCIでHello Worldを表示するところまでやります！
基本的な使い方がわかれば、応用も効くので、まだ使ったことがない方はぜひご確認ください！

[【YouTube動画】 ご紹介！ CircleCIの超基本！ 設定ファイルの基礎を優しく解説！](https://youtu.be/6uZltaISUvo)
[![ご紹介！ CircleCIの超基本！ 設定ファイルの基礎を優しく解説！](https://img.youtube.com/vi/6uZltaISUvo/0.jpg)](https://www.youtube.com/watch?v=6uZltaISUvo)

# CircleCIの良いところ
CircleCIはテストを自動化し、開発 -> テスト -> リリースのサイクルを早めるためのサービスです！
類似サービスとして、TravisCIやJenkinsといったものもあります。

CircleCIは設定ファイル1つで、すぐにテストできるので、大変使いやすいです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/3501fcc9-9437-fc80-dabf-c024352d05b0.jpeg" width="450px">


# Hello Worldを表示
目標はこちらのように、テスト結果として Hello, World!! を表示するところまでです。
![スクリーンショット 2020-10-30 10.35.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/5c2459bd-bf4f-defd-f972-6eabf3777392.png)


まず、本家にアクセスします。
登録ボタンを押し、GitHubで連携すれば、使えるようになります！
簡単ですね。
https://circleci.com/ja/
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/e9aafefc-3b1e-fed5-58f3-9c13f15830d6.png" width="500px">


アクセスすると、登録しているリポジトリが表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/e4a9ee73-8854-cc8e-304a-1309566099f5.png" width="600px">

リポジトリの右側に表示されている『Set Up Project』を選択すると、config.ymlを選択できる画面に遷移します。
自分の使っている言語のymlファイルをダウンロードして、使うとやりやすいです。
*ただ、今回は1から書いていきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/7cef9461-1f64-f5e4-3583-256713cc86e3.png" width="600px">


以下のようなディレクトリ構成にします。

```
.circleci
 └── config.yml
.gitignore
README.md
```

config.ymlに以下を書きます。
ymlなので、インデントには気をつけてください。

```confi.yml
version: 2.1
jobs:
  test:
    docker:
      - image: circleci/ruby:2.6.3-stretch-node
    steps:
      - checkout
      - run:
          name: echo
          command: echo "Hello, world!!"
workflows:
  test_workflow:
    jobs:
      - test
```

上のコードを追記し、リポジトリにpushするとテストが実行されます。
テスト実行中の様子は、以下にアクセスして確認できます。
https://app.circleci.com/pipelines/github/GitHubのユーザー名

テストが成功すると、STATUSが緑に、失敗すると赤になります。
テストの結果は、WORKFLOWの下のtest_workflowをクリックしていくと見れます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/8eb533d0-036d-5e84-a4a3-1f965439aff7.png" width="500px">

成功したテストは次のようになっています。
『Spin up environment』では、環境の設定をしています。ここで、Dockerのpullも行われています。
『Preparing environment variables』では、環境変数の設定をします。CircleCIのブラウザ上でAWSのキー情報を入れることもできます。別記事で紹介します！
『Checkout code』では、リポジトリのコードをCircleCIのDocker上に取り込んでいます。
最後の『echo』でechoコマンドを実行して、テストが終了します。


![スクリーンショット 2020-10-30 11.09.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/feea72e0-8550-4efa-0f38-fbbb1f77f0f6.png)


# 設定ファイルの項目について
設定ファイルの詳細は次のようになっています。
もっと具体的な利用例については別動画・記事でまとめる予定です！

```confi.yml
version: 2.1 # 設定ファイルのバージョン
jobs:
  test: # job名: 好きな名前を付けれます
    docker: # Dockerを使って環境構築するための宣言
      - image: circleci/ruby:2.6.3-stretch-node # 使用するDockerのイメージ
    steps:
      - checkout # リポジトリのコードをDocker内に持っていく
      - run:
          name: echo # echoという名前で実行する
          command: echo "Hello, world!!"
workflows: # workflowのバージョンも指定できますが、なくても動きます！
  test_workflow: # workflowの名前
    jobs:
      - test # 実行するjobの順番
```


# まとめ
今回はCircleCIの超基本的な部分について紹介しました！
わからない部分やもっと詳しく解説して欲しい部分があれば、追記するので、コメントよろしくお願いします！

[twitter](https://twitter.com/yassun_youtuber)や[youtube](https://www.youtube.com/channel/UCajrdoGzHzDogrNrLYYmGsg/featured?view_as=public)でのコメントもお待ちしています！