$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
静的サイトのCI/CDでも侮るなかれ!Docs as Codeに沿ったセキュアな開発プロセスの...
Search
みずほリサーチ&テクノロジーズ株式会社 先端技術研究部
September 21, 2024
Technology
13
2.9k
静的サイトのCI/CDでも侮るなかれ!Docs as Codeに沿ったセキュアな開発プロセスの実践/secure-docsascode-cicd-for-static-sites
「ServerlessDays Tokyo 2024」での登壇資料です。
イベントURL:
https://serverless.connpass.com/event/325659/
みずほリサーチ&テクノロジーズ株式会社 先端技術研究部
September 21, 2024
Tweet
Share
More Decks by みずほリサーチ&テクノロジーズ株式会社 先端技術研究部
See All by みずほリサーチ&テクノロジーズ株式会社 先端技術研究部
AWS CDKでデータリストアの運用、どのように設計する?~Aurora・EFSの実践事例を紹介~/aws-cdk-data-restore-aurora-efs
mhrtech
6
1.3k
Azure Verified Moduleを触って分かった注目ポイント/azure-verified-module-begin
mhrtech
1
960
BLEA v3.0.0の新しいベストプラクティスを取り入れた効率的なAWS CDK開発/jawsug_cdk16
mhrtech
3
640
あなたのアプリケーションをレガシーコードにしないための実践Pytest入門/pyconjp2024_pytest
mhrtech
6
2.8k
Kubernetes でワークフローを組むなら cdk8s-argoworkflow がよさそう!/ cdk8s-argoworkflow is great!
mhrtech
3
1.3k
IaCでセキュリティを強化しよう!~IAMが苦手な開発者でも簡単に権限を絞れる。そう、AWS CDKならね!~/secjaws32
mhrtech
5
2.7k
AWS Control Towerを2年弱運用して得たエッセンスと展望/securityjaws31
mhrtech
1
1.9k
そのリファレンス誰のため?ユーザ活用に向き合う/finjaws31
mhrtech
0
640
AWS CDKにテストは必要?試行錯誤したスクラム開発事例を紹介!/CdkConJp2023
mhrtech
5
6.2k
Other Decks in Technology
See All in Technology
多様なロール経験が導いたエンジニアキャリアのナビゲーション
coconala_engineer
1
130
Kaggleふりかえり会〜LLM 20 Questions & ISIC 2024
recruitengineers
PRO
2
160
ARRが3年で10倍になったプロダクト開発とAI活用の軌跡
akiroom
0
230
日本全国・都市3D化プロジェクト「PLATEAU」とデータ変換OSS「PLATEAU GIS Converter」の公開
nokonoko1203
4
350
ゆるSRE勉強会 #8 組織的にSREが始まる中で意識したこと
abnoumaru
2
1k
開志専門職大学特別講義 2024 オープニング
1ftseabass
PRO
0
220
プロダクトの爆速開発を支える、 「作らない・削る・尖らせる」技術
applism118
10
7.7k
そろそろOn-Callの通知音について考えてみよう (PagerDuty編)
tk3fftk
1
330
241130紅白ぺぱ合戦LT「編集の技術」
toya524287
5
620
乗っ取れKubernetes!!~リスクから学ぶKubernetesセキュリティの考え方~/k8s-risk-and-security
mochizuki875
3
460
総会員数1,500万人のレストランWeb予約サービスにおけるRustの活用
kymmt90
3
2.8k
My Generation 年配者がこの先生きのこるには (Developers CAREER Boost 2024 Edition)/My Generation How elder engineers can survive
kwappa
3
290
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1030
460k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
The Pragmatic Product Professional
lauravandoore
32
6.3k
Building an army of robots
kneath
302
43k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.1k
For a Future-Friendly Web
brad_frost
175
9.4k
A designer walks into a library…
pauljervisheath
204
24k
Facilitating Awesome Meetings
lara
50
6.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
247
1.3M
Building Adaptive Systems
keathley
38
2.3k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Transcript
© 2024 Mizuho Research & Technologies, Ltd. 静的サイトのCI/CDでも侮るなかれ! Docs as
Codeに沿った セキュアな開発プロセスの実践 2024年9月21日 技術開発本部 先端技術研究部 0 ServerlessDays Tokyo 2024 (免責事項) 当レポートは情報提供のみを目的として作成されたものであり、商品の勧誘を目的 としたものではありません。本資料は、当社が信頼できると判断した各種データに 基づき作成されておりますが、その正確性、確実性を保証するものではありません。 また、本資料に記載された内容は予告なしに変更されることもあります。
© 2024 Mizuho Research & Technologies, Ltd. 1 自己紹介 氏名:松尾
優成(Matsuo Yusei) 所属:先端技術研究部 兼 プロジェクト推進部 役割:社内向けAWSプラットフォームの構築・運用 社内コミュニティ「コクリエ」運営 一言:CDK が大好きです!
© 2024 Mizuho Research & Technologies, Ltd. 2 社内AWS共通プラットフォームの概要 •
社内へセキュアなAWSアカウントを迅速に提供するプラットフォーム • マルチアカウント管理に AWS Control Tower と AWS CDKを活用
© 2024 Mizuho Research & Technologies, Ltd. 3 本プラットフォームの詳細な構成は以下で公開中! https://aws.amazon.com/jp/builders-
flash/202405/mizuho-service-catalog/ https://aws.amazon.com/jp/builders-flash/202406/mizuho-account-automation/ ご参考
© 2024 Mizuho Research & Technologies, Ltd. プラットフォームの仕様や利用方法を伝える方法は? • やはり、ドキュメントで利用者向けにガイドすることが重要
• 社員が気軽に参照できるよう、AWS 上で一般的な構成の静的サイトを構築 プラットフォーム初期から運営を支える重要な要素として活用! 4 Route53 WAF CloudFront S3 ACM 社員 自社拠点 https アクセス 静的ファイルを ホスト (自社拠点の IPに制限)
© 2024 Mizuho Research & Technologies, Ltd. 5 話すこと ⚫
Docs as Code の基本概念・利用ツール ⚫ ドキュメントの開発プロセス ⚫ 自動チェック・テストのプラクティス ⚫ 具体的な CI/CD パイプラインの構成・処理 AWS CDK (TypeScript)を 使用しています
© 2024 Mizuho Research & Technologies, Ltd. 6 Documentation as
Code (Docs as Code)とは? 『コーディングと同様のツールでドキュメントを作成する手法』 【特徴】 • Markdown など軽量マークアップ言語のテキストでドキュメントを記述 • Git などのバージョン管理システムでドキュメントを管理 • ドキュメントの変更はコードと同様にレビューと自動テストのプロセスを実行 Docs as Code は生産性・品質の向上につながる!
© 2024 Mizuho Research & Technologies, Ltd. 7 Static Site
Generator (SSG) による HTML ファイルの生成 • Markdown を静的な HTML ファイルに変換するため、SSG が必要 • 簡単にセットアップできるシンプルな SSGとして「MkDocs」を利用 https://www.mkdocs.org/getting-started/ ・検索機能を標準装備 ・拡張機能も豊富!
© 2024 Mizuho Research & Technologies, Ltd. AWS リソース定義 と
Markdown を同一リポジトリで管理 • IaC ツール「AWS CDK」で CI/CD 含む 静的サイトの AWS リソースを定義 8 Markdown + MkDocs 定義 AWS リソース 定義 Git フックで CDK ソースと 同様に Markdown も 自動チェック CDK CodePipeline CloudFront S3 ACM Route53 … CodeBuild CodeConnection …
© 2024 Mizuho Research & Technologies, Ltd. 9 ドキュメント開発プロセスの流れ ローカル
✓Markdownと 図の作成 ✓MkDocs起動/ プレビュー ✓Pre-commitで 静的解析 中央リポジトリ ✓シークレット/ コードスキャン ✓プルリク作成/ テスト実行 ✓レビュー/ マージ CI/CDパイプライン ✓各種ビルド/ テスト実行 ✓静的サイトの デプロイ ✓デプロイ後 テスト CodePipeline
© 2024 Mizuho Research & Technologies, Ltd. 10 ここから開発フローの 各プロセス詳細を紹介!
まずはローカルの プロセスを解説
© 2024 Mizuho Research & Technologies, Ltd. 11 まずは Markdown
でドキュメントを作成 $ mkdocs serve コマンドで サイトのローカルプレビューも可能 Markdown のサンプル HTML のサンプル ビルド 開発プロセス①「ローカル」
© 2024 Mizuho Research & Technologies, Ltd. ツール 特徴 主な用途
図例 Draw.io GUIで作図 作図の融通が利き 綺麗にしやすい ・構成図 ・利用者向けの その他図 ・etc... PlantUML テキストで作図 表現に個人差が 少なく軽量で差分 など管理しやすい ・シーケンス図 ・ユースケース図 ・etc... 12 図の描画では、以下2種のツールを利用 テキストを基に レンダリング 開発プロセス①「ローカル」
© 2024 Mizuho Research & Technologies, Ltd. 13 textlint でテキストファイルの文章校正(Markdown,
PlantUML) • textlint とは、各種ルールに基づいて文章校正を行う静的解析ツール • 認知負荷を低減させるため、記載揺れ設定に独自ルールを追加 PlantUMLを追加 図の表現で不都合なルールは ファイル先頭で無効化 置換ルール PlantUML (.puml) 開発プロセス①「ローカル」
© 2024 Mizuho Research & Technologies, Ltd. 14 husky による
Git コミット時の自動チェック • husky とは、コミットなどの Git フックで任意コマンドを実行できるツール • textlint とその他の静的解析を自動実行することでコミット対象の品質を向上! CDK ソースだけでなく ドキュメントも静的解析 開発者体験の観点からコミット時間に注意(不用意にコマンドを追加しない) 開発プロセス①「ローカル」 コミット前に 変更資産のみ チェック
© 2024 Mizuho Research & Technologies, Ltd. 15 中央リポジトリへプッシュ後のプロセスを紹介! ローカル
中央リポジトリ CI/CDパイプライン 次に…
© 2024 Mizuho Research & Technologies, Ltd. 16 GitHub の機能でセキュリティチェック
• GitHub Advanced Security(GHAS)で 「シークレットスキャン」と「コードスキャン」を有効化 • MkDocs カスタマイズ用の JavaScript ファイルもスキャンされるので安心 機能 スキャン対象 主な検出内容 シークレット スキャン 全ファイルをチェック (Push 時) ・API キー ・アクセスキー ・パスワード ・etc... コード スキャン TypeScript・JavaScriptの コードをチェック (Push・プルリク作成時) ・command-injection ・insecure-dependency ・xss(クロスサイトスクリプティング) ・etc... 開発プロセス②「中央リポジトリ」 簡単!
© 2024 Mizuho Research & Technologies, Ltd. 17 Markdown のシークレットスキャン例
開発プロセス②「中央リポジトリ」 入力例なので問題なし
© 2024 Mizuho Research & Technologies, Ltd. 18 プルリクエスト作成時に GitHub
Actions で自動テスト実行 リポジトリ全体を静的解析! ※ローカルは変更対象のみ静的解析 開発プロセス②「中央リポジトリ」 レビュワーはプルリクで 全体チェック通過を 確認できて安心!
© 2024 Mizuho Research & Technologies, Ltd. 19 プルリクエスト上でドキュメントのレビュー 開発プロセス②「中央リポジトリ」
Markdown の変更差分を 1つずつ確認しながら レビュー!
© 2024 Mizuho Research & Technologies, Ltd. 20 レビューで承認されるまではマージ禁止 開発プロセス②「中央リポジトリ」
承認後にマージされると CI/CD パイプラインが起動
© 2024 Mizuho Research & Technologies, Ltd. 21 CI/CD パイプラインのプロセスを紹介!
ローカル 中央リポジトリ CI/CDパイプライン 最後に…
© 2024 Mizuho Research & Technologies, Ltd. 22 CI/CD に
CDK Pipelines を活用 開発プロセス③「CI/CD パイプライン」 パイプライン自体も 自動的に再構成 複数のパイプラインリソースを 抽象化しており導入が簡単! https://pages.awscloud.com/rs/112-TZM-766/images/AWS-Black-Belt_2023_AWS-CDK-Basic-3-AppDev_0831_v1.pdf
© 2024 Mizuho Research & Technologies, Ltd. 23 開発プロセス③「CI/CD パイプライン」
WAF [Build] [Update Pipeline] [Assets] CloudFormation デプロイ [Test] IP 制限の確認 Stack CloudFront S3 ACM Route53 … 静的サイト CDK Pipelines 起 動 プルリクエスト 静的サイトにおける CDK Pipelines 構成例 開発者 レビュワー マージ
© 2024 Mizuho Research & Technologies, Ltd. ビルドステージから各工程を解説! 24 開発プロセス③「CI/CD
パイプライン」 [Build] CDK Pipelines ビルドステージは 最も処理が多く重要な工程!
© 2024 Mizuho Research & Technologies, Ltd. 25 ビルドステージの流れ 開発プロセス③「CI/CD
パイプライン」 インストール • MkDocs/ 拡張機能 • GitHub トークン設定 • 依存関係 Install (npm ci) 静的サイト ファイル生成 AWSリソース 単体テスト AWS IaC Template 生成 GitHub Packages アクセスの事前設定
© 2024 Mizuho Research & Technologies, Ltd. インストール 静的サイト ファイル生成
• 社外配布用の静的 サイト zip 生成 • サイトファイル 生成(MkDocs) • TypeScript コンパイル AWSリソース 単体テスト AWS IaC Template 生成 26 ビルドステージの流れ 開発プロセス③「CI/CD パイプライン」 社内限定の静的サイト パートナー会社 社員 当社社員
© 2024 Mizuho Research & Technologies, Ltd. インストール 静的サイト ファイル生成
• 社外配布用の静的 サイト zip 生成 • サイトファイル 生成(MkDocs) • TypeScript コンパイル AWSリソース 単体テスト AWS IaC Template 生成 27 ビルドステージの流れ 開発プロセス③「CI/CD パイプライン」 パートナー会社 社員 社外配布用の静的サイト セキュリティ対策として社外から SharePoint の アクセス要求が送信されるのを抑止
© 2024 Mizuho Research & Technologies, Ltd. 28 ビルドステージの流れ 開発プロセス③「CI/CD
パイプライン」 インストール 静的サイト ファイル生成 • 社外配布用の静的 サイト zip 生成 • サイトファイル 生成(MkDocs) • TypeScript コンパイル AWSリソース 単体テスト AWS IaC Template 生成 $ mkdocs build $ npm run build (次工程の準備)
© 2024 Mizuho Research & Technologies, Ltd. 29 ビルドステージの流れ 開発プロセス③「CI/CD
パイプライン」 インストール 静的サイト ファイル生成 AWSリソース 単体テスト • セキュリティ検証 (cdk-nag) • CDKスナップ ショットテスト • CDKアサーション テスト AWS IaC Template 生成 https://speakerdeck.com/mhrtech/secjaws32
© 2024 Mizuho Research & Technologies, Ltd. 30 ビルドステージの流れ テストでは生成
AI のサポートが強力で意外と簡単! 開発プロセス③「CI/CD パイプライン」 インストール 静的サイト ファイル生成 AWSリソース 単体テスト • セキュリティ検証 (cdk-nag) • CDKスナップ ショットテスト • CDKアサーション テスト AWS IaC Template 生成 ログ保管期間など主に 非機能の期待値チェック AWS リソースに想定外の 変更が発生していないか https://speakerdeck.com/mhrtech/cdkconjp2023
© 2024 Mizuho Research & Technologies, Ltd. 31 ビルドステージの流れ 開発プロセス③「CI/CD
パイプライン」 インストール • /拡張機能 Install(pip) • GitHub Packages アクセス • 依存関係 Install ci) 静的サイト ファイル生成 AWSリソース 単体テスト AWS IaC Template 生成 • CloudFormation テンプレート生成 • アセット生成 CDK によりアセットの S3 デプロイ設定も簡単! CDK CFn テンプレート $ cdk synth アセット (静的サイトファイルなど)
© 2024 Mizuho Research & Technologies, Ltd. 32 ビルドステージの流れ(全体) 開発プロセス③「CI/CD
パイプライン」 インストール • MkDocs/拡張機能 • GitHub トークン設定 • 依存関係 Install (npm ci) 静的サイト ファイル生成 • 社外配布用の静的 サイト zip 生成 • サイトファイル 生成(MkDocs) • TypeScript コンパイル AWSリソース 単体テスト • セキュリティ検証 (cdk-nag) • CDKアサーション テスト • CDKスナップ ショットテスト AWS IaC Template 生成 • CloudFormation テンプレート生成 • アセット生成
© 2024 Mizuho Research & Technologies, Ltd. パイプライン自身の再構築(変更がある場合のみ) 33 開発プロセス③「CI/CD
パイプライン」 [Update Pipeline] CDK Pipelines 具体的にはパイプライン スタックのデプロイを実行 buildspec(CDK Pipelinesで自動生成)
© 2024 Mizuho Research & Technologies, Ltd. アセットのアップロード 開発者は意識せず、 CDK
Pipelines で自動実行! 34 開発プロセス③「CI/CD パイプライン」 [Assets] CDK Pipelines HTML、CSS、JavaScript など 静的サイトのアセットをアップロード S3バケット (アセット用)
© 2024 Mizuho Research & Technologies, Ltd. 35 静的サイトのデプロイ 開発プロセス③「CI/CD
パイプライン」 CloudFormation CFn テンプレートを 基にデプロイ Stack CloudFront S3 ACM Route53 … CDK Pipelines S3バケット (アセット用)
© 2024 Mizuho Research & Technologies, Ltd. 36 デプロイ後の IP
制限テスト 開発プロセス③「CI/CD パイプライン」 [Test] CDK Pipelines WAF IP 制限の確認 Stack CloudFront S3 ACM Route53 … 静的サイト 共通資産として 別スタック管理 別スタックの WAF で IP 制限が無制限解放に なっていないか確認
© 2024 Mizuho Research & Technologies, Ltd. 37 パイプライン失敗時の通知 開発プロセス③「CI/CD
パイプライン」 CI やデプロイなど何かしらの要因で 失敗した場合、SNS トピックに連携 インシデント…? 通知
© 2024 Mizuho Research & Technologies, Ltd. 38 AWS CDK
の補足
© 2024 Mizuho Research & Technologies, Ltd. 39 サーバーを意識せず、ほぼ全てを AWS
CDK (IaC) で構築! CDK により Lambda が自動生成されることもあり快適! 例)S3 Object デプロイ、カスタムリソース、SSM Parameter のクロスリージョンアクセス、etc... https://www.slideshare.net/slideshow/lambdaless -and-aws-cdk-191793017/191793017 AWS CDK の補足 Lambda レスも CDK で! https://pages.awscloud.com/rs/112-TZM-766/images/AWS-30_Serverless_AWS_Summit_JP_2024.pdf BucketDeployment で自動生成された Lambda 関数 コードは自動生成され、適切な IAM 権限も自動設定 (通常、Lambda の設定を意識する必要なし)
© 2024 Mizuho Research & Technologies, Ltd. 40 Docs as
Code で重要な CI/CD も CDK Pipelines なら簡単! https://catalog.us-east-1.prod.workshops.aws/workshops/10141411-0192-4021-afa8-2436f3c66bd8/ja-JP/2000-typescript-workshop/600-advanced-topics/700-pipelines 実機で学べて非常にオススメ! AWS CDK の補足
© 2024 Mizuho Research & Technologies, Ltd. 41 CloudFront と
S3 は CDK の便利な Construct 提供あり! https://docs.aws.amazon.com/solutions/latest/constructs/aws-cloudfront-s3.html 静的サイトを お手軽に試せる! AWS CDK の補足 僅か 5 行!
© 2024 Mizuho Research & Technologies, Ltd. 42 AWS CDK
は学習コンテンツが豊富! 初心者にはワークショップ・ BlackBelt シリーズが特にオススメ! https://aws.amazon.com/jp/events /aws-event-resource/archive/ https://aws.amazon.com/jp/builders- flash/202309/awsgeek-aws-cdk/ https://catalog.workshops.aws/typescript-and-cdk- for-beginner/ja-JP https://catalog.us-east- 1.prod.workshops.aws/workshops/101414 11-0192-4021-afa8-2436f3c66bd8/ja-JP AWS CDK の補足
© 2024 Mizuho Research & Technologies, Ltd. 43 まとめ •
Docs as Code の実践により AWS リソースに加えて ドキュメントの各種チェックも自動化し、生産性・品質を向上! • 全てシフトレフトせず、DevEx も考慮してローカルチェックを策定 • AWS CDK ならサーバーを意識せずに CI/CD パイプラインと静的サイトをまとめて構築! • セキュリティの自動化は特に重要!
44