静的サイトのCI/CDでも侮るなかれ！Docs as Codeに沿ったセキュアな開発プロセスの実践/secure-docsascode-cicd-for-static-sites

Slide 1

Slide 1 text

© 2024 Mizuho Research & Technologies, Ltd. 静的サイトのCI/CDでも侮るなかれ！ Docs as Codeに沿ったセキュアな開発プロセスの実践 2024年9月21日技術開発本部先端技術研究部 0 ServerlessDays Tokyo 2024 （免責事項）当レポートは情報提供のみを目的として作成されたものであり、商品の勧誘を目的としたものではありません。本資料は、当社が信頼できると判断した各種データに基づき作成されておりますが、その正確性、確実性を保証するものではありません。また、本資料に記載された内容は予告なしに変更されることもあります。

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

© 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/ ご参考

Slide 5

Slide 5 text

© 2024 Mizuho Research & Technologies, Ltd. プラットフォームの仕様や利用方法を伝える方法は？ • やはり、ドキュメントで利用者向けにガイドすることが重要 • 社員が気軽に参照できるよう、AWS 上で一般的な構成の静的サイトを構築プラットフォーム初期から運営を支える重要な要素として活用！ 4 Route53 WAF CloudFront S3 ACM 社員自社拠点 https アクセス静的ファイルをホスト（自社拠点の IPに制限）

Slide 6

Slide 6 text

Slide 7

Slide 7 text

© 2024 Mizuho Research & Technologies, Ltd. 6 Documentation as Code (Docs as Code)とは？『コーディングと同様のツールでドキュメントを作成する手法』【特徴】 • Markdown など軽量マークアップ言語のテキストでドキュメントを記述 • Git などのバージョン管理システムでドキュメントを管理 • ドキュメントの変更はコードと同様にレビューと自動テストのプロセスを実行 Docs as Code は生産性・品質の向上につながる！

Slide 8

Slide 8 text

© 2024 Mizuho Research & Technologies, Ltd. 7 Static Site Generator (SSG) による HTML ファイルの生成 • Markdown を静的な HTML ファイルに変換するため、SSG が必要 • 簡単にセットアップできるシンプルな SSGとして「MkDocs」を利用 https://www.mkdocs.org/getting-started/ ・検索機能を標準装備・拡張機能も豊富！

Slide 9

Slide 9 text

© 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 …

Slide 10

Slide 10 text

© 2024 Mizuho Research & Technologies, Ltd. 9 ドキュメント開発プロセスの流れローカル ✓Markdownと図の作成 ✓MkDocs起動/ プレビュー ✓Pre-commitで静的解析中央リポジトリ ✓シークレット/ コードスキャン ✓プルリク作成/ テスト実行 ✓レビュー/ マージ CI/CDパイプライン ✓各種ビルド/ テスト実行 ✓静的サイトのデプロイ ✓デプロイ後テスト CodePipeline

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

© 2024 Mizuho Research & Technologies, Ltd. ツール特徴主な用途図例 Draw.io GUIで作図作図の融通が利き綺麗にしやすい・構成図・利用者向けのその他図・etc... PlantUML テキストで作図表現に個人差が少なく軽量で差分など管理しやすい・シーケンス図・ユースケース図・etc... 12 図の描画では、以下2種のツールを利用テキストを基にレンダリング開発プロセス①「ローカル」

Slide 14

Slide 14 text

© 2024 Mizuho Research & Technologies, Ltd. 13 textlint でテキストファイルの文章校正（Markdown, PlantUML） • textlint とは、各種ルールに基づいて文章校正を行う静的解析ツール • 認知負荷を低減させるため、記載揺れ設定に独自ルールを追加 PlantUMLを追加図の表現で不都合なルールはファイル先頭で無効化置換ルール PlantUML (.puml) 開発プロセス①「ローカル」

Slide 15

Slide 15 text

© 2024 Mizuho Research & Technologies, Ltd. 14 husky による Git コミット時の自動チェック • husky とは、コミットなどの Git フックで任意コマンドを実行できるツール • textlint とその他の静的解析を自動実行することでコミット対象の品質を向上！ CDK ソースだけでなくドキュメントも静的解析開発者体験の観点からコミット時間に注意（不用意にコマンドを追加しない）開発プロセス①「ローカル」コミット前に変更資産のみチェック

Slide 16

Slide 16 text

Slide 17

Slide 17 text

© 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... 開発プロセス②「中央リポジトリ」簡単！

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

© 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

Slide 24

Slide 24 text

© 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 構成例開発者レビュワーマージ

Slide 25

Slide 25 text

Slide 26

Slide 26 text

© 2024 Mizuho Research & Technologies, Ltd. 25 ビルドステージの流れ開発プロセス③「CI/CD パイプライン」インストール • MkDocs/ 拡張機能 • GitHub トークン設定 • 依存関係 Install (npm ci) 静的サイトファイル生成 AWSリソース単体テスト AWS IaC Template 生成 GitHub Packages アクセスの事前設定

Slide 27

Slide 27 text

© 2024 Mizuho Research & Technologies, Ltd. インストール静的サイトファイル生成 • 社外配布用の静的サイト zip 生成 • サイトファイル生成(MkDocs) • TypeScript コンパイル AWSリソース単体テスト AWS IaC Template 生成 26 ビルドステージの流れ開発プロセス③「CI/CD パイプライン」社内限定の静的サイトパートナー会社社員当社社員

Slide 28

Slide 28 text

© 2024 Mizuho Research & Technologies, Ltd. インストール静的サイトファイル生成 • 社外配布用の静的サイト zip 生成 • サイトファイル生成(MkDocs) • TypeScript コンパイル AWSリソース単体テスト AWS IaC Template 生成 27 ビルドステージの流れ開発プロセス③「CI/CD パイプライン」パートナー会社社員社外配布用の静的サイトセキュリティ対策として社外から SharePoint のアクセス要求が送信されるのを抑止

Slide 29

Slide 29 text

© 2024 Mizuho Research & Technologies, Ltd. 28 ビルドステージの流れ開発プロセス③「CI/CD パイプライン」インストール静的サイトファイル生成 • 社外配布用の静的サイト zip 生成 • サイトファイル生成(MkDocs) • TypeScript コンパイル AWSリソース単体テスト AWS IaC Template 生成 $ mkdocs build $ npm run build （次工程の準備）

Slide 30

Slide 30 text

© 2024 Mizuho Research & Technologies, Ltd. 29 ビルドステージの流れ開発プロセス③「CI/CD パイプライン」インストール静的サイトファイル生成 AWSリソース単体テスト • セキュリティ検証 (cdk-nag) • CDKスナップショットテスト • CDKアサーションテスト AWS IaC Template 生成 https://speakerdeck.com/mhrtech/secjaws32

Slide 31

Slide 31 text

© 2024 Mizuho Research & Technologies, Ltd. 30 ビルドステージの流れテストでは生成 AI のサポートが強力で意外と簡単！開発プロセス③「CI/CD パイプライン」インストール静的サイトファイル生成 AWSリソース単体テスト • セキュリティ検証 (cdk-nag) • CDKスナップショットテスト • CDKアサーションテスト AWS IaC Template 生成ログ保管期間など主に非機能の期待値チェック AWS リソースに想定外の変更が発生していないか https://speakerdeck.com/mhrtech/cdkconjp2023

Slide 32

Slide 32 text

© 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 アセット (静的サイトファイルなど)

Slide 33

Slide 33 text

© 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 テンプレート生成 • アセット生成

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

© 2024 Mizuho Research & Technologies, Ltd. 36 デプロイ後の IP 制限テスト開発プロセス③「CI/CD パイプライン」 [Test] CDK Pipelines WAF IP 制限の確認 Stack CloudFront S3 ACM Route53 … 静的サイト共通資産として別スタック管理別スタックの WAF で IP 制限が無制限解放になっていないか確認

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

© 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 の設定を意識する必要なし）

Slide 41

Slide 41 text

© 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 の補足

Slide 42

Slide 42 text

© 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 行！

Slide 43

Slide 43 text

© 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 の補足

Slide 44

Slide 44 text

© 2024 Mizuho Research & Technologies, Ltd. 43 まとめ • Docs as Code の実践により AWS リソースに加えてドキュメントの各種チェックも自動化し、生産性・品質を向上！ • 全てシフトレフトせず、DevEx も考慮してローカルチェックを策定 • AWS CDK ならサーバーを意識せずに CI/CD パイプラインと静的サイトをまとめて構築！ • セキュリティの自動化は特に重要！