CircleCI CI/CD flow of deploy node.js App on Heroku and Slack notification

[JeffKko]

Preface

最近想做個 CI/CD flow Demo, 讓這個 flow 可以跑過前端部署所需的所有自動化流程

流程大概是這樣: commit => lint => E2E test => Github => Heroku => build & Run App => notify to Slack

好久以前也有玩一下 Jenkins, Gitlab-CI 甚至是自己寫 .git 裡面的 post-update hook, 這次就來比較看看最近狠新很夯的 DroneCI, CircleCI, 比較一下發現兩個都很厲害, 每個步驟都可以由 Docker 產生的環境，高度的容器化，讓每個步驟可以調用不同的 Docker Image 來實現各種測試。
而剛好相反的是 CircleCI 從單純的 SaaS 到現在最近開放了 Self-hosted, 而 DroneCI 從原本的 Self-hosted 到現在也開放了 cloud service, 這次就先從 cloud service 功能已經非常健全的 CircleCI 玩看看吧！

將 github 整合到 CircleCI

最簡單的整合方式就是用 github 帳號 登入 CircleCI, CircleCI 就會有權限去抓到 github 裡有哪些 repo.

對需要建立配置的 repo 點選 setup project, 就會進入最厲害的頁面 -- 設置 yaml, 並且有各式各項的 template, 以及各式各樣的Orbs, 這裡就直接選擇 Heroku deploy with Node

到這裡, 就可以發現 CircleCI 強大的地方, 最最最簡潔的 yaml 配置如下, �這樣就真的已經設置完成了！

version: 2.1

orbs:
  heroku: circleci/[email protected]

workflows:
  sample:
    jobs:
      - heroku/deploy-via-git

再按下 Commit and Run, CircleCI 就會自動把 SSH key 加到 repo, 並且新增 yml 檔案在一個分支 circleci-project-setup 之下

設置 Heroku 權限

yml 完成之後, 再到 environment variables 去新增兩個 Heroku 需要的環境變數 HEROKU_APP_NAME, HEROKU_API_KEY

• HEROKU_APP_NAME: Heroku application 的 name
• HEROKU_API_KEY: Heroku 帳號的 API key, 可以在 Account => Account Settings => API Key 找到

設定完後, 就大功告成了, 簡單又暴力

測試

只要 repo 有新的 commit, 在 Dashboard 上就會有一個新的 pipeline, 會包含一個 job heroku/deploy-via-git, 跑完後也可以到 Heroku 的 Activity 看看是否有新的 deployed

整合 slack 到 CircleCI

新的 slack orb 使用 OAuth 取代原本的 Webhooks 去和 Slack 溝通 (害我找老半天, 沒地方填 Webhook Url), 新版可以用 Slack 的 Block Kit Builder 更加客製化的通知方式

詳細的 OAuth Setup 方式可以參考這裡

這邊在測試時發現 event 除非是設定成 always, 設定成 pass or fail 一直都不會有 notify, 後來把 orbs 版本改成新版 @4.3.1 就可以了, 浪費了超級多的時間, 所以有問題時最好還是隨時去看 orbs document 注意有沒有新版本

這是最後成功的一個簡單的配置

version: 2.1
orbs:
  slack: circleci/[email protected]
jobs:
  notify:
    docker:
      - image: cimg/base:stable
    steps:
      - run: echo "test my app"
      - slack/notify:
          event: fail
          template: basic_fail_1
          mentions: "@here"
      - slack/notify:
          event: pass
          template: success_tagged_deploy_1
workflows:
  send-notification:
    jobs:
      - notify:
          context: slack-secrets

新版的 notification template 上的訊息非常清晰易懂, 範例是用基本的 success 和 fail 的 template

Conclusion

總體來說 CircleCI 因為 Orbs 這個功能讓整個 yaml 配置非常簡潔, 有開箱既用的感覺, 目前先把 build, deploy 和 notification 搞定, 下一篇再把整個流程弄完整

Reference Articles

• Continuous deployment of Node apps to Heroku

• circleci-slack-integration

• Slack orb wiki

• Slack orb docs