Host a static HTML website using AWS S3 Bucket
Simple Storage Service is an object-level storage solution provided by Amazon Web Services (AWS). This cloud service allows us to store any type of file. It provides unlimited storage and a single file upload limit of 5TB. S3 buckets can be used to host a static website. In many cases, we do not need a dynamic website with frequently changing data.
Buckets comprise Amazon S3's top-level domain namespace, and bucket names are unique globally. As a result, any object URL in an S3 bucket is accessible via the internet via a unique URL, which is typically structured as follows:
https://.s3.amazonaws.com/.
As a result, to host a static website, we can create an Amazon S3 bucket for static website hosting and then upload the static content to that bucket. This bucket must have public read access for a website to be publicly accessible. The website is then accessible via the AWS region-specific website address, such as:
https://<region>.s3.amazonaws.com/<bucket>/index.html
Steps :
1. Create an Account in AWS?
2. Create your access key and secret key
3. Install aws cli
4. Configure aws cli
5.Make bucket
aws s3 mb s3://my-bucket-19259
aws s3 ls
Output >
[prayag@panel ~]$ aws s3 mb s3://my-bucket-19259
make_bucket: my-bucket-19259
[prayag@panel ~]$ aws s3 ls
2022-07-28 15:08:59 my-bucket-19259
[prayag@panel ~]$
6. Enable Static website
aws s3 website s3://my-bucket-19259 --index-document index.html
aws s3 website s3://my-bucket-19259 --index-document index.html
7. Set public access to bucket using policy?
cat > web-policy.json
{
? ? "Version": "2012-10-17",
? ? "Statement": [
? ? ? ? {
? ? ? ? ? ? "Sid": "PublicReadGetObject",
? ? ? ? ? ? "Effect": "Allow",
? ? ? ? ? ? "Principal": "*",
? ? ? ? ? ? "Action": [
? ? ? ? ? ? ? ? "s3:GetObject"
? ? ? ? ? ? ],
? ? ? ? ? ? "Resource": [
? ? ? ? ? ? ? ? "arn:aws:s3:::my-bucket-19259/*"
? ? ? ? ? ? ]
? ? ? ? }
? ? ]
}
aws s3api put-bucket-policy --bucket s3://my-bucket-19259/ --policy file://web-policy.json
Output >
[prayag@panel ~]$ cat web-policy.json
{
? ? "Version": "2012-10-17",
? ? "Statement": [
? ? ? ? {
? ? ? ? ? ? "Sid": "PublicReadGetObject",
? ? ? ? ? ? "Effect": "Allow",
? ? ? ? ? ? "Principal": "*",
? ? ? ? ? ? "Action": [
? ? ? ? ? ? ? ? "s3:GetObject"
? ? ? ? ? ? ],
? ? ? ? ? ? "Resource": [
? ? ? ? ? ? ? ? "arn:aws:s3:::my-bucket-19259/*"
? ? ? ? ? ? ]
? ? ? ? }
? ? ]
}
[prayag@panel ~]$ aws s3api put-bucket-policy --bucket my-bucket-19259 --policy file://web-policy.json
8. We have a website folder, which we will copy/sync in s3 bucket -
cd website
ls
aws cp . s3://my-website-19259 --recursive
aws s3 ls s3://my-website-19259
Output >
[prayag@panel ~]$ cd website
[prayag@panel website]$ ls
css? images? index.html? LICENSE-free.txt? Prayag-Sangode.pdf? README.txt? scripts
[prayag@panel website]$
[prayag@panel website]$ aws s3 cp . s3://my-bucket-19259? --recursive
upload: ./README.txt to s3://my-bucket-19259/README.txt
upload: css/font-awesome/LICENSE.txt to s3://my-bucket-19259/css/font-awesome/LICENSE.txt
upload: ./LICENSE-free.txt to s3://my-bucket-19259/LICENSE-free.txt
upload: css/aos.css to s3://my-bucket-19259/css/aos.css
9. Access website url -
URL will be in below format -
https://<bucket-name>-website-<zone>.amazonaws.com
In this case -
https://my-bucket-19259.s3-website-us-east-1.amazonaws.com
Amazon Route 53, is used to register domains and specify where internet traffic for your domain name should be routed. This service provides access to a website using the owner's custom domain name. In other words, AWS does not require users to use an Amazon S3-provided subdomain to access their static websites.
AWS Route 53 alias records, which route traffic for your domain name, example-site.com and subdomain, www.example-site.com to an Amazon S3 bucket containing the static website code, can also be used to access your static website.
That's it. I hope you found this to be useful in some way. I'll be back with some more interesting new Cloud and Devops articles.