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)