手把手教你使用 netlify 實現前端的 自動部署 + HTTPS

隨着開源工具愈來愈多，特別是nodejs構建微服務器之快，實現前端自動化部署愈來愈簡單了，有可能【10行js代碼+10行sh腳本+設置github的webhook】就能實現，可是若是你和我同樣，就是「懶」（此處爲褒義），連這些都不想本身作，那該怎麼辦呢？這個時候我發現了這款好工具—netlify，下面我就來說講它究竟有多好用吧^_^

 

1、使用github或者gitlab登錄netlify

首先，打開netlify網站(https://app.netlify.com/)

 

 

 

 

 

 

 

而後使用github或者gitlab帳號登陸。

 

2、根據github/gitlab倉庫建立網站

點擊New site from Git按鈕：

根據你的倉庫所在平臺選擇，如下三選一：

選擇你須要部署的倉庫：

設置部署選項，包括三點：

1. 部署分支（對應下圖中 Branch to deploy）:

   顧名思義就是你的git倉庫的分支，默認選擇爲master分支

2. 打包命令（對應下圖中 Build command）：

   就是你的打包命令，諸如 npm run build，gulp build 之類；若是自己已經是靜態文件，不需打包編譯，這一欄則不填

3. 打包後目錄（對應下圖中 Publish directory）：

   即執行完打包命令以後靜態文件所在目錄，諸如 dist，_site 之類；若是自己已經是靜態文件，這一欄則不填

完成以後點擊途中 deploy site 按鈕

 

3、設置域名，綁定域名

進行完第二步，咱們能夠看到自動化部署已經開始運行了，並且過很少久，咱們的網站就已經能夠利用netlify域名就行訪問了，以下圖：

能夠看到netlify爲咱們隨機生成了一個netlify下的域名，這裏咱們能夠更改其前綴，並綁定到咱們本身的域名下：

>> 更改netlify域名前綴：

首先，點擊上圖中 Site settings 按鈕，而後在下方點擊 Change site name 按鈕，而後在彈出框中輸入本身須要更改的前綴名，點擊保存便可，以下圖所示：

>> 綁定到本身的域名下：

首先，點擊上上圖中 Domain settings 按鈕，而後在下方點擊 Add custom domain 按鈕，而後在彈出框中輸入本身須要綁定的完整域名，點擊保存，以下圖所示：

這個時候會顯示 ！Check DNS configuration，由於咱們尚未設置域名解析到netlify服務器，因此這個時候須要到你本身域名的相應服務商網站登陸以後在須要綁定的域名下添加一條CNAME解析，解析的主機記錄即對應的netlify域名值（這裏即 codernie.netlify.com）

ok，過一下子就可使用本身的域名訪問本身的網站啦

 

4、生成HTTPS證書，實現HTTPS訪問

第四部中的Domain settings 中往下拉，能夠看到 HTTPS 幾個大字母：

點擊 Verify DNS configuration 按鈕，待它變成下方綠色按鈕以後，再點擊：

而後在彈出框中點擊確認，過一下子以後就可使用https訪問你的小站啦：

看到本身的小站前面能夠有綠色的安全字樣，是否是很酷炫，並且很放心，不再用擔憂運營商在本身的網站上掛廣告啦，哈哈哈。。。等等，是否是還差了點什麼：

對啊，尚未強制跳轉https，OK，繼續

 

5、強制HTTP跳轉HTTPS訪問

在第四步 Domain settings 再往下翻一點，能夠看到 Force HTTPS，只需點擊 Force HTTPS 便可實現，是否是很方便，以下圖：

到這裏，你的網站即便用戶使用http訪問，也將強制跳轉至https訪問啦，這下能夠完全不用擔下運營商給你的用戶「發紅包」啦！

 

6、設置redirect

利用netlify實現自動化部署和HTTPS就寫到這裏了，喜歡就點個贊啦。