CloudFront and S3 Bucket

This is a simple project to demonstrate how to setup a CloudFront distribution to serve files from an S3 bucket.

Watch the YouTube video to see how to set this up. Watch Tutorial Video

In this step-by-step tutorial, I’ll show you how to set up AWS CloudFront as a Content Delivery Network (CDN) to serve both public and private files from Amazon S3. You’ll learn how to:

• Configure CloudFront distributions for public and private files
• Set up CloudFront Signed URLs for secure access to private files
• Handle CORS (Cross-Origin Resource Sharing) settings in CloudFront
• Create and manage CloudFront keys for authentication
• Optimize your S3 bucket to work seamlessly with CloudFront

Generate Key Pair

openssl genpkey -algorithm RSA -out private_key.pem -pkeyopt rsa_keygen_bits:2048
openssl rsa -pubout -in private_key.pem -out public_key.pem

Put Private Key in One Line, to make it compatible with .env file

awk 'NF {sub(/\r/, ""); printf "%s\\n", $0;}' private_key.pem

YouTube Video

Watch Tutorial Video

S3 Bucket Policy to Allow CloudFront Access

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": {
        "Service": "cloudfront.amazonaws.com"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*",
      "Condition": {
        "StringEquals": {
          "AWS:SourceArn": "arn:aws:cloudfront::your-account-id:distribution/CLOUDFRONT_DISTRIBUTION_ID"
        }
      }
    }
  ]
}

CORS Headers For S3 Bucket

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD"
        ],
        "AllowedOrigins": [
            "http://localhost:3000",
            "https://toluolatubosun.com",
            "https://gaia.toluolatubosun.com"
        ],
        "ExposeHeaders": []
    }
]