前言

前端部署相對來說其實是一件非常容易的事情，無論是最原始的html頁面，還是現在熱門的三大框架，最后交付部署的時候，始終會是一些靜態文件。

雖然簡單，但是對于不同的團隊來說，都會在不同階段有最適合他們的方式。

下面老黃聊聊所在團隊是怎么演化的。

老黃把它們劃分成了3個階段，每向下一個階段都是為了解決上一個階段帶來的不可避免的問題。

刀耕火種時期

CICD半自動化時期

半無服務器化時期

下面依次來看看這三個階段的內容。

刀耕火種時期

在加入團隊早期，團隊只有兩個前端，后面才發展到六七個，團隊前端的主要技術棧是vue。

每次發版的時候，都是前端同學在自己的電腦打包好相應的部署文件之后，發給某個后端同學，由這個后端同學手動放到服務器上面，早期還都是部署在IIS上面的，和部分后端站點放在同一個服務器。

明眼人應該都可以看的出問題所在，整個部署的流程是比較漫長的，出差的概率也是比較高，畢竟人為參與的環節比較多。

隨著項目逐步增多，那個部署前端站點的同學幾乎要奔潰的節奏，每個項目都是一天連續發好幾個版本，寫接口的思路老是被打斷。。。

對一個初創團隊，人員都不充足的情況，其實這一階段也是必經之路了吧。

這個時候引入CICD讓發布流程略微自動一點點，其實是一個比較合適的時候了，剛好又是解決團隊一大痛點的好東西。

老黃這邊是采購了3臺突發性能的4c4g的服務器。2臺用于搭建jenkins，一臺用于部署前端站點。

可能有人會問為什么要用突發性能的服務器，成本呀成本呀，這個是最實在的原因。

前端站點有CDN在前面擋著，回源到服務器的很少，這也是為什么敢如此大膽的用突發性能的機器來部署前端站點。

CICD半自動化時期

在這個時期其實就是簡化部署操作，各自負責各自的項目。在快速的迭代過程中，前端同學負責自己對應項目的版本發布。

這也是老黃一直在推崇的，自己負責的項目要全權負責，至少該給開發的權限還是要給的。

為什么說是半自動化呢？因為不敢做到一提交代碼就發布到測試環境，再發到生產環境，還是要有人為的點一下這個操作。

先來簡單看看兩張圖，是怎么人為點一下的。

測試環境的部署：

生產環境的部署：

這里設置的都是參數化的，構建的時候都是看情況填寫的。

拿個例子說明一下。

測試環境的流水線配置

生產環境的流水線配置

兩個環境不一樣的地方其實就是執行的腳本文件，以及生產環境多了一步刷新CDN的操作。

老黃是給每個不同的項目都編寫了對應的腳本文件，每個項目會包含下面的幾個文件。

其中Dockerfile就是用來編譯源碼和把生成的靜態文件放到nginx里面。

nginx.config 就是nginx的配置文件了。

run.sh ?是用來替換占位符，從而達到一個鏡像，通過環境變量的方式去請求不同環境的接口。

buildtest.sh 主要就是打包好鏡像，上傳到阿里云容器服務，ssh到測試服務器，拉鏡像，起容器。

buildprod.sh 主要就是ssh到生產服務器，拉鏡像，起容器。

在這一階段其實一切都是運行正常的，各位前端同學的反應也比較不錯。

這里是以鏡像的方式交付部署的，每次生成好鏡像后都是push到阿里云的容器鏡像服務。

這里始終是占著服務器資源，除了要自己維護域名端口的綁定之外，還要受限于阿里云單個負載均衡的域名個數。

前一段時間想在負載均衡里面添加一個新域名的時候，發現了這個無奈的問題。

買多一兩個負載均衡是可以解決眼前這個問題的，但是不是長久之計。

所以還是決定走前端部署比較地道的一種方案，往無服務器時代的演進了。

半無服務器化時期

本來是想叫無服務器化時期的，不過想到jenkins還是自建的，所以在前面加了一個半字。

這里是借助阿里云的對象存儲來完成的。

這里其實是只對CICD發布的對象調整一下就好了，對前端同學來說是無感知切換的。

buildtest.sh調整如下：

調整之后，交付只能是用文件的方式了，這里是將每次發布之后的文件保存一份到本地，保留最近2個月，當然，這里也可以保存到OSS的另一個bucket上面，不過現階段似乎不太迫切。

發布之后，文件就會被上傳到OSS上面了。

上傳之后，還要配置三個地方，才算是真正的完成，這三個配置是一次性的。

首先是基礎設置里面的靜態頁面，設置一下默認首頁

其次是在傳輸管理的域名管理里面綁定域名，證書和CDN在這里是選填的。

最后一步是把域名CNAME到OSS的域名

到這里就已經是完成了最后的部署了，后面發版本的時候，只需要通過jenkins把編譯好的靜態文件丟到對象存儲就可以了。

總結

老黃經歷的這三個時期，應該有不少人也會有類似的感覺或經歷。

在遇到痛點難點的時候，想辦法解決掉就可以了。

對于前端站點的部署，最簡單直接的辦法的還是直接托管到云上面，可以省掉很多不必要的麻煩。

總結

以上是生活随笔為你收集整理的小团队前端部署演化之路的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。