2019/10/29 CircleCIでCI入門

この資料は、以下のハンズオン勉強会で行なった際の資料です。

2019/10/29 【生配信ハンズオン】CircleCIでCI入門【サポーターズCoLab】
https://supporterzcolab.com/event/973/

リンクなどを参照したい場合、google slideのURLにアクセスください。
https://docs.google.com/presentation/d/1jNlulsjq-fTxOs4mFCc08zAEyWdrk6lsh4dxrDn3AJQ/edit#slide=id.g7052cecbf3_2_223

Transcript

2. 自己紹介 宇山慎二
 Webアプリケーションエンジニア
 Ruby, Python, JavaScript(React.js)

3. 宣伝(ダイレクトマーケ) サポーターズで転職！ 2017年12月 金融システム開発→Webアプリ開発
4. アジェンダ 1. CIについて 2. CircleCIについて 3. CircleCIのハンズオン 4. CircleCIのTips 5. まとめ
5. 想定するユーザー像 • CIについて知らないけど、勉強したいと思っている人 • CIを導入したいと思っている人 • CIrcleCIを使えるようになりたい人
6. このハンズオンのゴール CircleCIを使い、Pull Request作成時にテストを実行、 結果を表示するCIフローを作成する
7. CIについて
8. CIについて • CIとは「継続的インテグレーション (Continuous Integretion)」 • もともとCIは「エクストリームプログラミン グ(右の本)」の中で言及された開発手 法の１つ • コードを常にビルド/テストし続けることで 問題の発見を迅速に行い、常にソフト ウェアを健全な状態に保つことを目的と した開発手法
9. CIの活用例. プルリク作成時にテスト/Lint実行
10. CIの活用例. 本番デプロイにテスト/Lintを追加 ECS(AWSのDockerコンテナを本番稼働できるサービス )への自動デプロイフロー
11. CIの活用例. CIエラーとなった場合 Githubのプルリク画面 CIの実行結果を確認できる
12. CIの活用例. CIエラーとなった場合 CircleCIのWebページ CIの実行結果を確認で きる
13. CIを導入するメリット • バグなどのコード品質を落とす事象を、見落とすことなくすぐに 気づける • テスト結果が可視化されるので、テスト作成への意識が高まる
14. CircleCIについて https://brandfolder.com/circleci
15. CircleCIとは • CircleCIは、CIを実現するツールの１つ ◦ CIツールは他にも色々ある ▪ jenkins, Concorse, github actionsなど • CircleCIはSaasサービスで、簡単に導入することができるのが強み
16. CircleCIの料金体系 • 基本無料で利用可能 ◦ 1コンテナ(CIの実行環境の単位)まで無料 ◦ 一部の機能制限あり ▪ CI実行時間(100時間 / 1ヶ月 -> 厳密には25時間/1週間) • 有料プランあり ◦ コンテナを増やせる(並列実行が可能) ◦ など
17. CircleCIのハンズオンの内容
18. ハンズオンのゴール CircleCIを使い、Pull Request作成時にテストを実行、結果を表 示するCIフローを作成する
19. ハンズオンのステップ 1. テストコードの作成 2. GithubリポジトリとCircleCIを連携 3. git push時にテストを実行するCIフローを作成 4. CIの動作を確認 a. テストが失敗する場合のCIの動作を確認 b. テストが成功する場合のCIの動作を確認
20. CircleCIのハンズオン 1. テストコードの作成
21. Github上でリポジトリ作成
22. リポジトリを作成(ローカル環境) # ディレクトリ作成 $ mkdir circle_ci_sample $ cd circle_ci_sample # リポジトリ作成 $ git init . $ git commit -m 'Initial Commit.' $ git remote add origin <自分のリポジトリ.git> $ git push -u origin master
23. CI用のサンプルコード作成 • 作って欲しいコードは以下の2つのファイル ◦ 足し算プログラム(sum.rb) ▪ 引数で受け取った２つの数値 (a, b)の和を返すプログラム ◦ テストコード(sum_test.rb) • プログラミング言語はお好きな言語をご利用ください ◦ Ruby ▪ minitest ◦ Python ▪ unitest ◦ JavaScript ▪ jest, mocha
24. 足し算プログラム例(Ruby, minitest) # sum.rb def sum(a, b) a + b end
25. テストコード例(Ruby, minitest) # sum_test.rb require 'minitest/autorun' require './sum' class TestSum < Minitest::Test def test_sum # ２つの引数の足し合わせた結果を返すこと assert_equal(sum(1, 2), 3) end end
26. テスト実行(Ruby, minitest) $ ruby sum_test.rb Run options: --seed 51231 # Running: . Finished in 0.001738s, 575.3740 runs/s, 575.3740 assertions/s. 1 runs, 1 assertions, 0 failures, 0 errors, 0 skips
27. ブランチを切って、コミット $ git checkout -b feature/sum $ git add . $ git commit -m ‘足し算プログラムとテストの作成’
28. CircleCIのハンズオン 2. GithubリポジトリとCircleCIを連携
29. CircleCIへアクセス • https://circleci.com/ja/ • 右上の「ログインページ」から ログインページへ移動
30. ログイン • Githubアカウントでログインしてください
31. Githubリポジトリと連携 • 「ADD Projects」ページへ移動
32. Githubリポジトリと連携 • 連携するリポジトリに対して「Set Up Project」をクリック
33. CircleCIの初期設定① 1. Linux, Rubyを選択(下に表示されるyamlファイルの設定例が変わるだけなので、 デフォルトで問題なし)
34. CircleCIの初期設定② 2. 試しに「Start build」をクリックして、CIを実行してみる
35. CircleCIの初期設定③ 3. CIが失敗することを確認
36. CircleCIのハンズオン 3. `git push`時にテスト実行するCIフロー作成
37. CircleCIを動かすには？ • CircleCIの設定ファイルが必要 ◦ アプリのルートディレクトリ直下に以下のファイルを配置 ◦ `.circleci/config.yaml` • CircleCIの設定ファイルで、CIの動きを定義できる
38. 今回作成するCIのフロー • ‘git push’時にテストを実行する
39. CircleCIの設定ファイルの内容(Ruby) version: 2 jobs: test: docker: - image: circleci/ruby:2.6.5 working_directory : ~/repo steps: - checkout - run: name: Run test command: ruby sum_test.rb workflows: version: 2 workflows: jobs: - test
40. CircleCIの設定ファイルの内容(Ruby) version: 2 jobs: test: docker: - image: circleci/ruby:2.6.5 working_directory : ~/repo steps: - checkout - run: name: Run test command: ruby sum_test.rb workflows: version: 2 workflows: jobs: - test • version ◦ circleciのversionです ◦ 現状は2系なので「2」で良い です ◦ 最新の2.1系の機能を使いた い場合は「2.1」と指定(2019 年10月時点)
41. CircleCIの設定ファイルの内容(Ruby) version: 2 jobs: test: docker: - image: circleci/ruby:2.6.5 working_directory : ~/repo steps: - checkout - run: name: Run test command: ruby sum_test.rb workflows: version: 2 workflows: jobs: - test • jobs ◦ CIのフローの実行単位 ◦ 実行時の設定を記述する ◦ 例だとテスト(test)を実行する フローです
42. CircleCIの設定ファイルの内容(Ruby) version: 2 jobs: test: docker: - image: circleci/ruby:2.6.5 working_directory : ~/repo steps: - checkout - run: name: Run test command: ruby sum_test.rb workflows: version: 2 workflows: jobs: - test • workflows ◦ jobsで定義したCIフローをどう いった順番で実行するか定義 ◦ 今回はjobsで定義したtestを 実行するように定義
43. CircleCIの設定ファイルの内容(Ruby) version: 2 jobs: test: docker: - image: circleci/ruby:2.6.5 working_directory : ~/repo steps: - checkout - run: name: Run test command: ruby sum_test.rb workflows: version: 2 workflows: jobs: - test • docker ◦ CIフローの実行環境の定義 ◦ CircleCIはDockerを利用 • image ◦ 利用するDockerイメージを指 定 ◦ 「circleci/~~」がCircleCIが公 式に提供しているDockerイ メージ ◦ CicleCI公式Dockerイメージ は、様々な最適化が施されて いるので、使うこと推奨
44. CircleCIの設定ファイルの内容(Ruby) version: 2 jobs: test: docker: - image: circleci/ruby:2.6.5 working_directory : ~/repo steps: - checkout - run: name: Run test command: ruby sum_test.rb workflows: version: 2 workflows: jobs: - test • working_directory ◦ jobを実行するディレクトリ ◦ `~/repo`を指定すれば、アプリ ルートディレクトリへ移動され ます
45. CircleCIの設定ファイルの内容(Ruby) version: 2 jobs: test: docker: - image: circleci/ruby:2.6.5 working_directory : ~/repo steps: - checkout - run: name: Run test command: ruby sum_test.rb workflows: version: 2 workflows: jobs: - test • steps ◦ 実際にCIフローで実行するコマン ドを指定 ◦ checkout ▪ 最新のコードを取得 ◦ run ▪ name • コマンドの名前 ▪ command • 実行するコマンド
46. CircleCIの設定ファイルを作成 • 以下のyamlファイルを作成 ◦ ルートディレクトリ直下に `.circleci`ディレクトリは必要！ $ mkdir .circleci $ touch .circleci/config.yml • 先ほど説明したcircleciの設定ファイルの写経 ◦ コピペすると、インデントがずれて、エラーになるので注意！
47. CircleCIの設定ファイルを作成 • Ruby以外のプログラミング言語を使っている場合 version: 2 jobs: test: docker: - image: circleci/node:13.0.1 # <- 1. 利用するプログラミング言語の imageに修 正 working_directory : ~/repo steps: - checkout - run: name: Install Packages command: npm install # <- 2. パッケージインストール /ビルドが必要なら追加 - run: name: Run test command: npm test # <- 3. テストコマンド修正
48. CircleCIの設定ファイルの設定 • Ruby, Python, JavaScript(Node.js)については、設定例は以下のリポジトリで 共有しています ◦ https://github.com/Ushinji/circle_ci_sample
49. CircleCIのハンズオン 4. CI動作を確認
50. テストが失敗する場合のCIの動作を確認 • まずはじめに、CIが失敗した時の動作を確認する
51. テストが失敗する場合のCIの動作を確認 • テストコードを失敗させるよう、コードを修正 # ./sum.rb def sum(a, b) a # <- Mistake! end
52. テストが失敗する場合のCIの動作を確認 • コミット $ git commit -m ‘テストが失敗するよう修正’ • git push -> CIが実行される！ $ git push origin feature/sum
53. テストが失敗する場合のCIの動作を確認 CircleCIの画面
54. テストが失敗する場合のCIの動作を確認 • GithubでPull Requestを作成 • 以下のようにCIエラーが表示される Pull Request画面
55. • 次に、CIが成功した時の動作を確認する テストが成功する場合のCIの動作を確認
56. テストが成功する場合のCIの動作を確認 • テストコードを成功させるよう、コードを修正 # ./sum.rb def sum(a, b) a + b end
57. テストが成功する場合のCIの動作を確認 • コミット $ git commit -m ‘足し算メソッドの修正’ • 改めて git push $ git push origin feature/sum
58. テストが成功する場合のCIの動作を確認 CIの結果を確認 CircleCI Pull Request画面
59. 以下、時間があれば...
60. CircleCIを使う上でのTips
61. 複数のワークフローを扱う場合 jobs: ~省略~ code-check: ~省略~ steps: - checkout - run: command: bundle install --path vendor/bundle - run: command: bundle exec rubocop workflows: version: 2 workflows: jobs: - test - code-check フローを並列実行
62. 複数のワークフローを扱う場合 workflows: version: 2 workflow: jobs: - build - test: requires: - build - code-check: requires: - build フローを直列実行
63. 特定のブランチへのPushのみ実行させたい workflows: version: 2 workflow: jobs: - deployment: filters: branches: only: production `production`ブランチへPushしたときのみデプロイのCIフローが実行される
64. データベースを使う場合 データベース用のイメージを追加し、連携を行う test: docker: - image: $CONTAINER_IMAGE:test-$CIRCLE_SHA1 environment : RAILS_ENV: test DATABASE_HOST : 127.0.0.1 DATABASE_USER : root DATABASE_PASSWORD : password DOCKERIZE_VERSION : v0.6.1 - image: circleci/mysql:5.7 environment : MYSQL_ROOT_PASSWORD : password
65. 環境変数を使用するには？ 1. config.yamlへ記述 2. CircleCIの専用の設定箇所へ設定 (秘匿情報は必ずここに！) test: docker: - image: circleci/ruby:2.6.5 environment : RAILS_ENV: test DATABASE_HOST : 127.0.0.1 DATABASE_USER : root DATABASE_PASSWORD : password DOCKERIZE_VERSION : v0.6.1
66. CircleCI関連のブログ記事 • CI関連 ◦ Gitプッシュ時にテスト実行・結果通知する仕組みを作る
 ▪ https://ushinji.hatenablog.com/entry/2018/11/14/222943 ◦ ruby on Rails × MySQLなWebアプリにCIを組み込む
 ▪ https://ushinji.hatenablog.com/entry/2018/11/15/235219
 ◦ キャッシュを使ってビルドを効率化
 ▪ https://ushinji.hatenablog.com/entry/2018/11/20/004542 • 本番デプロイ ◦ HerokuへのDockerデプロイ【Vue.js × Ruby on Rails】 ▪ https://ushinji.hatenablog.com/entry/2019/08/03/162309 ◦ ecs-cliを使ったECSへのデプロイ【Ruby on Rails】 ▪ https://ushinji.hatenablog.com/entry/2019/01/02/162805
67. まとめ
68. このハンズオンで学んだことのまとめ • CIについて、導入するメリット • CircleCIについて • CircleCIを使った、テストを実行するCIフローの導入方法
69. 以上です。ありがとうございました！