DEV Community

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

Posted on • Edited on

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!

Top comments (0)