Ravindra BagaleCourses & study guides English

S3 वर Static Website कशी host करायची: CloudFront, HTTPS (ACM) आणि Route 53 सह

By , trainer LinkedIn Last updated:

S3 Bucket Policy Examples मध्ये buckets lock करायला शिकलो. आता एक bucket काळजीपूर्वक जगासाठी उघडू: S3 वर static website, मग production पद्धत: CloudFront, Origin Access Control (OAC), HTTPS साठी free ACM certificate आणि तुमच्या domain साठी Route 53 alias.

या chapter मध्ये तुम्ही काय शिकाल

  • Static site ला server का लागत नाही
  • S3 website hosting: index, error page, website endpoint
  • CloudFront + OAC public bucket पेक्षा चांगलं का
  • ACM (us-east-1) सह HTTPS आणि Route 53 alias
  • React, Angular, Vue, Hugo मधून deploy

1. Bakery ची गोष्ट

एका bakery ला साधी website हवी: menu, photos, phone number. Server भाड्याने घेणं म्हणजे दर तास पैसे, Linux patching आणि दिवाळीला traffic ची चिंता. पण pages प्रत्येक visitor साठी बदलत नाहीत. त्या फक्त files आहेत.

Files S3 मध्ये. HTML, CSS, JS आणि images bucket मध्ये ठेवा, S3 serve करतं. खर्च: महिन्याला काही रुपये.

2. S3 static website hosting

हे का लागतं?

साधा bucket exact key ने files देतो. Websites ना "/" वर index.html आणि friendly 404 page हवं. Website hosting ते देतं.

हे काय आहे?

SettingValueका
Static website hostingEnableWebsite endpoint चालू करतं
Index documentindex.html/ आणि प्रत्येक folder साठी दाखवतो
Error documenterror.html404 वर दाखवतो
Block Public AccessOff (फक्त हा bucket)Website endpoint signing करत नाही; public read लागतो
Bucket policyPublic GetObject (मागच्या chapter चं example 1)Visitors ना वाचू देते

ap-south-1 चा endpoint: http://bucket.s3-website.ap-south-1.amazonaws.com. काही जुन्या Regions मध्ये dash, उदा. s3-website-us-east-1. Website endpoint फक्त HTTP. म्हणूनच आपण CloudFront जोडतो.

3. Origin Access Control सह CloudFront

हे का लागतं?

CloudFront शिवाय: HTTPS नाही, bucket public हवा, आणि London मधला visitor Mumbai ची वाट बघतो. CloudFront तिन्ही सोडवतं.

हे काय आहे?

CloudFront म्हणजे AWS चा CDN, शेकडो edge locations users जवळ files cache करतात. OAC फक्त तुमच्या distribution ला bucket वाचू देतो, म्हणून bucket Block Public Access सह पूर्ण private राहतो.

Production static siteVisitorhttps://www.bakery.inRoute 53alias A recordCloudFrontACM cert, cacheOACsigned requestS3 bucketprivate, REST endpoint
Bucket कधीच public नाही. फक्त CloudFront वाचू शकतं.
मुद्दाS3 website endpointCloudFront + OAC
HTTPSनाहीहो, ACM free cert
Bucket publicहोनाही
जगभर speedएक RegionEdge cache
निवडायचा origin-S3 REST endpoint (bucket.s3.ap-south-1.amazonaws.com), website endpoint नाही

Ravindra Bagale's Tip

OAC फक्त S3 REST endpoint सोबत चालतो. OAC सोबत CloudFront मध्ये "Default root object" = index.html ठेवा. Subfolder index pages साठी CloudFront Function लागतं, किंवा folder/index.html links देणारी build tools.

4. ACM आणि Route 53 सह HTTPS

हे का लागतं?

Browsers HTTP sites ना "Not secure" दाखवतात. ACM free public certificates देतं जे आपोआप renew होतात.

हे काय आहे?

  • CloudFront साठी certificate us-east-1 (N. Virginia) मध्येच request करायचं, bucket कुठल्याही Region मध्ये असो.
  • DNS ने validate: ACM CNAME देतं; Route 53 सोबत एका click मध्ये बनतो.
  • CloudFront मध्ये "Alternate domain names (CNAMEs)" खाली domain टाका.
  • Route 53 मध्ये A record, Alias = yes, target distribution. Alias root (bakery.in) वर चालतो जिथे CNAME चालत नाही, आणि AWS targets च्या alias queries free.

5. कोणत्याही stack मधून deploy

StackBuildUpload
React (Vite)npm run build → dist/aws s3 sync dist/ s3://b --delete
Angularng build → dist/app/browseraws s3 sync dist/app/browser s3://b --delete
Vuenpm run build → dist/aws s3 sync dist/ s3://b --delete
Next.js (export)output:"export", next build → out/aws s3 sync out/ s3://b --delete
Hugohugo → public/aws s3 sync public/ s3://b --delete
Plain HTML-aws s3 sync ./site s3://b

प्रत्येक deploy नंतर: aws cloudfront create-invalidation --distribution-id E123 --paths "/index.html". का: CloudFront cache करतं; invalidation नवीन file आणतं. Hashed asset names (app.3f9a.js) मुळे सगळं invalidate करावं लागत नाही.

SPA routing (React Router): CloudFront › Error pages मध्ये 403 आणि 404 ला /index.html response 200 सह map करा.

6. Lab: part A website endpoint, part B CloudFront + OAC + HTTPS

कसं करायचं (step by step)

Part A: S3 website

  1. Files बनवा: echo "<h1>Bakery</h1>" > index.html; echo "<h1>Not found</h1>" > error.html.
  2. ap-south-1 मध्ये bucket yourname-bakery-site बनवा. Block all public access uncheck, acknowledgement tick.
  3. aws s3 cp index.html s3://yourname-bakery-site/; aws s3 cp error.html s3://yourname-bakery-site/.
  4. Properties › Static website hosting › Edit › Enable, Index = index.html, Error = error.html › Save.
  5. Permissions › Bucket policy: arn:aws:s3:::yourname-bakery-site/* वर public GetObject.
  6. curl http://yourname-bakery-site.s3-website.ap-south-1.amazonaws.com/. अपेक्षित: <h1>Bakery</h1>. /nope ला Not found.

Part B: CloudFront मागे private

  1. Bucket policy delete, website hosting disable, Block all public access परत on.
  2. (Domain असेल तर) ACM, Region us-east-1 › Request public certificate › www.yourdomain.com › DNS validation › Create records in Route 53. "Issued" होईपर्यंत थांबा.
  3. CloudFront › Create distribution › Origin domain = yourname-bakery-site.s3.ap-south-1.amazonaws.com (website वाला नाही).
  4. Origin access = Origin access control settings › Create new OAC (Sign requests).
  5. Viewer protocol policy = Redirect HTTP to HTTPS. Default root object = index.html. WAF = enable नको (lab).
  6. (Domain) Alternate domain name = www.yourdomain.com, Custom SSL certificate = ACM cert. Create.
  7. CloudFront दाखवतं ती policy copy करून bucket policy मध्ये paste करा. ती AWS:SourceArn = तुमचं distribution सह cloudfront.amazonaws.com ला allow करते.
  8. Deployed होईपर्यंत थांबा. curl -I https://dxxxx.cloudfront.net/. अपेक्षित: HTTP/2 200, x-cache header.
  9. Private तपासा: curl -I https://yourname-bakery-site.s3.ap-south-1.amazonaws.com/index.html. अपेक्षित: 403.
  10. (Domain) Route 53 › hosted zone › Create record › www, A, Alias on, Alias to CloudFront distribution. https://www.yourdomain.com उघडा.

Cleanup

  1. Route 53 record delete. CloudFront › Disable, थांबा, मग Delete.
  2. aws s3 rb s3://yourname-bakery-site --force. वापरत नसाल तर ACM cert delete.

7. Interview questions

प्र. S3 website endpoint HTTPS support करतो का?

नाही, फक्त HTTP. HTTPS साठी CloudFront.

प्र. OAC म्हणजे काय?

Origin Access Control: CloudFront S3 ला signed requests पाठवतं म्हणून फक्त distribution private bucket वाचू शकतं. जुन्या OAI ची जागा.

प्र. CloudFront ACM certificate कोणत्या Region मध्ये?

नेहमी us-east-1.

प्र. bakery.in साठी CNAME नाही तर alias का?

Zone apex वर CNAME चालत नाही; alias A record चालतो, आणि AWS alias queries free.

प्र. Deploy नंतर users ना जुनं page दिसतं. का?

CloudFront cache. Invalidation करा किंवा hashed file names वापरा.

घरी करून बघा

  1. React build S3 + CloudFront वर deploy करा आणि 403/404 → index.html rule ने deep links ठीक करा.
  2. Website endpoint आणि CloudFront चे curl -I timings compare करा.

थोडक्यात सांगायचं तर

  1. Static sites म्हणजे files; S3 files serve करतं.
  2. Website endpoint = फक्त HTTP आणि public bucket लागतो.
  3. CloudFront + OAC bucket private ठेवतो आणि HTTPS व caching देतो.
  4. CloudFront साठी ACM cert us-east-1 मध्ये.
  5. Route 53 alias A record domain CloudFront कडे नेतो.

सराव Tasks

या scenario बद्दल

Sahyadri Clinic हा सातारा मधला आरोग्य सेवा व्यवसाय आहे. Dr. Anil Deshmukh त्यांचं IT व cloud काम पाहतात. त्यांचे पैसे INR मध्ये मोजले जातात आणि AWS resources ap-south-1 Region मध्ये चालतात. खालच्या tasks मध्ये तुम्ही या lesson मध्ये शिकलेलं वापरून त्यांची खरी कामं करता. सगळी नावं, account IDs, IP addresses व numbers सरावासाठी काल्पनिक आहेत.

0 / 12

सोपं Distributions दाखवा

का: Distribution ID व domain नाव शोधा.

काय करायचं: सगळे CloudFront distributions दाखवा.

कसं करायचं:
  1. Task वाचा आणि ते कोणत्या AWS service बद्दल आहे ते ठरवा.
  2. aws लिहा, मग service चं नाव, मग operation (action शब्द).
  3. प्रत्येक आवश्यक flag (--name) व त्यापुढे task मधली value लिहा.
  4. Flags कोणत्याही क्रमाने चालतात. Check answer दाबा.

सोपं एका bucket ला read-only access

का: Least privilege: कामाला लागणारे actions व bucket च द्या.

काय करायचं: User ला फक्त sahyadriclinic-data bucket मधले objects वाचू (s3:GetObject) देणारी identity policy लिहा.

कसं करायचं:
  1. { "Version": "2012-10-17", "Statement": [ ... ] } ने सुरू करा.
  2. प्रत्येक statement मध्ये Effect, Action व Resource लिहा.
  3. Task ला लागेल तेवढंच द्या (least privilege).
  4. Double quotes व commas नीट वापरा. Check answer दाबा.

मध्यम CloudFront cache साफ करा

का: Deploy नंतर invalidate करा म्हणजे visitors ना नव्या files लगेच मिळतात.

काय करायचं: Distribution E2QWRUHAPOMQZL वर सगळे paths (/*) invalidate करा.

कसं करायचं:
  1. Task वाचा आणि ते कोणत्या AWS service बद्दल आहे ते ठरवा.
  2. aws लिहा, मग service चं नाव, मग operation (action शब्द).
  3. प्रत्येक आवश्यक flag (--name) व त्यापुढे task मधली value लिहा.
  4. Flags कोणत्याही क्रमाने चालतात. Check answer दाबा.

मध्यम Public website साठी bucket policy

का: Static website bucket ने सगळ्यांना files वाचू द्याव्या.

काय करायचं: sahyadriclinic-site मधल्या प्रत्येक object वर कोणालाही (*) s3:GetObject करू देणारी bucket policy लिहा.

कसं करायचं:
  1. { "Version": "2012-10-17", "Statement": [ ... ] } ने सुरू करा.
  2. प्रत्येक statement मध्ये Effect, Action व Resource लिहा.
  3. Task ला लागेल तेवढंच द्या (least privilege).
  4. Double quotes व commas नीट वापरा. Check answer दाबा.

मध्यम Website folder S3 ला sync करा

का: sync फक्त नव्या/बदललेल्या files upload करतो व deleted काढू शकतो.

काय करायचं: ./site folder s3://sahyadriclinic-web/ ला sync करा आणि ./site मध्ये नसलेल्या S3 files delete करा.

कसं करायचं:
  1. Task वाचा आणि ते कोणत्या AWS service बद्दल आहे ते ठरवा.
  2. aws लिहा, मग service चं नाव, मग operation (action शब्द).
  3. प्रत्येक आवश्यक flag (--name) व त्यापुढे task मधली value लिहा.
  4. Flags कोणत्याही क्रमाने चालतात. Check answer दाबा.

मध्यम Bucket ला website बनवा

का: Static website hosting S3 मधून index.html व error page देतं.

काय करायचं: s3://sahyadriclinic-web वर static website hosting सुरू करा: index page index.html, error page error.html.

कसं करायचं:
  1. Task वाचा आणि ते कोणत्या AWS service बद्दल आहे ते ठरवा.
  2. aws लिहा, मग service चं नाव, मग operation (action शब्द).
  3. प्रत्येक आवश्यक flag (--name) व त्यापुढे task मधली value लिहा.
  4. Flags कोणत्याही क्रमाने चालतात. Check answer दाबा.

मध्यम एक bucket list व read

का: ListBucket bucket ARN वर; GetObject object ARNs वर चालतो.

काय करायचं: sahyadriclinic-data bucket वर s3:ListBucket व सगळ्या objects वर s3:GetObject allow करा. बाकी काही नाही.

कसं करायचं:
  1. { "Version": "2012-10-17", "Statement": [ ... ] } ने सुरू करा.
  2. प्रत्येक statement मध्ये Effect, Action व Resource लिहा.
  3. Task ला लागेल तेवढंच द्या (least privilege).
  4. Double quotes व commas नीट वापरा. Check answer दाबा.

अवघड Config file पासून distribution बनवा

का: पूर्ण config JSON मध्ये ठेवणं सोपं.

काय करायचं: dist.json पासून CloudFront distribution बनवा.

कसं करायचं:
  1. Task वाचा आणि ते कोणत्या AWS service बद्दल आहे ते ठरवा.
  2. aws लिहा, मग service चं नाव, मग operation (action शब्द).
  3. प्रत्येक आवश्यक flag (--name) व त्यापुढे task मधली value लिहा.
  4. Flags कोणत्याही क्रमाने चालतात. Check answer दाबा.

अवघड CloudFront OAC साठी bucket policy

का: OAC मुळे फक्त तुमचा CloudFront distribution private bucket वाचतो.

काय करायचं: cloudfront.amazonaws.com ला sahyadriclinic-site/* वर s3:GetObject allow, फक्त aws:SourceArn = arn:aws:cloudfront::102103063049:distribution/E2QWRUHAPOMQZL असेल तेव्हा.

कसं करायचं:
  1. { "Version": "2012-10-17", "Statement": [ ... ] } ने सुरू करा.
  2. प्रत्येक statement मध्ये Effect, Action व Resource लिहा.
  3. Task ला लागेल तेवढंच द्या (least privilege).
  4. Double quotes व commas नीट वापरा. Check answer दाबा.

अवघड CloudFront साठी free certificate मागा

का: CloudFront फक्त us-east-1 मधले ACM certificates वापरतो.

काय करायचं: sahyadriclinic.in व www.sahyadriclinic.in साठी DNS validation ने us-east-1 मध्ये certificate मागा.

कसं करायचं:
  1. Task वाचा आणि ते कोणत्या AWS service बद्दल आहे ते ठरवा.
  2. aws लिहा, मग service चं नाव, मग operation (action शब्द).
  3. प्रत्येक आवश्यक flag (--name) व त्यापुढे task मधली value लिहा.
  4. Flags कोणत्याही क्रमाने चालतात. Check answer दाबा.

अवघड दोन paths invalidate करा

का: फक्त बदललेलं invalidate करणं स्वस्त व जलद.

काय करायचं: E2QWRUHAPOMQZL वर /index.html व /css/site.css invalidate करा.

कसं करायचं:
  1. Task वाचा आणि ते कोणत्या AWS service बद्दल आहे ते ठरवा.
  2. aws लिहा, मग service चं नाव, मग operation (action शब्द).
  3. प्रत्येक आवश्यक flag (--name) व त्यापुढे task मधली value लिहा.
  4. Flags कोणत्याही क्रमाने चालतात. Check answer दाबा.

अवघड Origin Access Control बनवा

का: OAC मुळे फक्त CloudFront तुमचा private S3 bucket वाचू शकतो.

काय करायचं: oac.json पासून origin access control बनवा.

कसं करायचं:
  1. Task वाचा आणि ते कोणत्या AWS service बद्दल आहे ते ठरवा.
  2. aws लिहा, मग service चं नाव, मग operation (action शब्द).
  3. प्रत्येक आवश्यक flag (--name) व त्यापुढे task मधली value लिहा.
  4. Flags कोणत्याही क्रमाने चालतात. Check answer दाबा.

सगळे सराव tasks Task Hub मध्ये पाहा →

उजळणी, तुलना आणि मुलाखत cards

हा lesson काही मिनिटांत revise करा. Cards phone वर save करा किंवा PNG download करा. प्रत्येक card वरचा QR हा lesson उघडतो.

उजळणी card: S3 static website. Static sites म्हणजे files. S3 files serve करतं. Hosting enable, index.html, error.html. Website endpoint फक्त HTTP आणि public read लागतो. Mumbai मधला endpoint format.
उजळणी card: S3 static website · PNG download करा
उजळणी card: OAC सह CloudFront. CloudFront site edge locations वर cache करतं आणि HTTPS देतं. OAC फक्त तुमच्या distribution ला bucket वाचू देतो. Origin म्हणून S3 REST endpoint, website वाला नाही. Block Public Access on ठेवून bucket private.
उजळणी card: OAC सह CloudFront · PNG download करा
उजळणी card: ACM HTTPS आणि Route 53 alias. CloudFront certificate us-east-1 मध्ये request करा. DNS ने validate; ACM free renew करतं. Route 53 alias A record domain CloudFront कडे नेतो. Alias root domain वर चालतो, CNAME नाही.
उजळणी card: ACM HTTPS आणि Route 53 alias · PNG download करा
तुलना: S3 website endpoint vs CloudFront + OAC. S3 website endpoint: Bucket स्वतः एका Region मधून site देतो. CloudFront + OAC: CDN edge caches मधून site देतो आणि private bucket वाचतो.
तुलना: S3 website endpoint vs CloudFront + OAC · PNG download करा
तुलना: Route 53 alias record vs CNAME record. Route 53 alias record: नाव AWS resource कडे नेणारं AWS extension. CNAME record: एका नावावरून दुसऱ्या नावाकडे standard DNS pointer.
तुलना: Route 53 alias record vs CNAME record · PNG download करा
मुलाखत card: Private bucket तुमच्या domain वर HTTPS ने कसा serve करता?. OAC सह CloudFront, origin = S3 REST endpoint. us-east-1 मधलं ACM certificate, alternate domain म्हणून. Distribution ला Route 53 alias A record.
मुलाखत card: Private bucket तुमच्या domain वर HTTPS ने कसा serve करता? · PNG download करा

अजून cards: Ravi Sir's Cards.