無限環境（ㄧ）Netlify Deploy Previews


大綱

  • 什麼是「無限環境」？
  • 什麼是 Netlify Deploy Previews？
  • 快速入門指南
    • 步驟一、建立 React 網站
    • 步驟二、建立 GitHub repository
    • 步驟三、註冊＆配置 Netlify ⭐️
    • 最終步驟、玩轉 Deploy Previews ⭐️
  • 總結
  • 附錄
  • 參考資料

什麼是「無限環境」？

大家常用的 GitHub flow 其實有一個常常被忽略的重點 —— 合併前部署。


我自己在前端開發的 Code Review 上，常常碰到下列兩個問題：

  1. PR 合併、部署到 staging 或 production 環境之後，才發現程式碼有問題
  2. 為了避免第一個問題發生，就必須先 checkout PR 到 local 環境，然後經過一系列繁瑣的步驟跑起來，最後才能開始驗收和測試

為了解決上述問題，就需要引入無限環境的概念。

所謂的無限環境，就是自動將目前 PR 中的最新 commit，部署到一個臨時環境中，並返回該環境的 URL 網址。[1]

如果能實現這個條件，將為開發團隊帶來兩點好處：

  1. Reviewer 有任何懷疑時，便可以直接在預覽環境中驗證，而非憑空猜疑。
  2. 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

參考資料

留言

張貼留言

這個網誌中的熱門文章

全遠端工作

圖片
每周分享第 21 期 全遠端工作 原文標題：All Remote 原文網址：https://about.gitlab.com/company/culture/all-remote/ 原文作者：GitLab GitLab 是一間實行 全遠端 （All Remote）的公司， 團隊成員 遍布全球 50 多個國家。 這裡 有介紹一些 GitLab 的工作原理。 遠端宣言 全遠端工作提倡： 從世界各地招聘和工作，而不是從都市地帶 彈性工時，勝過固定工時 寫下和記錄知識，勝過口頭傳授 寫下流程，勝過在職培訓 公開分享資訊，勝過僅知原則（need-to-know access，僅給予完成一件任務所需要知道的事項即可） 開放所有文件供任何人編輯，勝過自上而下的文件控制 非同步通訊，勝過同步通訊 工作的成果，勝過投入的工時 正式的溝通管道，勝過非正式的溝通管道 正式溝通 vs 非正式溝通（ 來源 ） 為什麼需要遠端？ 遠端不是一個需要克服的挑戰。這是一個明顯的商業優勢。 — Victor, Product Manager, GitLab 從節省辦公空間的成本到員工的日常生活更加彈性，全遠端工作為組織及其員工提供了許多好處。但我們也體認到，並非所有人都適合成為一家全遠端的公司。 以下是一些優點和缺點。 優點 對於員工 日常生活更加彈性（小孩、父母、朋友、雜務、運動、快遞） 不會浪費時間、精力和金錢在通勤上（捷運和公車、油價、維修保養、收費站等） 減少接觸同事的病菌 減少被打斷的狀態，提高 生產力 能夠在不請假的情況下遊歷各地（家庭、娛樂等） 自由移動 有些人發現遠端更容易與難搞的同事溝通 減少入職可能會有的社交壓力 在家吃飯（有時）更好、更便宜 某些國家的稅收可能更便宜 不用煩惱今天穿什麼 從家庭時間到旅行計劃，有很多關於遠端工作是如何影響全球 GitLab 團隊成員生活的 例子和...
閱讀完整內容

影響我一生的十大遊戲（一）

圖片
每周分享第 19 期 影響我一生的十大遊戲（一） 自 1989 年的平成元年算起，持續了約 30 年的「平成時代」已於今年 4 月畫下句點，5 月起由新年號「令和」正式接班。 日本遊戲媒體 週刊ファミ通 日前 公布 由讀者票選的「平成最佳遊戲」前三名經典作品。 來源： ファミ通.com 拿下第一名的是 1995 年在 SFC（俗稱： 超任 ）平台發售的《 超時空之鑰 》。本作受到 30 歲以上玩家（包括我）一致壓倒性支持，高票獲選。 來源： ヤフオク 《超時空之鑰》是由 SQUARE （當時尚未合併 SQUARE ENIX ）負責製作發行，《 七龍珠 》作者 鳥山明 、《 勇者鬥惡龍 》之父 堀井雄二 ，以及《 太空戰士 》之父 坂口博信 聯手打造的夢幻級 RPG。無論是劇情、美術、系統或音樂，放到今天來看仍是經典的不朽名作。 創新的時空旅行與多重結局成為不少玩家一生難忘的回憶（來源： ヤフオク ） 作為一路走過昭和、平成、令和時代的三朝元老級玩家，見證了這 30 年間五花八門的遊戲作品問世。最近看了 YouTube 頻道 攻壳 Gamker 的《 十大影響我的遊戲 》影片之後，也想來寫一系列「影響我一生的十大遊戲」文章。 第十位：熱血行進曲（FC） ...
閱讀完整內容