Help us understand the problem. What is going on with this article?

GitHub+CircleCI入門

More than 1 year has passed since last update.

CircleCIとは

CircleCI はSaaS型のCI/CDサービスです。
CI/CDとは「Continuous Integration / Continuous Delivery」の略であり、ビルドやテスト、デプロイを自動化して継続的に行うものです。
GitHubやBitbucketなどのGitホスティングサービスと連携することで、コードがPushされるなどのトリガーに応じて任意の処理を行うことができます。

今回は、PRを出した時にフロントエンドのテストが走るような設定を行ってみます。

CircleCIでHello Worldしてみる

アカウント登録

まずアカウントを作る必要がありますが、GitHubやBitbucketを既に利用している方は
Signupから「Sign Up with GitHub」や「Sign Up with Bitbucket」で簡単に登録できます。

スクリーンショット 2019-05-18 18.02.54.png

config.yml追加

GitHubで任意のリポジトリを作ったら、CircleCIの設定ファイルを書きます。

CircleCIの設定は、ルート直下に.circleciと言うフォルダを作り、その中のconfig.ymlで行います。
config.ymlに以下を追記してみましょう。

.circleci/config.yml
version: 2.1
jobs:
  build:
    docker:
      - image: circleci/node:4.8.2
    steps:
      - checkout
      - run: echo "hello world"

上記のコードは、以下のことを行っています。
1. circleci/node:4.8.2というイメージを利用したDocker環境を立ち上げ
2. CircleCIがGitHubリポジトリをチェックアウトして上記Docker環境にリポジトリをクローン
3. echo "hello world"を実行

CircleCI上でリポジトリをセットアップ&ビルド

CircleCIのダッシュボードに行き、サイドバーから「ADD PROJECTS」を開き、先ほどのリポジトリを選んで「Set Up Project」します。
Add Projects - CircleCI 2019-05-18 18-30-52.png

設定はそのままで、下の方にある「Start Building」をクリックしてみましょう。
Add Projects - CircleCI 2019-05-18 18-34-40.png

ビルドが開始され、「RUNNING」→「SUCCEED」となったら成功です!
スクリーンショット 2019-05-18 18.36.02.png
スクリーンショット 2019-05-18 18.36.23.png

詳細を見てみると、ちゃんと「Hello World」されています!🎉
CircleCI - CircleCI 2019-05-18 18-40-57.png

CircleCIの設定

Hello Worldもできたので、今回利用するCircleCIの設定について少しだけ見てみます。

version

CircleCIのバージョンです、22.02.1のうちのどれかを指定します。(2019/5/18時点)

commands

commandsは、ジョブで実行する処理を定義しておくものです。
複数のジョブで同じ処理を行いたいときなどに、コマンドの再利用が可能になります。

commands:
  sayhello:
    description: "A very simple command for demonstration purposes"
    parameters:
      to:
        type: string
        default: "Hello World"
    steps:
      - run: echo << parameters.to >>

executors

executorsは、ジョブの実行環境を定義するものです。
複数のジョブで同じ環境を再利用したい時に便利です。

version: 2.1
executors:
  my-executor:
    docker:
      - image: circleci/ruby:2.5.1-node-browsers

jobs:
  my-job:
    executor: my-executor
    steps:
      - run: echo outside the executor

jobs

実行処理の単位です。
以下で説明するWorkflowsを使わない場合は、jobsマップにbuildと言う名前のジョブを用意する必要があります。
buildジョブは、GitHubなどのプッシュをトリガーにしてビルドする際のデフォルトのエントリーポイントです。
stepsの中に実行したい処理を書いていきます。

jobs:
  build:
    docker:
      - image: buildpack-deps:trusty
    environment:
      FOO: bar
    parallelism: 3
    resource_class: large
    working_directory: ~/my-app
    branches:
      only:
        - master
        - /rc-.*/
    steps:
      - run: make test
      - run: make

workflows

workflowsは、複数のジョブを自動化することができます。
以下のサンプルだと、build-deployと言う名前のworkflowがbuild, deploy-stage, deploy-prodの3つのジョブを実行しています。
requireで、ジョブ間の依存関係を明確にしておくことができます。

workflows:
  version: 2
  build-deploy:
    jobs:
      - build:
          filters:
            branches:
              ignore:
                - develop
                - /feature-.*/
      - deploy-stage:
          requires:
            - build
          filters:
            branches:
              only: staging
      - deploy-prod:
          requires:
            - build
          filters:
            branches:
              only: master

設定の詳細は、Configuration Referenceをご覧ください。

サンプルプロジェクト

それでは、いよいよPRをトリガーにしてCircleCI上でフロントエンドのテストが実行されるように設定してみましょう!
「Vueで開発を行っていてPRでテストが走るようにしたい」ということにします。

今回使うプロジェクトを用意

Vueのプロジェクトを作ります。

$ npm install -g @vue/cli
$ vue create circleci-test

プロジェクト作成時にはマニュアルを選び、テストも入れましょう。
スクリーンショット 2019-05-18 19.39.10.png

npm run test:unitでテストが走るのを確認できます。

config.ymlを追加

.circleci/config.ymlを作成します。

.circleci/config.yml
version: 2.1
executors:
  default:
    working_directory: ~/workspace
    docker:
      - image: node:12

commands:
  restore_npm:
    steps:
      - restore_cache:
          name: Restore npm dependencies
          key: npm-{{ checksum "package.json" }}

  save_npm:
    steps:
      - save_cache:
          name: Cache npm dependencies
          key: npm-{{ checksum "package.json" }}
          paths:
            - ~/workspace/node_modules

jobs:
  setup:
    executor:
      name: default
    steps:
      - checkout
      - run:
          name: Install dependencies
          command: npm install
      - save_npm

  lint:
    executor:
      name: default
    steps:
      - checkout
      - restore_npm
      - run: 
          name: Lint
          command: npm run lint
      - save_npm

  build:
    executor:
      name: default
    steps:
      - checkout
      - restore_npm
      - run: 
          name: Build
          command: npm run build
      - save_npm

  test:
    executor:
      name: default
    steps:
      - checkout
      - restore_npm
      - run: 
          name: Test
          command: npm run test:unit
      - save_npm

workflows:
  pull-request:
    jobs:
      - setup
      - lint:
          requires:
            - setup
      - build:
          requires:
            - lint
      - test:
          requires:
            - build

それぞれの設定について詳しく見てみます。

  • executors:
    • working_directory: ワーキングディレクトリを~/workspaceに設定
    • docker: Dockerイメージはnode:12を利用
  • commands
    • restore_npm: package.jsonのハッシュをキーにしてnode_modulesのキャッシュを復元
    • save_npm: package.jsonのハッシュをキーにしてnode_modulesのキャッシュを保存
  • jobs
    • setup: リポジトリをクローンし、npm installを行う。
    • lint: リポジトリをクローンし、npm run lintを行う。
    • build: リポジトリをクローンし、npm run buildを行う。
    • test: リポジトリをクローンし、npm run test:unitを行う。
  • workflows
    • pull-request: setup→lint→build→testの依存関係を持つpull-requestと言う名前のワークフロー

GitHubリポジトリを用意とCircleCIのセットアップ

GitHubでcircleci-testというリポジトリを用意し、先ほどのVueのプロジェクトをPushします。
さらに、Hello Worldの時と同様にCircleCIのダッシュボードに行き、circleci-testをセットアップします。

ブランチを切ってPRを出す

ブランチを切って、PRを作成してみましょう。
PRの画面で、このようにCircleCIが動いていることが確認できます。
スクリーンショット 2019-05-18 20.11.24.png

全て正常に終わると、このようにグリーンになります。
スクリーンショット 2019-05-18 20.14.10.png

CircleCIを見に行くと、テストが通っていることを確認できます。
スクリーンショット 2019-05-18 20.16.23.png

CircleCI便利ですね!🎉

オマケ:CircleCIのコンテナにSSHで入る

CircleCIでは、ビルドしたコンテナにSSHで入ることができます。
デバッグ時にメモリの使用率を見たり、直接色々コマンドを打ちたい時に便利です。

右上の「Rerun workflow」の隣の三角を押して「Rerun job with SSH」を選びます。
CircleCI 2019-05-19 11-19-03.png

するとSSHのコマンドが表示されるので、これをターミナルに打ち込むとSSHで入ることができます、便利!🎉
CircleCI 2019-05-19 11-19-48.png

参考

tatane616
昼寝したりフロントエンド書いたり
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした