云開(kāi)發(fā) Gitlab CI 自動(dòng)化部署

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

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

作者介紹

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

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

到GitLab首頁(yè)，點(diǎn)擊NewProject創(chuàng)建新的工程

Project Name和Project Slug都填上test-cra，點(diǎn)擊Create Project

?

創(chuàng)建web應(yīng)用

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

yarn create react-app test-cra

設(shè)置git相關(guān)設(shè)置，并上傳應(yīng)用到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

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

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

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

點(diǎn)擊訪問(wèn)管理，進(jìn)入授權(quán)。

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

設(shè)置SecretId和SecretKey

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

GitLab CI設(shè)置

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

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

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

?

在云開(kāi)發(fā)面板中，找到環(huán)境設(shè)置中的環(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的鏡像作為基礎(chǔ)環(huán)境

• 整個(gè)CI流程有2個(gè)stage

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

1. 部署階段（deploy）：

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

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

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

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

push到遠(yuǎn)程倉(cāng)庫(kù)觸發(fā)構(gòu)建

查看CI結(jié)果，顯示upload成功。

打開(kāi)https://console.cloud.tencent.com/tcb/hosting，選擇設(shè)置，點(diǎn)擊默認(rèn)域名即可訪問(wèn)剛剛部署的web應(yīng)用。

?