こんにちは。
キャスレーコンサルティング LS(リーディング・サービス)部の具志堅です。

今回のブログは、CI/CD環境構築シリーズの第3回目です!
1回目と2回目の記事は、以下のリンクからアクセスできます。
興味がある方は、ぜひご覧ください。

1回目:「CI/CD環境構築・活用 入門編 Google Cloud Platformでの自動デプロイ環境の構築」
2回目:「GCP上にSonarQubeを置いてみる」

今回のブログでは、CircleCI 2.0を使用して
GitHub上のコードを、自動ビルドする
ビルド結果を、Slackへ通知する
指定したブランチでビルドが成功した場合に、Herokuへデプロイする
の3つについて紹介します。

目次

  • はじめに
  • 今回実現する環境のメリット
  • 自動ビルド
      GitHubの設定
    1. CircleCIの設定
    1. 自動ビルド動作確認
  • Slackへの通知
      Slackの設定
    1. CircleCIの設定
    1. Slack通知動作確認
  • Herokuへのデプロイ
      Herokuの設定
    1. CircleCIの設定
    1. GitHubの設定
    1. デプロイ動作確認
  • 反省点
  • まとめ

はじめに

GitHub、CircleCI、Slack、Herokuについて説明します

GitHub

Gitで作成したリポジトリを、ホスティングするサービスです。
コードの公開や共有ができます。

CircleCI

継続的インテグレーション(デリバリー)サービスです。
コミットからデプロイまでのパイプラインを作成し、
継続的な統合/配信を使用して、ソフトウェア開発プロセスを自動化することができます。

Slack

ビジネスを中心としたチャットツールです。

Heroku

Paasの一種で、開発したWebアプリケーションを、簡単に公開することができるサービスです。
デプロイが容易にできると思ったため、今回はHerokuを使用します。

事前に準備していただく五点

    • Git
    • GitHubのアカウント

      以下のリンクから、アカウントを作成することができます。
      https://github.com

    • Herokuのアカウント

      以下のリンクから、アカウントを作成することができます。
      https://jp.heroku.com/

    • テストを実行したいプロダクトコードと、そのテストコード

      プロダクトコードとテストコードは、自由です。
      今回は、Flaskのチュートリアルで出来上がった「マイクロブログ」のソースコードを、使用します。
      https://a2c.bitbucket.io/flask/tutorial/index.html

開発環境

今回は、Amazon Linux AMI release 2018.03を使用しています。

今回実現する環境のメリット

  • GitHubにプッシュした際、自動でビルドを実行することで、バグを早期発見・対処できる
  • Slackなどのチャットツールに通知することで、より早期発見できる
  • バグ対応にかける時間を短縮できるため、生産性や品質アップに繋がる
  • ビルド・デプロイの属人化を、避けることができる

自動ビルド

ここでは、GitHubに変更をプッシュするたびに、CircleCIのビルドを実行させる方法を紹介します。

Githubの設定

GitHubのリポジトリ作成

ソースコードをホストするための、GitHubのリポジトリを作成します。
事前に登録した、GitHubのアカウントでサインインします。
画面右上の「+▼」をクリックして、「New repository」を選択します。

リポジトリ作成ページに遷移しますので、
「Repository name」に好きな名前を入れて、「Create repository」をクリックします。
私は、Flaskのチュートリアルのソースコードをホスティングするため、
「flaskTutorial」という名前にします。

これで、リポジトリの作成が完了です。
作成したリポジトリのページに、遷移します。
今回は、リポジトリとの通信をSSHで行うため、赤枠の部分で「SSH」を選択しておきます。

SSH接続の設定

SSH接続でリポジトリをクローンする場合は、SSH接続の設定を事前にしていただく必要があります。
以下のリンクを参考にすると、スムーズに設定ができます。
参考:SSHでGitHubに接続する

自動ビルドに必要なファイルをGitHubにプッシュ

SSH接続の設定が完了したら、
開発環境の任意のディレクトリでgit clone [url]を実行します。
[url]の部分は、クローンしたいリポジトリページの赤枠の内容をコピーして置き換えます。

作成されたリポジトリのディレクトリに移動して、
準備しておいたプロダクトコード・テストコードなどを配置します。

次に、CircleCIでCIを実行するために必要なディレクトリと、設定ファイルを作成していきます。
リポジトリ直下に.circleciというディレクトリを作成して、config.ymlというファイルを配置します。

CircleCIは、config.ymlの内容をもとに、ビルドを実行します。
プロダクトコードやテストコードに間違いがなくても、
config.ymlに間違いがあるとビルドエラーになるため、注意が必要です。

今回、私が用意したconfig.ymlは以下になります。

設定ファイルの解説

  • jobsjobを書くところ
  • linttest jobの名前
  • Docker stepsを実行するDockerの設定を書くところ
  • image 使用するDocker Imageの指定を書くところ
    CircleCI2.0からは、CircleCIがコンテナを立ち上げてその中でテストを実行します。
    ここでは、CircleCIが管理しているDocker Imageを指定しています。
  • checkout実行するコードをGitHubから取得している
  • runコンテナで実行するコマンドを書くところ
  • pathtestの詳細を保存するパスの指定
  • workflowsworkflowを書くところ
  • lint-and-testworkflowの名前
  • requires条件を書くところ


準備ができたら、用意したソースコードと作成したconfig.ymlをリモートリポジトリにプッシュします。

これでGithubの設定は完了になります。

CircleCIの設定

CircleCIアカウント登録

ここからはCircleCIで行う設定について説明します。
GitHubはログインの状態で、以下のURLにアクセスします。
https://circleci.com/signup/

アカウントを確認して、「Authorize circleci」をクリックします。

プロジェクトの設定

CIを実行したいプロジェクトを、選択します。

「Set Up Project」をクリックします。

自動ビルド動作確認

OSと言語に、間違いはないか確認します。
今回は、config.ymlを事前に準備したため、そのまま「Start building」をクリックします。

ビルドが開始して、ワークフローページに遷移します。
画面右の赤枠の文字は、Gitのコミット識別番号でクリックすると
Githubのコミット詳細ページに遷移することができます。
どこを変更したのかすぐに確認できるため便利です。

画面左の赤枠をクリックすると、ビルドのワークフロー詳細ページに遷移することができます。
どのジョブで失敗したのかすぐに分かります。

ビルド成功の予定でしたが、残念なことにconfig.ymlに誤字があり、
最初のビルドは失敗してしまいました。

修正後、GitHubにプッシュして、ビルドの成功とリモートへのプッシュを起点として
CIが無事動作することを確認できました。

コミット識別番号から遷移したGitHubのコミット詳細ページ

ビルド成功時のCircleCIワークフロー詳細ページ

ビルド失敗時のCircleCIワークフロー詳細ページ
lintで落ちているため、後続のtestが実行されていないことが分かります。

ジョブページではビルドの詳細な内容を確認することができます。
どこでどのようなエラーが出ているのか知ることができるため、とても便利です。

Slackへの通知

ここでは1つ目に紹介したCircleCIでビルドが実行された際に、
ビルド結果をSlackへ通知する方法を紹介します。

Slackの設定

事前に登録した、Slackのアカウントでサインインします。

今回は、flasktutorialチャンネルにビルド結果を通知します。
サイドバーから、「App」を選択します。

アプリ一覧から、CircleCIを検索してインストールします。

インストールが完了したら、
通知したいチャンネルを選択して「CircleCIインテグレーションの追加」をクリックします。

設定画面に遷移します。
「Webhook URL」の内容は、Circle CIに設定するため、控えておきます。
設定を保存します。これでSlackの設定は完了です。

CircleCIの設定

プロジェクト設定ページの「Chat Notifications」のSlackの設定欄に、
Slackで確認した、「Webhook URL」の内容を入力します。

「Fixed/Falled Only」にチェックを入れることで、
ビルド失敗時のみSlackに通知することができます。

「Save」をクリックして、設定を保存します。
Slackへの通知設定は、これで完了です。

Slack通知動作確認

テストが失敗するように、プロダクトコードを修正してリモートにプッシュしたところ、
CIが実行されて、以下のようにビルドの結果がSlackへ通知されることを確認しました。

CircleCIジョブ詳細ページ

Slackのチャンネル

Herokuへのデプロイ

ここでは、指定したブランチでビルドが成功した場合に、
Herokuへデプロイする方法について紹介します。

Herokuの設定

事前に登録した、Herokuのアカウントでサインインします。
「Create new app」をクリックして、新しいアプリケーションを作成します。

「App name」に、作成するアプリケーションの名前を入力します。
入力した名前は、「CircleCIの設定」で必要になります。

「Create app」をクリックします。
これで、Herokuの設定は完了です。

CircleCIの設定で、Herokuのアプリケーション名のほかにAPIKeyが必要になります。
APIKeyは、以下の手順で確認することができます。
「Account Settings」をクリックします。

ユーザー設定ページで、「APIKey」の内容を控えます。

CircleCIの設定

ワークフローページやジョブページから歯車マークをクリックして、設定ページに遷移します。

設定ページに遷移したら、「Environment Variables」をクリックして
Herokuで「App name」に入力したアプリケーションの名前と、
確認したAPIKeyをそれぞれ以下のように登録します。

HEROKU_API_KEY = APIKey
HEROKU_APP_NAME = アプリケーション名
これで、CircleCIの設定は完了となります。

GitHubの設定

WebアプリケーションをHerokuで動作させるためのファイルを作成する

リポジトリ直下に、Herokuで実行するコマンドを記載した、Procfileを作成します。
今回、私が作成したProcfileは以下になります。
flaskrディレクトリに移動して、flaskr.pyのappを実行するということを表しています。

config.ymlにHerokuへデプロイの内容を追記する

jobsに追記したdeployジョブの内容は、
CircleCIに設定したアプリケーション名と、
APIKeyを使用して、Herokuのリモートリポジトリにプッシュするということを表しています。

git push https://heroku:$HEROKU_API_KEY@git.heroku.com/$HEROKU_APP_NAME.git master
の部分で、CircleCIで設定したHEROKU_API_KEYHEROKU_APP_NAME
使用されていることが分かります。

workflowsに追記した内容は、
masterブランチにマージやプッシュがされたときに、
testが成功したら、deployを実行するということを表しています。

また、今回はPythonのアプリケーションをデプロイするため、
Pythonのバージョンを指定するruntime.txt、
依存しているライブラリの内容を記載するrequirements.txtの
2つのファイルもリポジトリ直下に作成しました。

ライブラリをインストール際に、
requirements.txtからまとめてインストールするように、config.ymlも修正しました。

デプロイ動作確認

「GitHubの設定」で加えた変更を、リモートリポジトリにプッシュします。
masterブランチにプッシュするため、testが通ればdeployが実行されます。

CircleCIのワークフローページから、以下のようにdeployが成功していることを、
確認することができます。

https://[アプリケーション名].herokuapp.comにアクセスします。
以下のように、ログイン・ログアウト・ブログの投稿ができることを確認しました。

反省点

デプロイしたマイクロブログですが、時間が経つと投稿した記事が消えてしまいました。

調べたところ、HerokuでSQLiteを使用する場合は、
24時間ごとにデータベースの内容が消えてしまうようです。

マイクロブログでは、SQLiteを使用しているため、そのことが原因だと思います。

今後は、初めてのことにチャレンジする際は、事前に下調べをすることを改めて学びました。
同じことが起こらないように、今回経験した失敗を活かしていきたいと思います。
https://devcenter.heroku.com/articles/sqlite3

まとめ

ビルドやデプロイを自動化することで、
より開発に集中することができるようになり、生産性や品質のUPに繋がります。

バグが発生しても、チャットツールへの通知機能を利用することで早期発見できたり、
CircleCIからビルド実行時の内容も確認できるため、
いつどこで何が原因でバグが発生したのか特定しやすくなります。

早期発見・対処が可能になるため、バグ対応にかかる時間を削減できます。

また、CircleCIはサーバーを立てる必要がなく、
GitHubやBitbucketのアカウントがあればすぐに利用できます。

ブログ執筆を通して、CIの良さを知ることができました。
実務でも利用できたら良いなと思います。

以上です。
最後までお読みいただきありがとうございました。

具志堅 弘晃
CSVIT事業部 LS部 具志堅 弘晃
Salesforceを使用したコールセンターサポートシステムの運用保守の案件に携わっています。今回、書こうと思ったきっかけは、CIについて学びたかったからです。