https://apoorv.blog/deploy-reactjs-cloudfront-codepipeline-cdk/

alias.ts

///////////////////////////////
// Part 5
const hostedZone = HostedZone.fromHostedZoneAttributes(this, 'hostedZoneWithAttrs', {
    hostedZoneId,
    zoneName: website_domain
})

new ARecord(this, 'aliasForCloudfront', {
    target: RecordTarget.fromAlias(new CloudFrontTarget(distribution)),
    zone: hostedZone,
    recordName: website_domain
})
///////////////////////////////

buildspec.yml

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 14.x
    commands:
      - echo Installing npm packages
      - npm install
      - npm update
  build:
    commands:
      - echo Building react app
      - npm run build
      - echo Built react app on `date`

artifacts:
  base-directory: ./build
  files:
    - '**/*'

certificate.ts

///////////////////////////////
// Part 1
const hostedZone = HostedZone.fromHostedZoneAttributes(this, 'HostedZoneWithAttrs', {
    hostedZoneId,
    zoneName: website_domain
})

const websiteCert = new DnsValidatedCertificate(this, 'WebsiteSSL', {
    domainName: website_domain,
    hostedZone
})

new CfnOutput(this, 'WebsiteCertArn', {
    value: websiteCert.certificateArn
})
///////////////////////////////

cf-origin.ts

///////////////////////////////
// Part 3
const originAccessIdentity = new OriginAccessIdentity(this, 'originAccessIdentity', {
    comment: 'Give cloudfront unrestricted read only access to website bucket'
})

bucket.grantRead(originAccessIdentity)
///////////////////////////////

cloudfront.ts

///////////////////////////////
// Part 4
const certificate = Certificate.fromCertificateArn(this, 'websiteCert', websiteCertArn)

const distribution = new CloudFrontWebDistribution(this, 'cloudfrontWebDistribution', {
    priceClass: PriceClass.PRICE_CLASS_ALL,
    originConfigs: [{
        s3OriginSource: {
            s3BucketSource: bucket,
            originAccessIdentity
        },
        behaviors: [{
            isDefaultBehavior: true,
            defaultTtl: Duration.hours(1)
        }]
    }],
    viewerCertificate: ViewerCertificate.fromAcmCertificate(certificate, {
        aliases: [website_domain],
        securityPolicy: SecurityPolicyProtocol.TLS_V1_2_2019
    })
})
///////////////////////////////

hosting-bucket.ts

///////////////////////////////
// Part 2
const bucket = new Bucket(this, 'websiteBucket', {
    removalPolicy: RemovalPolicy.DESTROY,
    bucketName: website_domain
})

new CfnOutput(this, 'websiteBucketArn', {
    value: bucket.bucketArn
})
///////////////////////////////

pipeline.ts

///////////////////////////////
// Part 7
const websiteBucket = Bucket.fromBucketArn(this, 'websiteBucket', websiteBucketArn)

const reactBuildProject = new PipelineProject(this, 'reactBuild', {
    buildSpec: BuildSpec.fromSourceFilename('buildspec.yml'),
    environment: {
        buildImage: LinuxBuildImage.STANDARD_5_0,
        computeType: ComputeType.SMALL
    }
})

const artifactBucket = new Bucket(this, 'reactPipelineArtifactBucket', {
    bucketName: 'react-pipeline-artifact-bucket',
    removalPolicy: RemovalPolicy.DESTROY
})

const gitOutput = new Artifact('reactRepoLatestMaster')

const buildOutput = new Artifact('reactBuildOutput')

new Pipeline(this, 'reactPipeline', {
    artifactBucket,
    pipelineName: 'examplePipeline',
    stages: [
        {
            stageName: 'SourceCode',
            actions: [
                new CodeCommitSourceAction({
                    actionName: 'readLatestMasterCommit',
                    output: gitOutput,
                    repository: Repository.fromRepositoryArn(this, 'reactGitRepo', reactRepoArn)
                })
            ]
        },
        {
            stageName: 'Build',
            actions: [
                new CodeBuildAction({
                    actionName: 'buildReactApp',
                    input: gitOutput,
                    outputs: [buildOutput],
                    project: reactBuildProject
                })
            ]
        },
        {
            stageName: 'Deploy',
            actions: [
                new S3DeployAction({
                    actionName: 'DeployReactApp',
                    input: buildOutput,
                    bucket: websiteBucket
                })
            ]
        }
    ]
})
///////////////////////////////

redirect.ts

///////////////////////////////
// Part 6
new HttpsRedirect(this, 'wwwToNonWww', {
    recordNames: ['www.example.com'],
    targetDomain: website_domain,
    zone:hostedZone
})

const repo = new Repository(this, 'reactSourceCode', {
    repositoryName: 'example',
    description: `react repo for ${website_domain}`
})

new CfnOutput(this, 'reactRepoArn', {
    value: repo.repositoryArn
})
///////////////////////////////