DEV Community

Cover image for S3 and Cloudfront for hosting (simple steps)
Sasidharan
Sasidharan

Posted on • Edited on

2

S3 and Cloudfront for hosting (simple steps)

Storing and Delivering your Content with Speed and Scale.

To serve your static content of the webpage includes images, videos, music, scripts, stylesheets, etc., we can use amazon's CloudFront, a content delivery network.

What is content delivery network(CDN)?

It is the system of distributed servers, serves the content on it to the users based on their locations. For example, a user from California accessing content on CDN, the content will be served from the user's nearest server, which in the sense speed in delivering the content.

s3 - Simple Storage service

Amazon Cloudfront helps to serve the content through its worldwide network of data centers. It's simple to set up the CloudFront along with s3 storage.

You can also serve your static content through s3, but CloudFront allows us to serve the content from all its edge locations.

Follow the steps along with me,

Create an Amazon(AWS) account if you do not have one. It has a free tier to start with.

Search and select s3 from the list of services.

Alt Text

Create a bucket with the name of your choice.

Alt Text

Upload your static content.
I used my HTML file here

Alt Text

[deleted user] image

[Deleted User]

After uploading, enable Use this bucket to host a website in Properties section.

Alt Text

Now head to Cloudfront by selecting in services and create a distribution by selecting the web.

Alt Text

Select your bucket name in the origin domain name and you can also specify Origin Path if you want to serve a subfolder in the bucket. You can also restrict the bucket access as in the image,

Alt Text

In distribution settings, specify the Default Root Object like index.html, you can also set alternative domain names for your CloudFront using certificate manager.

Alt Text

[deleted user] image

[Deleted User]

You can leave other information as it is or you can change as per your need. Now create your distribution.

Your distribution takes some time to deploy. After that, you can see the deployed indicator.

Alt Text

You can now see your content uploaded in s3 using the CloudFront URL.(something similar to this http://d1b31rrh6oyllb5.cloudfront.net/)

Alt Text

[deleted user] image

[Deleted User]

Hope now you can create your own distribution using s3 and Cloudfront.

Comments below!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay