Thuta Learning
Cloud & Deployment
ProjectsDevOps & Toolsbeginner

Project: Custom Domain ပါတဲ့ Static Website တစ်ခု Deploy လုပ်ခြင်း

ဒီခန်းပြီးရင် ဘာတတ်သွားမလဲ

  • Project: Custom Domain ပါတဲ့ Static Website တစ်ခု Deploy လုပ်ခြင်း concept ကို နားလည်ရှင်းပြနိုင်ရန်
  • Diagram ကို ဖတ်ပြီး architecture ထဲမှာ request/data ဘယ်လိုစီးဆင်းသလဲ ခြေရာခံနိုင်ရန်
  • ကိုယ့် project အတွက် ဘယ်လို ဆုံးဖြတ်သင့်သလဲ ရှင်းပြနိုင်ရန်

နားလည်ထားရမယ့် အချက်

Static website ဆိုတာ production ထဲ deploy လုပ်နိုင်တဲ့ အရာထဲမှာ အရိုးရှင်းဆုံးဖြစ်ပါတယ် — request တစ်ခုစီအတွက် server-side code က response တွက်ချက်စရာမလိုဘဲ visitor တိုင်းအတွက် အတူတူ render ဖြစ်တဲ့ HTML၊ CSS နဲ့ JavaScript file တွေပါ။

  • Hosting categories — file တွေပဲပါတဲ့ project အတွက် static hosting ဘာကြောင့်ကိုက်ညီလဲ
  • Git-based deployment — main ကို push လိုက်ရင် deploy အသစ် အလိုအလျောက် လိုက်လာ
  • Domains and DNS — hosting platform ဆီ custom name တစ်ခု ညွှန်ပြနည်း
  • HTTPS/TLS — လက်ဖြင့်မဟုတ်ဘဲ automatic provision ဖြစ်တဲ့ encryption

အားလုံးက git repository ထဲမှာရှိတဲ့ project အသေးလေးတစ်ခုကနေ စပါတယ်။ static hosting platform တစ်ခုက အဲဒီ repository ကို တစ်ကြိမ်ချိတ်ပြီးရင်၊ main ကို push လုပ်တိုင်း commit ထဲက file အတိအကျကို deploy အသစ်ချပေးပါတယ် — manual upload step လုံးဝမလိုတော့ပါဘူး။

Company သုံးခု၊ Pipeline တစ်ခု

domain ဝယ်တဲ့ registrar၊ DNS record host လုပ်တဲ့ DNS provider၊ file serve လုပ်တဲ့ hosting provider — ဒီသုံးခုစလုံး company ကွဲနိုင်ပြီး၊ တစ်ကြိမ်ပဲ configure လုပ်ထားတဲ့ DNS record အနည်းငယ်ကနေပဲ ချိတ်ဆက်ထားတာပါ။

နောက်ဆုံး piece က HTTPS ပါ — static host အများစုက DNS resolve မှန်ကန်တာနဲ့ TLS certificate ကို automatic provision လုပ်ပေးလို့၊ encryption in transit ဟာ manual task မဟုတ်ဘဲ checkbox တစ်ခုလိုပဲ ဖြစ်သွားပါတယ်။

text
DEPLOY A STATIC SITE WITH A CUSTOM DOMAIN
-----------------------------------------
[GIT REPO]
    |
    | git push to main
    v
[STATIC HOST] <---- CNAME/ALIAS record ---- [DNS PROVIDER]
    |  (builds site, serves via CDN)                ^
    |                                                |
    | auto-provisions TLS cert                       | nameservers
    v                                                | point here
[HTTPS CERTIFICATE]                            [REGISTRAR]
    |                                       (owns the domain name)
    v
[LIVE SITE]
https://yourdomain.com

လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်

Site ကို git repository ထဲထည့်ပါ

static file အားလုံးပါ၊ server code မလို။ GitHub ဒါမှမဟုတ် အလားတူ host ကို push လုပ်ပါ။

Static hosting platform တစ်ခု ချိတ်ပါ

platform အများစုက plain HTML project ကို auto-detect လုပ်တယ်; framework-based site ဆို build command နဲ့ output directory လိုတယ်။ ပထမ deploy က default subdomain မှာ ပေါ်လာမယ်။

Domain ဝယ်ပြီး DNS record ထည့်ပါ

registrar က domain ရောင်းတယ်။ DNS provider မှာ hosting platform dashboard ညွှန်ပြထားတဲ့ CNAME ဒါမှမဟုတ် ALIAS/ANAME record ကို ထည့်ပါ။

Host ထဲမှာ domain ထည့်ပြီး စောင့်ပါ

DNS propagation က provider နဲ့ TTL အလိုက် မိနစ်ပိုင်းကနေ ၄၈ နာရီလောက်အထိ ကြာနိုင်တယ်။

Automatic HTTPS ကို confirm လုပ်ပါ

domain ပိုင်ကြောင်း DNS verify ဖြစ်တာနဲ့ platform ကိုယ်တိုင်က TLS certificate ကို issue/renew လုပ်ပေးမယ်။

ဒီနေရာကစပြီး update အသစ်တိုင်းက git push တစ်ခုတည်းသာ ဖြစ်ပြီး pipeline တစ်ခုလုံး automatic ပြန်လည် run သွားပါလိမ့်မယ်။

အတူတူ စမ်းရေးကြည့်မယ်

javascript
function classifyProject(files) {
  const serverOnlyExt = new Set([".php", ".py", ".rb", ".jsp", ".asp", ".aspx", ".pl", ".cgi", ".go"]);
  const flaggedFiles = [];

  for (const file of files) {
    const dot = file.lastIndexOf(".");
    const ext = dot === -1 ? "" : file.slice(dot).toLowerCase();
    if (serverOnlyExt.has(ext)) {
      flaggedFiles.push(file);
    }
  }

  return {
    staticHostable: flaggedFiles.length === 0,
    flaggedFiles,
  };
}

const blogFiles = ["index.html", "styles.css", "script.js", "images/logo.png"];
const mixedFiles = ["index.html", "styles.css", "api/users.php", "admin/login.php"];

console.log("Blog project:", classifyProject(blogFiles));
console.log("Mixed project:", classifyProject(mixedFiles));
You should see
Blog project (HTML/CSS/JS ပဲပါတဲ့) မှာ staticHostable: true နဲ့ flaggedFiles ဗလာ output ထုတ်ပါတယ်။ Mixed project ကတော့ .php file တွေပါနေလို့ staticHostable: false ဖြစ်ပြီး flaggedFiles list ထဲမှာ ညွှန်ပြထားပါတယ်:

Blog project: { staticHostable: true, flaggedFiles: [] }
Mixed project: {
  staticHostable: false,
  flaggedFiles: [ 'api/users.php', 'admin/login.php' ]
}

၅ မိနစ် စမ်းကြည့်

သင့်မှာရှိပြီးသား static project အသေးလေးတစ်ခု (ဒါမှမဟုတ် HTML/CSS/JS file သုံးခုနဲ့ အသစ်ဖန်တီးပါ) ကို git repository ကို push လုပ်ပါ၊ static host တစ်ခုကို ရွေးပြီး deploy လုပ်ပါ — domain အစစ်မပိုင်သေးလည်း myproject.com လို domain တစ်ခုကို အဲဒီ deploy ဆီ ညွှန်ဖို့ DNS provider မှာ ထည့်မယ့် DNS record (type, name, value) ကို အတိအကျ ရေးချပါ။

သတိလေးတစ်ချက်

DNS record ကို target မှားညွှန်ပစ်တာ (ဥပမာ — platform documented ထားတဲ့ deploy target အစား marketing domain ကို CNAME ထိုးမိတာ) — deploy အောင်မြင်ပေမယ့် site ဘယ်တော့မှ resolve မဖြစ်ဘူး။

Root/apex domain မှာ plain CNAME record တင်လို့မရတာကို မေ့ပြီး ALIAS/ANAME record ဒါမှမဟုတ် DNS provider ရဲ့ specific workaround လိုအပ်တာကို သတိမမူမိတာ။

Cloudflare Pages — Custom domainsCloud & Deployment

ဒီနေရာမှာ လူအများမှားတတ်တယ်

  • DNS record ကို target မှားညွှန်ပစ်တာ (ဥပမာ — platform documented ထားတဲ့ deploy target အစား marketing domain ကို CNAME ထိုးမိတာ) — deploy အောင်မြင်ပေမယ့် site ဘယ်တော့မှ resolve မဖြစ်ဘူး။
  • Root/apex domain မှာ plain CNAME record တင်လို့မရတာကို မေ့ပြီး ALIAS/ANAME record ဒါမှမဟုတ် DNS provider ရဲ့ specific workaround လိုအပ်တာကို သတိမမူမိတာ။
  • Localhost မှာ အလုပ်လုပ်တာနဲ့ Production မှာ အလိုအလျောက်အလုပ်လုပ်မယ်လို့ မယူဆပါနှင့် — environment, network, database, security ကွာခြားချက်တွေ ရှိနိုင်ပါတယ်။

လေ့ကျင့်ခန်း

သင့်မှာရှိပြီးသား static project အသေးလေးတစ်ခု (ဒါမှမဟုတ် HTML/CSS/JS file သုံးခုနဲ့ အသစ်ဖန်တီးပါ) ကို git repository ကို push လုပ်ပါ၊ static host တစ်ခုကို ရွေးပြီး deploy လုပ်ပါ — domain အစစ်မပိုင်သေးလည်း myproject.com လို domain တစ်ခုကို အဲဒီ deploy ဆီ ညွှန်ဖို့ DNS provider မှာ ထည့်မယ့် DNS record (type, name, value) ကို အတိအကျ ရေးချပါ။

You'll know it worked when: Blog project (HTML/CSS/JS ပဲပါတဲ့) မှာ staticHostable: true နဲ့ flaggedFiles ဗလာ output ထုတ်ပါတယ်။ Mixed project ကတော့ .php file တွေပါနေလို့ staticHostable: false ဖြစ်ပြီး flaggedFiles list ထဲမှာ ညွှန်ပြထားပါတယ်: Blog project: { staticHostable: true, flaggedFiles: [] } Mixed project: { staticHostable: false, flaggedFiles: [ 'api/users.php', 'admin/login.php' ] }

Project: Custom Domain ပါတဲ့ Static Website တစ်ခု Deploy လုပ်ခြင်း | Thuta Learning