如何使用華爲雲服務一鍵構建部署發佈前端和Node.js服務

如何使用華爲雲服務一鍵構建部署發佈前端和Node.js服務

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

• 做爲開發,最懼怕遇到版本發佈,特別是前、後端一塊兒上線發佈,項目又特別多的時候
• 例如你有10個項目,先後端都要同時發佈,那麼就須要屢次合併代碼、構建,重複不少動做..並且還要去關心構建機器環境是否是變了?配置是否能扛住同時構建多個應用,人爲的操做次數多了,就很難保證萬無一失
• 那這種局面怎麼破? 是否是要考慮從技術角度來提效? 假如我把全部的構建、發佈都遷移到雲端,能夠一鍵push代碼,而後自動完成構建,我只要執行一個命令就能夠完成部署,又不須要關心機器配置和環境變化,那咱們的工做效率是否是能夠大大提高?

我以前的構建發佈流程

• 以前我是使用Travis CI和gitHub以及docker-compose結合進行一鍵代碼push構建發佈
• 可是有一個很明顯的問題,gitHub和Travis這兩個平臺是徹底獨立的,特別是我代碼託管在gitHub上，有時候訪問速度還很慢,更要命的是沒有在一個平臺上造成完整的鏈路閉環
• 因而我找了不少個平臺，最終發現，華爲雲能夠知足個人需求,既能夠代碼託管,也有可配置的自動化構建流程,並且訪問速度快,純中文界面友好

新建項目 & 遷移到華爲雲

• 像咱們前端和Node.js都是有一些腳手架，例如React這種框架,就有不少腳手架能夠一鍵生成項目模板,讓你再也不關心工程化配置的問題,華爲雲的developer模塊也提供了這個功能

  

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

  

• 此時下載壓縮包,解壓運行如下命令便可開始開發

`npm run install-all
npm run dev
`

• 新建項目時候,咱們能夠選擇上面這種模式快速根據模版生成代碼,可是我今天是要把個人代碼從gitHub遷移到華爲雲上託管,而後在華爲雲上完成整個開發流程的閉環

將我gitHub倉庫代碼導入到華爲雲託管

• 進入華爲雲devcloud模塊,輸入想要導入的gitHub倉庫地址和帳號密碼（若是須要）,而後開始導入,大約耗時30S
• 此時,在本地生成git ssh,將公鑰放置到華爲雲上

  

• 咱們此時能夠點擊代碼倉庫,進去就能夠看到倉庫詳情了(純中文界面,真的友好)

  

• 在本地使用如下命令便可完成clone和啓動

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

`

• 以上完成了代碼遷移,目前咱們代碼已經託管到華爲雲上,爲了完成整套研發環節的閉環,咱們須要將構建、發佈都遷移到華爲雲鯤鵬服務器上

改變個人構建策略

• 我以前是基於gitHub和Travis CI和docker-compose完成一鍵push代碼,而後一鍵完成發佈,如今要在華爲雲上實現一套自動化構建流程

構建策略適配難度極低,遠超個人想象

• 個人項目是一個前端基於React,後端基於Node.js的express框架,跟華爲雲的devstar的模板很是像
• 如何設計這個任務流?

編寫任務流

• 基於項目,新建編譯構建任務

  

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

• 這裏默認使用了華爲的鏡像源倉庫,解決了由於環境配置問題致使下載慢的問題~

如何編寫任務流?

• 以個人一個資料網站項目爲例子,基於docker-compose發佈,先後端都打包在一個鏡像中
• 首先代碼push後,構建任務不必定須要立刻執行,並且個人推送次數可能很頻繁,此時我能夠調成定時任務,還能限制次數(真的很貼心)
• 

編寫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命令進行一鍵更新發布
• 
• 簡單三個命令,完成docker-image的製做和push（具體參數能夠參考提示）
• 
• 首先登錄docker,而後build打包鏡像,最後push便可完成構建這一步,咱們本地徹底是無感知的~也不須要考慮配置和環境的問題
• 此時咱們手動觸發構建任務（像咱們公司項目特別大，一臺4核8G的機器可能就扛不住幾個項目同時構建，在這裏就不用擔憂）
• 
• 等待一段時間後,發現命令執行完成,docker鏡像已經發布完成
• 

發佈

• 兩種手段
• 經過ssh鏈接華爲雲服務器,執行編寫好的docker-compose文件
• 經過接口帶token方式(有權限的人才能夠發佈)調用,執行docker-compose命令,達到發佈目的
• 咱們重點關注第一種,經過ssh鏈接到華爲雲鯤鵬服務器
• `
  `
• 輸入用戶和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個小時不到

感覺

• 華爲雲從開發者角度出來,項目模板一鍵生成,定時構建任務,任務流的定製化處理這些,很是人性化,大大下降了開發運維門檻,造成整套研發構建流程的閉環
• 我司也正在準備購買遷移華爲雲產品，全部託管、構建發佈都放在雲端完成閉環
• 相信你經過這篇文章，也能夠快速的將你的代碼託管、構建發佈快速遷移到華爲雲鯤鵬服務器上