袋鼠雲前端項目釋出工具dtux-kangaroo

前言

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

項目位址：

github.com/ruichengpin…

實作原理

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

1. 資源請求： 這邊我們Nginx伺服器跟我們前端打包出來資源都是放在同一台機器上。Nginx設定一下我們靜态資源的目錄，浏覽器的資源請求都會從這個靜态資源目錄中擷取，我們本地往遠端機器推送前端資源也是在這個目錄下。

2. 接口請求： 浏覽器的所有接口請求都會被我們遠端機器上的Nginx攔截,然後路徑規則比對代理相應的接口服務上。

準備工作

安裝nginx

這邊以Centos為例為例：

yum install nginx
           

這裡有個需要注意的是，我們要盡量保證nginx全局指令是可用，有不少公司nginx指令不是全局的，如何在對應的roo.config.js中做一下設定，後面我們會講到。

設定好相應的目錄

這裡我們需要設定一下三個目錄：

• 前端資源存放目錄 例如：/root/app
• 前端項目nginx配置存放目錄 例如：/root/nginx
• 前端資源備份目錄 例如：/root/backup

配置nginx檔案

設定一下nginx配置檔案，一般來說是**/etc/nginx/nginx.conf**。當然根據每個公司不同情況找到對應的配置檔案

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

           

include /root/nginx/*.conf;

這句話表示**/root/nginx下所有以.conf結尾的檔案都會被加載進來，而/root/nginx**是我們所設定的nginx配置檔案存放目錄。

啟動Nginx

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

           

上面指令僅作參考，具體根據情況來定。

我們通路資源的時候有些人會遇到nginx抛出403 Forbidden的情況，這是是因為我們nginx配置檔案最上面的user設定的使用者權限不夠，可以改成user root來解決。

支援功能

以下四個功能均支援**-c或者--config指定配置檔案.如果未指定配置檔案，則預設在項目根目錄下去roo.config.js**作為配置檔案。

roo backup

該指令用于備份我們的前端資源包，這樣有利于我們做版本的管理。當線上出現重大問題的時候，可以及時拿過來做版本復原。

執行roo backup指令，如果設定了NODE_ENV=production則會在遠端機器上的backupDirectory裡生成一個“production_YYYYMMDD”的前端資源包，若未設定則生成一個

“test_YYYYMMDD”的前端資源包，其中YYYYMMDD為當天的年月日，當天上傳多次也隻會生成一個包，後續上傳的将會覆寫之前上傳的前端資源。

以下為必須配置項：

roo.config.js

module.exports={
  local:{
    resourceDirectory:'<本地前端資源所在目錄，該目錄下的内容将會全部上傳>'
  },
  origin:{
    host:'<遠端機器IP>',
    username: '<遠端機器使用者名>',
    password: '<遠端機器密碼>',
    backupDirectory:'<遠端機器備份前端資源的目錄>'
  }
}
           

roo nginx

該指令用于生成項目對應的nginx配置檔案，并更新線上的nginx配置檔案。執行roo nginx檔案之後，會在roo.config.js中指定的local.nginxConfigFilePath生成對應的nginx配置檔案，并更新遠端機器上的roo.config.js中指定的origin.nginxConfigFilePath的nginx配置檔案，然後執行nginx的reload操作。

module.exports={
  local:{
     nginxConfigTemplate:'<roo nginx nginx配置檔案生成所用模闆>'
     nginxConfigFilePath:'<roo nginx nginx配置檔案生成路徑>'
  },
  origin:{
    host:'<遠端機器IP>',
    username: '<遠端機器使用者名>',
    password: '<遠端機器密碼>',
    nginxConfigFilePath:'<遠端機器上該項目的nginx配置檔案的路徑，此檔案将會被nginx主檔案include>'    
  },
//nginxConfig裡的參數将用于生成本項目的nginx配置檔案
  nginxConfig:{
    port:'<開放端口>',
    serverName：'<服務名稱>',
    publicPath:'<靜态資源目錄>'，
    //locations将對于nginx裡面的location
    locations:[
        {
            path:'<比對路徑>',
            //對應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}}
}
           

roo port

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

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

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

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

module.exports={
    origin:{
        host:'<遠端機器IP>',
        username: '<遠端機器使用者名>',
        password: '<遠端機器密碼>'
    }
}
           

roo publish

該指令将roo.config.js檔案中local.resourceDirectory指定的前端資源目錄内的資源上傳到origin.resourceDirectory目錄下。origin.resourceDirectory指定的目錄也會跟nginxConfig.publicPath指定的目錄相對應。

module.exports={
    local:{
        resourceDirectory:'<本地前端資源所在目錄，該目錄下的内容将會全部上傳>'
    }    
    origin:{
        host:'<遠端機器IP>',
        username: '<遠端機器使用者名>',
        password: '<遠端機器密碼>',
        resourceDirectory:'<遠端機器存在前端資源的目錄，上傳的前端資源将會存在這裡>',
        nginxConfigFilePath:'<遠端機器上該項目的nginx配置檔案的路徑，此檔案将會被nginx主檔案include>'  
    }
}
           

roo.config.js配置參數說明

module.exports={
  local:{
    resourceDirectory:'<本地前端資源所在目錄，該目錄下的内容将會全部上傳>',
    nginxConfigFilePath:'<roo nginx nginx配置檔案生成路徑>'
  },
  origin:{
    host:'<遠端機器IP>',
    username: '<遠端機器使用者名>',
    password: '<遠端機器密碼>',
    resourceDirectory:'<遠端機器存在前端資源的目錄，上傳的前端資源将會存在這裡>',
    backupDirectory:'<遠端機器備份前端資源的目錄>'
    nginxConfigFilePath:'<遠端機器上該項目的nginx配置檔案的路徑，此檔案将會被nginx主檔案include>'    
  },
 //nginxConfig裡的參數将用于生成本項目的nginx配置檔案
  nginxConfig:{
    port:'<開放端口>',
    serverName：'<服務名稱>',
    publicPath:'<靜态資源目錄>'，
    //locations将對于nginx裡面的location
    locations:[
        {
            path:'<比對路徑>',
            //對應location中的配置項
            configs:[
                {
                    key:'proxy_redirect',
                    value:'off'
                },
                {
                    key:'proxy_set_header',
                    value:'Host $host'
                },
                {
                    key:'proxy_pass',
                    value:'代理路徑'
                },
            ]
        }
    ]
  }
}
           

展望

roo create

目前袋鼠雲這邊的項目建構工具采用的是Yeoman的建構體系，可以滿足袋鼠雲這邊對項目建構的需求。但是有點小小不足的地方，就是每次項目模闆更新之後都要重新釋出Yeoman的腳手架，靈活性相對較差。後面打算把項目的生成的工作交給dtux-kangaroo，并且所有項目模闆均放在github上，每次生成項目都會從github重新拉，模闆貢獻者隻需要關注自己的github倉庫即可，隻要将更新合并到master分支上，後續項目生成均會提到更新。當然在現有的Yeoman的腳手架改造也可以實作同樣的功能，但是本着工具精簡的原則，會将現有的Yeoman的腳手架遷到dtux-kangaroo并進行改造。

roo mock

目前袋鼠雲采用的是前後端分離的方式，但是開發中還是比較依賴後端的，接口資料mock還不是很完善。後面計劃加入roo mock來解決資料mock問題，初步想法是借助後端的swagger來實作接口資料mock。

在dtux-kangaroo上基礎做一個前端資源釋出平台

dtux-kangaroo已經驗證了這套釋出體系的可行性，也解決了如何與遠端機器的互動的問題。為前端資源釋出平台的搭建打下很好的基礎。後面計劃搭建這個前端資源釋出平台，提高前端資源釋出的效率，減少對運維的依賴。

原文釋出時間為：2018年06月07日

本文作者：ruichengping

本文來源：

掘金 https://juejin.im/post/5b38d27451882574d87aa5d5

 如需轉載請聯系原作者