CloudFront +s3 Tutorial: How I Hosted my Portfolio Securely on AWS

Source: Dev.to

Prerequisites

• AWS account (Free Tier works)
• Static website build (React/Vite or plain HTML/CSS/JS)
• Basic familiarity with AWS Console

Step 1: Build & Upload Portfolio Files to S3

Before uploading, create an optimized production build.

For React/Vite:

npm run build

This creates a dist/build folder containing:

• index.html
• vite
• assets/ (folder)

Upload only these files (not your source code) to S3:

1. Create a bucket.
2. Keep Block Public Access ON.
3. Open the S3 console.
4. Upload the dist/build files into the bucket root.

Step 2: Enable Static Website Hosting (Optional)

1. Go to the bucket Properties.
2. Scroll to Static Website Hosting and enable it.
3. Set the Index document to index.html.

Step 3: Create CloudFront Distribution

1. Open the CloudFront console.
2. Click Create Distribution.
3. Select your S3 bucket as the origin.
4. For Origin Access, choose Origin Access Control (OAC).
5. CloudFront will generate the necessary permissions and apply them to your bucket.

This keeps the S3 bucket private while CloudFront handles public routing.

Step 4: Restrict Direct S3 Access

CloudFront provides a bucket policy that you paste into the bucket permissions. This ensures:

• The bucket is not publicly readable.
• Only CloudFront can serve the content.

Step 5: Set Default Root Object

In the CloudFront distribution settings, set Default Root Object to index.html. This allows the portfolio to load without explicitly typing the file name.

Step 6: Wait for Deployment & Test

Deployment may take a few minutes. Once complete, you’ll receive a domain such as:

d37dnhohvgt3x2.cloudfront.net

Visit the domain to see the portfolio live and secure.

---

Using S3 + CloudFront provides a private bucket, follows production best practices, remains free‑tier friendly, and benefits from global performance improvements.

---

Tags: aws cloud cloudfront s3 webdev portfolio tutorial

If you found this helpful, please leave a ❤️ or bookmark it!