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

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

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

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

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

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

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

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

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

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

新建項(xiàng)目&遷移到華為云

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

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

·此時(shí)下載壓縮包,解壓運(yùn)行以下命令即可開(kāi)始開(kāi)發(fā)

npm run install-all

npm run dev

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

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

·進(jìn)入華為云devcloud模塊，輸入想要導(dǎo)入的gitHub倉(cāng)庫(kù)地址和賬號(hào)密碼（如果需要），然后開(kāi)始導(dǎo)入，大約耗時(shí)30S

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

·我們此時(shí)可以點(diǎn)擊代碼倉(cāng)庫(kù)，進(jìn)去就可以看到倉(cāng)庫(kù)詳情了（純中文界面，真的友好）

·在本地使用以下命令即可完成clone和啟動(dòng)

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)在要在華為云上實(shí)現(xiàn)一套自動(dòng)化構(gòu)建流程

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

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

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

編寫(xiě)任務(wù)流

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

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

·這里默認(rèn)使用了華為的鏡像源倉(cāng)庫(kù)，解決了因?yàn)榄h(huán)境配置問(wèn)題導(dǎo)致下載慢的問(wèn)題~

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

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

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

編寫(xiě)dockerfile

·此時(shí)先編寫(xiě)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

#定義程序默認(rèn)端口

EXPOSE 8080

#運(yùn)行程序命令

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

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

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

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

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

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

發(fā)布

·兩種手段

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

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

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

·輸入用戶和ip地址后，ssh連接成功，編寫(xiě)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

·拉取完成后，運(yùn)行docker-compose

docker-compose up-d

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

感受

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

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

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