袋鼠云前端項(xiàng)目發(fā)布工具dtux-kangaroo

yacheng 發(fā)布于2019-08-26 12:01 / 2467人閱讀

摘要：每家公司在前端項(xiàng)目發(fā)布體系可能不盡相同，本篇文章僅僅介紹袋鼠云的前端發(fā)布體系，希望能對(duì)大家能有所啟發(fā)。目前袋鼠云采用的是前后端分離的方式，但是開(kāi)發(fā)中還是比較依賴后端的，接口數(shù)據(jù)還不是很完善。

前言

在目前的大趨勢(shì)下，前端和后端解耦已經(jīng)是一個(gè)業(yè)界的趨勢(shì)。前端和后端一旦解耦之后，前端的項(xiàng)目和后端的項(xiàng)目便可以自己發(fā)布，互不影響。這樣極大地提高工作效率，免去了很多互相等待的時(shí)間。每家公司在前端項(xiàng)目發(fā)布體系可能不盡相同，本篇文章僅僅介紹袋鼠云的前端發(fā)布體系，希望能對(duì)大家能有所啟發(fā)。

項(xiàng)目地址： https://github.com/ruichengpi...

實(shí)現(xiàn)原理

首先說(shuō)一下整個(gè)前端這邊的運(yùn)行流程，一般瀏覽器請(qǐng)求我們大致分為兩條線資源請(qǐng)求和接口請(qǐng)求。下面我們以這兩個(gè)線說(shuō)一下整個(gè)流程：

1. 資源請(qǐng)求： 這邊我們Nginx服務(wù)器跟我們前端打包出來(lái)資源都是放在同一臺(tái)機(jī)器上。Nginx設(shè)置一下我們靜態(tài)資源的目錄，瀏覽器的資源請(qǐng)求都會(huì)從這個(gè)靜態(tài)資源目錄中獲取，我們本地往遠(yuǎn)程機(jī)器推送前端資源也是在這個(gè)目錄下。

2. 接口請(qǐng)求： 瀏覽器的所有接口請(qǐng)求都會(huì)被我們遠(yuǎn)程機(jī)器上的Nginx攔截,然后路徑規(guī)則匹配代理相應(yīng)的接口服務(wù)上。

準(zhǔn)備工作 安裝nginx

這邊以Centos為例為例：

yum install nginx

這里有個(gè)需要注意的是，我們要盡量保證nginx全局命令是可用，有不少公司nginx命令不是全局的，如何在對(duì)應(yīng)的roo.config.js中做一下設(shè)置，后面我們會(huì)講到。

設(shè)置好相應(yīng)的目錄

這里我們需要設(shè)定一下三個(gè)目錄：

前端資源存放目錄例如：/root/app

前端項(xiàng)目nginx配置存放目錄例如：/root/nginx

前端資源備份目錄例如：/root/backup

配置nginx文件

設(shè)置一下nginx配置文件，一般來(lái)說(shuō)是/etc/nginx/nginx.conf。當(dāng)然根據(jù)每個(gè)公司不同情況找到對(duì)應(yīng)的配置文件

...
http{
    include /root/nginx/*.conf;  
}
...

include /root/nginx/*.conf;

這句話表示/root/nginx下所有以.conf結(jié)尾的文件都會(huì)被加載進(jìn)來(lái)，而/root/nginx是我們所設(shè)定的nginx配置文件存放目錄。

啟動(dòng)Nginx

nginx -c /etc/nginx/nginx.conf  //啟動(dòng)nginx，并確定前面配置是否正確

上面命令僅作參考，具體根據(jù)情況來(lái)定。

我們?cè)L問(wèn)資源的時(shí)候有些人會(huì)遇到nginx拋出403 Forbidden的情況，這是是因?yàn)槲覀僴ginx配置文件最上面的user設(shè)置的用戶權(quán)限不夠，可以改成user root來(lái)解決。

支持功能

以下四個(gè)功能均支持-c或者--config指定配置文件.如果未指定配置文件，則默認(rèn)在項(xiàng)目根目錄下去roo.config.js作為配置文件。

roo backup

該命令用于備份我們的前端資源包，這樣有利于我們做版本的管理。當(dāng)線上出現(xiàn)重大問(wèn)題的時(shí)候，可以及時(shí)拿過(guò)來(lái)做版本回滾。

執(zhí)行roo backup命令，如果設(shè)置了NODE_ENV=production則會(huì)在遠(yuǎn)程機(jī)器上的backupDirectory里生成一個(gè)“production_YYYYMMDD”的前端資源包，若未設(shè)置則生成一個(gè)
“test_YYYYMMDD”的前端資源包，其中YYYYMMDD為當(dāng)天的年月日，當(dāng)天上傳多次也只會(huì)生成一個(gè)包，后續(xù)上傳的將會(huì)覆蓋之前上傳的前端資源。

以下為必須配置項(xiàng)：

roo.config.js

module.exports={
  local:{
    resourceDirectory:"<本地前端資源所在目錄，該目錄下的內(nèi)容將會(huì)全部上傳>"
  },
  origin:{
    host:"<遠(yuǎn)程機(jī)器IP>",
    username: "<遠(yuǎn)程機(jī)器用戶名>",
    password: "<遠(yuǎn)程機(jī)器密碼>",
    backupDirectory:"<遠(yuǎn)程機(jī)器備份前端資源的目錄>"
  }
}

roo nginx

該命令用于生成項(xiàng)目對(duì)應(yīng)的nginx配置文件，并更新線上的nginx配置文件。執(zhí)行roo nginx文件之后，會(huì)在roo.config.js中指定的local.nginxConfigFilePath生成對(duì)應(yīng)的nginx配置文件，并更新遠(yuǎn)程機(jī)器上的roo.config.js中指定的origin.nginxConfigFilePath的nginx配置文件，然后執(zhí)行nginx的reload操作。

以下為必須配置項(xiàng)：

roo.config.js

module.exports={
  local:{
     nginxConfigTemplate:""
     nginxConfigFilePath:""
  },
  origin:{
    host:"<遠(yuǎn)程機(jī)器IP>",
    username: "<遠(yuǎn)程機(jī)器用戶名>",
    password: "<遠(yuǎn)程機(jī)器密碼>",
    nginxConfigFilePath:"<遠(yuǎn)程機(jī)器上該項(xiàng)目的nginx配置文件的路徑，此文件將會(huì)被nginx主文件include>"    
  },
//nginxConfig里的參數(shù)將用于生成本項(xiàng)目的nginx配置文件
  nginxConfig:{
    port:"<開(kāi)放端口>",
    serverName："<服務(wù)名稱>",
    publicPath:"<靜態(tài)資源目錄>"，
    //locations將對(duì)于nginx里面的location
    locations:[
        {
            path:"<匹配路徑>",
            //對(duì)應(yīng)location中的配置項(xiàng)
            configs:[
                {
                    key:"proxy_redirect",
                    value:"off"
                },
                {
                    key:"proxy_set_header",
                    value:"Host $host"
                },
                {
                    key:"proxy_pass",
                    value:"代理路徑"
                },
            ]
        }
    ]
  }
}

默認(rèn)nginx配置文件模板

server {
  listen       {{port}};
  server_name  {{serverName}};
  location / {
    root        {{publicPath}};
    try_files $uri /index.html;
    location ~ .*.(ico|js|css|gif|jpg|jpeg|png|bmp|swf)$ {}
  }
  {{#each locations}}
  location {{this.path}} {
    {{#each this.configs}}
    {{this.key}} {{this.value}};
    {{/each}}
  }
  {{/each}}
}

roo port

該命令用于檢查遠(yuǎn)程機(jī)器的端口占用情況。

-p 或者 --port | 會(huì)檢測(cè)該端口是否占用，若占用會(huì)顯示相關(guān)使用情況

roo port  // 會(huì)拉取遠(yuǎn)程機(jī)器上所有已占用的端口情況

roo port -p 8000  //檢測(cè)8000端口是否占用，若占用顯示被使用情況

以下為必須配置項(xiàng)：

roo.config.js

module.exports={
    origin:{
        host:"<遠(yuǎn)程機(jī)器IP>",
        username: "<遠(yuǎn)程機(jī)器用戶名>",
        password: "<遠(yuǎn)程機(jī)器密碼>"
    }
}

roo publish

該命令將roo.config.js文件中local.resourceDirectory指定的前端資源目錄內(nèi)的資源上傳到origin.resourceDirectory目錄下。origin.resourceDirectory指定的目錄也會(huì)跟nginxConfig.publicPath指定的目錄相對(duì)應(yīng)。

以下為必須配置項(xiàng)：

roo.config.js

module.exports={
    local:{
        resourceDirectory:"<本地前端資源所在目錄，該目錄下的內(nèi)容將會(huì)全部上傳>"
    }    
    origin:{
        host:"<遠(yuǎn)程機(jī)器IP>",
        username: "<遠(yuǎn)程機(jī)器用戶名>",
        password: "<遠(yuǎn)程機(jī)器密碼>",
        resourceDirectory:"<遠(yuǎn)程機(jī)器存在前端資源的目錄，上傳的前端資源將會(huì)存在這里>",
        nginxConfigFilePath:"<遠(yuǎn)程機(jī)器上該項(xiàng)目的nginx配置文件的路徑，此文件將會(huì)被nginx主文件include>"  
    }
}

roo.config.js配置參數(shù)說(shuō)明

module.exports={
  local:{
    resourceDirectory:"<本地前端資源所在目錄，該目錄下的內(nèi)容將會(huì)全部上傳>",
    nginxConfigFilePath:""
  },
  origin:{
    host:"<遠(yuǎn)程機(jī)器IP>",
    username: "<遠(yuǎn)程機(jī)器用戶名>",
    password: "<遠(yuǎn)程機(jī)器密碼>",
    resourceDirectory:"<遠(yuǎn)程機(jī)器存在前端資源的目錄，上傳的前端資源將會(huì)存在這里>",
    backupDirectory:"<遠(yuǎn)程機(jī)器備份前端資源的目錄>"
    nginxConfigFilePath:"<遠(yuǎn)程機(jī)器上該項(xiàng)目的nginx配置文件的路徑，此文件將會(huì)被nginx主文件include>"    
  },
 //nginxConfig里的參數(shù)將用于生成本項(xiàng)目的nginx配置文件
  nginxConfig:{
    port:"<開(kāi)放端口>",
    serverName："<服務(wù)名稱>",
    publicPath:"<靜態(tài)資源目錄>"，
    //locations將對(duì)于nginx里面的location
    locations:[
        {
            path:"<匹配路徑>",
            //對(duì)應(yīng)location中的配置項(xiàng)
            configs:[
                {
                    key:"proxy_redirect",
                    value:"off"
                },
                {
                    key:"proxy_set_header",
                    value:"Host $host"
                },
                {
                    key:"proxy_pass",
                    value:"代理路徑"
                },
            ]
        }
    ]
  }
}

展望 roo create

目前袋鼠云這邊的項(xiàng)目構(gòu)建工具采用的是Yeoman的構(gòu)建體系，可以滿足袋鼠云這邊對(duì)項(xiàng)目構(gòu)建的需求。但是有點(diǎn)小小不足的地方，就是每次項(xiàng)目模板更新之后都要重新發(fā)布Yeoman的腳手架，靈活性相對(duì)較差。后面打算把項(xiàng)目的生成的工作交給dtux-kangaroo，并且所有項(xiàng)目模板均放在github上，每次生成項(xiàng)目都會(huì)從github重新拉，模板貢獻(xiàn)者只需要關(guān)注自己的github倉(cāng)庫(kù)即可，只要將更新合并到master分支上，后續(xù)項(xiàng)目生成均會(huì)提到更新。當(dāng)然在現(xiàn)有的Yeoman的腳手架改造也可以實(shí)現(xiàn)同樣的功能，但是本著工具精簡(jiǎn)的原則，會(huì)將現(xiàn)有的Yeoman的腳手架遷到dtux-kangaroo并進(jìn)行改造。

roo mock

目前袋鼠云采用的是前后端分離的方式，但是開(kāi)發(fā)中還是比較依賴后端的，接口數(shù)據(jù)mock還不是很完善。后面計(jì)劃加入roo mock來(lái)解決數(shù)據(jù)mock問(wèn)題，初步想法是借助后端的swagger來(lái)實(shí)現(xiàn)接口數(shù)據(jù)mock。

在dtux-kangaroo上基礎(chǔ)做一個(gè)前端資源發(fā)布平臺(tái)

dtux-kangaroo已經(jīng)驗(yàn)證了這套發(fā)布體系的可行性，也解決了如何與遠(yuǎn)程機(jī)器的交互的問(wèn)題。為前端資源發(fā)布平臺(tái)的搭建打下很好的基礎(chǔ)。后面計(jì)劃搭建這個(gè)前端資源發(fā)布平臺(tái)，提高前端資源發(fā)布的效率，減少對(duì)運(yùn)維的依賴。

GPU云服務(wù)器云服務(wù)器袋鼠云前端項(xiàng)目前端項(xiàng)目視頻前端開(kāi)發(fā)項(xiàng)目

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/108037.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

yacheng

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

spyder安裝tensorflow

閱讀 2270·2023-04-25 21:11
大齡程序員~聊聊我畢業(yè)十年的生活

閱讀 3052·2021-09-30 09:47
編碼之道（終）：做專業(yè)的程序員

閱讀 2326·2021-09-24 09:48
搬瓦工日本VPS：大阪軟銀機(jī)房 Japan Equinix Osaka Softbank OS1 I

閱讀 4515·2021-08-23 09:43
Vertical-Align: 你應(yīng)該知道的事情

閱讀 960·2019-08-30 15:54
CSS學(xué)習(xí)筆記(一) HTML標(biāo)記與文檔結(jié)構(gòu)

閱讀 627·2019-08-28 18:01
Eclipse Modeling Framework, 2nd Edition. (EMF)學(xué)習(xí)筆記

閱讀 1481·2019-08-27 10:55
XML就是這么簡(jiǎn)單

閱讀 647·2019-08-27 10:55

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

袋鼠云前端項(xiàng)目發(fā)布工具dtux-kangaroo

相關(guān)文章

余額寶11.11：基于日志數(shù)據(jù)分析的高效運(yùn)維

發(fā)表評(píng)論

0條評(píng)論

yacheng

男|高級(jí)講師

TA的文章

spyder安裝tensorflow

大齡程序員~聊聊我畢業(yè)十年的生活

編碼之道（終）：做專業(yè)的程序員

搬瓦工日本VPS：大阪軟銀機(jī)房 Japan Equinix Osaka Softbank OS1 I

Vertical-Align: 你應(yīng)該知道的事情

CSS學(xué)習(xí)筆記(一) HTML標(biāo)記與文檔結(jié)構(gòu)

Eclipse Modeling Framework, 2nd Edition. (EMF)學(xué)習(xí)筆記

XML就是這么簡(jiǎn)單

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

袋鼠云前端項(xiàng)目發(fā)布工具dtux-kangaroo

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！