AWS CDK Chart App Sample
English follows Japanese
AWS CDK (v2) を使用してシンプルな Web アプリケーションを構築するサンプルコードです。次のアーキテクチャ図に示す通り、このアプリケーションは 4 つの CDK スタックによって構成されます。
それぞれのスタックとその中にデプロイされるアプリケーションは、アプリケーションの機能よりもコード量が最小限になることを優先して設計されています。
このサンプルコードはそのまま本番環境に使用されることを意図していません。AWS CDK を活用して簡単なアプリケーションを構築するための例を示したものです。
AWS Summit Online Japan 2022 Developer Zone のセッション『AWS CDK で CI/CD つきの Web アプリを作ろう！開発風景を Live Coding でお届けします』でライブコーディングの様子を紹介しました。
This is a sample code to build a simple Web application with AWS CDK (v2). As described in the architecture diagram, this application is constructed by 4 CDK stacks.
Each stacks and applications are designed to minimize the amount of code over the functionality of the application.
This sample is not meant to be used as production as-is, but as an inspiration on how to leverage AWS CDK to build a simple application.
In AWS Summit Online Japan 2022 Developer Zone session titled "Let's make a Web application with CI/CD by AWS CDK! We will demonstrate daily development process by live coding", we showed live coding with this code.
Requirements
How to deploy
1. Create your private Git repository from a copy
To store context information, you can host CDK code in a private Git repository. To achieve this, you can copy this public repository instead of folking it.
First, create your private repository in GitHub. Then, follow those steps:
git clone [email protected]:aws-samples/cdk-chart-app-sample.git
cd cdk-chart-app-sample
git remote set-url origin [email protected]:<YOUR_NAMESPACE>/<YOUR_REPOSITORY>.git
git push origin main
2. Install dependencies
npm ci
cd webapp/dashboard
npm ci && npm run build
3. Create AWS CodeStar connection
Create a connection - Developer Tools console
4. Configure your cdk.json
Replace values with yours:
"source-repository": "aws-samples/cdk-chart-app-sample",
"source-branch": "main",
"source-connection-arn": "arn:aws:codestar-connections:ap-northeast-1:123456789012:connection/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
5. Deploy CDK Pipelines
CDK Pipelines expects the source code has been pushed in connected repository. First time of your deployment, you should git push before running cdk deploy.
git push origin main
npx cdk deploy --all
Once CDK Pipelines is created, changes to the CDK application will be reflected by git push. If you want to change the pipeline stack itself, you will need to run cdk deploy again from your terminal.
6. Update webapp/dashboard/.env
Replace the following value in webapp/dashboard/.env with your own. This is the time to change the value, as the specific value will not be known until the resource is created.
REACT_APP_API_BASE_URL=https://xxx.execute-api.ap-northeast-1.amazonaws.com/prod/
Useful commands
AWS CDK Toolkit (cdk command) - AWS Cloud Development Kit (CDK) v2
npm run testperform the jest unit testscdk deploydeploy this stack to your default AWS account/regioncdk diffcompare deployed stack with current statecdk synthemits the synthesized CloudFormation template
Security issue notifications
See Security issue notifications for more information.
License
This library is licensed under the MIT-0 License. See the LICENSE file.
89 Jan 3, 2023
16 Dec 11, 2022
7 Nov 23, 2022
5 Nov 23, 2022
21 Jun 20, 2022
89 Dec 20, 2022
165 Dec 21, 2022
35 Dec 17, 2022
44 Dec 5, 2022
8 Nov 4, 2022
4 Dec 18, 2022
107 Dec 29, 2022
214 Jan 6, 2023
23 Dec 20, 2022
6 Oct 23, 2022
8 Oct 18, 2022