848
基於阿裏的Node全棧之路（三）利用阿裏雲OSS實現前後端分離
嘿嘿，上篇文章因為在火車上寫的，偷懶了，心存愧疚，還是補發一篇吧！
這次嘞，我們聊聊開發上老生常談的話題，前後端分離。在文章第一篇裏，我用了一張我的架構圖，這裏我把關於OSS的這部分抽出來。
可以看到這種圖上，我的docker是隻有restful api的作用，在web端應用，客戶訪問我的網站的時候，是跳轉到OSS上的。沒錯，沒錯，在我這裏，沒有使用類似jsp、asp、ejs這些動態頁麵。先不說兩者的優劣，我這裏使用的方案，其實蠻有趣的，而且非常的高效實用！對於中型項目是完全行得通的，大型項目架構做得好的話，其實也是ok的。
敲黑板！敲黑板！
下麵介紹下我的前端技術架構的實現。大家是否還記得我前麵說的我的文件結構
- -project
- -api // 項目的api
- -app // React-Native，移動端
- -www // 項目主頁
- -admin // 項目後端管理係統
- -h5 // 宣傳H5
- -Dockerfile // 部署api使用
好，我們的重點就是www和admin，www和admin的結構基本一致。
先列下我們會使用到的技術：
1. vue //這個不用我介紹了吧
2. vue-cli //vue項目腳手架
3. webpack-template //vue項目腳手架生成的webpack模板
嗯，我的文章前端是圍繞著vue來的，react那些其實類似，感興趣的童鞋可以自己動手試試。
流程
- 用vue-cli生成一個webpack或者其它什麼模板的腳手架（因為我對其它模版沒有嚐試，這裏就指定是webpack模板，這樣讓大家少走些彎路）
-
項目構建
yarn #or npm install -
生成生產環境代碼
yarn build #or npm build你會在項目中得到類似這樣的文件：
- -project
- -dist //生產環境代碼
- -static //靜態文件
- -index.html //頁麵
- -project
創建阿裏雲OSS的bucket,然後把dist裏麵的文件全部放到bucket的根目錄下，類似這樣。
在OSS基礎設置那裏設置默認訪問頁麵
綁定域名（這裏給個建議，最好域名和oss都在同個賬號下，可以省很多時間，阿裏可以自動掛上，如果想讓自己網站是https訪問的，綁定時勾選開啟CDN，也可以自己後期手動開）
給自己的網站掛上https，進到CDN管理界麵，點擊域名管理，在https設置裏麵，修改配置，如果是阿裏雲上下發的證書是可以直接勾選的，不過這裏要@阿裏雲 ，為啥上麵沒名字的，竟然是"cert-"後麵跟著一串碼，我怎麼記得嘛！
好啦，到這裏，你已經可以直接訪問 https://www.xxxxxx.com或https://www.xxxxxx.com 來訪問我的主頁了。
嗯，這下估計有同學會問了，為什麼要這樣做，這是靜態頁麵！！！
但還記得文章開頭我說的嗎？這是一種新的方式。
我其實之前很無聊的為了一個用vue框架寫的代碼，竟然啟動了一個docker來讓別人來訪問！
然後，我發現我啟動一個node竟然隻是為了讓別人能夠訪問我的靜態頁麵和文件！
因為本身用vue搭的代碼本身就不需要動態網頁ejs這些類似的特性的！
所以，如果真的想體驗前後端分離的好處，那就不要把鑒權這些繁瑣的業務放在動態jsp、asp、ejs這些地方，而更應該是放在api上做好鑒權，說句不好聽的話，你就算在動態網頁上做了鑒權，權限較低的就不能訪問某些頁麵，但是那樣有意義嗎？
1. api上還是要做鑒權，這是浪費勞動力
2. 動態構建增加資源的損耗，這個最簡單的體現是OSS的流量價格和ECS或者負載均衡的帶寬，還有CDN什麼的（公司太有錢另說）
要我說，計算和邏輯這些核心的東西，才是最應該放到ECS或Docker上，其它的就應該服務商托管。
今天剛到家，明天看看有沒有空，來聊聊前後端分離的進階和oss的https實現，實際使用效果非常的棒！，另外也想尋有相關經驗的高手來一起探討下應用型公司的技術實踐。
最後更新：2017-09-26 03:32:45