CDKを使って爆速でナレッジサイトを公開した話

1. CDKを使って爆速でナレッジサイトを公開した話 2023.05.20 クラスメソッド株式会社 高山晃太朗 1 CDK Conference Japan 2023
2. 2 自己紹介 高山晃太朗(@nyan_kotaroo) 所属 : AWS事業本部コンサルティング 趣味 : ねこ、筋トレ 経歴 : 金融系インフラSE4年 -> クラスメソッド ロール : 技術コンサル、ナレッジサイトの運用
3. 3 ナレッジサイト is Classmethod Cloud Guidebook (通称CCG)
4. AWS利用ガイドライン 4
5. 5 AWS Security Hubガイド
6. 6 CCGを見るには クラスメソッドメンバーズのお客様は無料で見れます！ デモサイトも公開中 ↓ https://demo.guidebook.classmethod.net/
7. 7 CDKを使って爆速でCCGを公開した話
8. 8 なぜCCG公開するのか もとはドキュメントで公開してたが、 参照性を良くしたかった より多くの人に公開したかった
9. 9 CDKを採用した理由 Constructでさくっと実装したかった
10. 10 Construct L1 Construct : “CFn”で始まるCloudFormationに 対応するライブラリ L2 Construct : 複数のリソースからなる抽象化された ライブラリ(メインで使う) L3 Construct : 特定のユースケースのパターンが記載された ハイレベルで抽象化されたライブラリ
11. 11 L2が対応してないパラメータがあったとき L2 Constructが用意されていればL2で問題なし！ L2で触れないパラメータはあとからL1で上書き可能 const bucket = new s3.Bucket(this, 'Bucket', { blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL, bucketKeyEnabled: true, ... }); // L1コンストラクトでAWS::S3::Bucket ReplicationConfigurationを設定する const cfnBucket = bucket.node.defaultChild as s3.CfnBucket; cfnBucket.addOverride('Properties.ReplicationConfiguration', { Role: replicationRole.roleArn, Rules: [ { DeleteMarkerReplication: { Status: 'Disabled', }, Destination: { AccessControlTranslation: { Owner: 'Destination', }, ... }, }, ], });
12. 12 実装したもの MkDocs
13. 13 大人の事情により... 認証の実装が発生
14. 14 最終的に実装したもの 認証の実装 MkDocs
15. 15 最終的に実装したもの https://dev.classmethod.jp/articles/aws-cdk-multi-environment-config/ CloudFrontの署名付きCookieで認証
16. 16 突然のコード開発
17. 17 だいじょうぶ。そう、CDKならね
18. 18 コード開発爆上がりポイント Construct ホットスワップ機能(--hotswap) NodejsFunction BucketDeployment
19. 19 Construct JavaScript/TypeScriptの自動コンパイルを行い esbuildによるLambda関数のアセットをバンドルしてくれる NodejsFunction BucketDeployment TypeScriptでCDKを使っていればpackage.jsonをlambdaと共有可 ローカルファイルをS3にアップロードしてくれる オプションでCloudFrontキャッシュ削除も可能 Lambda開発で利用 ログインページのホスティングで利用 Experimental(試験的)にはなりますが、pythonとgoも拡張されたConstructがあります。
20. 20 ホットスワップ機能(--hotswap) CloudFormationを変更せず、リソースを直接更新するオプション 対応リソース Lambda コード/タグ/説明/環境変数/バージョン/エイリアス Step Functions ステートマシン定義 ECS コンテナアセット S3 静的ホスティングリソース CodeBuild プロジェクト/ソース AppSync VTLマッピングテンプレート ※本番環境での利用は非推奨
21. 21 ホットスワップ機能(--hotswap) CloudFormationを変更せず、リソースを直接更新するオプション 対応リソース Lambda コード/タグ/説明/環境変数/バージョン/エイリアス Step Functions ステートマシン定義 ECS コンテナアセット S3 静的ホスティングリソース CodeBuild プロジェクト/ソース AppSync VTLマッピングテンプレート cdk deploy cdk deploy --hotswap ※本番環境での利用は非推奨 約50秒削減
22. 22 ここでもう一つ デモサイトも用意したいな
23. 23 contextによる環境分離
24. 24 contextによる環境分離 { "app": "npx ts-node --prefer-ts-exts bin/test.ts", ... "context": { "projectName": "testproject", "dev": { "accountId": "111122223333", "envName": "dev", "region": "ap-northeast-1" }, "stg": { "accountId": "111122223333", "envName": "dev", "region": "ap-northeast-1" }, "prd": { "accountId": "444455556666", "envName": "prd", "region": "ap-northeast-1" }, ... } } cdk.json const app = new cdk.App(); const projectName = app.node.tryGetContext('projectName'); const envKey = app.node.tryGetContext('env'); const envValues = app.node.tryGetContext(envKey); const env = { account: envValues.accountId, region: envValues.region, }; new TestStack(app, `${projectName}-${envValues.envName}-stack`, { projectName: projectName, envName: envValues.envName, env, }); bin/test.ts export interface props extends cdk.StackProps { projectName: string; envName: string; } export class TestStack extends cdk.Stack { constructor(scope: Construct, id: string, props: props) { super(scope, id, props); new ec2.Vpc(this, 'Vpc', { vpcName: `${props.projectName}-${props.envName}-vpc`, }); } } lib/test-stack.ts ＞ cdk deploy –c env=dev envValuesでdevのオブジェクトを扱える
25. 25 contextによる環境分離 { "app": "npx ts-node --prefer-ts-exts bin/test.ts", ... "context": { "projectName": "testproject", "dev": { "accountId": "111122223333", "envName": "dev", "region": "ap-northeast-1" }, "stg": { "accountId": "111122223333", "envName": "dev", "region": "ap-northeast-1" }, "prd": { "accountId": "444455556666", "envName": "prd", "region": "ap-northeast-1" }, ... } } cdk.json const app = new cdk.App(); const projectName = app.node.tryGetContext('projectName'); const envKey = app.node.tryGetContext('env'); const envValues = app.node.tryGetContext(envKey); const env = { account: envValues.accountId, region: envValues.region, }; new TestStack(app, `${projectName}-${envValues.envName}-stack`, { projectName: projectName, envName: envValues.envName, env, }); bin/test.ts export interface props extends cdk.StackProps { projectName: string; envName: string; } export class TestStack extends cdk.Stack { constructor(scope: Construct, id: string, props: props) { super(scope, id, props); new ec2.Vpc(this, 'Vpc', { vpcName: `${props.projectName}-${props.envName}-vpc`, }); } } lib/test-stack.ts ＞ cdk deploy –c env=dev ＞ cdk deploy –c env=stg -c env=devのリソース -c env=stgのリソース
26. 26 contextによる環境分離 export interface props extends cdk.StackProps { projectName: string; envName: string; } export class TestStack extends cdk.Stack { constructor(scope: Construct, id: string, props: props) { super(scope, id, props); if (props.envName === 'demo') { new StaticSite(this, 'StaticSite’, { projectName: props.projectName, envName: props.envName, }); } else { const authentication = new Authentication(this, 'Authentication', { projectName: props.projectName, envName: props.envName, }); new StaticSite(this, 'StaticSite', { projectName: props.projectName, envName: props.envName, authApi: authentication.authApi, }); } } } test-stack.ts 機能ごとにカスタムconstructを作成し、contextを使った条件分岐でconstructを 組み変えることで、同一ソース内で環境ごとに構成の違うStackを作成することができる demo環境では認証機能はデプロイしないような例
27. 27 contextによる環境分離 https://dev.classmethod.jp/articles/aws-cdk-multi-environment-config/ 型定義をしたい 環境毎に定義ファイルを分けたい 外部ファイル(.ts)を利用する https://dev.classmethod.jp/articles/typescript_aws_cdk_config_pattern/ cdk.jsonの他に...
28. 28 まとめ AWS CDKを使うことでインフラ管理はもちろん コード開発部分でも開発者体験の向上を実感することができた Contextとプログラミング言語の特性を組み合わせることで 環境ごとのデプロイが容易
29. 29 CCGを見るには クラスメソッドメンバーズのお客様は無料で見れます！ デモサイトも公開中 ↓ https://demo.guidebook.classmethod.net/