Blog by Yan

Move Hosting to AWS S3

June 04, 2019

Docker, Alpine Linux နဲ့ Gatsby site ကို Deploy လုပ်ထားတာကနေ Amazon S3 ကို ပြောင်းလိုက်ပါတယ်။

Docker သုံးတုန်းက reference လုပ်တဲ့ link ကိုလည်း Share ပေးလိုက်ပါတယ်။ ဒီ Link ပါ။ စိတ်ဝင်စားဖို့ကောင်းပါတယ်။ https://www.wezm.net/technical/2019/02/alpine-linux-docker-infrastructure/

အဲ့ဒီတုန်းကတော့ Docker ကို စမ်းပြီး သုံးချင်တာကြောင့်ပါပါတယ်။

Amazon S3 ကို သုံးပြီး Static site ကို ssl certificate ပါ အပါ သုံးပြထားတဲ့ Repository တစ်ခုတွေ့လို့ပါ။ AWS Cloud Formation Service ကိုသုံးတာပါ။ Template တစ်ခုပဲ လိုပါတယ်။ တစ်လကို $1 လောက်ပဲ ကျမယ်လို့ပြောပါတယ်။ ဟုတ်မဟုတ်တော့ လကုန်မှ ပြန်စစ်ပြီး Update လုပ်ပေးပါမယ်။ Gatsby သုံးတဲ့အတွက် ဒီလို Benefit မျိုးက ယူသင့်ပါတယ်။

အဲ့လိုပြောင်းလိုက်တဲ့အတွက် ဘာတွေ ပြောင်းသွားလဲ တစ်ချက်ကြည့်ပါမယ်။

Changes

  • App ကို Run နေဖို့အတွက် OS မရှိတော့ပါဘူး၊ မလိုတော့ပါဘူး။
  • OS မရှိတဲ့အတွက် Docker လည်း မသုံးတော့ပါဘူး
  • Build ကို Local မှာပဲ လုပ်တာ ဖြစ်သွားပါတယ်
  • Webserver(Nginx) လည်း မလိုတော့ပါဘူး
  • SSL certificate က Let’s Encrypt ကနေ Amazon ကို ပြောင်းသွားပါတယ်
  • Cache ကို AWS ရဲ့ Cloud Front နဲ့ ထိန်းတာဖြစ်သွားပါတယ်
  • DNS Setting ကို GoDaddy အစား AWS Route53 ကနေ Manage လုပ်ပါတယ်
  • <blog.yanlinaung.xyz> ကနေ <www.yanlinaung.xyz> ဖြစ်သွားတယ်။ ဒါကတော့ Cloud Formation Template က ပါတဲ့ ဟာကို ထပ်ပြီး မကွန့်ချင်တော့လို့။ AWS Route 53 မှာ ထိန်းလို့ရပေးမယ့် ဒီတိုင်းပဲ ထားလိုက်ပါတယ်

Pros

  • တစ်လကို VPS ဖိုး $5 ကျရာကနေ Hosting အတွက် $1 ပဲ ကျပါတော့တယ်။
  • OS, Docker, Nginx တွေကို ထိန်းဖို့ command line တွေ Config file တွေ မလိုတော့ပါဘူး။
  • Setup တစ်ခါပဲ လုပ်ဖို့လိုပါတယ်။ ကျန်တာ File upload လုပ်လိုက်ရုံပါပဲ

Cons

  • Open Source မဟုတ်တော့ပဲ AWS Service တွေပဲ သုံးတာ ဖြစ်သွားပါတယ်။
  • AWS ရဲ့ ကိုယ်မမြင်နိုင်တဲ့ ကုန်ကျစရိတ်လေးတွေရှိနိုင်ပါတယ်။

How-to

Requirements

  • AWS Account
  • Custom Domain
  • Static Site (Gatsby)

1.Cloud Formation Creation

  • https://aws.amazon.com ကို Login ဝင်ပါ
  • ဒီ Link ကနေ Cloud Formation Stack က စ run ပါမယ်
  • AWS Region က N. Virginia ဖြစ်နေပါလိမ့်မယ် မပြောင်းပါဘူး။ ACM ကို Cloud Front နဲ့ တွဲသုံးရင် us-east-1 (N. Virginia) region တစ်ခုပဲ support ပေးလို့ပါ။ SCAR ရဲ့ developer က တခြား region ကနေ us-east-1 ရဲ့ certificate ကို လှမ်းပြီး validate လုပ်တာ ထည့်ပေးမယ်လို့ပြောပါတယ်။ အဲ့ဒါ ရရင်တော့ ကိုယ့် region မှာပဲ အကုန်လုံး setup လုပ်လို့ရမှာပါ။ ACM က လွဲလို့ပေါ့။
  • Domain မှာ ကိုယ့်ရဲ့ Domain ကိုထည့်ပါ။ Prefix မပါပါဘူး။
  • Create Stack က template မှာ ရေးထားတဲ့အတိုင်း လုပ်မှာတွေက

    • Create a Hosted Zone in Route 53
    • Create S3 buckets for static hosting (example.com, www.example.com)
    • Issue a certificate (*.example.com)
    • Create 2 Cloud Front for 2 S3 buckets
  • Create Stack ကိုနှိပ်လိုက်ပြီးရင် အောက်က Step တွေကိုလုပ်ပါမယ်။

2.Change Name Server of Domain

  • ကိုယ့်ရဲ့ Domain Registar ရဲ့ DNS setting ကို သွားပါ
  • Name Server ကို AWS Route 53 ရဲ့ Hosted Zone မှာ အသစ် Create လုပ်ထားတဲ့ Name Server ၄ ခု နဲ့ ပြောင်းထည့်ပါ
  • ထည့်ပြီးသွားရင် AWS ACM မှာ ရှိတဲ့ Certificate ရဲ့ Create Record in Route 53 ဆိုတဲ့ Button ၂ ခုကို နှိပ်ပေးပါ
  • Hosted Zone မှာ CName record အသစ်တစ်ခု တိုးသွားပါလိမ့်မယ်
  • ဒီမှာ Manual လုပ်ရမယ် Step တစ်ခု ရှိပါတယ်။ အပေါ်က CName record ကိုဖျက်ဖို့ပါ။ ACM မှာ Create လုပ်ထားတဲ့ certificate ရဲ့ Status က Issued ဖြစ်သွား မသွားကို စောင့်ကြည့်ပါ။ Issued ဖြစ်တာနဲ့ Route 53 က CName record ကို ဖျက်ပါ။ Automation နဲ့ ဖျက်ရင် Error တက်နေပါတယ်။ SCAR ရဲ့ TO DO မှာလည်း ထည့်ထားပါတယ်။ ပြင်ပြီးသွားရင်တော့ ဒီအဆင့်မလိုတော့ပါ။
  • Cloud Formation မှာ error တက်မတက်စောင့်ကြည့်ပါ။
  • AWS Setup က ဒီမှာပဲ ပြီးပါပြီ။ အားလုံး ပြီးသွားရင် Route 53, S3, ACM, Cloud Front တို့မှာ Resource တွေ အသီးသီးရှိနေမှာပါ။ Cloud Formation ရဲ့ Console နေလည်း စစ်ဆေးနိုင်ပါတယ်။ Error တက်ရင် Auto ပြန်ဖျက်ပေးမှာပါ။ ပြန်ဖျက်လို့မရရင် Hosted Zone က CName record ကိုဖျက်ပြီး Stack ကို Delete လုပ်ကြည့်ပါ။

3.IAM Setup

  • IAM Setup ကို မလုပ်ချင်ရင် build npm run build လုပ်ထားတဲ့ pulbic folder အောက်က file နဲ့ folder အားလုံးကို www.example.com bucket မှာ upload လုပ်လည်းရပါတယ်။
  • Reference
  • AWS IAM Console ကို သွားပါ။ User တစ်ယောက် Add လုပ်ပါ။ Access type = Programmatic access
  • Permission ကို Attach existing policies directly ကတဆင့် AmazonS3FullAccess ကို Attach လုပ်ပေးပါ။ Access Key ID နဲ့ Secret Access Key ကို Copy လုပ်ထားပါ။ IAM user ရဲ့ Security Credential ကနေ အသစ် ထပ် create လုပ်လည်းရပါတယ်။
  • AWS CLI ကို Local မှာ Install လုပ်ပါ။ sudo pip3 install --upgrade awscli
  • AWS CLI ကို ကိုယ့် AWS IAM Credentials ထည့်ပါ။ aws configure
  • Gatsby S3 plugin Install လုပ်ပါ။ npm i gatsby-plugin-s3
  • gatsby-config.js file မှာ အောက်က code ထည့်ပါ။ bucketName ကို ကိုယ့်ရဲ့ bucket name နဲ့ ပြင်ပါ (www ပါတဲ့ bucket name)
plugins: [
 {
     resolve: `gatsby-plugin-s3`,
     options: {
         bucketName: 'www.example.com'
     },
 },
]
  • package.json မှာ script တစ်ခု ထည့်ပါ။
"scripts": {
   ...
   "deploy": "gatsby-plugin-s3 deploy"
}

4.Deploy to AWS

  • npm run build && npm run deploy

5. Clear cache on Cloud Front (Optional)

  • Cache auto update လုပ်တာ မစောင့်နိုင်ရင် Console ကိုသွားပါ
  • Distribution တစ်ခုချင်းစီမှာ Invalidations >> Create Invalidation >> Object Paths -> /* နဲ့ Invalidate လုပ်ပါ
  • Invalidations က တစ်လ Paths တစ်ထောင်ကျော်ရင်တော့ ပိုက်ဆံစကောက်ပါတယ်တဲ့။

6. Check your domain (Optional)

  • example.com
  • www.example.com

COST

  1. $0.5 for hosted zone in AWS Route 53

    25 Hosted Zone အထိ $0.5 ပါ။ တခြား Hosted Zone တွေနဲ့ဆိုရင်တော့ ပိုတန်ပါတယ်။


Yan Lin Aung

Written by Yan Lin Aung who lives and works in Yangon building useful things. You should follow him on Twitter