Here's a comprehensive overview of Amazon
S3 – Static Website Hosting, including its concept, features,
setup steps, benefits, limitations, and use cases:
Concept: Amazon S3 – Static Website Hosting
Amazon S3 (Simple Storage Service)
allows twtech to host static websites, which means sites composed of only HTML,
CSS, JavaScript, images, and other static assets — no server-side code
(like PHP, Python, or Node.js).
S3 can serve these files directly
from a bucket, with a public endpoint accessible via a browser.
Key Features
- Simple Static Hosting:
Serve HTML/CSS/JS files directly from an S3 bucket.
- Custom Domain Support:
Integrate with Route 53 or another DNS provider to use a custom domain.
- Error and Index Document Support: Define default documents like index.html
and custom 404.html.
- Scalable and Durable:
Built on S3’s architecture, it offers 99.999999999% durability.
- Global Reach:
Combine with Amazon CloudFront for CDN delivery.
- HTTPS via CloudFront:
Add SSL/TLS by integrating with CloudFront.
- Low Cost:
Pay only for storage and data transfer.
Setup Steps
- Create an S3 Bucket
- Name it the same as twtech domain (e.g., www.twtechapp.com).
- Upload Website Files
- Upload all static files (e.g., index.html,
style.css, etc.).
- Enable Static Website Hosting
- Go to the Properties tab of the bucket.
- Enable Static Website Hosting and set the index
and error documents.
- Set Bucket Policy for Public Access
- Modify the bucket permissions to allow public read
access:
# json
{
"Version":"2012-10-17",
"Statement":[{
"Effect":"Allow",
"Principal": "*",
"Action":["s3:GetObject"],
"Resource":["arn:aws:s3:::twtechs3/*"]
}]
}
- (Optional) Configure Custom Domain
- Use Route 53 or another DNS provider to point twtech domain to the S3 static website endpoint.
- For HTTPS, set up CloudFront in front of the S3
bucket.
Benefits
- Highly Available and Scalable
- Cost-Effective
for low-traffic and static content
- Secure Access Control
using IAM, Bucket Policies, and CloudFront
- Integrated
with AWS Ecosystem
- Custom Domain & CDN Integration
Limitations
- No Dynamic Content
(e.g., server-side logic or database queries)
- No Native HTTPS on S3 website endpoints (must use CloudFront for HTTPS)
- Complex HTTPS Setup
with custom domains
- Limited Logging and Monitoring without enabling CloudFront or S3 logging
- No built-in versioning for website unless versioning is explicitly enabled
twtech Use Cases
- Personal Blogs(Think-with-tech) or Portfolios
- Documentation Sites
- Landing Pages or Marketing Pages
- Single Page Applications (SPA) with frontend frameworks (React, Angular, Vue)
- Frontend Prototypes or Demos
- Error Pages or Maintenance Pages for larger systems.
Project: Hands-on
How twtech creates and host static websites on s3 bucket.
Go to s3 bucket service.
Select the s3 bucket to host the static website:twtechs3
Click open the bucket and navigate to: properties.
Scroll down Static website hosting to: Edit
Select the hosting type: Host a Static website.
Enable static website hosting
Select the hosting type: Host a Static website.
Index document:
Specify
the home or default page of the website: index.html
And
save changes
Go back to objects on the menu: To upload the index.html file
Add file(s):index.html
Sample link for html file:
https://github.com/Devopspat35/Package-management/blob/master/index.html
select the index.html file: To upload
Upload the file: index.html
How to access the index.html file with the url:
Click on the uploaded file:
index.html
Copy the object url to access the file on the browser: https://twtechs3.s3.us-east-2.amazonaws.com/index+(3).html
How twtech Uploads entire folders with html file and associated scripts for a website:
Link to the zip file:
https://github.com/Devopspat35/Package-management/blob/master/html-magazine-template.zip
Download the file the zip file:
Unzip the file : make sure winrar or unzip manage exist.
verify the: Unzipped folder with html for website.
Upload the entire folder with index.html file to the s3
bucket:twtechs3
From:
To:
Click on the file : indext.html
Copy the object url and access
the on the browser: https://twtechs3.s3.us-east-2.amazonaws.com/html-magazine-template/html-magazine-template/index.html
No comments:
Post a Comment