Amo Wu's Blog

大綱 什麼是「無限環境」？ 什麼是 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 ...

如何自動化 GitHub Releases 流程 2017 年初的時候，曾經寫了《 如何自動化 release 的流程？ 》這篇文章，介紹了如何利用 semantic-release 和 TravisCI 自動化 GitHub Releases 和 NPM publish 這件事。這次要介紹的是如何直接透過 Probot 機器人做到 GitHub Releases。 大綱 什麼是 GitHub Releases？ GitHub Releases 有什麼問題？ 什麼是 Conventional Commits？ 什麼是 Conventional Release Bot？ 為什麼要用 Conventional Release Bot？ 什麼是 GitHub Releases？ GitHub Releases 是 GitHub 提供給每個專案在釋出（Release）新版軟體時，用來紀錄更新內容（Change Log）的頁面。 GitHub Releases 通過 GitHub Releases，你可以為每次的 release 加入說明，描述該 release 進行了哪些更改。 GitHub Releases 的基礎是建立在 Git tags 之上。Tags 代表了你的專案在某個特定時間點下的里程碑，所以它會是一個很好的 release 表達方式。 更多有關於 Git tags 的資訊可以參考 GitHub 的《 Working With Tags 》。 GitHub Releases 有什麼問題？ 我們團隊在執行 release 的過程中碰到過不少問題，總結如下： 無法回憶起曾經「新增了哪些功能」或「修復了哪些問題」，就像突然有人問「你記得上禮拜二中午吃什麼嗎？」的感覺，每次負責 release 的人都要口頭一個一個問其他工程師，最後崩潰躲在角落獨自一個人慢慢爬 commit log⋯⋯😢 Push 或 merged master 的當下就應該馬上 release Git tag，但是常常會忘記做這件事，導致之後想起來還要回去找 commit SHA 才能補上 tag 不是所有人都知道 SemVer 的版本號更新規則 Git tag 下在錯誤的 branch：因為有些 rep...

這篇文章會介紹如何使用 semantic-release 這個工具，自動化 Node.js (or JavaScript) 專案的版本號，以及 changelog 的 release 流程。 什麼是 semantic-release？ 為什麼要用 semantic-release？ 如何使用 semantic-release？ 什麼是 semantic-release？ semantic-release 可以自動完成下列這些事： 當 code 被 push 或 merge PR 回 production branch (ex: master) 的時候 CI build 被觸發， semantic-release 會收集此次更新的所有 commit messages（需遵循 AngularJS Git Commit Message Conventions 的格式） 自動根據 semver 的規則來更新 package.json 的 version，並建立 Git tag 自動 publish 新版本的 package 到 npm registry （非必要） 自動在 GitHub releases 的頁面上，產生相對應的 changelog 所以簡單來講， semantic-release 指的就是遵循 semver 的 release 流程。 semver 的介紹和好處可以在網路上找到很多文章，這裡就不贅述了，它的概念主要就是將版本號分成： Major . Minor . Patch 例如 React 的 0.11.2、Vue.js 的 2.0.10 等，這三個數字各自代表： Major 當你的 API 不兼容前一版本時（又稱 Breaking Change），major + 1，例如：1.x.x -> 2.0.0。 Minor 當你增加新 feature 的時候，並且不影響前一版本的 API，minor + 1，例如：x.6.x -> x.7.0。 Patch 當你修復 bug 的時候，並且不影響前一版本的 API，patch + 1，例如：x.x.9 -> x.x.10。 如果專案有在執行 git-flow 的話，minor 配合的就是 feature 的 re...

這篇文章將一步一步介紹如何使用 Docker、GitHub Flow、CircleCI、AWS Elastic Beanstalk 與 Slack 來完成 持續整合 與 持續交付 的開發流程。 前言 什麼是持續整合＆持續交付？ 持續整合＆持續交付（Continuous Integration & Continous Delivery），簡稱 CI & CD，具體介紹可以參考「 山姆鍋對持續整合、持續部署、持續交付的定義 」這篇文章。 簡單來說就是盡量減少手動人力，將一些日常工作交給自動化工具。例如：環境建置、單元測試、日誌紀錄、產品部署。 我使用了哪些工具？ Git - 版本管理 GitHub - 程式碼託管、審查 CircleCI - 自動化建置、測試、部署 Docker - 可攜式、輕量級的執行環境 AWS Elastic Beanstalk - 雲端平台 Slack - 團隊溝通、日誌、通知 看完這篇你可以學到什麼？ 瞭解 GiHub 的工作流程（ GitHub Flow ），利用 Pull Request 以及 分支 來完成 代碼審查 （Code Review）與 環境配置 ，例如：開發版（development）、測試版（testing/QA）、上線產品（staging/production）。 使用 Docker，統一開發者、測試人員、以及產品的執行環境。 使用 EB CLI 將應用程式部署到 AWS Elastic Beanstalk 平台上。 使用 CircleCI 將以上工作全部自動化。偵測 GitHub 分支上的程式碼，若有更新則觸發：建置 Docker 環境、單元測試、然後自動部署新版本到 AWS EB。 使用 Slack，讓團隊成員能夠即時接收 GitHub 與 CircleCI 每一項動作的通知。 內容大綱 Node.js 在本地端執行 Node.js 在本地端測試 Node.js GitHub CircleCI 在 CircleCI 測試 Node.js Code Review with GitHub Flow Docker 在 Docker 執行 Node.js 在 CircleCI 測試 Docker ...