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 ...

這篇文章將一步一步介紹如何使用 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 ...