使用 Gitlab cicd 佈署 React Native專案

現在大部分公司的專案都會放在自己的機台，並安裝 Gitlab 做管理，其實身為一個前端工程師，一定會在各種時候需要略懂一些其他領域的知識，就像這篇我要記錄的自動化部署 ，讓每個協作者開發完成後，發佈新版本時候確保專案有適時載入所有 package 與成品有正確上傳到線上環境。只需要額外撰寫 .gitlab-ci.yml 放在根目錄，Gitlab Runner 就可以自動去跑部署流程囉！

因為每間公司的流程跟限制不同，以我自己的例子，我們公司只會有兩種環境 : development、production。另外在 Gitlab Runner 那端由 IT 人員處理，所以這邊無法多作說明，這邊主要就是以前端的角度去實踐。

要做到自動化部署，會經歷以下幾件事 :

1. 撰寫package.json的script
2. 撰寫deploy.sh
3. 撰寫.gitlab-ci.yml

---

撰寫package.json的script

如果是 windows 的話，就使用 bash ，如果是 mac 就使用 sh

"scripts": {
    "push_prod":"bash deploy.sh prod",
},

// or

"scripts": {
    "push_prod":"sh deploy.sh prod",
},

 

 

撰寫deploy.sh

在根目錄新增一個檔案叫做 deploy.sh

流程是因為在package.json的script指令，最後面有傳入一個參數prod，它可以在deploy.sh使用$1拿到 ( 如果你有兩個以上的參數就是再多一個空格，例如 : sh deploy.sh prod test，那麼這個test就可以用$2拿到 )，prod 環境下就把develop分支合到master，並且下一個版本號，然後推上去遠端。

echo "push to ${1} !"
git config --global credential.helper store
if [ "$1" = "dev" ]; then
    #  dev 佈署
    git checkout develop
    git pull origin develop
    git push origin 
fi

if [ "$1" = "prod" ]; then
    read -p "請輸入版號(v1.0.0)" CONT
    if [ "$CONT" = "" ]; then
        "▇▇▇▇ 您取消了佈署作業 ▇▇▇▇"
        exit 0
    else
        #  prod master 佈署
        git checkout develop
        git pull origin develop
        git pull origin master
        git checkout master
        git pull origin master --tags
        git merge develop -m "$1"
        git tag "release-${CONT}"
        git push origin master 
        git checkout develop
    fi
fi

 

 

撰寫.gitlab-ci.yml

在根目錄新增一個檔案叫做 .gitlab-ci.yml ，開始寫內容前有兩件事要準備，

一是找一個喜歡的 docker image 給 react-native 用的；

二是把變數設定到 Gitlab 的 CICD variables。

 

1. 尋找docker image

進入 docker hub 網站，搜尋react-native，我這邊是選用 reactnativecommunity/react-native-android，你也可以評估一下選自己喜歡的。

 

2. 設定 CICD variables

在專案中不建議把一些敏感資訊都放到code裡面，向是主機的帳密、第三方金鑰之類的，所以 Gitlab 提供一個地方可以讓你放變數，並且在yml中呼叫，這樣你的yml檔案裡就不用直接寫進敏感資訊，而可以用變數取代。

進入你的 Gitlab 專案，點選左側的 Settings > CI/CD > Variables，在這邊我是把Firebase要我放的google-services.json文件。

1. Key : 這邊取一個名字叫做 GOOGLE_SERVICES_JSON
2. value : 就是把整個json檔貼進去
3. Type : 選擇 file。

 

接下來就可以開始撰寫yml，首先我們會有兩個歷程 : Build、Deploy

Build 是前端人員把做好的檔案打包出來，Deploy 就是負責把打包好的檔案方到正式的上線環境。

stages:
  - buildApk
  - deployApk

BuildApk:
  stage: buildApk
  image: reactnativecommunity/react-native-android:latest
  cache:
    untracked: true
    paths:
      - node_modules/
  before_script:
    - yarn
    - echo '$GOOGLE_SERVICES_JSON' > android/app/google-services.json
  script:
    - chmod -R 777 android
    - cd android
    - ./gradlew assembleRelease
  only:
    - master
  artifacts:
    name: 'apkFile'
    paths:
      - ./android/app/build/outputs/apk/release/

DeployApk:
  stage: deployApk
  image: docker:latest
  before_script:
    # 這邊要放登入遠端主機的指令，請IT人員設定
  script:
    - scp ./android/app/build/outputs/apk/release/app-release.apk path/to/your/deploy/folder
  dependencies:
    - BuildApk
  only:
    - master

 

說明 :

1. image : 可以看到在 build 的時候我們需要在支援 react-native 條件的環境下執行，所以我這邊就選用的我剛剛在 docker hub 上找到的、人家專門為了打包 react native 製作的 image，這個 image 非常龐大，所以他一直跑卡在那邊先不要慌張以為當機了XD ，請耐心的等它跑完。
2. 在 CI/CD > variables 設定的 variable 可以用 '$GOOGLE_SERVICES_JSON' 抓取出來並且創建一個新檔案把內容塞進去。
3. artifacts : 打包好之後的apk需要留著，下一個階段會用到，所以這個參數就可以保留你指定的路徑下的檔案供下階段 Deploy 的時候使用
4. Deploy 的流程最重要的就是把app-release.apk檔案複製到上線環境。

 

 

執行

$ yarn push_prod

會看到它請你輸入版本號 ( 是我在deploy.sh那邊設定的)

輸入好之後可以到 Gitlab > CI/CD > Pipelines 看它有沒有成功。