Question regarding cloudfront

[robertd]

Howdy. I’d really like to give this a try in the near future. Any plans on migrating away from CloudFrontWebDistribution to Distribution? New cloudfront implementation uses OAI under the hood and bucket doesn’t need to be public anymore. Thanks!

[JakePartusch]

Hey @robertd, thanks for the question! I do think that I should migrate this to use Distribution rather than CloudFrontWebDistribution, thanks for pointing that out. Unfortunately, I don't think that Origin Access Identity will work for most website use-cases. As far as I understand, I don't think it is possible to configure an S3 bucket as a website and use OAI?

https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-s3.html

[JakePartusch]

Quick update on this... I've updated the construct to use Distribution instead of CloudFrontWebDistribution. Thanks for the recommendation!

#27

[robertd]

@JakePartusch I also believe that lines 97-98 are not needed anymore since bucket should be private and OAI takes care of the CF being the only one able to talk to S3.

serverlessui/packages/construct/src/serverless-ui.construct.ts

Lines 97 to 98 in 6a291e2

	publicReadAccess: true,
	websiteIndexDocument: "index.html",

Here is what our bucket looks like:

  const websiteBucket = new Bucket(construct, config.resourceName, {
    bucketName: config.bucketName,
    encryption: BucketEncryption.S3_MANAGED,
    blockPublicAccess: BlockPublicAccess.BLOCK_ALL,
    serverAccessLogsBucket: config.logBucket,
    serverAccessLogsPrefix: config.logPrefix,
    lifecycleRules: config.lifecycleRules ?? undefined,
    versioned: config.versioned ?? undefined,
    inventories: config.inventories ?? undefined,
    metrics: config.metrics ?? undefined,
    autoDeleteObjects: config.autoDeleteObjects ?? undefined,
    removalPolicy: config.removalPolicy ?? undefined,
    objectOwnership: ObjectOwnership.BUCKET_OWNER_PREFERRED,
  });

We also enforce encryption of data in transit (borrowed from https://github.com/awslabs/aws-solutions-constructs)

  function applySecureBucketPolicy(s3Bucket: Bucket): void {
    // Apply bucket policy to enforce encryption of data in transit
    s3Bucket.addToResourcePolicy(
      new PolicyStatement({
        sid: 'HttpsOnly',
        resources: [
          `${s3Bucket.bucketArn}/*`
        ],
        actions: ['*'],
        principals: [new AnyPrincipal()],
        effect: Effect.DENY,
        conditions: {
          Bool: {
            'aws:SecureTransport': 'false',
          },
        },
      })
    );
  }

[JakePartusch]

Thanks for this, @robertd! The code samples made it super easy to test this out. I made a PR here:
#29

Unfortunately, looking at the deploy previews, I'm seeing a weird 403 issue when going directly to a route:
https://1a56837d.serverlessui.app/page-2 -> fails
https://1a56837d.serverlessui.app and then clicking "Go to Page 2" -> works

When I ran into this before I think I wrote an Edge lambda to rewrite the request /page-2 -> /page-2/index.html, but I'm curious about your experience with this?

[robertd]

We’ve been experiencing similar issues too with react apps (react router especially) that we had to address with custom L@E functions. I’m not sure what’s the best practice approach with CF+OAI+S3.

cc @njlynch Do you have words of wisdom and have you seen this behavior with this CF setup?

[JakePartusch]

FYI, an experimental option has been added in the latest release (v0.11.0). __experimental_privateS3

[robertd]

@JakePartusch Yeah, It’s possible to serve websites with OAI powered setup. We’ve been using this setup at work. The fact that one can serve websites using so many different implementation patterns is somewhat confusing... I wish AWS identified the preferred best practice implementation 😄

Again, I’m not saying that you necessarily need to change your implementation I just wanted to hear your opinion on it and whether you’ve considered it or not. 👍

https://aws.amazon.com/premiumsupport/knowledge-center/cloudfront-serve-static-website/

[JakePartusch]

Great points. Yeah, I've used OAI with Nuxt, but to get nested routing to work, I had to write an additional Lambda Edge function (since S3 couldn't be configured as a website). Maybe they've fixed some of those problems? I'll give it a try again to see if we can make it work in a "zero-config" way.