Bootstrapping AWS CDK Automation With Amazon CodeCatalyst
A step-by-step on establishing an AWS CDK setup alongside Amazon CodeCatalyst, enabling the creation of a comprehensive CI/CD pipeline for your infrastructure.
Published Jan 24, 2024
A step-by-step guide on establishing an AWS CDK setup alongside Amazon CodeCatalyst from the ground up, enabling the creation of a comprehensive CI/CD pipeline for your infrastructure.
AWS CDK is fantastic for overseeing your entire infrastructure as code, but when multiple developers are involved in modifying the infrastructure, the situation can become chaotic without a proper mechanism like a CI/CD pipeline. Absence of such a system makes coordinating and communicating changes to the infrastructure a challenging task, and this challenge amplifies as more individuals participate in the modification process.
This tutorial will guide you through setting up a CI/CD pipeline using Amazon CodeCatalyst and AWS CDK for building To-Do web application
Source code: Github
- Login to CodeCatalyst and go to your Space (Create one if you don't have)
- Create a project from scratch
- Create repository to store code and workflows of the project
- Create CICD
Environments
which associates to AWS account for deploying our infrastructure - Create IAM role for codecatalyst to consume during running workflows. It should be already created while you create the Space or you can customize the others
Workflows directory
1
2
3
.codecatalyst
└── workflows
└── main_fullstack_workflow.yaml
Workflows is triggered by
PUSH
of branch main
and includes following Actions
1
2
3
4
Triggers:
- Branches:
- main
Type: PUSH
FrontendBuildAndPackage
- Build react app, target build
which is shared to cross-actions by Artifacts
of Outputs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
FrontendBuildAndPackage:
Identifier: aws/build@v1
Inputs:
Sources:
- WorkflowSource
Outputs:
Artifacts:
- Name: frontend
Files:
- "**/*"
Configuration:
Steps:
- Run: cd static-assets/frontend
- Run: npm install
- Run: echo "REACT_APP_SERVICE_URL=/api/todos" > ".env"
- Run: npm run build
FrontendTest
Test frontend code1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
FrontendTest:
Identifier: aws/managed-test@v1
Inputs:
Sources:
- WorkflowSource
Outputs:
AutoDiscoverReports:
IncludePaths:
- frontend/**/*.xml
ExcludePaths:
- frontend/node_modules/**/*
ReportNamePrefix: AutoDiscovered
Enabled: true
SuccessCriteria:
PassRate: 100
Configuration:
Steps:
- Run: cd static-assets/frontend
- Run: npm install
- Run: npm test -- --coverage --watchAll=false;
CDKBootstrapAction
- Run cdk bootstrap
for the region of the account with latest CDK version. This action depends on FrontendTest
and FrontendBuildAndPackage
1
2
3
4
5
6
7
8
9
10
11
12
13
CDKBootstrapAction:
Identifier: aws/cdk-bootstrap@v1
Configuration:
Region: us-east-1
CdkCliVersion: latest
Environment:
Name: default_environment
Connections:
- Name: "123456789012"
Role: CodeCatalystWorkflowDevelopmentRole-simflexcloud
DependsOn:
- FrontendTest
- FrontendBuildAndPackage
CDKDeploy
- Download build target of FrontendBuildAndPackage
and trigger cdk deploy
, this action depends on CDKBootstrapAction
. Here I don't use the defined action aws/cdk-deploy@v1
of CodeCatalyst because I'd like to use projen
and pnmp
in CDK and handle copying frontend target build1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
CDKDeploy:
Identifier: aws/build@v1
Inputs:
Artifacts:
- frontend
Outputs:
AutoDiscoverReports:
IncludePaths:
- "**/*"
ExcludePaths:
- "*/.codecatalyst/workflows/*"
ReportNamePrefix: AutoDiscovered
Enabled: true
Configuration:
Steps:
- Run: cp -r static-assets/frontend/build static-assets/cdkStack/src/lib/frontend/
- Run: cd static-assets/cdkStack
- Run: npm install -g pnpm
- Run: pnpm i --no-frozen-lockfile
- Run: export CDK_DEPLOY_ACCOUNT=123456789012
- Run: export CDK_DEPLOY_REGION=us-east-1
- Run: pnpm dlx projen deploy --all --require-approval never
Environment:
Name: default_environment
Connections:
- Name: "123456789012"
Role: CodeCatalystWorkflowDevelopmentRole-simflexcloud
DependsOn:
- FrontendTest
- FrontendBuildAndPackage
Use EC2 compute type for CodeCatalyst workflows
1
2
3
Compute:
Type: EC2
Fleet: Linux.x86-64.Large
cdkStack
Define CDK stacks and useprojen
for configuration management as well aspnpm
frontend
Frontend react app
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
static-assets
├── cdkStack
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── cdk.json
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── bin
│ │ │ │ └── main.ts
│ │ │ ├── lib
│ │ │ │ ├── backend
│ │ │ │ │ ├── lambda
│ │ │ │ │ │ ├── CorsAPIGatewayProxyResult.ts
│ │ │ │ │ │ ├── Todo.ts
│ │ │ │ │ │ ├── addTodo.ts
│ │ │ │ │ │ ├── deleteTodo.ts
│ │ │ │ │ │ ├── getTodo.ts
│ │ │ │ │ │ ├── getTodos.ts
│ │ │ │ │ │ └── updateTodo.ts
│ │ │ │ │ └── todo-api-stack.ts
│ │ │ │ └── frontend
│ │ │ │ ├── build
│ │ │ │ ├── constants.ts
│ │ │ │ └── frontend-stack.ts
│ │ │ └── main.ts
│ │ ├── test
│ │ │ └── todo-api.test.ts
│ │ ├── tsconfig.dev.json
│ │ └── tsconfig.json
│ └── frontend
│ ├── README.md
│ ├── babel.config.js
│ ├── jest.config.js
│ ├── package.json
│ ├── public
│ │ ├── index.html
│ │ ├── manifest.json
│ │ └── robots.txt
│ ├── src
│ │ ├── App.css
│ │ ├── App.test.tsx
│ │ ├── App.tsx
│ │ ├── index.css
│ │ ├── index.tsx
│ │ ├── react-app-env.d.ts
│ │ ├── reportWebVitals.ts
│ │ ├── setupTests.ts
│ │ ├── to-do.api.ts
│ │ └── to-do.types.ts
│ └── tsconfig.json
├── tsconfig.dev.json
├── tsconfig.json
└── yarn.lock
Init the repo and add repo URL which is created from the above as
origin
1
2
3
4
5
6
7
8
9
➜ git init
Initialized empty Git repository in /Users/vudao/workspace/codecatalyst/cdk-todo-web-app/.git/
➜ git remote add origin https://vumdao@git.us-west-2.codecatalyst.aws/v1/simflexcloud/cdk-todo-web-app/cdk-todo-web-app
➜ git branch --set-upstream-to=origin/main main
branch 'main' set up to track 'origin/main' by rebasing.
➜ git pull
➜ git add .
➜ git commit -m "Init commit"
➜ git push origin main
When the commit is pushed to the
main
branch, CodeCatalyst CI/CD triggers the workflowsThe
CDKDeploy
triggers cloudformation to create AWS resourcesAfter the workflows done, we now have the To-Do Web app UI
Congratulations! You've successfully bootstrapped and initialized AWS CDK with CodeCatalyst, and you can now deploy infrastructure changes or update frontend/backend using a pull request workflow.