GitHub နဲ့ Vercel ကိုသုံးပြီး Website များကို အလွယ်တကူ Deploy ပြုလုပ်နည်း
Web Development စတင်လေ့လာသူတွေအတွက် မိမိဖန်တီးထားတဲ့ Website/Web Application ကို အင်တာနက်ပေါ် လွင့်တင်တာ (Deploy လုပ်တာ) က ခက်ခဲမယ်လို့ ထင်ရနိုင်ပါတယ်။ ဒါပေမဲ့ လက်ရှိခေတ်မီ Tool တွေဖြစ်တဲ့ GitHub နဲ့ Vercel တို့ကို တွဲဖက်အသုံးပြုမယ်ဆိုရင် အလွန်လွယ်ကူ သပ်ရပ်စွာနဲ့ အခမဲ့ လွင့်တင်နိုင်ပါတယ်။
ဒီ Guide မှာတော့ သင့်ရဲ့ Web Project ကို GitHub သို့ တင်ပြီး Vercel နဲ့ ချိတ်ဆက်ကာ Continuous Deployment (အလိုအလျောက် Update ဖြစ်စနစ်) စေရန် အဆင့်ဆင့် ရှင်းပြပေးသွားပါမယ်။
ကြိုတင်လိုအပ်ချက်များ (Prerequisites)
စတင်မလုပ်ဆောင်မီ အောက်ပါတို့ ရှိထားရန် လိုအပ်ပါတယ် -
- GitHub အကောင့် (github.com)
- Vercel အကောင့် (vercel.com) — (GitHub အကောင့်နဲ့ တိုက်ရိုက် Sign In ဝင်ပါက ပိုမိုလွယ်ကူပါတယ်)
- မိမိ စက်ထဲတွင် Git Install လုပ်ထားခြင်း
- လွင့်တင်လိုသည့် Web Application ရဲ့ Code များ အဆင်သင့်ရှိနေခြင်း
အဆင့် (၁) - Code များကို GitHub ပေါ်သို့ တင်ခြင်း (Push to GitHub)
ပထမဆုံးအနေနဲ့ သင့်ရဲ့ Project Code များကို GitHub Repository ပေါ်သို့ တင်ရပါမယ်။
GitHub တွင် Repository အသစ်တစ်ခု ဖန်တီးပါ -
- GitHub သို့ လော့ဂ်အင်ဝင်ပါ။
- ညာဘက်အပေါ်ဒေါင့်ရှိ "+" icon ကိုနှိပ်ပြီး New repository ကိုရွေးပါ။
- Repository နာမည် ပေးပါ (Public သို့မဟုတ် Private ကြိုက်ရာရွေးချယ်နိုင်ပါတယ်)။
- Create repository ကိုနှိပ်ပါ။
Local Code များကို Git နဲ့ ချိတ်ဆက်ပြီး Push လုပ်ပါ - မိမိ Project Folder ၏ Terminal / Command Prompt ကိုဖွင့်ပြီး အောက်ပါ Command များကို အစဉ်လိုက် ရိုက်ထည့်ပါ -
git init git add . git commit -m "Initial commit" git branch -M main git remote add origin <YOUR_GITHUB_REPOSITORY_URL> git push -u origin main
အဆင့် (၂) - Vercel သို့ GitHub Repository ကို ချိတ်ဆက်ခြင်း
Code များ GitHub ပေါ်ရောက်သွားပြီဆိုရင် Vercel ကနေ အလိုအလျောက် ဖတ်ယူပြီး Build လုပ်ပေးနိုင်အောင် ချိတ်ဆက်ရပါမယ်။
- Vercel Dashboard သို့ ဝင်ပါ။
- "Add New..." Button ကိုနှိပ်ပြီး Project ကို ရွေးချယ်ပါ။
- Import Git Repository အောက်တွင် GitHub ကို ရွေးပါ။
- စာရင်းထဲမှ ခုနက ဖန်တီးခဲ့သော Repository ကိုရှာပြီး Import ကိုနှိပ်ပါ။
အဆင့် (၃) - Configure ပြုလုပ်ခြင်းနှင့် Deploy လုပ်ခြင်း
Vercel သည် React, Next.js, Vue, Vite, သို့မဟုတ် HTML/CSS စသည့် Modern Web Framework များကို အလိုအလျောက် သတိပြုမိသိရှိနိုင်ပါတယ်။
- Project Name: မိမိကြိုက်နှစ်သက်ရာ နာမည်ပြောင်းလဲနိုင်ပါတယ် (သို့မဟုတ် Default ထားနိုင်ပါတယ်)။
- Framework Preset: Vercel မှ အလိုအလျောက် ရွေးချယ်ပေးထားပါလိမ့်မည်။
- Environment Variables: အကယ်၍ Project တွင် API Key များ သို့မဟုတ် လျှို့ဝှက်ကိန်းဂဏန်းများ သုံးထားပါက Environment Variables အပိုင်းတွင် ထည့်သွင်းပေးပါ။
- အားလုံးပြီးပါက Deploy Button ကို နှိပ်ပါ။
ခဏစောင့်ဆိုင်းပြီးပါက Vercel မှ သင့် Project ကို Build လုပ်ပေးပြီး တိုက်ရိုက်ဝင်ကြည့်နိုင်သည့် Live URL (ဥပမာ- your-project.vercel.app) ကို ထုတ်ပေးပါလိမ့်မည်။
အဆင့် (၄) - အလိုအလျောက် Update ဖြစ်စေခြင်း (Continuous Deployment)
Vercel ရဲ့ အဓိက အားသာချက်တစ်ခုကတော့ Continuous Deployment (CD) စနစ်ဖြစ်ပါတယ်။
နောက်ပိုင်းတွင် မိမိ၏ Code များကို ပြင်ဆင်မှုများပြုလုပ်ပြီး GitHub သို့ Push ပြန်လုပ်လိုက်ရုံဖြင့် -
git add .
git commit -m "Update website features"
git push
Vercel မှ အလိုအလျောက် သိရှိသွားပြီး စက္ကန့်ပိုင်းအတွင်း သင့် Live Website ကို သတင်းအသစ်များ၊ ပြင်ဆင်ချက်များဖြင့် မွမ်းမံ (Update) ပေးသွားမည် ဖြစ်ပါတယ်။
နိဂုံး (Conclusion)
ဂုဏ်ယူပါတယ်။ အခုဆိုရင် သင့်ရဲ့ Website ကို GitHub နဲ့ Vercel အသုံးပြုပြီး အောင်မြင်စွာ Deploy လုပ်ပြီးပါပြီ။ လျှင်မြန်၊ လုံခြုံပြီး ကုန်ကျစရိတ်မရှိဘဲ ခေတ်မီတဲ့ Web Hosting Pipeline တစ်ခုကို ပိုင်ဆိုင်သွားပြီ ဖြစ်ပါတယ်။
နောက်ထပ် လုပ်ဆောင်နိုင်သည်များ -
- Vercel Project Settings ထဲသို့သွား၍ မိမိပိုင်ဆိုင်သော Custom Domain (ဥပမာ-
www.yourname.com) ချိတ်ဆက်ခြင်း။ - သင့်ရဲ့ Live Website Link ကို အခြားသူများထံ မျှဝေခြင်း။
