使用 Gitlab cicd 佈署 React Native專案

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

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

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

  1. 撰寫package.jsonscript
  2. 撰寫deploy.sh
  3. 撰寫.gitlab-ci.yml

撰寫package.jsonscript

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

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

// or

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

 

 

撰寫deploy.sh

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

流程是因為在package.jsonscript指令,最後面有傳入一個參數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 imagereact-native 用的;

二是把變數設定到 GitlabCICD 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,首先我們會有兩個歷程 : BuildDeploy

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 看它有沒有成功。

學習程式原來可以這麼簡單:六角學院線上課程

初學者如何成為vue前端工程師:查看課程內容

---------------------------

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

2+
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。