テストの自動化から安心なサービス、アプリの開発を始めよう

2022年12月2日に開催されたグレープシティ、Hexabaseとの「一気通貫。Webシステム高速開発ウェビナー」の中で、CircleCI から「テストの自動化から安心なサービス、アプリの開発を始めよう」というタイトルでお話しさせていただいた際のスライドです。

https://hexabase.connpass.com/event/267373/

Transcript

1. 1 テストの自動化から 安心なサービス、アプリの開発を始 めよう 一気通貫。Webシステム高速開発ウェビナー 舟木 将彦 (@mfunaki / @CircleCIJapan) CircleCI合同会社 Principal Developer Advocate
2. 2 業務システムの 目指すべきゴール
3. 3 利用者から見るバックエンドとフロントエンド 今の仕事の 進め方 差別化を進める 効 率 化 を 進 め る 質を 変える 量を 変える 高速な バックエンド わかり やすい 情報 提示 実現したい ゴール ★ 効率化を実現する手段： ・スケーラブルなクラウド活用 　ー繁忙期でもクイックなレスポンス ・他システムとの柔軟な連携 　ーサプライチェーン／エンジニアリング 　　チェーン間でコピペさせない 差別化を実現する手段： ・わかりやすいUIの実現 　ー現況の理解をサポート 　ー将来の見通しを可視化 　　（今、行動を変えないとどうなるのか）
4. 4 業務システムへの不満と２つの現実 ・もっとああしてほしい ・こうしてほしい ・世の中のスマホアプリなら 　これくらいできてるのに それ、もう対応したんですが ...ま だ本番環境に反映されて いないみたいですね。 修正結果が他に悪 影響を与えていない か、確認するほうが 大変なんだ。 それ、Continuous Integration (継続的インテグレーション) / CD の出番です
5. 5 業務システムで ビジネスに貢献し続けるには
6. 6 コードの修正から実システムへの反映を一気通貫で自動化 プラン コード ビルド テスト リリース デプ ロイ 運用 監視 継続的インテグレーション (CI) 継続的 デプロイ (CD) 自動化できない 非正常系は 自動化できない 自動化できる→継続的であるために自動化すべき ビジネスが継続する限り、プロジェクトは続く 共有 リポジトリ上 で 常に作業 コード追加・修正時は 常にビルド・テスト (最後にまとめてやらな い→早く失敗すれば 早く品質が安定する) サービス停止せず常時 リリース/デプロイ (失敗時にはクイックに 修正 ／ 前バージョンに 戻せる)しくみ 運用・監視しやすい 品質をコードに反映 (必要なデータの取得、 スケーラビリティの 確保)
7. 7 今回実装／テストするウェブアプリ アプリ：ToDo管理アプリ • ToDo項目を作成(Create)、一覧(Read)、削除(Delete)することが可能。 今回のバージョンでは更新(Update)は範囲に含めない 今日のゴール • Node.js + expressで１ソースでクイックに実装 • コンテナをクラウド(Google Cloud Run)上にデプロイ • ビルド、テスト、リリース、デプロイをCircleCIで自動化 • E2Eテストをmablを使ってレコーディングし、CircleCIから自動実行 • ToDo項目はテキストファイル上に保存する(永続的なストレージの実装は後で 行う)
8. 8 今回のデモに関わる開発プロセス コード ビルド テスト リリース デプロイ
9. ビルド: build_web ジョブをコンフィグ(config.yml)に定義 ビルドジョブは docker コンテナ (CircleCI 作成の Node.js 用)上で実行する →ジョブごとに独立した環境で実行 リポジトリ (GitHub) からコード等取得 パッケージの実体 (node_modules) は パッケージ定義 (package-lock.json) の チェックサムをキーとして (前回までの) ビルドで使用したキャッシュを再利用 足りない／更新されたパッケージを取得 最新のパッケージをキャッシュに保存 ビルド結果を(テストジョブを実行する docker コンテナに)ワークスペース経由 で引き渡す 印刷用資料(デモ解説)
10. テスト: test_web ジョブをコンフィグ (config.yml) に定義 ビルドジョブは docker コンテナ (CircleCI 作成の Node.js 用)上で実行する →ジョブごとに独立した環境で実行 リポジトリ (GitHub) からコード等取得 コードの静的解析テスト (eslint) を実行 し、結果を eslint.xml に保存 テストレポートや テスト結果(アーティファクト)を保存 印刷用資料(デモ解説)
11. リリース: release_web ジョブをコンフィグ (config.yml) に定義 認証やリリース(後のデプロイ)で必要な 情報を環境変数として CircleCI のプロジェクト設定画面から 設定 gcloud CLI に関わる作業を簡潔に、 ミスなく指定するためのツールに CircleCI 作成の gcp-cloud-run Orbを使用 印刷用資料(デモ解説) リポジトリ (GitHub) からコード等取得 実際のリリース (コンテナイメージのビルド＋ コンテナレジストリ gcr.io への 登録)は Google Cloud 側で実行
12. デプロイ: deploy_web ジョブをコンフィグ (config.yml) に定義 印刷用資料(デモ解説) リポジトリ (GitHub) からコード等取得 gcr.io にリリースしたコンテナ イメージを Cloud Run の nodetodo サービスに登録 →外部にウェブサイトを公開
14. E2Eテスト: run_mabl_tests ジョブをコンフィグ (config.yml) に定義 mablのAPIキーをを環境変数として CircleCI のプロジェクト設定画面から 設定 mabl上で作成したテストを自動実行 するためのツールに mabl社作成の trigger-tests Orbを使用 印刷用資料(デモ解説) アプリケーション(nodetodo)に関わる テストをmablクラウド上で デプロイ済みサイトに対して実行し、 テスト結果をCircleCI側に格納
15. 15 縦に伸ばす（自動化実行環境のスペックを上げる） リソースクラスと消費クレジット Docker Executor クラス vCPUs RAM クレジット small 1 2GB 5クレジット/分 medium 2 4GB 10クレジット/分 medium+ 3 6GB 15クレジット/分 large 4 8GB 20クレジット/分 Freeプランでは30,000クレジット/月が無料で付与 (smallクラスなら6000分=100時間に相当) ※月20日換算で一日あたりのジョブ実行時間 5.0時間 https://circleci.com/docs/ja/using-docker#available-docker-resource-classes
16. 16 横に広げる（並列化） 1 5 50 5 45 40 100 60 1 0 30 20 100 1 5 50 60 20 1 0 45 40 30 5 100 50 1 0 45 1 5 60 20 5 40 30 １並列 ３並列 ５並列 1’44” 1’14” 1’09” 1’14” 1’15” 6:20 64クレジット (¢3.84相当) 2’09” 2’09” 2’09” 74クレジット (¢4.44相当) 81クレジット(¢ 4.86相当) https://circleci.com/docs/ja/parallelism-faster-jobs#test-splitting-to-speed-up-pipelines
17. 17 さいごに
18. 活用いただいているお客様＋事例 https://discuss.circleci.com/t/advent-calendar-2021-circleci/42147
19. CircleCIをもっと知りたい！なら 最新の情報なら @CircleCIJapan をフォロー！ #CircleCIJp タグつけて情報共有！ イベント、セミナー、勉強会の情報なら connpassのCircleCIグループから！ https://circleci.connpass.com/ 動画でCircleCIについて学ぶなら CircleCIチャンネルを登録！ (日本語プレイリストもあり )
20. 20 https://qiita.com/CircleCIJapan
21. Thank you. 21