Netlify bitbucket

bitbucket結合Netlify進行自動化部署

邱祈竣 2021/03/03 17:21:00
169

 

 

當我們把網頁做好之後,除了自己在筆電上看開心,也會希望能夠給其他人看到。

如果是直接使用HTMLCSSJS的靜態網頁可以放到google storage上面。

但用了前端框架後,輸出HTMLCSSJS時會多一個build的工作。

這就非常惱人,改個文字就要重新build一次,build執行完還要再上傳。如果每次用git push後就什麼都不用管該有多好?

 

這個需求Netlify能解決,而且免費。

 

 

Netlify使用上也非常好上手,可以透過GitHubGitLabBitbucketEmail登入。

這次要連接Bitbucket上的repositories,選擇Bitbucket即可。

 

登入後會直接到管理頁面。左邊Sites是目前使用的網站、右邊Builds會顯示目前所有的Sites部屬的結果。

點選Sites右側的New site form Git可以新增repositories

 

連結repositories的功能,目前只提供GithubGitLabBitbucket

 

點選之後會讓使用者選擇要部屬的repositories

需要注意,只有拿到admin權限的專案才可以選擇。沒有權限的repositories是不會顯示在上面的。

 

選好repositories之後,會詢問是否需要做額外的設定。可以選擇要部屬的分支、build的指令以及build完成之後要讀取的檔案目錄。

設定完成後點選Depoly site就會開始進行部屬。

*Branch建議多開啟一個分支,要部屬時marge目前正在開發的Branch即可。

**檔案目錄的欄位需要注意,angular完成build之後會在dist下再建立一個專案名稱的資料夾,如果沒有加上會出現完成,但頁面404的情況。

 

完成後會回到控制面板頁

新增的專案會顯示在Sites欄位底下,右側的Builds會顯示目前專案build的進度,例如BuildingCompletedFailed等等。

點選Sites下方的方形圖片,就可以開啟部屬好的網站。

點選Sites下方的文字能進入設定頁並查閱log

 

開啟後可以看到URL子網域名稱是設定好的Sites名稱。

 

參考資料:https://www.netlify.com/

 

 

 
邱祈竣