Abstract
- 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
Table Of Contents
- Setting up a CodeCatalyst Project, Repo, and Environment
- Design workflows
- Source code and CDK stacks
- Push source code to repo
- Workflows Runs
- Conclusion
๐ Setting up a CodeCatalyst Project, Repo, and Environment
- 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
๐ Design workflows
- Workflows directory
.codecatalyst
โโโ workflows
โโโ main_fullstack_workflow.yaml
- Workflows is triggered by
PUSH
of branchmain
and includes followingActions
Triggers:
- Branches:
- main
Type: PUSH
-
FrontendBuildAndPackage
build react app, targetbuild
which is shared to cross-actions byArtifacts
ofOutputs
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 code
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
Runcdk bootstrap
for the region of the account with latest CDK version. This action depends onFrontendTest
andFrontendBuildAndPackage
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 ofFrontendBuildAndPackage
and triggercdk deploy
, this action depends onCDKBootstrapAction
. Here I don't use the defined actionaws/cdk-deploy@v1
of CodeCatalyst because I'd like to useprojen
andpnmp
in CDK and handle copying frontend target build
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
Compute:
Type: EC2
Fleet: Linux.x86-64.Large
๐ Source code and CDK stacks
- Structure
-
cdkStack
Define CDK stacks and useprojen
for configuration management as well aspnpm
-
frontend
Frontend react app
-
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
๐ Push source code to repo
- Init the repo and add repo URL which is created from the above as
origin
โ 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
๐ Workflows Runs
- When the commit is pushed to the
main
branch, CodeCatalyst CI/CD triggers the workflows
- The
CDKDeploy
triggers cloudformation to create AWS resources
- After the workflows done, we now have the To-Do Web app UI
๐ Conclusion
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.
Top comments (0)