Deployment Steps

Step-by-step guide to deploy your static Next.js site to AWS S3 + CloudFront

1. Build your Next.js app

Generate static files in the 'out' folder.

npm run build && npm run export

2. Create S3 bucket (if not exists)

Bucket name must be globally unique.

aws s3 mb s3://your-unique-bucket-name --region us-east-1

3. Upload static files to S3

Sync the 'out' folder (use --delete to remove old files).

aws s3 sync out/ s3://your-unique-bucket-name --delete

4. Create CloudFront distribution

Use AWS Console or CLI – point origin to S3 bucket.

# Use AWS Console for easiest setup (or CLI with full config)

5. Attach Origin Access Control (OAC)

Make S3 private and allow only CloudFront.

# Example bucket policy (attach via Console or CLI)
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": {
        "Service": "cloudfront.amazonaws.com"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-unique-bucket-name/*",
      "Condition": {
        "StringEquals": {
          "AWS:SourceArn": "arn:aws:cloudfront::YOUR_AWS_ACCOUNT:distribution/YOUR_DISTRIBUTION_ID"
        }
      }
    }
  ]
}

6. Set default root object & invalidate cache

After updates, invalidate cache to show new content.

aws cloudfront create-invalidation --distribution-id YOUR_DISTRIBUTION_ID --paths '/*'

After Deployment

Your site will be live at the CloudFront domain (e.g. d123.cloudfront.net) or your custom domain via Route 53.

Test HTTPS, speed from different locations, and confirm S3 is private (direct bucket URL should return Access Denied).

← Back to Architecture Next: Security & OAC →