Amazon CodeCatalyst で実現！開発環境とCI/CDパイプライン

Slide 1

Slide 1 text

Amazon CodeCatalyst で実現！開発環境とCI / CD パイプライン北海道ガス株式会社　小笠原元気

Slide 2

Slide 2 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. 自己紹介 Genki （小笠原元気）北海道ガス株式会社（2017〜）・Job, Role 　フロントエンド・バックエンド両方やる人　開発チーム(4人)の技術突っ走る担当趣味：旅行・筋トレ最近興味があること：DevOps, SRE ・好きな AWS サービス　Amazon CodeCatalyst, AWS CDK @geivk

Slide 3

Slide 3 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. 北海道ガス株式会社  主要事業内容  本社所在地  従業員数  沿革  1911年設立  ガス事業  電気供給業  ガス機器販売  907名  札幌市東区北7条東2丁目1-1  売上高  1,748億円（連結）  2023年10月7日時点お客さま件数  ガス：600,882件  電力：234,083件  会社概要 

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Amazon CodeCatalyst とは

Slide 6

Slide 6 text

🙅 Amazon Code Catalyst 🙆 Amazon CodeCatalyst

Slide 7

Slide 7 text

引用：https://aws.amazon.com/jp/about-aws/whats-new/2023/04/general-availability-amazon-codecatalyst/ eu-west-1（アイルランド）でも利用可能になっていました

Slide 8

Slide 8 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. Amazon CodeCatalyst が提供するサービス引用：https://aws.amazon.com/jp/codecatalyst/ ソースコードからサービス設定まで、必要なものをほぼすべて備えたブループリントを使用して、新しいプロジェクトを数分で開始できます。  プロジェクト用に完全に構成されたクラウドベースで個人用の開発環境をすばやく作成し、一般的な統合開発環境 (IDE) と連携できます。  継続的インテグレーションおよびデリバリー (CI/CD) パイプラインを簡単に定義し、スケーラブルなマネージドコンピューティング環境で自動的に実行できます。統合されたアクティビティフィード、リアルタイム通知、および共有開発リソースを使用して、効率的にコラボレーションできます。  プロジェクト管理 IDE コラボレーション CI / CD

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. Amazon CodeCatalyst が提供するサービス Issue管理 Slack統合ソースコードからサービス設定まで、必要なものをほぼすべて備えたブループリントを使用して、新しいプロジェクトを数分で開始できます。  プロジェクト用に完全に構成されたクラウドベースで個人用の開発環境をすばやく作成し、一般的な統合開発環境 (IDE) と連携できます。  継続的インテグレーションおよびデリバリー (CI/CD) パイプラインを簡単に定義し、スケーラブルなマネージドコンピューティング環境で自動的に実行できます。統合されたアクティビティフィード、リアルタイム通知、および共有開発リソースを使用して、効率的にコラボレーションできます。  プロジェクト管理 IDE コラボレーション CI / CD 引用：https://aws.amazon.com/jp/codecatalyst/

Slide 11

Slide 11 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. CodeCatalyst を利用するにあたって・AWS Builders ID （≠ AWS マネジメントコンソール）・AWS アカウントは Space の作成時に紐付けが必要になる Space≒組織 Project Project ・Repository ・Workflow ・Dev Enviroments ・AWS Enviroment ・Repository ・Workflow ・Dev Enviroments ・AWS Enviroment

Slide 12

Slide 12 text

Slide 13

Slide 13 text

BluePrint

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. BluePrint or not ? ・とりあえず試してみるには BluePrint が良い・ボタンクリックだけで Workflow, Deploy まで実行できる・チーム開発の時は from Scratch から作成するのがおすすめ・Workflow(後述)の YAML ファイルの参考で使うのもアリ

Slide 17

Slide 17 text

開発環境 - Dev Environments (IDE)

Slide 18

Slide 18 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. 他の人に開発環境を渡す時の悩み Python 入れてください！ Python をパッケージマネージャーで・・・パッケージマネージャがダメならバイナリファイルを・・・ Docker と git と CDK と・・・ Node.js もお願いします main ブランチから git clone してださい何言ってるかわからないしうまく動かない・・・開発にJoin したメンバー（初心者）

Slide 19

Slide 19 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. Dev Enviroments の素晴らしいところ・数クリックでほぼ全部入りの開発環境が立ち上がる - Docker, Helm, AWS CLI, SAM CLI, CDK CLI - Node.js, Python, Go, Ruby, Java, PHP ・指定のブランチから git clone もしてくれる・ネットワークが爆速（npm install とか特に）・localhost もちゃんと繋がる！・ローカルマシンのグローバル環境が汚れない

Slide 20

Slide 20 text

IDE なに使ってますか？🤔

Slide 21

Slide 21 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. VSCode + Remote SSH 2 vCPU, 4GB RAM 16GB Storage VSCode Extention Remote-SSH ローカルマシン Small, Medium, Large, XLarge ・vCPU: 2-16 ・RAM: 4-32GB ・Storage: 16-64GB

Slide 22

Slide 22 text

Slide 23

Slide 23 text

CI/CD パイプライン - Workflow

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. 例：CDK の Workflow - トリガーの設定 Triggers: - Type: PULLREQUEST Events: - OPEN - REVISION Branches: - .* FilesChanged: - filename.txt - src\/.* Type: PUSH, PULLREQUEST Events: OPEN, REVISION Branches: 正規表現可能例： features\/.* FilesChanged: ファイル指定可能 workflow.yaml

Slide 27

Slide 27 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. 例：CDK の Workflow - CI workflow.yaml Test: Identifier: aws/managed-test@v1.0.0 Inputs: Sources: - WorkflowSource Outputs: AutoDiscoverReports: Enabled: true ReportNamePrefix: rpt Configuration: Steps: - Run: run-tests -h ・定型 Actions と GUI から設定するだけ！・デフォルトのテストコマンドから変更する必要はあり・テストレポートも作成できる作成できる

Slide 28

Slide 28 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. 例：CDK の Workflow - CD AWSCDKDeploy: Identifier: aws/cdk-deploy@v1.0.12 Environment: Connections: - Role: RoleName Name: "888899998888" Name: development Inputs: Sources: - WorkflowSource Compute: Type: EC2 Configuration: StackName: StackName ・デプロイ先の AWS アカウント・Role ・StackName を設定する必要あり workflow.yaml

Slide 29

Slide 29 text

CI / CD 󰢧

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. 継続的インテグレーション - テストピラミッド引用：継続的インテグレーションと継続的デリバリーにおけるテストステージ https://docs.aws.amazon.com/whitepapers/latest/practicing-continuous-integration-continuous-delivery/testing-stages-in-continuous-integration-and-continuous-delivery.html

Slide 32

Slide 32 text

ちゃんと考え始めたのは実は半年前

Slide 33

Slide 33 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. なぜテストが必要か？・ソフトウェアの品質を担保できる少人数でやるからこそ必要 → ブランチをマージした時に既存の機能が担保できない・工数は1.5倍〜2倍かかる限られたリソース（人的資源）のなかで、どこまでやるか → フロントエンドは少なめ、バックエンドは重めの比重に開発プロセス上、変更時にテストが通っているか確認が必要

Slide 34

Slide 34 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. CodeCatalyst におけるテスト統合 - Report ・JUnit のレポート出力ができる UnitTest, CoverageTest, BranchTest ・Criteria の設定もできる SuccessCriteria, PassRate, Vulnerabilities… - ESLint の静的解析の結果 → StaticAnalysisBug - Amazon CodeGuru との統合 → StaticAnalysisSecurity

Slide 35

Slide 35 text

Slide 36

Slide 36 text

いつまで手動でデプロイしているんですか？「継続的デリバリー」 Jez Humble, David Farley 2017 より引用

Slide 37

Slide 37 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. 自動デプロイの Pros. / Cons. ・Pros. - オペミスの可能性を防げる - あの人（デプロイ職人）がいないとデプロイできない！がなくなる・Cons. - 自動ロールバックどうするか？ - デプロイ戦略はどうするか？ → 考えることが多くなる（システム要件とエラーの許容度合による） SRE などの観点からもどこまで自動化するかはケースバイケース自動化実装する労力とのトレードオフになる → CodeCatalyst で省力化

Slide 38

Slide 38 text

チーム開発における用途とプラクティス

Slide 39

Slide 39 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. 業務用省エネサービス「Mys3（ミース）」 • 多額の初期投資が必要 • 既設設備の停止期間や大掛かりな工事が必要 • 中小規模向けの選択肢（少機能・低価格）が少ない。 Make your smart solution service Mys（ミース）: スウェーデン語で“楽しい・心地よい” の意最新の技術を活用した多様なサービスで、お客さまの楽しい・心地よいを創造する意図を込めている。業務用のお客さまで省エネ設備を導入する際の課題こうしたお客さまの課題を、デジタル技術を用いて解決北ガスグループ独自開発

Slide 40

Slide 40 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. 当社の開発のカルチャー・エンジニア4人, デザイナー1人+新人, PdO 1人（制約条件多数）運用もエンジニア4人 DevOps, SRE, Feature 開発... 内製プロダクトで PoC → 商用リリースに昇華・Git-Flow を採用・IaC (Infrastructure as Code) として AWS CDK を採用・Linter, Formatter, テストは最近導入した人が少ない中で、できるだけプロダクトの信頼性を上げたい人に依存しがちなため、最大限自動化したい

Slide 41

Slide 41 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. Issue 機能もあるし新しいサービス使うの楽しそうだからやりましょう！ CodeCatalyst の採用に至った経緯本番リリースの１ヶ月前に CodeCatalyst 導入を決定（←！？）・CodeCommit で Issue 機能が欲しい・CodePipeline でマルチアカウントのデプロイ管理をするのがつらい・Github はシステム管理部門との調整ですんなりは使えなさそう CodeCatalyst というサービスがありまして … AWS SA 飯田さん Genki （CDK for Python から Typescript に書き換える作業中）

Slide 42

Slide 42 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. アーキテクチャ運用監視  可視化画面    運用管理画面  お客さま画面  データ連携  分析  保存  　状態管理  収集・処理  ネットワーク  機器接続  AWS IoT Core  Lambda function DyanmoDB IoT Shadow  Amazon   API Gateway  AWS Amplify 認証・認可  Amazon Timestream クエリ  遠隔指令  お客さま  管理者  Amazon Kinesis Data Firehose S3  VPC  AWS Fargate 外部連携          ゲートウェイ  生データ  センサー値  Cognito Aurora Serverless 4G/LTE  連携  SORACOM APIなど  インターネット  設定値  AWS CDK 制御対象デバイス QuickSight 短期データ  中長期データ  AWS X-Ray

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. バックエンドの CI/CD の問題点 dev （開発環境） stage （テスト環境）開発者 git push プルリク作成・承認 cdk deploy（手動） prod （本番環境） CodeCommit Cloud9 Cloud9 cdk deploy Stage 環境のデプロイ用ロールに Switch Role Cloud9 cdk deploy prod 環境のデプロイ用ロールに Switch Role AWS CLI で Switch Role するのがちょっと面倒承認とデプロイが同期されていないためデプロイ忘れが多発オペレーションミスで本番環境にデプロイしてしまったことも・・・

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. バックエンド - CI/CD パイプライン with CodeCatalyst dev （開発環境） stage （テスト環境）開発者 Repo git push Workflow Repo/ Issue プルリク作成 Workflow 承認デプロイデプロイ prod （本番環境）手動テスト（デバイス） Workflow Repo デプロイプルリク作成承認 CodeCatalyst Linter, Fomatter 単体テスト, 結合テスト Linter, Fomatter 単体テスト, 結合テスト（重複するがプルリクから直接参照できるので実施） E2E テスト Device Simulator (Feature Works)

Slide 47

Slide 47 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. フロントエンドの CI/CD の問題点 dev （開発環境） stage （テスト環境） prod （本番環境）開発者 CodeCommit CodePipeline CodeBuild git push ビルドデプロイ手動承認 CodeBuild ビルドデプロイ Amplify Cloudfront Cloudfront CodeCommit プルリク作成承認 CI/CDは問題ないがローカルの yarn dev で2〜3分待たされるのがストレス

Slide 48

Slide 48 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. フロントエンド - CI/CD パイプライン with CodeCatalyst dev （開発環境） stage （テスト環境） prod （本番環境）開発者 Amplify Cloudfront Cloudfront CodeCatalyst Repo git push Workflow Issue プルリク作成 Workflow 承認デプロイ Workflow Repo プルリク作成承認 Dev Environments 快適に yarn dev

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. 開発者体験の向上・バックエンド - Cloud9 / Local から cdk deploy → git push するだけでデプロイ - プルリクの時に自動テスト、Reviewer, Reviewee どちらも安心 - プルリクベースでの承認に変更・フロントエンド - ローカルでの開発用サーバーが格段に早くなった・チームコラボレーション - 直接プルリクに紐づけられるので可視性が高くなった - タスク管理がより楽になった

Slide 51

Slide 51 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. アーキテクチャの変遷 - 2020年 PoC 段階引用：ユーティリティにおける AWS IoTを用いた分析・可視化（北海道ガス株式会社の事例） https://aws.amazon.com/jp/blogs/news/analytics-and-visualization-with-aws-iot-in-utilities/ 1アカウント運用、お客さま提供機能もなく考えることも少なかった

Slide 52

Slide 52 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. アーキテクチャの変遷 - 現在（商用リリース版）運用監視  可視化画面    運用管理画面  お客さま画面  データ連携  分析  保存  　状態管理  収集・処理  ネットワーク  機器接続  AWS IoT Core  Lambda function DyanmoDB IoT Shadow  Amazon   API Gateway  AWS Amplify 認証・認可  Amazon Timestream クエリ  遠隔指令  お客さま  管理者  Amazon Kinesis Data Firehose S3  VPC  AWS Fargate 外部連携          ゲートウェイ  生データ  センサー値  Cognito Aurora Serverless 4G/LTE  連携  SORACOM APIなど  インターネット  設定値  AWS CDK 制御対象デバイス QuickSight 短期データ  中長期データ  AWS X-Ray

Slide 53

Slide 53 text

Copyright Hokkaido Gas Co.,Ltd. - All rights reserved. アーキテクチャの変遷 - DevOps + SRE ・商用リリース後の複雑さ - 人数が少ない制約条件の中、CI/CD によって自動化が必須 - デバイスのキッティング、疎通テスト、OTA アップデートのプロセス・技術的負債の解消 - CDK for Python を TypeScript に移行 - Vue.js を React.js に移行・SRE の第一歩 - そもそも SRE を考え出したのも半年前 - テストの導入 - 今ある機能を正常に動かしつつ、新しい機能を開発しなければいけない

Slide 54

Slide 54 text

Slide 55

Slide 55 text

https://pages.awscloud.com/eib-energy-tech-forum-231012-reg.html?trk=aws_event_page&sc_channel=el AWS IoT を活用した業務用分野におけるエネルギーマネジメントシステムの開発北海道ガス株式会社　國奥広伸 10月12日(木) 9:00〜12:00　

Slide 56

Slide 56 text

2023/11/4(日) にやります！！！！ @北ガスグループ本社ビル（札幌駅から徒歩10分） https://connpass.com/event/295336/

Slide 57

Slide 57 text

Thank you !