Jenkins自動前端程式碼

語言: CN / TW / HK

本文已參與「新人創作禮」活動,一起開啟掘金創作之路。

Jenkins自動前端程式碼

最近公司專案重構,PHP的前後端程式碼分離,現在前端程式碼需要npm run build,現在根據之前的情況,進行前端構建拉取推送。

一、環境配置

``` [[email protected] ~] curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

執行完成後需要退出當前環境,在連線一下,安裝成功後在/root/.nvm

[[email protected] ~] nvm --version 0.33.8 ​ [[email protected] ~] nvm install --lts #安裝最新node [[email protected] ~] node -v #檢查是否安裝成功 v16.14.2 [[email protected]wanzo ~] npm -v 8.5.0 ​ 下面是常用的nvm命令 nvm ls-remote:列出所有的node版本 nvm ls:列出本地已經安裝的node版本 nvm install [-s] : 安裝特定版本的node,比如:nvm install v6.0.0安裝最新6.0.0的node。 nvm use [–silent]:切換到制定版本node nvm current :當前 node 版本 nvm alias [別名] [node版本號] :給不同的版本號新增別名 nvm unalias [別名] :刪除已定義的別名 nvm alias default [node版本號] :設定預設版本 ```

二、npm設定國內源

web站點:https://npmmirror.com

Registry Endpoint:https://registry.npmmirror.com

[[email protected] ~] npm config set registry https://registry.npmmirror.com #設定為國內的淘寶映象源 [[email protected] ~] npm config get registry #驗證一下,返回為剛剛設定的映象 https://registry.npmmirror.com

三、進入到專案裡面,安裝依賴環境和build

[[email protected] test] npm i #進入專案裡面安裝依賴環境,或者npm install兩者略有不同 [[email protected] test] npm run build #然後對前端專案進行build

以上為在Linux中設定,下面配置Jenkins設定。

一、安裝外掛:nvm wrapper

版本檢視Linux中執行:node -v

NVM_NODEJS_ORG_MIRROR配置為:https://cdn.npmmirror.com/binaries/node

NVM_IOJS_ORG_MIRROR配置為:https://cdn.npmmirror.com/binaries/iojs

image.png

二、在構建步驟中新增兩個步驟:1、執行shell;2、Send files or execute commands over SSH。

```

執行shell指令碼

cd jsmerchant && #進到構建的目錄,根據自己的專案調整 npm i && npm run build && #編譯環境和編譯成dist

cd dist && #進入編譯目錄

tar -cvzf dist.tar.gz dist #把編譯檔案進行打包 ```

```

Send files or execute commands over SSH

chown -R www:www /www/wwwroot/9092 cd /www/wwwroot/9092 && rm -rf dist #進入前端目錄,先刪除之前的dist檔案 cd /www/wwwroot/9092 && tar -xvzf dist.tar.gz && rm -rf dist.tar.gz #進入前端目錄,解壓包,然後刪除包 ```

image.png