Gitlab CI deploy to S3+CloudFront

S3+CloudFront သုံးပြီး Static web hosting ဘယ်လိုလုပ်မလဲ ဆိုတာ မနေ့က ရေးခဲ့ပြီးပါပြီ မဖတ်ရသေးရင် ဒီလင့်မှာ ဖတ်လို့ရပါတယ် ( https://kalaung.org/aws-s3-static-hosting-with-cloudfront ).

ဒီနေ့တော့ GitlabCI သုံးပြီး ဘယ်လို CI/CD ချိတ်သွားမလဲ ဆက်ရေးပေးပါ့မယ်။

ဒီ Deployment အတွက် AWS Access Key ထုတ်ပြီး လုပ်ပြသွားပါမယ်။
AWS Access Key သုံးတာ လုံခြုံရေးအတွက် ကောင်းတဲ့ အလေ့အထတော့မဟုတ်ပါဘူး၊ လက်တွေ့မှာဆိုရင်တော့ ကျွန်တော်က လိုအပ်တဲ့ permission တွေရဖို့ AccessKey မသုံးပဲ Permission တွေကို Gitlab Runner Instance မှာ attach တွဲထားတဲ့ role ထဲ ထည့်ပေးတဲ့ နည်းနဲ့ သုံးပါတယ်။

Creating AWS User AccessKey for GitlabRunner

1. IAM dashboard ထဲသွားပြီး Policies >> Create policy ကို နှိပ်ပါ။ ပြီးရင် JSON ကို နှိပ်ပြီး အထဲမှာ ကျွန်တော်အောက်မှာ ပေးထားတဲ့ FrontendDeployPolicy ကိုထည့်လိုက်ပါ။ ဒီနေရမှာ သတိထားရမှာက ကျွန်တော် လိုင်းတားပြထားတဲ့ resource နေရာတွေပါ။ kalaung-org-test နေရာမှာ ကိုယ် deploy မဲ့ bucket name ထည့်ရမှာပါ။ CloudFront ARN ကလည်း ကိုယ့်ရဲ့ cloud front distribution ထဲသွားပြီး General >> Detail ထဲက ARN ကို ကော်ပီယူလာပြီး ထည့်ပေးရမှာပါ။ ပြီးရင်တော့ Next နှိပ်လိုက်ပါ။

   

   Please edit and use this json to create FrontendDeployPolicy policy.

    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Sid": "VisualEditor0",
                "Effect": "Allow",
                "Action": [
                    "s3:ListBucket",
                    "s3:PutObject",
                    "s3:GetObject",
                    "s3:DeleteObject",
                    "s3:PutObjectAcl"
                ],
                "Resource": [
                    "arn:aws:s3:::kalaung-org-test",
                    "arn:aws:s3:::kalaung-org-test/*"
                ]
            },
            {
                "Sid": "VisualEditor1",
                "Effect": "Allow",
                "Action": [
                    "cloudfront:ListConflictingAliases",
                    "cloudfront:ListDistributions",
                    "cloudfront:ListInvalidations",
                    "cloudfront:UpdateDistribution",
                    "cloudfront:CreateInvalidation"
                ],
                "Resource": [
                    "arn:aws:cloudfront::091232944267:distribution/ERLUAHKS2OR0L"
                ]
            }
        ]
    }
   

2. Policy name နေရာမှာ ကျွန်တော်ကတော့ FrontendDeployPolicy လို့ပေးလိုက်ပါတယ်၊ Policy name ပေးပြီးရင်တော့ Create policy ကို နှိပ်လိုက်ပါ။

3. ပြီးရင် IAM dashboard ထဲမှာပဲ Users >> Add Users ကို နှိပ်ပါ။

4. User name ကို ကျွန်တော်ကတော့ GitlabDeployUser လို့ ပေးပြီး Next နှိပ်လိုက်ပါတယ်။ သတိထားရမှာက Provide user access to .... ဆိုတာကို အမှန်ခြစ် မပေးခဲ့ပါနဲ့

   

5. ဒီအဆင့်မှာ Attach policies directly ဆိုတာကို ရွေးပြီး Search box ထဲမှာ FrontendDeployPolicy ကိုရှာပြီး အမှန်ခြစ်ပါ။ Next နှိပ်ပါ။ Create user ထပ်နှိပ်လိုက်ပါ။

   

   

   User တော့ create လုပ်လို့ ပြီးပါပြီ။ ဒီ User ကနေ Access key ထုတ်ဖို့ပဲ ကျန်ပါတယ်။

6. User name ကို နှိပ်ပါ။ Security credentials ထဲသွားပြီးတော့ Create access key ကိုနှိပ်ပါ။

   

7. Command Line Interface (CLI) ကိုရွေးပြီး I understand the above recommendation and want to proceed to create an access key. ဆိုတဲ့ Checkbox ကို အမှန်ခြစ်ပေးပါ။ Next နှိပ်လိုက်ပါ။

8. Discription မှာ အဆင်ပြေသလို ရေးပြီး Create access key ကို နှိပ်လိုက်ပါ။

   

9. Access key နဲ့ Secret access key လေးရလာပါပြီအဲ့ကီးနှစ်ခုကို သေခြာသိမ်းထားလိုက်ပါ။

Adding Gitlab Variables

1. Gitlab ပေါ်က ကိုယ့် Project ကိုဖွင့်ပြီး Settings >> CICD ထဲသွားပါ။ Variables ထဲမှာ variable လေးခုကို ထည့်ပါမယ်။ AWS_ACCESS_KEY_ID နဲ့ AWS_SECRET_ACCESS_KEY က ကျွန်တော်တို့ ခုနက ထုတ်ထားတဲ့ key တွေကို ထည့်ပေးရမှာပါ။ CLOUDFRONT_DISTRIBUTION_ID က ကျွန်တော်တို့ ဆောက်ထားတဲ့ CloudFront distribution ရဲ့ ID ဖြစ်ပြီး S3_BUCKET_NAME ကလည်း ကျွန်တော်တို့ deploy မဲ့ S3 bucket name ဖြစ်ရမှာပါ။

   

2. အောက်ကပုံထဲကလို ပေါ်လာပြီဆိုရင်တော့ လိုအပ်တဲ့ variable တွေထည့်လို့ ပြီးပါပြီ။

   

Creating .gitlab-ci.yml file

ကိုယ့် repository ရဲ့ root dir ထဲမှာ .gitlab-ci.yml ဆိုပြီး file အသစ် တစ်ခု လုပ်ပြီး အောက်က code တွေ ထည့်သိမ်းလိုက်ပါ။ ဒီ ci file က vue3 နဲ့ ရေးထားတဲ့ project အတွက် ရည်ရွယ်ပြီးရေးထားတာပါ။ ကိုယ်သုံးတဲ့ project ပေါ်မူတည်ပြီး build လုပ်တဲ့ အဆင့်မှာ ပြင်ဖို့ လိုနိုင်ပါတယ်။ နောက်ပြီး build လိုက်ရင် ထွက်လာမဲ့ output folder ကိုလည်း dist လို့ ရည်ရွယ်ပြီး ရေးထားပါတယ် ကိုယ့် project က မတူဘူးဆိုရင် ပြင်ပေးဖို့ လိုမယ်။

image: node:16-alpine

stages:
  - build
  - deploy

Build-Production:
  stage: build
  only:
    - master
  when: manual
  cache:
    key: 
      files:
        - package-lock.json
    paths:
      - node_modules/
  artifacts:
    name: "$CI_JOB_NAME-$CI_COMMIT_REF_SLUG"
    expire_in: 1 week
    when: on_success
    paths:
      - dist/
  script:
    - npm install --progress=false
    - npm run lint || exit 1
    - npm run build -- --mode production || exit 1
  #tags:
  #  - large-runner

Deploy-Production:
  stage: deploy
  image: registry.gitlab.com/gitlab-org/cloud-deploy/aws-base:latest
  only:
    - master
  when: on_success
  needs: ["Build-Production"]
  script:
    - aws configure set default.region ap-southeast-1
    - aws s3 sync dist/ s3://${S3_BUCKET_NAME} --delete --quiet
    - aws cloudfront create-invalidation --distribution-id ${CLOUDFRONT_DISTRIBUTION_ID} --paths "/*"
  #tags:
  #  - light-runner

Gitlab CI file ကို master branch မှာ save >> commit ပြီး push လိုက်မယ်ဆိုရင် Gitlab pipeline ထဲမှာ ဒီလိုလေး ပေါ်လာရင် မျှားပြထားတာလေးတွေကို နှိပ်ပြီး deploy လိုက်လို့ရပါပြီ။

Deployment success ဖြစ်သွားရင်တော့ ကိုယ့်ရဲ့ S3+ColouFront host ထားတဲ့ domain ကို ဖွင့်ကြည့်လိုက်ပါ။ ကိုယ့်ရဲ့ repository ထဲက latest code အတိုင်း ဖြစ်နေတာကို တွေ့ရမှာပါ။

.gitlab-ci.yml ထဲမှာ ရေးသွားတဲ့ code တွေရဲ့ အလုပ်လုပ်ပုံကိုတော့ နောက်တပတ် GitLab CI အကြောင်း သီးသန့် ရေးတော့မှ အသေးစိတ် ရှင်းပြပေးပါ့မယ်။ လိုက်လုပ်ကြည့်ပြီး အဆင်မပြေတာရှိရင် Comment က နေမေးလို့ရသလို Messanger ကနေလည်း လာမေးထားလို့ရပါတယ်။ ကျွန်တော် အချိန်ရတဲ့အခါ ဖြေပေးပါ့မယ်။