如何使用華為雲服務一鍵構建部署釋出前端和Node.js服務

Peter譚金傑發表於2020-08-18
前端Node.js

如何使用華為雲服務一鍵構建部署釋出前端和Node.js服務

image.png

構建部署,一直是一個很繁瑣的過程

  • 作為開發,最害怕遇到版本釋出,特別是前、後端一起上線釋出,專案又特別多的時候
  • 例如你有10個專案,前後端都要同時釋出,那麼就需要多次合併程式碼、構建,重複很多動作..而且還要去關心構建機器環境是不是變了?配置是否能扛住同時構建多個應用,人為的操作次數多了,就很難保證萬無一失
  • 那這種局面怎麼破? 是不是要考慮從技術角度來提效? 假如我把所有的構建、釋出都遷移到雲端,可以一鍵push程式碼,然後自動完成構建,我只要執行一個命令就可以完成部署,又不需要關心機器配置和環境變化,那我們的工作效率是不是可以大大提升?

我之前的構建釋出流程

  • 之前我是使用Travis CI和gitHub以及docker-compose結合進行一鍵程式碼push構建釋出
  • 但是有一個很明顯的問題,gitHub和Travis這兩個平臺是完全獨立的,特別是我程式碼託管在gitHub上，有時候訪問速度還很慢,更要命的是沒有在一個平臺上形成完整的鏈路閉環
  • 於是我找了很多個平臺，最終發現，華為雲可以滿足我的需求,既可以程式碼託管,也有可配置的自動化構建流程,而且訪問速度快,純中文介面友好

新建專案 & 遷移到華為雲

  • 像我們前端和Node.js都是有一些腳手架，例如React這種框架,就有很多腳手架可以一鍵生成專案模板,讓你不再關心工程化配置的問題,華為雲的developer模組也提供了這個功能

    image.png

  • 選擇想要的模板,像我選擇的是React+express模板,10秒鐘左右就生成好了,此時就可以在我的模板產物中看

    image.png

  • 此時下載壓縮包,解壓執行以下命令即可開始開發

`npm run install-all
npm run dev
`

  • 新建專案時候,我們可以選擇上面這種模式快速根據模版生成程式碼,但是我今天是要把我的程式碼從gitHub遷移到華為雲上託管,然後在華為雲上完成整個開發流程的閉環

將我gitHub倉庫程式碼匯入到華為雲託管

image.png

  • 進入華為雲devcloud模組,輸入想要匯入的gitHub倉庫地址和賬號密碼（如果需要）,然後開始匯入,大約耗時30S
  • 此時,在本地生成git ssh,將公鑰放置到華為雲上

    image.png

  • 我們此時可以點選程式碼倉庫,進去就可以看到倉庫詳情了(純中文介面,真的友好)

    image.png

  • 在本地使用以下命令即可完成clone和啟動

`git clone remoteurl
cd your projectName
npm install
npm run dev

`

  • 以上完成了程式碼遷移,目前我們程式碼已經託管到華為雲上,為了完成整套研發環節的閉環,我們需要將構建、釋出都遷移到華為雲鯤鵬伺服器上

改變我的構建策略

  • 我之前是基於gitHub和Travis CI和docker-compose完成一鍵push程式碼,然後一鍵完成釋出,現在要在華為雲上實現一套自動化構建流程

構建策略適配難度極低,遠超我的想象

  • 我的專案是一個前端基於React,後端基於Node.js的express框架,跟華為雲的devstar的模板非常像
  • 如何設計這個任務流?

編寫任務流

  • 基於專案,新建編譯構建任務

    image.png

  • 編寫任務流任務流,所謂任務流,就是完成一個,然後接著下一個,華為雲這裡比較貼心,根據不同的環境進行了區分環境,不像傳統的伺服器,你還要去裝docker、node.js等等這些(PS:任務新建後可以修改任務～)

image.png

  • 這裡預設使用了華為的映象源倉庫,解決了因為環境配置問題導致下載慢的問題~

如何編寫任務流?

  • 以我的一個資料網站專案為例子,基於docker-compose釋出,前後端都打包在一個映象中
  • 首先程式碼push後,構建任務不一定需要馬上執行,而且我的推送次數可能很頻繁,此時我可以調成定時任務,還能限制次數(真的很貼心)
  • image.png

編寫dockerfile

  • 此時先編寫dockerfile檔案,用於docker,基於Node.js 12.16.3版本的映象,指定埠

`#引用映象
FROM node:12.16.3

執行命令，建立資料夾

RUN mkdir -p /usr/www
WORKDIR /usr/www
COPY . /usr/www
RUN npm run build

配置環境變數

 ENV HOST 0.0.0.0
 ENV PORT 8080

定義程式預設埠

EXPOSE 8080

執行程式命令

CMD ["node","./server/index.js"]
`

  • 此時可以想象,我們推送程式碼後(可以選擇什麼分支),根據配置定時自動構建,然後可以通過介面或者手動藉助docker-compose命令進行一鍵更新發布
  • image.png
  • 簡單三個命令,完成docker-image的製作和push（具體引數可以參考提示）
  • image.png
  • 首先登陸docker,然後build打包映象,最後push即可完成構建這一步,我們本地完全是無感知的~也不需要考慮配置和環境的問題
  • 此時我們手動觸發構建任務（像我們公司專案特別大，一臺4核8G的機器可能就扛不住幾個專案同時構建，在這裡就不用擔心）
  • image.png
  • 等待一段時間後,發現命令執行完成,docker映象已經發布完成
  • image.png

釋出

  • 兩種手段
  • 通過ssh連線華為雲伺服器,執行編寫好的docker-compose檔案
  • 通過介面帶token方式(有許可權的人才可以釋出)呼叫,執行docker-compose命令,達到釋出目的
  • 我們重點關注第一種,通過ssh連線到華為雲鯤鵬伺服器
  • `image.png
    `
  • 輸入使用者和ip地址後,ssh連線成功,編寫docker-compose檔案

`version: "3.7"
services:
    redis:
        image: redis:3
        container_name: redis
        hostname: redis
        command: redis-server /usr/local/etc/redis/redis.conf --requirepass huaweiapp666
        volumes:
          - ./redis/redis.conf:/usr/local/etc/redis/redis.conf
        ports:
          - "6379:6379"
    huaweiapp:
        image: jinjietan/huaweiapp:latest
        ports:
            - "8080:8080"
        restart: on-failure
`

  • 執行命令，拉取映象

    docker-compose pull

  • 拉取完成後,執行docker-compose

docker-compose up -d

  • 啟動成功,輸入域名,即可訪問到我的網站了,完成這個遷移和整套開發構建流程的閉環,僅僅用了1個小時不到

image.png

感受

  • 華為雲從開發者角度出來,專案模板一鍵生成,定時構建任務,任務流的定製化處理這些,非常人性化,大大降低了開發運維門檻,形成整套研發構建流程的閉環
  • 我司也正在準備購買遷移華為雲產品，所有託管、構建釋出都放在雲端完成閉環
  • 相信你通過這篇文章，也可以快速的將你的程式碼託管、構建釋出快速遷移到華為雲鯤鵬伺服器上

相關文章