ကျွန်တော်တို့ Frontend Web project တွေကို SSR မပါပဲ ရေးခဲ့တယ်ဆိုရင် hosting အတွက် ကျွန်တော်အကြိုက်ဆုံးကတော့ S3 ပေါ်မှာ ထားပြီး Cloudfront နဲ့ static host တာပါ။ ဒီနည်းက ငွေကြေးအရလည်း တွက်ချေကိုက်ပြီးတော့ speed, reliability and availability လည်း အရမ်းကောင်းပါတယ်။ ဒီလို လုပ်ဖို့ အတွက် လိုအပ်တဲ့ AWS Services တွေကတော့
AWS S3
AWS CloudFront
AWS Certificate Manager (ACM) တို့ပဲ ဖြစ်ပါတယ်။
Creating S3 Bucket
Browser မှာ AWS Account login ဝင်ပြီးရင် S3 Management Console ထဲသွားပြီး Create bucket ကိုနှိပ်ပါ။
Bucket name ကိုယ်ကြိုက်တာပေးပါ Bucke name ပေးတဲ့ Ploicy ကို ဒီမှာ (bucketnamingrules) ဖတ်ကြည့်လို့ရပါတယ်။ ကျွန်တော်ကတော့ kalaung-org-test လို့ ပေးလိုက်ပါတယ်။
AWS Region နေရာမှာ Asia Pacific (Singapore) ကိုရွေးလိုက်ပါတယ် မြန်မာနဲ့ အနီးဆုံးမို့လို့ပါ။
Object Ownership မှာ ACLs disabled ကိုရွေးပေးလိုက်ပါ။
အောက်ဆုံးထိ scroll ဆွဲပြီး အောက်ဆုံးမှာရှိတဲ့ Create bucket ကိုနှိပ်လိုက်လို့ရပါပြီ။ **(**ကျန်တာတွေကို ကျော်သွားလို့ရပါတယ်)။
Creating CloudFront Distribution
CloudFront Console ထဲသွားပြီး Create Distribution ဆိုတာကို နှိပ်ပါ။
Origin domain ဆိုတဲ့ နေရာမှာ ခုနက ဆောက်ခဲ့တဲ့ S3 Bucket ကို ရွေးလိုက်ပါ။
Origin Access မှာ Origin access control settings (recommended) ကိုရွေးပြီး
Origin access control ဘေးမှာ Create Control Setting ဆိုတာကိုနှိပ်ပြီး
ပေါ်လာတဲ့ Box ထဲမှာ Do not override authorization header လေးကို On ပေးပြီး Create ကို နှိပ်ပါ။အလယ်လောက်အထိ Scroll ဆွဲသွားလိုက်ရင် Web Application Firewall (WAF) ဆိုတဲ့ နေရာကိုရောက်ပါမယ်။ အဲ့မှာ Do not enable security protections ကိုပဲ ရွေးပေးလိုက်ပါ။
ဒီလောက်ဆို ကျွန်တော်တို့ လိုအပ်တာတွေ ရပါပြီ ကျန်တွေကို ကျော်သွားပြီး အောက်ဆုံးက Create Distribution ဆိုတာကိုနှိပ်လိုက်လို့ရပါပြီ။
ဒီနေရမှာ တခု သတိထားရမှာက ကျွန်တော်တို့က S3 bucket ကို private ထားပြီး Origin Access control နဲ့သွားမှာ ဖြစ်တဲ့အတွက် CloudFront ကနေ S3 ကို Read access ရဖို့ S3 bucket မှာ Ploicy ရေးပေးဖို့လိုတဲ့ အကြောင်းနဲ့ ရေးရမဲ့ policy ကို CloudFront creating ပြီးရင် ပေးမယ်ဆိုတဲ့အကြောင်း သတိပေးထားပါတယ်။
Distribution create ပြီးသွားတဲ့အခါမှာ ဒီလိုလေး ပေါ်လာပါလိမ့်မယ်။
Copy policy ကိုနှိပ်ပြီး policy ကို ကော်ပီကူးလိုက်ပါ။ ပြီးရင် Go to bucket permissions.... ဆိုတာကိုနှိပ်ပြီး permission ထည့်ရမဲ့နေရာကို သွားထည့်လိုက်ရုံပါပဲ။
ပွင့်လာတဲ့ Browser new tab ထဲက Bucket Policy ဘေးနားက Edit ဆိုတာကို နှိပ်ပြီး ကူးလာတာလေး ထည့်ပေးပြီး save လိုက်ရုံပါပဲ။
Testing Distribution
ကျွန်တော်တို့ လုပ်ခဲ့တာတွေ အလုပ် လုပ်/မလုပ် စမ်းဖို့ index.html ဖိုင်တစ်ခု ဖန်တီးပြီး S3 ပေါ်တင်ကြည့်ပါမယ် ကျွန်တော်ကတော့ index.html ဖိုင်ထဲမှာ အောက်က code တွေထည့်ရေးပြီးသိမ်းလိုက်ပါတယ်။
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testing</title>
</head>
<body>
<h1>Hello</h1>
<p>Testing the S3 static website hosting width CloudFront</p>
</body>
</html>
html ဖိုင်ရလာပြီဆိုရင် S3 bucket ကိုဖွင့်ပြီး အဲ့ဖိုင်ကို upload တင်ပေးလိုက်ပါမယ်။
ဖိုင်တင်ပြီးပြီဆိုရင် စမ်းကြည့်ဖို့ CloudFront console ထဲက Distributions ထဲသွားပါ။ အောက်က ပုံထဲကလိုမျိုး မြင်ရပါလိမ့်မယ်။ အဲ့ထဲက Domain name ဆိုတာလေးကို ကော်ပီကူးပြီး new tab မှာ ဖွင့်ကြည့်ပါ အဆင်ပြေပြီလို့ မထင်ပါနဲ့ Access Denied ဆိုတာပဲ မြင်ရမှာပါ :3 ။ ဘာလို့လဲဆိုတော့ ကျွန်တော်တို့ Default root object နဲ့ custom error page တွေ မသတ်မှတ်ပေးရသေးလို့ပါ။
Default root object ကို သတ်မှတ်ဖို့အတွက်။ Distribution ID ကို နှိပ်ပြီး ဖွင့်လိုက်ပါ။ အောက်က ပုံထဲကလိုပေါ်လာရင် General >> Settings ထဲက Edit ကိုနှိပ်ပါ
ပြီးရင် Default root object မှာ index.html လို့ ထားလိုက်ပြီး Save changes ကို နှိပ်လိုက်ပါ။
ပြီးရင် Error pages ထဲသွားပြီး Create custom error responses ကိုနှိပ်ပါမယ်။
ပုံထဲကလိုမျိုး သတ်မှတ်ပါမယ် 403 အတွက် တခု 404 အတွက် တခု နှစ်ခု လုပ်ရပါမယ်။ ကိုယ့် project မှာ 403, 404 page တွေ ပါရင် အဲ့ဖိုင်ကို သတ်မှတ်ပေးပြီး မပါရင်တော့ index.html ပဲ ထားလိုက်ပါ။
အောက်ကလိုလေး ဖြစ်သွားပြီဆိုရင်တော့ ကျွန်တော်တို့ cloudfront domain ကို ဖွင့်ကြည့်လို့ရပါပြီ။
ဒီတစ်ခါတော့ တကယ် အလုပ်လုပ်ပြီနော်။ ဒါဆိုရင်တော့ ကျွန်တော်တို့ CloudFront မှာ static hosing ပြီးသွားပါပြီ။ ကိုယ်ပိုင် Domain နဲ့ ချိတ်ဖို့ တဆင့်ပဲ ကျန်ပါတော့တယ်။
Linking with own domain
Domain ချိတ်ဖို့အတွက် Default root object ထည့်တုန်းကလိုပဲ CloudFront distribution ရဲ့ General >> Settings ထဲက Edit ကိုနှိပ်ပါ။
Alternate domain name (CNAME) အောက်မှာ Add item ကိုနှိပ်ပြီး ချိတ်ချင်တဲ့ domain name ထည့်ပေးရပါမယ်။
SSL သုံးဖို့အတွက် Certificate မရှိသေးတဲ့အတွက် Request certificate ကိုနှိပ်ပြီး certificate ACM ထဲမှာ request သွားလုပ်ပါမယ်။ Certificate Request လုပ်ပုံ အသေးစိတ်ကို နောက်တစ်ဆင့်မှာ ဆက်ရေးပေးပါမယ်။
Certificate request လုပ်ပြီးပြီဆိုရင်တော့ ဘေးက မျှားဝိုင်းလေးကို နှိပ်ပြီး refresh လုပ်လုပ်ကြည့်ပါ။ Certificate ပေါ်လာရင်တော့ Certificate ကို ရွေးပေးပြီး save changes နှိပ်လိုက်ပါ။
ဒီအဆင့်အားလုံး ပြီးပြီ cloudfront distribution CNAME ကိုလည်း DNS point ပြီးပြီဆိုရင်တော့ ကိုယ့် domain ကို browser မှာ ဖွင့်လိုက်တာနဲ့ S3 မှာ ကိုယ်တင်ထားတဲ့ Website လေး အဆင်ပြေပြေ ပေါ်လာတော့မှာ ဖြစ်ပါတယ်။
Requesting SSL certificate in ACM
Request certificate >> Request a public certificate >> Next ကိုနှိပ်ပါမယ်။
Domain names နေရာမှာ ကိုယ် Certificate လိုချင်တဲ့ domain name ထည့်ပြီး Request ကိုနှိပ်ပါ။ Certificate list ထဲ ရောက်သွားပါမယ်။ Certificate list ထဲမှာ request လုပ်လိုက်တဲ့ doamin name မပေါ်လာသေးရင် refresh လုပ်ကြည့်ပါ။
Certificate list ထဲမှာ request လုပ်လိုက်တဲ့ doamin name ရောက်လာပြီဆိုရင်တော့ Validation လုပ်ဖို့အတွက် Certificate ID ကိုနှိပ်လိုက်ပါ။
Pending validation ဆိုပြီး ပေါ်နေပါလိမ့်မယ်။ အဲ့ထဲက CNAME record ကို ကိုယ့်ရဲ့ dns controller ထဲမှာ သွားထည့်ပါမယ်။
DNS record ထည့်တာကတော့ ကိုယ်သုံးတဲ့ Domain Controller ပေါ်မူတည်ပြီး အနည်းငယ်ကွာခြားနိုင်တာကြောင့် အသေးစိတ် မရေးတော့ပါဘူး။ Record က နှစ်ခုထည့်ရပါမယ်။ အနီနဲ့ တစ်ခုက ကိုယ်ချိတ်လိုက်တဲ့ Domain ကိုဖွင့်လိုက်ရင် cloudfront ကို route ဖို့ ဖြစ်ပြီး ၊ အစိမ်းနဲ့တစ်ခုကတော့ အခုလုပ်နေတဲ့ domain validation အတွက် ဖြစ်ပါတယ်။
DNS update ဖြစ်အောင်စောင့်ပြီး Refresh လုပ်ကြည့်လို့ domain validation success ဖြစ်သွားရင်တော့ ဒီ SSL Certificate ကို AWS services တွေမှာ ချိတ်သုံးလို့ရပါပြီ။
စာလည်း တော်တော် ရှည်သွားပြီဆိုတော့ Gitlab CI သုံးပြီး S3 ပေါ်ကို ဘယ်လို Deploy လုပ်မလဲဆိုတာနဲ့ CloudFront cache တွေ ဘယ်လို ရှင်းမလဲဆိုတာလေး မနက်ဖြန်မှ ဒီလင့်မှာ ( https://kalaung.org/gitlab-ci-deploy-to-s3cloudfront ) ဆက်ရေးပေးပါ့မယ်။