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

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

項目地址： https://github.com/ruichengpi...

首先說一下整個前端這邊的運行流程，一般瀏覽器請求我們大致分為兩條線資源請求和接口請求。下面我們以這兩個線說一下整個流程：

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

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

這邊以Centos為例為例：

yum install nginx

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

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

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

前端項目nginx配置存放目錄 例如：/root/nginx

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

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

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

include /root/nginx/*.conf;

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

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

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

我們訪問資源的時候有些人會遇到nginx拋出403 Forbidden的情況，這是是因為我們nginx配置文件最上面的user設(shè)置的用戶權(quán)限不夠，可以改成user root來解決。

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

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

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

以下為必須配置項：

roo.config.js

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

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

以下為必須配置項：

roo.config.js

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

默認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}}
}

該命令用于檢查遠程機器的端口占用情況。

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

roo port  // 會拉取遠程機器上所有已占用的端口情況

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

以下為必須配置項：

roo.config.js

module.exports={
    origin:{
        host:"<遠程機器IP>",
        username: "<遠程機器用戶名>",
        password: "<遠程機器密碼>"
    }
}

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

以下為必須配置項：

roo.config.js

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

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

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

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

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