云開發(fā) Gitlab CI 自動化部署

云開發(fā)靜態(tài)托管是云開發(fā)提供的靜態(tài)網(wǎng)站托管的能力，靜態(tài)資源（HTML、CSS、JavaScript、字體等）的分發(fā)由騰訊云對象存儲 COS 和擁有多個邊緣網(wǎng)點的騰訊云 CDN 提供支持

本文使用了create-react-app創(chuàng)建了一個React應用，并把該應用部署到騰訊云的靜態(tài)網(wǎng)站托管。

作者介紹

鐘煒達，任職于騰訊在線教育部IMWEB團隊，是一名前端開發(fā)工程師。有豐富Web應用開發(fā)經(jīng)驗和在前端工程化方面有較多的實踐。

GitLab中創(chuàng)建 test-cra 項目

到GitLab首頁，點擊NewProject創(chuàng)建新的工程

Project Name和Project Slug都填上test-cra，點擊Create Project

?

創(chuàng)建web應用

在本地環(huán)境通過create-react-app創(chuàng)建了一個名為test-cra的項目

yarn create react-app test-cra

設置git相關設置，并上傳應用到GitLab

cd test-cra
git init
## 這里需要注意username為你的gitlab賬戶名
git remote add origin git@gitlab.com:username/test-cra.git
git add .
git commit -m "Initial commit"
git push -u origin master

接下來到騰訊云中創(chuàng)建云開發(fā)環(huán)境

創(chuàng)建云開發(fā)環(huán)境

輸入網(wǎng)址：https://console.cloud.tencent.com/tcb/env/index，如果沒有授權會彈出以下畫面。

點擊訪問管理，進入授權。

創(chuàng)建一個云開發(fā)環(huán)境。這里命名環(huán)境為test-cra。

設置SecretId和SecretKey

輸入網(wǎng)址：https://console.cloud.tencent.com/cam/capi點擊新建秘鑰即可。

GitLab CI設置

SecretId和SecretKey屬于敏感數(shù)據(jù)，不應該直接寫到CI配置文件中。

回到剛剛創(chuàng)建的GitLab項目，找到Settings->CI/CD

找到Variables項如圖新建3個key，SecretId、SecretKey和EnvId。并輸入對應的value值。注意必須要開啟protected和masked，這樣能有效保證數(shù)據(jù)保密和安全。

?

在云開發(fā)面板中，找到環(huán)境設置中的環(huán)境ID。EnvId的value為環(huán)境ID

創(chuàng)建.gitlab-ci.yml配置文件

在本地工程_test-cra_的根目錄中創(chuàng)建.gitlab-ci.yml文件

.gitlab-ci.yml配置文件如下，這里可查看更多的gitlab ci 配置

image: node:12.16.2
stages:
  - build
  - deploy
build:
  stage: build
  script:
    - npm i
    - npm run build
  artifacts:
    paths:
      - ./build/
  only:
    - maste
deploy:
  stage: deploy
  script:
    - cd ./build
    - npm i -g @cloudbase/cli
    - tcb login --apiKeyId $SecretId --apiKey $SecretKey
    - tcb hosting:deploy -e $EnvId
  only:
    - master

• 使用node12的鏡像作為基礎環(huán)境

• 整個CI流程有2個stage

1. 構建階段（build）：生成構建產(chǎn)物，并把構建產(chǎn)物進行存檔（artifacts操作）

1. 部署階段（deploy）：

1. 需要使用騰訊云提供的cli工具（@cloudbase/cli）

1. 使用API秘鑰直接登錄，這里需要使用到上一步的SecretId和SecretKey環(huán)境變量

1. 進入構建產(chǎn)物目錄（這里為./build目錄），執(zhí)行全量部署。這里需要使用上一步的EnvId環(huán)境變量。

更多的tcb部署靜態(tài)網(wǎng)站方法可以在：http://docs.cloudbase.net/cli/hosting.html進行查看。

push到遠程倉庫觸發(fā)構建

查看CI結果，顯示upload成功。

打開https://console.cloud.tencent.com/tcb/hosting，選擇設置，點擊默認域名即可訪問剛剛部署的web應用。

?