Hosting your static website in S3 by leveraging cloudfront

Muchiri — Sat, 27 Jan 2024 17:48:13 +0000

S3 as a service can be linked from on-premise and other cloud services like Amazon Ec2 a computing services that allows to 'rent' servers in AWS. We will be hosting a static website in s3, this does not require compute

Before we setup the environment we need to understand that when adapting to cloud we should have a secure first approach.

We will leverage another AWS service know a Cloud Front. It is a web service that enhances and distributes your static and dynamic web content faster. It leverages its self from a worldwide network of data centers. It delivers the content on http and https adding
a secure and encrypted against a normal protecting against common cyber attacks.

From the s3 bucket we had created, upload your website by selecting all files and folders.

After a successful upload your console should provide a green success message at the top

in the buckets permission tab click on edit, disable the block public access

Deactivate the feature, this is temporary

Type confirm

navigate down to bucket policy and click edit

image...

paste this policy

`"Version": "2012-10-17",
"Statement": [
    {
        "Sid": "PublicReadGetObject",
        "Effect": "Allow",
        "Principal": "*",
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::bucket-name/*"
    }
]

}`
Replace the bucket name with your bucket name, it should like follows

navigate down and save changes.

Click on properties in the bucket profile settings and scroll down to static website hosting

click on the edit button, navigate and enable static web hosting. in the index document add your index.html as the index document, for the error handling file type "error/index.html.

To retrieve the endpoint for your bucket, click the Properties tab, scroll to the bottom, and click the copy icon next to the Bucket website endpoint, copy it to a new tab and it will load your index.html page.

Scroll down and save changes.

Navigate to the search bar and search for CloudFront

create CloudFront a distribution

Do not click at the web endpoint and scroll down to origin access use the origin access control settings, this allows s3 to allow cloudfront to access it.

click on create control settings

Name it to mirror your s3 bucket-name you can use your abbreviation of CF to show its cloud-front then click on create.

scroll down to the Web Application Firewall do not enable protection

Default root object type index.html, leave the other default settings as they are, create the distribution.

There will be a splash screen suggesting you to update the policy in your s3 copy policy and navigate to s3 permissions and click on edit clear the previous policy you had pasted before and pste the new one, navigate below and save changes.

navigate to the public access settings, click on edit, activate the settings, click on save. Type confirm and click on confirm

Navigate back to CloudFront page and copy the distribution name and paste it to a new tab. your website will be all set up

Have a try, give me a feed back on how the exercise was

Creating your first S3 bucket in AWS

Muchiri — Wed, 24 Jan 2024 21:00:09 +0000

Amazon web services provides a infinite number of services, from compute, storage, networking and other IT solutions.

Simple storage service (s3) is a service that provides storage for objects i.e files of any format for videos, documents, log files are some of the files you could upload in a Bucket.
we will create a bucket and upload a file to the bucket

in order to undertake this exercise you need to have an AWS Account and to do that you can visit this link
https://docs.aws.amazon.com/SetUp/latest/UserGuide/setup-AWSsignup.html
it provides a step to step guide to setting up your account.

On the right click on create bucket

S3 is a global service, it is not region specific based on the AWS ecosystem. Your Bucket is hosted in a region, select your region of choice

AWS provide you two options on bucket type General purpose and Directory buckets
The General purpose is recommended for most use cases and Directory bucket uses the S3 Express One Zone storage class for application is performance sensitive or performance-critical for workloads and applications.
in our case we will select the General purpose as this tutorial does not require critical

S3 names should be globally unique, i will name mine name your bucket as you wish.

The next step there is an option of object ownership to enable access control list, this feature allows objects to be owned by other AWS accounts. In our case we disable this function

S3 allows public access option with different sub-settings for fine tuning public access, this is useful in cases like when you host a static website, giving access to files to the public or to verified users.
in our case we will not allow public access in our case

while setting up s3 offers versioning option, this is useful in the updating of different versions of an object in a bucket, we will look at another article. We will disable versioning

You can add tags to easily identify the bucket especially if it is used by different services, we will not be needing this as for now.

All data is Encrypted, s3 offers a number of encryption options.As for now we will go with the default option.

Before you create the bucket,navigate the advance settings,there is object lock, this works when the bucket is versioned, but it is useful for write once read many time to prevent objects from being deleted or overwritten.

Create your bucket. When successful a green popup will indicate that the s3 was successfully created.

click on the s3 bucket, another page will provide additional settings for the bucket. click on the upload button, i will be uploading an image to the bucket. S3 allows you to upload both as a file or as a folder, i will be adding a file

Navigate to file folder, mine is at the desktop at pic folder

After successfully uploading the file a notification shows it went through.

I hope this was helpful as you begin your AWS journey.

Forem: Muchiri

Hosting your static website in S3 by leveraging cloudfront

Creating your first S3 bucket in AWS