無限環境（ㄧ）Netlify Deploy Previews
大綱
- 什麼是「無限環境」？
- 什麼是 Netlify Deploy Previews？
- 快速入門指南
- 步驟一、建立 React 網站
- 步驟二、建立 GitHub repository
- 步驟三、註冊＆配置 Netlify ⭐️
- 最終步驟、玩轉 Deploy Previews ⭐️
- 總結
- 附錄
- 參考資料
什麼是「無限環境」？
大家常用的 GitHub flow 其實有一個常常被忽略的重點 —— 合併前部署。
我自己在前端開發的 Code Review 上，常常碰到下列兩個問題：
- PR 合併、部署到 staging 或 production 環境之後，才發現程式碼有問題
- 為了避免第一個問題發生，就必須先 checkout PR 到 local 環境，然後經過一系列繁瑣的步驟跑起來，最後才能開始驗收和測試
為了解決上述問題，就需要引入無限環境的概念。
所謂的無限環境，就是自動將目前 PR 中的最新 commit，部署到一個臨時環境中，並返回該環境的 URL 網址。[1]
如果能實現這個條件，將為開發團隊帶來兩點好處：
- Reviewer 有任何懷疑時，便可以直接在預覽環境中驗證，而非憑空猜疑。
- Reviewer 也可以放心大膽的驗證自己的懷疑，不需要在 local 開發環境耗時費力地切換。
接下來我會寫三篇「無限環境」系列的文章，介紹一些可以達成這個目的的工具。
這是第一篇文章，介紹如何透過 Netlify 的 Deploy Previews 服務，建立靜態網頁的無限環境。
什麼是 Netlify Deploy Previews？
Netlify 是一個類似 Heroku 的 All-in-one PaaS，提供各種現代 web 專案會用到的自動化服務，例如：靜態網站部署、CDN、持續交付和一鍵配置 HTTPS 等。
其中 Deploy Previews 這項服務，可以將 GitHub repository 中的每個 pull request 部署到唯一的 URL，與 staging 和 production 環境的完全不同。你和你的團隊可以在合併到主分支、並且部署到正式環境之前，提前看到更改的外觀以及驗收功能是否正確。
快速入門指南
這篇文章會以時下最流行的 Create React App 為例，示範如何實現 React 網站的無限環境。
步驟一、建立 React 網站
透過 npx create-react-app 指令，快速產生一個 React App 專案：
$ npx create-react-app test-netlify-deploy-previews
$ cd test-netlify-deploy-previews
$ npm start打開 http://localhost:3000 確認 React 網站成功運行：
步驟二、建立 GitHub repository
這篇文章以 GitHub 為例，Netlify 同時也支援 GitLab 和 Bitbucket。
首先，在自己的 GitHub 新增一個 repository：
接下來，將程式碼 git push 至 GitHub repository：
$ git remote add origin git@github.com:amowu/test-netlify-deploy-previews.git
$ git add .
$ git commit -m "chore: create react app"
$ git push origin master步驟三、註冊＆配置 Netlify
前往 Netlify 註冊 頁面，這裡以連結 GitHub 帳號的方式為例：
第一次需要「Create a new team」建立一個 team，免費方案只允許一位 team member。
接下來，選擇「New Site from Git」：
選擇 GitHub 作為持續交付的服務對象：
第一次需要透過「Configure Netlify on GitHub」安裝 Netlify 的 GitHub App：
選擇要安裝在 GitHub 的個人帳號或是組織帳號，點選「Configure」：
如果希望自己所有的 repositories 都套用 Netlify 服務，可以選擇「All repositories」。因為這裡只跑文章範例，所以選擇「Only select repositories」：
點選 repository 進入配置頁面：
接下來是重點，在 Basic build settings 底下有「Build command」和「Publish directory」兩個欄位，要填寫正確，否則 Netlify 無法正確地部署網站。
- Build command 填入
yarn build - Publish directory 填入
build/
yarn build 是 Create React App 提供的指令，會將靜態網站的檔案輸出到 build/ 資料夾底下。如果使用的是其它靜態網站產生工具（例如 Jekyll），這兩個欄位填入的內容注意不要填錯了。
最後，點擊「Deploy site」開始部署網站：
部署成功之後，就會看到一組屬於 master 分支的 production 環境（支援自訂網域）的 URL 網址：
到這裡，就完成了 Netlift 的基本配置。接下來，介紹如何實現 Deploy Previews。
最終步驟、玩轉 Deploy Previews
其實也不用特別配置，因為 Netlify 預設就會開啟 Deploy Previews 這個功能。我們直接送一個 Pull Request 試試。
打開 src/App.js，修改幾行程式碼如下：
<p>
- Edit <code>src/App.js</code> and save to reload.
+ Hello World!
</p>接下來，建立新的分支，並 git push 到 GitHub：
$ git branch feature/hello-world
$ git add .
$ git commit -m "refactor(App): hello world"
$ git push -u origin feature/hello-world最後，打開 GitHub，新增一個 merge master from feature/hello-world 的 Pull Request，捲至頁面至下方的 status checks 區塊，應該會出現 netlify/<id>/deploy-preview 的 check：
等待「Deploy preview ready!」出現之後，表示 Netlify 已經順利將 PR 部署到一個暫時的環境，這時候可以透過點擊右方「Details」打開 Netlify 提供的唯一 URL，應該就會看到文字被更改「Hello World!」的頁面。
成果展示：
至此，完善 GitHub flow 的最後一哩路，「合併前部署」的流程就建立起來了。
未來 Code Reviewer 驗收 PR 的時機點，就可以發生在 merge master 之前，大大降低了「上線之後才發現問題」的發生機率。
總結
Google 的 Code Review Developer Guide 曾經提到，看 PR 的優先順序，應該是先跑跑看結果是否正確。如果一開始就投入大量時間去 review 程式碼，但是發現跑出來的結果根本是錯的，那麼這其實是很浪費人力成本的。
這篇文章介紹了 Netlify 的 Deploy Previews 服務，結合 GitHub flow，讓 code author 在送出 React app 的修改 PR 時，自動在合併回主分支之前，先提前部署一次性的「無限環境」，讓 code reviewer 優雅地驗收測試，避免發生上線 production 環境之後才發現程式碼有問題。
介紹完 Netlift Deploy Previews 之後，可能會有讀者好奇：「萬一我們的專案不是靜態網站、而是動態網站呢？」。
真實的世界，不會只有靜態網站那麼單純。下一篇，我會介紹如何透過 Heroku 的 Review Apps 來實現動態網站的無限環境，敬請期待。
附錄
如何刪除安裝在 GitHub repository 的 Netlify app？
如果之後不需要 Deploy Previews 這個服務，可以前往安裝的 repository 頁面，依序執行以下步驟：
Settings > Integrations & services > Installed GitHub Apps > Netlify > Configure > Uninstall Netlify > Uninstall
可以套用在 components library 嗎？
假如你的專案不是網頁應用，而是元件庫（例如 nwb 的 React Components and Libraries）。那麼，通常專案會搭配 Storybook 這個工具一起協助開發。
這時候，只需將 build settings 設定成 Storybook 的指令，然後指定輸出資料夾即可：
- Build command：
npm run build-storybook -- -c .storybook - Publish directory：
storybook-static
留言
張貼留言