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

Circleci2入門記事2回目のアイキャッチ

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

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

今回やる事は

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

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

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

スポンサーリンク

GitHubとCircleCIを連携

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

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

GitHubでログインするボタン

Authorize circleciボタンを押下

CircleCIを認証

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

CircleCIにログイン完了

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

GitHub上のプロジェクトの一覧

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

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

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

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

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

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

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


プロジェクトの設定画面

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

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

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

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

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

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


CircleCI上でBuildが出来た

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

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

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

docker部分はいじるのが怖いのでそのままでw

この変更をしたymlファイルをGitHubにpushすると、


echoが表示されている

おぉ!すごい!ちゃんとecho出来てる!
これだけで感動(笑)

あとがき

GitHubとCircleCIを連携させる事が出来ました、ここまでは予想以上に簡単でビックリ。

次は何かしらテストをするか、Lintを実行するかなど、エンジニアらしい事を実行出来るようにしてみようと思います。
内心出来るかな、、、とすごいビクビクですがw

Circleci2入門記事2回目のアイキャッチ

この記事が気に入ったらいいね!
して最新情報をチェックしよう!

スポンサーリンク