Static Website Deployment with AWS CDK

This project uses AWS CDK to deploy a static website hosting solution on AWS, featuring an S3 bucket for content storage, a CloudFront distribution for global delivery, and a CI/CD pipeline using AWS CodePipeline and CodeBuild triggered by GitHub.

Architecture

The architecture implemented by this CDK stack is as follows:

GitHub Repo (App Source)
    │
    ▼
AWS CodePipeline
    ├───> GitHub Source Action
    │         │
    │         │ (Uses GitHub OAuth Token from Secrets Manager)
    │         ▼
    └───> AWS CodeBuild Project
              │
              │ (Builds application, uploads files)
              ▼
          S3 Bucket (Private)
              │
              │ (via Origin Access Identity)
              ▼
          CloudFront CDN
              │
              ▼
HTTPS delivery to users
    │
    ▼
https://your-cloudfront-domain.cloudfront.net

Prerequisites

AWS Account
AWS CLI configured with credentials and a default region
Node.js and npm
AWS CDK Toolkit installed (npm install -g aws-cdk)
A GitHub repository containing your static website code.
A GitHub Personal Access Token with repo and admin:repo_hook permissions.

Setup

Clone the repository:

git clone https://github.com/toasobi-lab/static-website-cdk-pipeline
cd static-website-cdk

Install dependencies:
```
npm install
```
Bootstrap CDK (if you haven’t already in this account/region):
```
cdk bootstrap aws://YOUR_ACCOUNT_ID/YOUR_AWS_REGION
```
Replace YOUR_ACCOUNT_ID and YOUR_AWS_REGION with your AWS account ID and preferred region.
Create a GitHub Personal Access Token Secret in AWS Secrets Manager:

Create a secret in AWS Secrets Manager with the name static-website-deploy-github-token-poc (or the name specified in config/config.ts) and store your GitHub Personal Access Token as the secret value.

You can use the AWS CLI:
```
aws secretsmanager create-secret --name "static-website-deploy-github-token-poc" --secret-string "YOUR_GITHUB_TOKEN"
```
Replace YOUR_GITHUB_TOKEN with the actual token value.

Update Configuration:

Edit the config/config.ts file to update the github section with your repository details:

github: {
  owner: 'YOUR_GITHUB_OWNER',
  repo: 'YOUR_REPO_NAME',
  branch: 'main', // Or your desired branch
},

Deployment

Synthesize the CloudFormation template:
```
cdk synth
```
Review the output to see the AWS resources that will be created.
Deploy the stack:
```
cdk deploy
```
The CDK will provision the S3 bucket, CloudFront distribution, CodeBuild project, and CodePipeline.

Post-Deployment

Once the deployment is complete:

The CodePipeline will automatically start, fetch your code from GitHub, build it using CodeBuild, and deploy the static assets to the S3 bucket.
The static website will be available via the CloudFront distribution domain name, which is outputted by the cdk deploy command.
Requests to sub-paths like /about will be rewritten by the CloudFront Function to serve the corresponding index.html file from the S3 bucket (e.g., about/index.html).

Cleaning Up

To remove all deployed resources, run:

cdk destroy

Note: The S3 bucket for website assets is configured with removalPolicy: cdk.RemovalPolicy.DESTROY and autoDeleteObjects: true for easy cleanup in development. For production environments, adjust these settings to retain data or prevent accidental deletion.