# How to deploy static website using S3 and custom domain?

ကျွန်တော်ဒီနေ့ Sharing လုပ်ပေးချင်တဲ့ Lab လေးကတော့ real world project လည်းဖြစ် အသုံးလဲများတဲ့ AWS S3 ပေါ်မှာ static website hosting လုပ်နည်းလေးကို ဝေမျှခြင်ပါတယ်ဗျ။

ဒီ lab မှာဆိုရင် AWS S3 ပေါ်မှာ static web hosting ထိုင်နည်းပါမယ်၊ အဲ့ S3 ကို CloudFront နဲ့တွဲပီး ဘယ်လိုသုံးမလဲဆိုတာလေးပါမယ်။ CloudFront ကိုမှ ACM ကိုသုံးပီး ssl ရအောင် လုပ်ပုံလုပ်နည်းပါပါမယ်။ Domain အနေနဲ့ကတော့ Cloudflare dns ကနေ ဝယ်ပီးသားလေးရှိနေတော့ route53 မှာ ထပ်မဝယ်တော့ပဲ Cloudflare က domain နဲ့ ပဲသုံးလို့ရအောင် လုပ်ထားပါတယ်။

ပထမဆုံး အနေနဲ့ ကျွန်တော်တို့ မှာ AWS account တစ်ခုရှိရပါမယ်။ ပီးရင် ကျွန်တော်တို့ S3 ကိုခေါ်လိုက်ပါမယ်။ ပီးရင် bucket တစ်ခုဆောက်ပါမယ်။ ကျွန်တော်ကတော့ **demo.frandisharing.com** ဆိုတဲ့ name နဲ့ bucket တစ်ခုဆောက်လိုက်ပါတယ်။ ကျွန်တော်ကတော့ အခု lab မှာ bucket ကို public access ဖွင့်ပေးထားပါတယ်။

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702138211700/328650d2-199f-4de8-a901-6621286c81cb.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702138325598/be149d36-7f4a-4da3-ad2c-145743db4c81.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702138451755/3b398fad-f75b-4a6b-a764-98e5f608bfbc.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702138472403/b9955e3b-bbfc-46a3-a22e-6b73cdd3aa53.png align="center")

Bucket တစ်ခုဆောက်ပီးရင် ကျွန်တော်တို့ရဲ့ object တွေကို upload လုပ်ပါမယ်၊ ဒီနေရာမှာ ကျွန်တော်က html နဲ့ css file နှစ်ခုကို သုံးထားပါတယ်။ ကျွန်တော်က developer မဟုတ်တဲ့ အတွက် html ကော css ကောကို chatgpt ကနေ sample ရေးခိုင်းထားတာပါ။

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702138512298/10dc6205-9632-4588-89b4-3cb53205031f.png align="center")

html နဲ့ css ကို upload လုပ်ပီးရင် properties tab ထဲသွားပီး static web hosting function ကို enable လုပ်ပါမယ်။ သူက default ဆိုရင် disable လုပ်ထားတာပါ။

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702138963734/a9d17177-7e46-42a2-960a-6a20512e2c5e.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702139103388/5d808529-66de-400b-b7df-69e11ee5d3bb.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702139180921/f62510bd-2ed0-4608-93fb-32ac0b909d2e.png align="center")

အဲ့ဒီ့မှာ ကျွန်တော်တို့ Index document မှာ index.html ထည့်ပေးရပါမယ်။

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702139196574/cead3075-c807-4991-b26a-6da6e3d9190d.png align="center")

Static web hosting ကို enable ပီးသွားရင် Permissions tab ထဲသွားပီး Bucket policy သွားရေးပါမယ်။ ကျွန်တော်ဒီမှာ သုံးထားတဲ့ policy က S3 object ကို get access ရအောင် လုပ်ထားပါတယ်။

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702139288365/6988be2f-fca3-4ad2-b0f3-b20d7cd818e2.png align="center")

ထုံးစံအတိုင်း policy generator ကိုသုံးပီး policy သတ်မှတ်ပါမယ်။

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702139590204/df5215a9-5df9-4443-ba7b-53e0a068f1ae.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702139724080/86accb2c-4fe6-4534-b4c7-38002ac8fdbf.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702139744200/90535073-f742-46a5-a0b3-af6e6ad1262e.png align="center")

Policy generator ကနေ ထွက်လာတဲ့ policy ကို copy လုပ်ပီး ပြန်ကူးထည့်လိုက်ယုံပါပဲ

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702139758488/580c88ab-4a9a-4e54-81db-96bafedf0a73.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702139945518/10bd44d8-a604-45dc-973d-10f0eb4a3dfa.png align="center")

ပီးသွားရင် ကျွန်တော်တို့ရဲ့ website လေးက အလုပ်လုပ်မလုပ်ကိုသိရအောင် အောက်က link ကနေ access စမ်းလုပ်ကြည့်ပါမယ်။ ဒီအချိန်ထိ ကျွန်တော်တို့ domain name နဲ့ access မလုပ်သေးပါဘူး

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702139966565/65e9971b-490c-48b1-ae69-71d62f412860.png align="center")

ကျွန်တော်တို့ Simple Online Shop site လေးကျလာတာကို တွေ့ရပါမယ်။

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702140165077/04c7f973-65db-4824-ba6c-d607045a05f7.png align="center")

ဒုတိယပိုင်းအနေနဲ့ ကျွန်တော် တို့ website ကို CloudFront နဲ့တွဲသုံးတာကိုလုပ်ပြပါမယ်။ Create distribution ကနေ create လုပ်ရပါမယ်။

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702143878319/a4eb09ba-eff6-4761-8bbc-b0dbf3946565.png align="center")

Origin domain မှာ S3 ဆိုတာကိုရွေးရပါမယ်၊ ရွေးပီးမှ ကျွန်တော်တို့ create လုပ်ထားတဲ့ S3 bucket ကိုရွေးလို့ရမှာပါ။

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702144038178/b4fc3ea3-5856-4397-b599-ded9688436f0.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702144429247/a8034bda-0cf4-442d-8130-854e9d1e485e.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702144382668/c68c6080-97e5-4db3-beb7-f288f2ec25dd.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702144451635/2268a95a-1d97-4fbe-bdb0-8086649ede5d.png align="center")

Settings ရဲ့ price class မှာ default ဆိုရင် Use all edge locations နဲ့သုံးထားပါတယ်၊ ဒါပေမဲ့ကျွန်တော်ကတော့ Use Asia ဆိုတာကိုပဲသုံးထားပါတယ်။ Alternative domain name မှာဆိုရင် ကျွန်တော်တို့ရဲ့ website ကို access လှမ်းလုပ်ရင် ခေါ်သုံးစေချင်တဲ့ domain name ကိုထည့်ထားပါတယ်။ Cloudflare DNS ဘက်မှာလည်း CloudFront ရဲ့ domain ကို CNAME record အနေနဲ့ ပြန်သွင်းပေးရပါမယ်။ website ကိုလှမ်းခေါ်တဲ့ နေရာမှာ secure ဖြစ်စေဖို့ https ဖြစ်အောင် Custom SSL Certificate ကိုလည်းသုံးထားပါတယ်၊ default အနေနဲ့က ဘာမှမရှိပါဘူး။

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702144692939/b8c48e58-d597-4a25-95d0-d43f9b47c12f.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702145881368/7041c8c9-8c19-4975-86e9-4b859a34cc5f.png align="center")

Custom SSL Certificate ရဖို့ အတွက် ကျွန်တော်တို့ ACM မှာသွားပီး public certificate request လုပ်ရပါမယ်။ Fully qualified domain name မှာ ကျွန်တော်တို့ရဲ့ domain name ကိုထည့်ရပါမယ်။ ဒီနေရာမှာ ထည့်တဲ့ domain name က Cloudflare ဘက်က domain ကိုထည့်ရပါမယ်။ Add another name အနေနဲ့ **www.frandisharing.com** ဆိုပီးထည့်ထားပါတယ်။ CNAME record နဲ့ value နှစ်ခုထွက်လာပါမယ်။ အဲ့နှစ်ခုကို cloudflare dns record မှာ CNAME record အနေနဲ့ ထည့်ပေးရပါမယ်။

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702145951556/032a586d-f959-4945-b0c0-1a6bc25a3981.png align="center")

ACM မှာထည့်ထားတဲ့ domain က domain validation ဖြစ်ဖို့ မိနစ် ၃၀ လောက် စောင့်လိုက်ရပါတယ်။ AWS ရဲ့ route53 dns ဆိုရင် အဲ့လောက်မကြာပါဘူး။

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702147025220/d1c00364-9946-4f05-9e40-7ec4f7e09244.png align="center")

CloudFront ဘက်မှာသွားစစ်ကြည့်ရင် deploying လုပ်နေတာကိုတွေ့ရပါမယ်။ ၁၅ မိနစ်ကနေ ၂၀ အထိကြာတက်ပါတယ်။ အဲ့အထိလုပ်ပီးသွားရင်တော့ ကျွန်တော်တို့ရဲ့ website ကို **demo.frandisharing.com** ဆိုတဲ့ domain name နဲ့ access လုပ်လို့ရပါပီ။

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702147083104/cb53393e-0dc2-433d-ac4c-b75b07ed8302.png align="center")

http ကနေ https အဖြစ်ပြောင်းသွားပါပီ။ ကို define ထားတဲ့ domain name နဲ့လည်း access လုပ်လို့ရနေတာကို တွေ့ရပါလိမ့်မယ်။

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702147568276/189729bb-276e-455e-ae59-609fde8df57f.png align="center")

ကျွန်တော့ရဲ့ lab လေးကို ဒီနေရာ မှာပဲရပ်လိုက်ပါတော့မယ်။ Lab တွေစမ်းပီးတဲ့အခါမှာလည်း resources တွေဖျက်ဖို့ မမေ့ကျပါနဲ့အုံးနော်။ ဒီ lab လေးကနေ တစ်ခုခုရသွားမယ်လို့ မျှော်လင့်မိပါတယ်။ဒီ lab နဲ့ ပတ်သတ်ပီး အကြံပြုချင်ရင် အားမနာတမ်း ဆွေးနွေးဖို့ ဖိတ်ခေါ်ပါတယ်ဗျ။

Stay tune and see you guys in the next demo labs.