A sample code that implements a simple Web app using AWS CDK v2

by React

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 でお届けします』でライブコーディングの様子を紹介しました。

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 git@github.com:aws-samples/cdk-chart-app-sample.git
cd cdk-chart-app-sample
git remote set-url origin git@github.com:<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 test perform the jest unit tests
  • cdk deploy deploy this stack to your default AWS account/region
  • cdk diff compare deployed stack with current state
  • cdk synth emits 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.

GitHub

View Github