2019/10/29 CircleCIでCI入門

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

596ee6e13572bbc630d8004e3b77230b?s=128

shinji.uyama

October 29, 2019
Tweet

Transcript

  1. None
  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は「エクストリームプログラミン グ(右の本)」の中で言及された開発手 法の1つ •

    コードを常にビルド/テストし続けることで 問題の発見を迅速に行い、常にソフト ウェアを健全な状態に保つことを目的と した開発手法
  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を実現するツールの1つ ◦ 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) ▪ 引数で受け取った2つの数値 (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 # 2つの引数の足し合わせた結果を返すこと 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. 以上です。ありがとうございました!