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

こんにちは、プログラマーの@Yuuです。
前回の記事でCircleCIで出来ることがザックリ分かったので、今回から実際にコードレベルで話を進めていきます。
今回やる事は
- GitHubとCircleCIを連携
- GitHubへのpushを検知してCircleCIを作動
上記2点を試していきます。
今回作成するプロジェクトはGitHubに上げてあるので、もし良ければ参考にしてみてください。
CircleCIとGitHubを連携させるためのサンプルプロジェクト
スポンサーリンク
GitHubとCircleCIを連携
GitHubにユーザ登録する部分は割愛します。
CircleCIのTOPページに行き、Sign Upボタンを押下すると
「Sign Up with GitHub」というボタンがあるので押下
GitHubのパスワードの入力を求められるので入力、これでCircleCIにログイン完了。
読み込みたいアカウントの「Add projects」ボタンを押すと、
そのアカウントに紐づくリポジトリの情報を全て読み込んでくれています。
これだけで連携出来るんだ・・とかなり驚き。
GitHubとの連携は数分もかからず出来ますね。
GitHubへのpushを通知してCircleCIを作動
今回「CircleciGithubSample1」という名前のプロジェクトを作成してGitHubにまず上げてみました。
ファイルの構成は一旦以下のようにしました。
1 2 3 4 |
$ tree . ├── README.md └── index.html |
まずはCircleCI上でビルド出来るようにしてみます。
CircleCI上でビルド出来るようにする
CircleCIのWeb画面に戻り、setup projectボタンを押下しProjectのセットアップ画面へ。
CircleCIのバージョン・使用する言語を選択すると、参考になる設定ファイル(Sample.yml)はこんなだよ、と提示してくれるみたいです。
今回はCricleCIのバージョンを2、会社と同じNodeを選択したところ以下のようなSample.ymlを提示されました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
# 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」を作成し、
1 2 3 4 5 |
. ├── .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を以下のように変更
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
# 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' |
docker部分はいじるのが怖いのでそのままでw
この変更をしたymlファイルをGitHubにpushすると、
おぉ!すごい!ちゃんとecho出来てる!
これだけで感動(笑)
あとがき
GitHubとCircleCIを連携させる事が出来ました、ここまでは予想以上に簡単でビックリ。
次は何かしらテストをするか、Lintを実行するかなど、エンジニアらしい事を実行出来るようにしてみようと思います。
内心出来るかな、、、とすごいビクビクですがw
