如何使用華為云服務(wù)一鍵構(gòu)建部署發(fā)布前端和Node.js服務(wù)

如何使用華為云服務(wù)一鍵構(gòu)建部署發(fā)布前端和Node.js服務(wù)

構(gòu)建部署,一直是一個很繁瑣的過程

·作為開發(fā)，最害怕遇到版本發(fā)布，特別是前、后端一起上線發(fā)布，項目又特別多的時候

·例如你有10個項目，前后端都要同時發(fā)布，那么就需要多次合并代碼、構(gòu)建，重復(fù)很多動作。而且還要去關(guān)心構(gòu)建機器環(huán)境是不是變了？配置是否能扛住同時構(gòu)建多個應(yīng)用，人為的操作次數(shù)多了，就很難保證萬無一失

·那這種局面怎么破？是不是要考慮從技術(shù)角度來提效？假如我把所有的構(gòu)建、發(fā)布都遷移到云端,可以一鍵push代碼，然后自動完成構(gòu)建，我只要執(zhí)行一個命令就可以完成部署，又不需要關(guān)心機器配置和環(huán)境變化，那我們的工作效率是不是可以大大提升？

我之前的構(gòu)建發(fā)布流程

·之前我是使用Travis CI和gitHub以及docker-compose結(jié)合進行一鍵代碼push構(gòu)建發(fā)布

·但是有一個很明顯的問題，gitHub和Travis這兩個平臺是完全獨立的，特別是我代碼托管在gitHub上，有時候訪問速度還很慢，更要命的是沒有在一個平臺上形成完整的鏈路閉環(huán)

·于是我找了很多個平臺，最終發(fā)現(xiàn)，華為云可以滿足我的需求，既可以代碼托管，也有可配置的自動化構(gòu)建流程，而且訪問速度快，純中文界面友好

新建項目&遷移到華為云

像我們前端和Node.js都是有一些腳手架，例如React這種框架，就有很多腳手架可以一鍵生成項目模板，讓你不再關(guān)心工程化配置的問題，華為云的developer模塊也提供了這個功能

·選擇想要的模板，像我選擇的是React+express模板，10秒鐘左右就生成好了，此時就可以在我的模板產(chǎn)物中看

·此時下載壓縮包,解壓運行以下命令即可開始開發(fā)

npm run install-all

npm run dev

·新建項目時候,我們可以選擇上面這種模式快速根據(jù)模版生成代碼,但是我今天是要把我的代碼從gitHub遷移到華為云上托管,然后在華為云上完成整個開發(fā)流程的閉環(huán)

將我gitHub倉庫代碼導(dǎo)入到華為云托管

·進入華為云devcloud模塊，輸入想要導(dǎo)入的gitHub倉庫地址和賬號密碼（如果需要），然后開始導(dǎo)入，大約耗時30S

·此時，在本地生成git ssh，將公鑰放置到華為云上

·我們此時可以點擊代碼倉庫，進去就可以看到倉庫詳情了（純中文界面，真的友好）

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

git clone remoteurl

cd your projectName

npm install

npm run dev

·以上完成了代碼遷移，目前我們代碼已經(jīng)托管到華為云上，為了完成整套研發(fā)環(huán)節(jié)的閉環(huán)，我們需要將構(gòu)建、發(fā)布都遷移到華為云鯤鵬服務(wù)器上

改變我的構(gòu)建策略

·我之前是基于gitHub和Travis CI和docker-compose完成一鍵push代碼，然后一鍵完成發(fā)布，現(xiàn)在要在華為云上實現(xiàn)一套自動化構(gòu)建流程

構(gòu)建策略適配難度極低，遠超我的想象

·我的項目是一個前端基于React，后端基于Node.js的express框架，跟華為云的devstar的模板非常像

·如何設(shè)計這個任務(wù)流?

編寫任務(wù)流

·基于項目，新建編譯構(gòu)建任務(wù)

·編寫任務(wù)流任務(wù)流，所謂任務(wù)流，就是完成一個，然后接著下一個，華為云這里比較貼心，根據(jù)不同的環(huán)境進行了區(qū)分環(huán)境，不像傳統(tǒng)的服務(wù)器，你還要去裝docker、node.js等等這些（PS:任務(wù)新建后可以修改任務(wù)～）

·這里默認使用了華為的鏡像源倉庫，解決了因為環(huán)境配置問題導(dǎo)致下載慢的問題~

如何編寫任務(wù)流?

·以我的一個資料網(wǎng)站項目為例子，基于docker-compose發(fā)布，前后端都打包在一個鏡像中

·首先代碼push后，構(gòu)建任務(wù)不一定需要馬上執(zhí)行，而且我的推送次數(shù)可能很頻繁，此時我可以調(diào)成定時任務(wù)，還能限制次數(shù)（真的很貼心）

編寫dockerfile

·此時先編寫dockerfile文件，用于docker，基于Node.js 12.16.3版本的鏡像，指定端口

#引用鏡像

FROM node:12.16.3

#執(zhí)行命令，創(chuàng)建文件夾

RUN mkdir-p/usr/www

WORKDIR/usr/www

COPY./usr/www

RUN npm run build

#配置環(huán)境變量

ENV HOST 0.0.0.0

ENV PORT 8080

#定義程序默認端口

EXPOSE 8080

#運行程序命令

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

·此時可以想象，我們推送代碼后（可以選擇什么分支），根據(jù)配置定時自動構(gòu)建，然后可以通過接口或者手動借助docker-compose命令進行一鍵更新發(fā)布

·簡單三個命令，完成docker-image的制作和push（具體參數(shù)可以參考提示）

·首先登陸docker，然后build打包鏡像，最后push即可完成構(gòu)建這一步，我們本地完全是無感知的~也不需要考慮配置和環(huán)境的問題

·此時我們手動觸發(fā)構(gòu)建任務(wù)（像我們公司項目特別大，一臺4核8G的機器可能就扛不住幾個項目同時構(gòu)建，在這里就不用擔(dān)心）

·等待一段時間后，發(fā)現(xiàn)命令執(zhí)行完成，docker鏡像已經(jīng)發(fā)布完成

發(fā)布

·兩種手段

  ·通過ssh連接華為云服務(wù)器，執(zhí)行編寫好的docker-compose文件

  ·通過接口帶token方式（有權(quán)限的人才可以發(fā)布）調(diào)用，執(zhí)行docker-compose命令，達到發(fā)布目的

·我們重點關(guān)注第一種，通過ssh連接到華為云鯤鵬服務(wù)器

·輸入用戶和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

·執(zhí)行命令，拉取鏡像

docker-compose pull

·拉取完成后，運行docker-compose

docker-compose up-d

·啟動成功，輸入域名，即可訪問到我的網(wǎng)站了，完成這個遷移和整套開發(fā)構(gòu)建流程的閉環(huán)，僅僅用了1個小時不到

感受

·華為云從開發(fā)者角度出來,項目模板一鍵生成,定時構(gòu)建任務(wù),任務(wù)流的定制化處理這些,非常人性化,大大降低了開發(fā)運維門檻,形成整套研發(fā)構(gòu)建流程的閉環(huán)

·我司也正在準備購買遷移華為云產(chǎn)品，所有托管、構(gòu)建發(fā)布都放在云端完成閉環(huán)

·相信你通過這篇文章，也可以快速的將你的代碼托管、構(gòu)建發(fā)布快速遷移到華為云鯤鵬服務(wù)器上