Return to Answer

edited body

edited Mar 5, 2021 at 8:19

 // imports... // import * as cdk from '@aws-cdk/core'; // import * as s3 from '@aws-cdk/aws-s3'; // import * as cloudfront from '@aws-cdk/aws-cloudfront'; // following code snippet has to be added in a // class which extends to a Construct or a Stack const bucket = new s3.Bucket(this, '<Specify a name>', { bucketName: '<add your bucket name>', websiteIndexDocument: 'index.html', websiteErrorDocument: 'index.html', blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL, removalPolicy: cdk.RemovalPolicy.DESTROY, // edit it according to your use case, I'll change it though autoDeleteObjects: true, }); const cloudFrontOAI = new cloudfront.OriginAccessIdentity(this, 'OAI'); const distribution = new cloudfront.CloudFrontWebDistribution(this, props?.stackName + 'CsdWebsiteDistribution''AbcWebsiteDistribution', { defaultRootObject: "index.html", errorConfigurations: [{ errorCode: 404, responsePagePath: "/index.html", responseCode: 200 }, { errorCode: 403, responsePagePath: "/index.html", responseCode: 200 }], originConfigs: [ { s3OriginSource: { s3BucketSource: bucket, originAccessIdentity: cloudFrontOAI, originPath: "/artifacts" // change this based on your use case }, behaviors: [{ isDefaultBehavior: true }] } ] }) bucket.grantRead(cloudFrontOAI.grantPrincipal);

 // imports... // import * as cdk from '@aws-cdk/core'; // import * as s3 from '@aws-cdk/aws-s3'; // import * as cloudfront from '@aws-cdk/aws-cloudfront'; // following code snippet has to be added in a // class which extends to a Construct or a Stack const bucket = new s3.Bucket(this, '<Specify a name>', { bucketName: '<add your bucket name>', websiteIndexDocument: 'index.html', websiteErrorDocument: 'index.html', blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL, removalPolicy: cdk.RemovalPolicy.DESTROY, // edit it according to your use case, I'll change it though autoDeleteObjects: true, }); const cloudFrontOAI = new cloudfront.OriginAccessIdentity(this, 'OAI'); const distribution = new cloudfront.CloudFrontWebDistribution(this, props?.stackName + 'CsdWebsiteDistribution', { defaultRootObject: "index.html", errorConfigurations: [{ errorCode: 404, responsePagePath: "/index.html", responseCode: 200 }, { errorCode: 403, responsePagePath: "/index.html", responseCode: 200 }], originConfigs: [ { s3OriginSource: { s3BucketSource: bucket, originAccessIdentity: cloudFrontOAI, originPath: "/artifacts" // change this based on your use case }, behaviors: [{ isDefaultBehavior: true }] } ] }) bucket.grantRead(cloudFrontOAI.grantPrincipal);

 // imports... // import * as cdk from '@aws-cdk/core'; // import * as s3 from '@aws-cdk/aws-s3'; // import * as cloudfront from '@aws-cdk/aws-cloudfront'; // following code snippet has to be added in a // class which extends to a Construct or a Stack const bucket = new s3.Bucket(this, '<Specify a name>', { bucketName: '<add your bucket name>', websiteIndexDocument: 'index.html', websiteErrorDocument: 'index.html', blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL, removalPolicy: cdk.RemovalPolicy.DESTROY, // edit it according to your use case, I'll change it though autoDeleteObjects: true, }); const cloudFrontOAI = new cloudfront.OriginAccessIdentity(this, 'OAI'); const distribution = new cloudfront.CloudFrontWebDistribution(this, props?.stackName + 'AbcWebsiteDistribution', { defaultRootObject: "index.html", errorConfigurations: [{ errorCode: 404, responsePagePath: "/index.html", responseCode: 200 }, { errorCode: 403, responsePagePath: "/index.html", responseCode: 200 }], originConfigs: [ { s3OriginSource: { s3BucketSource: bucket, originAccessIdentity: cloudFrontOAI, originPath: "/artifacts" // change this based on your use case }, behaviors: [{ isDefaultBehavior: true }] } ] }) bucket.grantRead(cloudFrontOAI.grantPrincipal);

added 262 characters in body

Source Link

edited Jan 31, 2021 at 10:42

kots_14

 // imports... // import * as cdk from '@aws-cdk/core'; // import * as s3 from '@aws-cdk/aws-s3'; // import * as cloudfront from '@aws-cdk/aws-cloudfront'; // following code snippet has to be added in a // class which extends to a Construct or a Stack  const bucket = new s3.Bucket(this, '<Specify a name>', { bucketName: '<add your bucket name>', websiteIndexDocument: 'index.html', websiteErrorDocument: 'index.html', blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL, removalPolicy: cdk.RemovalPolicy.DESTROY, // edit it according to your use case, I'll change it though autoDeleteObjects: true, }); const cloudFrontOAI = new cloudfront.OriginAccessIdentity(this, 'OAI'); const distribution = new cloudfront.CloudFrontWebDistribution(this, props?.stackName + 'CsdWebsiteDistribution', { defaultRootObject: "index.html", errorConfigurations: [{ errorCode: 404, responsePagePath: "/index.html", responseCode: 200 }, { errorCode: 403, responsePagePath: "/index.html", responseCode: 200 }], originConfigs: [ { s3OriginSource: { s3BucketSource: bucket, originAccessIdentity: cloudFrontOAI, originPath: "/artifacts" // change this based on your use case }, behaviors: [{ isDefaultBehavior: true }] } ] }) bucket.grantRead(cloudFrontOAI.grantPrincipal);

 const bucket = new s3.Bucket(this, '<Specify a name>', { bucketName: '<add your bucket name>', websiteIndexDocument: 'index.html', websiteErrorDocument: 'index.html', blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL, removalPolicy: cdk.RemovalPolicy.DESTROY, // edit it according to your use case, I'll change it though autoDeleteObjects: true, }); const cloudFrontOAI = new cloudfront.OriginAccessIdentity(this, 'OAI'); const distribution = new cloudfront.CloudFrontWebDistribution(this, props?.stackName + 'CsdWebsiteDistribution', { defaultRootObject: "index.html", errorConfigurations: [{ errorCode: 404, responsePagePath: "/index.html", responseCode: 200 }, { errorCode: 403, responsePagePath: "/index.html", responseCode: 200 }], originConfigs: [ { s3OriginSource: { s3BucketSource: bucket, originAccessIdentity: cloudFrontOAI, originPath: "/artifacts" // change this based on your use case }, behaviors: [{ isDefaultBehavior: true }] } ] }) bucket.grantRead(cloudFrontOAI.grantPrincipal);

 // imports... // import * as cdk from '@aws-cdk/core'; // import * as s3 from '@aws-cdk/aws-s3'; // import * as cloudfront from '@aws-cdk/aws-cloudfront'; // following code snippet has to be added in a // class which extends to a Construct or a Stack  const bucket = new s3.Bucket(this, '<Specify a name>', { bucketName: '<add your bucket name>', websiteIndexDocument: 'index.html', websiteErrorDocument: 'index.html', blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL, removalPolicy: cdk.RemovalPolicy.DESTROY, // edit it according to your use case, I'll change it though autoDeleteObjects: true, }); const cloudFrontOAI = new cloudfront.OriginAccessIdentity(this, 'OAI'); const distribution = new cloudfront.CloudFrontWebDistribution(this, props?.stackName + 'CsdWebsiteDistribution', { defaultRootObject: "index.html", errorConfigurations: [{ errorCode: 404, responsePagePath: "/index.html", responseCode: 200 }, { errorCode: 403, responsePagePath: "/index.html", responseCode: 200 }], originConfigs: [ { s3OriginSource: { s3BucketSource: bucket, originAccessIdentity: cloudFrontOAI, originPath: "/artifacts" // change this based on your use case }, behaviors: [{ isDefaultBehavior: true }] } ] }) bucket.grantRead(cloudFrontOAI.grantPrincipal);

Source Link

answered Jan 31, 2021 at 6:24

kots_14

This thread has been really helpful for me. I know this is old, but, I'd like to add a aws-cdk code snippet that finally worked for me. My use case needed me to utilize aws-cdk, so, I'm adding it here if you're looking forward to a aws-cdk based solution.

The code snippet adds index.html as error page in s3 and also in cloudfront. For cloudfront specifically, I added the error page as /index.html for 404 and 403 with a response of 200

 const bucket = new s3.Bucket(this, '<Specify a name>', { bucketName: '<add your bucket name>', websiteIndexDocument: 'index.html', websiteErrorDocument: 'index.html', blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL, removalPolicy: cdk.RemovalPolicy.DESTROY, // edit it according to your use case, I'll change it though autoDeleteObjects: true, }); const cloudFrontOAI = new cloudfront.OriginAccessIdentity(this, 'OAI'); const distribution = new cloudfront.CloudFrontWebDistribution(this, props?.stackName + 'CsdWebsiteDistribution', { defaultRootObject: "index.html", errorConfigurations: [{ errorCode: 404, responsePagePath: "/index.html", responseCode: 200 }, { errorCode: 403, responsePagePath: "/index.html", responseCode: 200 }], originConfigs: [ { s3OriginSource: { s3BucketSource: bucket, originAccessIdentity: cloudFrontOAI, originPath: "/artifacts" // change this based on your use case }, behaviors: [{ isDefaultBehavior: true }] } ] }) bucket.grantRead(cloudFrontOAI.grantPrincipal);

Answers that really helped me from this thread are:

https://stackoverflow.com/a/56655629/6211961

https://stackoverflow.com/a/58978355/6211961

https://stackoverflow.com/a/64201582/6211961