dotNET跨平臺 今天

以下文章來源于halouha ,，作者俞正東

目前使用比較多的web容器有哪些：

• Apache php應用大多數用這個

• Nginx node應用基本都用這個

• Tomcat java應用基本都用這個

• IIS .net應用基本用這個 windows服務器才能用 linux的話有宇內大神開發(fā)的Jexus

前端基本都是node應用,，據我了解大體上分2種

• 一種是 最終打包成靜態(tài)文件(html,css,js等)，路由啥的都是前端代碼控制,，完全不用考慮寫后端代碼,，一般這種都是純前后端分離的項目

• 另外一種除了上面說的，還需要用node寫部分服務端代碼,，一般這種需要做SSR(服務端渲染)

我接觸下來大部分前端開發(fā)者的強項在于第一種,，即使要做SSR的也不會是很重量級的(比如操作db等，數據在緩存redis里面或者在配置文件里,，否則渲染就慢了)

前端基本都是node應用,，nginx為例子，linux服務器上安裝好nginx后

• 把代碼傳到服務器

• 配置nginx 把流量轉發(fā)到你的node應用

可能你覺得就這點 也不麻煩啊,，不就操作配置一次就好了么,。

但是你后面修改代碼后，重新上傳,，代碼有問題想要回滾,，git回滾或者手動代碼回滾，重新上傳,。

有很多重復性操作,，效率不高！

注意 以上我說的是脫離了公司的環(huán)境(CICD集成的發(fā)布系統)自己獨立部署會遇到一些麻煩問題

下面給大家介紹下我開源這個web容器：讓前端開發(fā)者可以自給自足速快速部署&回滾,讓開發(fā)者只專注于用前端技術實現業(yè)務,，一個開箱即用的開源web容器來鼠標點幾下就完成部署&回滾&還可以SSR

功能一覽：

• 前端應用開發(fā)完后打包后自助上傳部署(通過管理后臺)

• 配合服務端腳本實現服務端渲染SSR功能

• 可以快速回滾到上一個版本(發(fā)上去有問題一鍵回滾)

• 可以設置環(huán)境變量供SSR功能使用(簡單上手)

• 服務端腳本提供log redis db http四大插件打造強大的基于js的ssr服務端運行腳本功能(特色)

• 服務端js腳本編輯器有智能代碼提示(特色)

• Docker快速啟動服務,一行命令搞定一個前端web容器(基于容器技術)

• 支持tls(安全可靠)

00.Docker Quick Start

拉取鏡像并且Run 一行命令完成web容器部署

docker run -d -v $(pwd)/spa/wwwroot:/publish/wwwroot -v $(pwd)/spa/backup:/publish/backup -e BasicAuth_Name=’admin’ -e BasicAuth_Pwd=’admin’ -e AllowedFileExtentionMapping=’’ -e NotAllowedFileExtentions=’’ -e BackUpLimit=’1’ —restart=always -p 80:5000 —name spa nainaigu/spa:20200915222842

參數說明

• BasicAuth_Name：spa后臺的登錄用戶名

• BasicAuth_Pwd：spa后臺的登錄密碼

• AllowedFileExtentionMapping：選填 除了aspnetcore默認的mapping以外還要追加配置有些特殊的文件后綴訪問 格式為[后綴格式->返回類型 多個用半角逗號隔開] 例如：.plist->application/xml,.ipa->application/octet-stream

• NotAllowedFileExtentions：選填 配置哪些靜態(tài)文件是不允許訪問的,，多個用半角分號隔開[為空的話默認為: appsettings.json;.map] 代表不能訪問文件名稱為 appsettings.json 和 后綴為.map 的文件，會直接返回503

• BackUpLimit：選填 默認1 代表每個項目的發(fā)布的歷史記錄保存?zhèn)€數,，供快速回滾使用

剩余的就打開瀏覽器訪問spa管理后臺 點擊即可

http://xxx/admin

02.單頁面應用規(guī)范

系統跑起來之后,，我們的前端容器就已經搞定了。前端開發(fā)者就可以自己動手部署了,！

什么是單頁面應用呢,？

• 就是指一個系統只加載一次資源，之后的操作交互,、數據交互是通過路由,、ajax來進行,，頁面并沒有刷新。

• 特點是加載次數少,，加載以后性能較高

  對于本套系統的規(guī)范

• 不管你用什么前端技術,，只要是 靜態(tài)的html，js,css 的前端資源,，就可以部署到本系統,！

• 需要有一個約束 需要有index.html

• 因為單頁面的入口是 index.html

例如下面的例子：

在index.html里面的css和js的引用需要注意的點

得是 ./開頭的方式引用，否則發(fā)布上去會找不到（用./方式的話本地調試直接訪問和部署上去訪問都會是沒問題的）

使用vue cli創(chuàng)建的項目設置

如上圖目錄結構中

1 修改vue.config.js中配置

module.exports = {
    publicPath:process.env.PUBLIC_PATH
}

2 修改.env文件配置 PUBLIC_PATH = ././

3 修改.env.development 文件配置 PUBLIC_PATH = .

如果你不設置.env文件的話,，而是分別設置.env.development 和 .env.production 的話 那么 .env.production也得設置為 PUBLIC_PATH = ././
如果你在.env設置了,production不設置也沒關系

對于非vue 用webpack的話對 webpack的配置文件 進行如下設置那么生成的index.html就會自動加上前綴./了

 output: {
    publicPath: '.'
  }

使用vue-router等前端路由是支持的

03.單頁面應用部署,回滾

下面我們開發(fā)一個最簡單單頁應用

有2個文件

• index.html

• index.js

然后我打包成 detai.zip 文件

進入系統 新建一個單頁面應用

• 單頁面名稱我這里填 detail 發(fā)布成功后可以通過

• 選擇剛剛的zip 然后點擊【創(chuàng)建并部署】

• 然后打開 http://localhost:5000/detail 進行確認是否成功 如下圖

不用在url上特地帶上index.html去訪問,，意思是 http://localhost:5000/detail 等于 訪問了 http://localhost:5000/detail/index.html

接下來我要修改index.html 然后重新部署

重新打包zip 然后

重新訪問 http://localhost:5000/detail 進行確認是否修改成功 如下圖

大家應該注意到了，前端有改動 只要重新上傳立刻生效,！

如果發(fā)布之后發(fā)布改錯了咋辦,，當然是立刻回滾到上一次的上傳版本！

如下圖 回滾功能：

重新訪問 http://localhost:5000/detail 進行確認是否回滾成功 如下圖

04.單頁面應用做SSR

什么是SSR

通俗來講就是用js來寫服務端代碼,在頁面渲染的時候通過js服務端代碼邏輯就可以把數據可以直接展示在頁面中!

首先得理解下面兩點

• 什么是服務端渲染,？ 關鍵詞：后端代碼+模板引擎

• 什么場景下需要用到服務端渲染？關鍵詞：seo：動態(tài)的標題 Description 等meta信息

什么是服務端渲染,？下面是我的理解

我寫了一個網頁,，部署到web容器后，我打開瀏覽器請求,，服務端收到請求后 先在服務端讀取我的網頁的內容,，然后結合 后端代碼+模板引擎的方式重新渲染再 返回給瀏覽器展示

什么場景下需要用到服務端渲染？下面是我的理解

當你的頁面的標題,，Description 等meta信息 需要動態(tài)指定的時候,。
比如：

產品分享頁面：

productId=1 productName = “產品A”
http://localhost:5000/detai?productId=1

需要Title要指定為 “產品A”

productId=2 productName = “產品B”
http://localhost:5000/detai?productId=2

需要Title要指定為 “產品B”

要滿足這個需求 僅僅靠前端是沒有辦法完成的。因為你頁面在頁面ready后再去調用ajax方法是沒有辦法動態(tài)指定Title的,。這點可以大家實驗實驗,！

解決方案：服務端代碼+模板引擎

本系統最大的亮點來了：模板引擎約定好，前端自己就能搞定服務端js代碼

是用上面的 產品分享頁面 為例：

如下圖,，進入單應用的SSR腳本編輯功能

默認 腳本編輯器里面會 寫好代碼模板,， 如下：

module.exports = {
  main:function (path){

  }
};

當提交保存 腳本代碼后，訪問
http://localhost:5000/detai?productId=2
會先把當前頁面的請求url 作為path參數傳到 腳本的 main 方法,！

我們用 log 組件進行打日志記錄下：

查看日志：

業(yè)務代碼
做如下改寫SSR腳本：

let log = require('log');

module.exports = {
  main:function (path){
    log.Info(path);
    var requestparams = module.exports.GetRequest(path);
    var productTid = requestparams.productId;
    if(!productTid) return;
    if(productTid == 1){
      return {
        ProductName:'產品A'
      };
    }
    else if (productTid == 2){
      return {
        ProductName:'產品B'
      };      
    }
    else {
      return {
        ProductName:'其他產品'
      };      
    }
  },
  /**
   * [獲取URL中的參數名及參數值的集合]
   * 示例URL:http://localhost:5000/detail?productId=2
   * @param {[string]} urlStr [當該參數不為空的時候,，則解析該url中的參數集合]
   * @return {[string]}       [參數集合]
  */
  GetRequest:function (urlStr) {
      var url = "?" + urlStr.split("?")[1];
      var theRequest = {};
      if (url.indexOf("?") != -1) {
          var str = url.substr(1);
          strs = str.split("&");
          for (var i = 0; i < strs.length; i++) {
              theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
          }
      }
      return theRequest;
  }
};

注意：上面我把main方法改造了 返回了 一個 對象

{
    "ProductName" : "xxxxxx"

}

腳本代碼智能提示

模板引擎其實很簡單：

SSR腳本返回了什么對象 在html中用 @Model.xxxx 的形式使用！,！簡單吧?。∪缦聢D：

邏輯和上面的SSR腳本一致,！

如上我們用SSR腳本代碼的業(yè)務邏輯 + 模板引擎 解決服務端渲染,！

上面的腳本代碼我們用了log組件=》方便的把腳本的執(zhí)行過程中記錄日志，
當然了 正常業(yè)務的服務端渲染邏輯肯定不是這么簡單的，不用擔心我們接下來介紹另外3個組件：redis組件 和 db組件 和 http請求組件

服務端腳本的擴展組件介紹

服務端js腳本組件,會js就能寫后端邏輯

本系統預制了 log組件 redis組件 db組件 http組件,，如果還有其他需要也可以自行擴展

前面我們介紹了log組件,。
使用方式：

//DB訪問組件
var db = server.create('SQL', {
  type:'mysql',
  db:'Server=xxxxx;Port=3306;Database=xx;Uid=xxx;Pwd=ddddd;charset=utf8;SslMode=none'
});

//打印log組件
var log = server.create('LOG');

//訪問redis組件
var redis = server.create('REDIS', {db:'localhost:6379'});

//訪問http組件
var http = server.create('HTTP', {
  url:'https://www.baidu.com',
  header:{
    aa:1
  }
});

log組件

在腳本編輯器編寫代碼會有智能提示，如下圖

日志采用了開源的LogDashbord 中間件解析Nlog的日志文件

redis組件

在腳本編輯器編寫代碼會有智能提示,，如下圖

前提：如上文中已提到,，要在appsettings.json里面配置redisconnection連接字符串

一般做服務端渲染的腳本里面講究的是執(zhí)行快，不然服務端代碼執(zhí)行很慢,，很嚴重影響用戶體驗,！

是用上面的 產品分享頁面 為例：事先根據productId把product的對象記錄在redis里面！

db組件

前提：如上文中已提到,，要在appsettings.json里面配置db的連接字符串

在腳本編輯器編寫代碼會有智能提示,，如下圖

是用上面的 產品分享頁面 為例：假如db里面 有一個product表

腳本可以這么寫：

我在實際業(yè)務中還這么用過：

先從redis里面取,，如果redis沒有我就從db里面取了放進redis！這樣就比較靈活,，而且效率也很高?。?/p>

http組件

全局配置功能

全局配置提供一個json編輯器,，配置的json信息,，可以直接在html 用 @Model.Env.XXX 的方式使用

例如：我上面配置了一個 test ：“111”

總結

• 部署回滾無難事

• 用db redis http三大組件可以解決大部分SSR場景,不夠可以自行擴展其他組件

• 整體技術棧focus在前端 不需要了解復雜的后端技術

所有代碼已托管在github：https://github.com/yuzd/Spa