Does anyone have an example of putting a Cloudfront dist in Serverless Stack #help

Join Slack

Does anyone have an example of putting a Cloudfron...

# help

Tobias T

06/02/2022, 4:00 PM

Does anyone have an example of putting a Cloudfront dist in front of a S3 bucket using a functional stack ?

Tobias T

06/03/2022, 9:49 AM

bump, can @Frank or anyone in the SST team help? Im trying to use the CDK to create a cloudfront distribution to put in front of a S3 bucket created with SST, having some problems with how I connect the two.

Tobias T

06/03/2022, 9:57 AM

Copy code

const imageBucket = new Bucket(stack, "ImageBucket", {
    cdk: {
      bucket: {
        publicReadAccess: true,
      },
    },
  });

  const distribution = new cloudfront.Distribution(stack, "ImageDistribution", {
    defaultBehavior: {
      origin: new origins.S3Origin(imageBucket.cdk.bucket),
      viewerProtocolPolicy: cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
      cachePolicy: cloudfront.CachePolicy.CACHING_OPTIMIZED,
    },
  });

This seems to be working..

Tanner Bindrup

06/03/2022, 3:57 PM

Hey @Tobias T - that's pretty much exactly what we do, just with a different

cachePolicy

. Not sure if it's interesting to you or not, but we use cloudfront distributions in front of our buckets in order to let us turn

publicReadAccess

off and still have the items in the bucket be accessible. I think you just need to make sure you have a CORS policy set on the bucket:

Copy code

import * as S3 from "aws-cdk-lib/aws-s3";

const bucket = new Bucket(stack, "*****-assets", {
    name: `assets-*****-${stage}`,
    cdk: {
      bucket: {
        cors: [
          {
            allowedHeaders: ["*"],
            allowedMethods: [S3.HttpMethods.PUT, S3.HttpMethods.GET],
            allowedOrigins: [
              `<https://app>${isProd ? "" : "." + stage}.*****.com`,
              `<https://admin>${isProd ? "" : "." + stage}.*****.com`,
              "<http://localhost:3000>",
              "<http://localhost:3001>",
              "<https://console.serverless-stack.com/>"
            ],
            exposedHeaders: []
          }
        ]
      }
    }
  });

Frank

06/03/2022, 6:33 PM

Thanks @Tanner Bindrup!

Frank

06/03/2022, 6:33 PM

@Tobias T glad u figured it out. I thought I’d add a brief example similar to what you did up there https://github.com/serverless-stack/serverless-stack/blob/master/examples/bucket-cloudfront/stacks/MyStack.ts

Open in Slack

Previous Next