CircleCI2入門② CirlceCIとGitHubを連携させる

その他言語, プログラム

2018.01.07

つぶやく

はてブ

あとで

こんにちは、プログラマーの@Yuuです。

前回の記事でCircleCIで出来ることがザックリ分かったので、今回から実際にコードレベルで話を進めていきます。

今回やる事は

GitHubとCircleCIを連携
GitHubへのpushを検知してCircleCIを作動

上記2点を試していきます。

今回作成するプロジェクトはGitHubに上げてあるので、もし良ければ参考にしてみてください。
CircleCIとGitHubを連携させるためのサンプルプロジェクト

GitHubとCircleCIを連携

GitHubにユーザ登録する部分は割愛します。

CircleCIのTOPページに行き、Sign Upボタンを押下すると
「Sign Up with GitHub」というボタンがあるので押下

Authorize circleciボタンを押下

GitHubのパスワードの入力を求められるので入力、これでCircleCIにログイン完了。

読み込みたいアカウントの「Add projects」ボタンを押すと、
そのアカウントに紐づくリポジトリの情報を全て読み込んでくれています。

これだけで連携出来るんだ・・とかなり驚き。
GitHubとの連携は数分もかからず出来ますね。

GitHubへのpushを通知してCircleCIを作動

今回「CircleciGithubSample1」という名前のプロジェクトを作成してGitHubにまず上げてみました。

ファイルの構成は一旦以下のようにしました。

$ tree
.
├── README.md
└── index.html

$ tree

├── README.md

└── index.html

まずはCircleCI上でビルド出来るようにしてみます。

CircleCI上でビルド出来るようにする

CircleCIのWeb画面に戻り、setup projectボタンを押下しProjectのセットアップ画面へ。

CircleCIのバージョン・使用する言語を選択すると、参考になる設定ファイル（Sample.yml）はこんなだよ、と提示してくれるみたいです。
今回はCricleCIのバージョンを2、会社と同じNodeを選択したところ以下のようなSample.ymlを提示されました。

# Javascript Node CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-javascript/ for more details
#
version: 2
jobs:
  build:
    docker:
      # specify the version you desire here
      - image: circleci/node:7.10
      
      # Specify service dependencies here if necessary
      # CircleCI maintains a library of pre-built images
      # documented at https://circleci.com/docs/2.0/circleci-images/
      # - image: circleci/mongo:3.4.4

    working_directory: ~/repo

    steps:
      - checkout

      # Download and cache dependencies
      - restore_cache:
          keys:
          - v1-dependencies-{{ checksum "package.json" }}
          # fallback to using the latest cache if no exact match is found
          - v1-dependencies-

      - run: yarn install

      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "package.json" }}
        
      # run tests!
      - run: yarn test

# Javascript Node CircleCI 2.0 configuration file

# Check https://circleci.com/docs/2.0/language-javascript/ for more details

version: 2

jobs:

build:

docker:

# specify the version you desire here

- image: circleci/node:7.10

# Specify service dependencies here if necessary

# CircleCI maintains a library of pre-built images

# documented at https://circleci.com/docs/2.0/circleci-images/

# - image: circleci/mongo:3.4.4

working_directory: ~/repo

steps:

- checkout

# Download and cache dependencies

- restore_cache:

keys:

- v1-dependencies-{{ checksum "package.json" }}

# fallback to using the latest cache if no exact match is found

- v1-dependencies-

- run: yarn install

- save_cache:

paths:

- node_modules

key: v1-dependencies-{{ checksum "package.json" }}

# run tests!

- run: yarn test

yarn ではなくnpm 使うつもりだし最初echoしたいだけなんだけだどな・・と思いつつも一旦ご提示いただんでそのままコピってみます。

Projectのセットアップ画面に書かれいるとおり「.circleci/config.yml」を作成し、

.
├── .circleci
│   └── config.yml
├── README.md
└── index.html

├── .circleci

│ └── config.yml

├── README.md

└── index.html

作成したconfig.ymlに、先ほどのsample.ymlの内容をそのまま記述。

addしてGitHubにpush。
CircleCI上で「Start Build」というボタンがあるのでクリック。

package.jsonもなければ当然yarnの設定もしてないので色々コケまくりですが、GitHubとCircleCIを連携してビルドする、という事が出来ました。

GitHubのpushを検知してCircleCIを作動させる

config.ymlに何か設定を書かないとpushに検知してくれないのかと思っていたのですが、
完全に誤解で1度GitHubと連携させるとpushに自動で検知してくれるんですね。。。

ならば、とにかくechoだけしてみよう！
と思い、config.ymlを以下のように変更

# Javascript Node CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-javascript/ for more details
#
version: 2
jobs:
  build:
    docker:
      # specify the version you desire here
      - image: circleci/node:7.10
      
      # Specify service dependencies here if necessary
      # CircleCI maintains a library of pre-built images
      # documented at https://circleci.com/docs/2.0/circleci-images/
      # - image: circleci/mongo:3.4.4

    working_directory: ~/repo

    steps:
      - checkout
      - run:
          name: Test echo
          command: echo 'hello CircleCI'