sbstjn / cra-pipeline

Use AWS CDK with CodePipeline to deploy a TypeScript Create-React-App.

CRA Pipeline

Example AWS CDK project to deploy a TypeScript SPA created with create-react-app using AWS CodePipeline and AWS CodeBuild. Of course, styled-components is included as well …

http://pipeline-files8e6940b8-tyzn4y41xz9l.s3-website-us-east-1.amazonaws.com

Architecture

Components

• create-react-app using TypeScript
• React SPA with styled-components
• AWS CDK for infrastructure
• AWS CodePipeline with GitHub hook
• Amazon S3 bucket for website hosting

Usage

$ > yarn cdk deploy Pipeline

Pipeline: deploying...
Pipeline: creating CloudFormation changeset...

✅  Pipeline

Outputs:
Pipeline.WebsiteURL = http://pipeline-files8e6940b8-3p9gac9qjzax.s3-website-us-east-1.amazonaws.com

Configuration

// Edit ./config.ts

export const config = {
  github: {
    owner: 'sbstjn',
    repository: 'cra-pipeline',
  },
  env: { region: 'us-east-1' },
}

Preliminaries

Install AWS CDK

# Using NPM
$ > npm install -g aws-cdk

# Using Yarn
$ > yarn global add aws-cdk

Configure AWS CLI

Generate an Access Key and Secret Access Key for your AWS account.

$ > export AWS_ACCESS_KEY_ID="…"
$ > export AWS_SECRET_ACCESS_KEY="…"
$ > export AWS_SESSION_TOKEN="…"

Bootstrap AWS CDK

$ > yarn cdk bootstrap --region us-east-1

⏳  Bootstrapping environment aws://123456789001/us-east-1...

0/2 | 5:06:49 PM | CREATE_IN_PROGRESS   | AWS::S3::Bucket | StagingBucket
0/2 | 5:06:50 PM | CREATE_IN_PROGRESS   | AWS::S3::Bucket | StagingBucket Resource creation Initiated
1/2 | 5:07:11 PM | CREATE_COMPLETE      | AWS::S3::Bucket | StagingBucket

✅  Environment aws://123456789001/us-east-1 bootstrapped.

Configure GitHub Token

Create a personal access token in GitHub and store it in AWS SecretsManager. The token needs permissions to read your (private) repositories and configure webhooks.

$ > aws secretsmanager create-secret \
    --name GitHubToken \
    --secret-string abcdefg1234abcdefg56789abcdefg \
    --region us-east-1

{
  "ARN": "arn:aws:secretsmanager:us-east-1:123456789001:secret:GitHubToken-uNBxTr",
  "Name": "GitHubToken",
  "VersionId": "4acda3d1-877f-4032-b38e-17bc50239883"
}

cra-pipeline's Issues

404 error doc for SPA should be index.html

Hi,
Thanks for publishing this. I just noticed that an error doc is in the pipeline.ts here:

cra-pipeline/infra/stacks/pipeline.ts

Line 21 in 3a5d1aa

websiteErrorDocument: 'error.html',

This results in a 404 page for the error.html page when a non-existent URL is accessed like: http://pipeline-files8e6940b8-tyzn4y41xz9l.s3-website-us-east-1.amazonaws.com/non-existant.html

When hosting an SPA the error document should be set to index.html so that the JS can show a 404 (and maybe report an error to the crash logger)

[WARN] Skipping install of runtimes. Runtime version selection is not supported by this build image.

If you would like to ensure node 14 is available you specify the image in the PipelineProject:

          project: new CodeBuild.PipelineProject(this, "BuildWebsite", {
            projectName: "XXX",
            buildSpec: CodeBuild.BuildSpec.fromSourceFilename(
              "./infra/buildspec.yml"
            ),
          + environment: {
          +     buildImage: CodeBuild.LinuxBuildImage.STANDARD_5_0,
          + },
          }),

AWS::KMS::Key Error

After initial install and configuration, I encounter this error:

Do you wish to deploy these changes (y/n)? y Pipeline: deploying... Pipeline: creating CloudFormation changeset... 10:11:42 PM | CREATE_FAILED | AWS::KMS::Key | PipelineArtifactsB...ryptionKey01D58D69 The new key policy will not allow you to update the key policy in the future. (Service: Kms, Status Code: 400, Request ID: b 652e882-829a-4b8c-b4db-825b433f9053, Extended Request ID: null)

I'll research to try and resolve.

Chris