使用 Azure DevOps Starter 在 Azure Pipelines 中建立適用於 Node.js 的 CI/CD 管線
在本快速入門中，您會使用 GatsbyJS 和簡化的 Azure DevOps Starter 建立體驗，建立 NodeJS 漸進式 Web 應用程式 (PWA)。 完成後，您 Azure Pipelines 中的 PWA 就會有可用的持續整合 (CI) 和持續傳遞 (CD) 管線。 Azure DevOps Starter 會設定您在開發、部署和監視時所需的功能。
Prerequisites
- 具有有效訂用帳戶的 Azure 帳戶。 免費建立帳戶。
- Azure DevOps 組織。
登入 Azure 入口網站
DevOps 入門版會在 Azure Pipelines 中建立 CI/CD 管線。 您可以建立新的 Azure DevOps 組織或使用現有組織。 DevOps 入門版也會在您選擇的 Azure 訂用帳戶中建立 Azure 資源。
登入 Azure 入口網站，然後在左窗格中選取 [建立資源] 。
在搜尋方塊中，鍵入並選取 DevOps 入門版。 按一下 [新增] 以建立新項目。
選取應用程式範例和 Azure 服務
選取 Node.js 應用程式範例。
預設範例架構為 Express.js。 將選取項目變更為 [簡單的 Node.js 應用程式]，然後選取 [下一步]。
此步驟中可用的部署目標，由先前在步驟 2 中選取的應用程式架構所決定。 在此範例中，[Windows Web 應用程式] 是預設的部署目標。 保留 [用於容器的 Web App 設定]，然後選取 [下一步]。
設定專案名稱和 Azure 訂用帳戶
在 DevOps Starter 建立工作流程的最後一個步驟中，您會指派專案名稱、選取 Azure 訂用帳戶，然後選取 [完成]。
在專案已建置，且應用程式部署至 Azure 時，會顯示摘要頁面。 不久後，就會在您的 Azure DevOps 組織中建立專案，其中包含 Git 存放庫、工作流程看板、部署管線、測試計劃，以及應用程式所需的成品。
管理您的專案
瀏覽至 [所有資源] 並尋找您的 DevOps Starter。 選取您的 DevOps Starter。
系統會將您導向儀表板，讓您能夠看到您的專案首頁、程式碼存放庫、CI/CD 管線，以及執行中應用程式的連結。 選取 [專案首頁]，可檢視您在 Azure DevOps 中的應用程式，而在另一個瀏覽器索引標籤中選取 [應用程式端點]，則可檢視即時範例應用程式。 我們稍後會變更此範例，以使用 GatsbyJS 產生的 PWA。
從您的 Azure DevOps 專案，您可以邀請小組成員進行共同作業，並建立工作流程看板以開始追蹤您的工作。 如需詳細資訊，請參閱這裡。
複製存放庫並安裝您的 Gatsby PWA
DevOps 入門版會在 Azure Repos 或 GitHub 中建立 Git 存放庫。 此範例已建立 Azure 存放庫。 下一步是複製存放庫並進行變更。
從 DevOps 專案中選取 [存放庫]，然後按一下 [複製]。 有多種機制可將 Git 存放庫複製到您的桌面。 請依據您的開發體驗選擇適合的機制。
將存放庫複製到您的桌面後，請對起始範本進行一些變更。 首先請從終端機安裝 GatsbyJS CLI。
npm install -g gatsby從終端機瀏覽至存放庫的根目錄。 其中應該會包含三個資料夾，如下所示：
Mode LastWriteTime Length Name ---- ------------- ------ ---- d----- 2/23/2020 10:42 PM Application d----- 2/23/2020 3:05 PM ArmTemplates d----- 2/23/2020 3:05 PM Tests我們不需要應用程式資料夾中的所有檔案，因為我們要將其取代為 Gatsby 起始範本。 請依序執行下列命令，以將其修剪。
cp .\Application\Dockerfile . rmdir Application使用 Gatsby CLI 產生範例 PWA。 從終端機執行
gatsby new以開始進行 PWA 精靈，然後針對您的起始範本選取gatsby-starter-blog。 其內容會類似於下列範例：c:\myproject> gatsby new √ What is your project called? ... my-gatsby-project ? What starter would you like to use? » - Use arrow-keys. Return to submit. gatsby-starter-default gatsby-starter-hello-world > gatsby-starter-blog (Use a different starter)您現在具有名為
my-gatsby-project的資料夾。 請將其重新命名為Application，並將Dockerfile複製到其中。mv my-gatsby-project Application mv Dockerfile Application在您慣用的編輯器中開啟 Dockerfile，並將第一行從
FROM node:8變更為FROM node:12。 這項變更可確保您的容器會使用 Node.js 12.x 版，而不是 8.x 版。 GatsbyJS 需要較新版本的 Node.js。接著，開啟應用程式資料夾中的 package.json 檔案，然後編輯指令碼欄位以確保您的開發和實際執行伺服器會接聽所有可用的網路介面 (例如 0.0.0.0) 和連接埠 80。 如果沒有這些設定，容器應用程式服務就無法將流量路由到在您的容器內執行的 Node.js 應用程式。
scripts欄位的內容應該會如下所示。 具體而言，您想要將develop、serve和start目標變更為預設以外的值。"scripts": { "build": "gatsby build", "develop": "gatsby develop -H 0.0.0.0 -p 80", "format": "prettier --write \"**/*.{js,jsx,json,md}\"", "start": "npm run serve", "serve": "npm run build && gatsby serve -H 0.0.0.0 -p 80", "clean": "gatsby clean", "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1" }
編輯您的 CI/CD 管線
在您認可上一節中的程式碼之前，請先對組建和發行管線進行一些變更。 編輯您的「組建管線」，並更新節點工作以使用 Node.js 12.x 版。 將 [工作版本] 欄位設定為 1.x，並將 [版本] 欄位設為 12.x。
在本快速入門中，我們不會建立單元測試，且會在組建管線中停用這些步驟。 當您撰寫測試時，您可以重新啟用這些步驟。 按一下滑鼠右鍵以選取標示為「安裝測試相依性」和「執行單元測試」的工作，並將其停用。
編輯您的發行管線。
如同組建管線，請將節點工作變更為使用 12.x，並停用這兩項測試工作。 您的版本應該會類似於下列螢幕擷取畫面。
在瀏覽器的左側，移至 views/index.pug 檔案。
選取 [編輯]，並進行 h2 標題的變更。 例如，輸入立即開始使用 Azure DevOps Starter 或進行其他變更。
選取 [認可]，然後儲存您的變更。
在瀏覽器中，移至 DevOps 入門版儀表板。
您現在應該會看到正在進行中的建置。 您所做的變更會透過 CI/CD 管線自動建置及部署。
認可您的變更，並檢查 Azure CI/CD 管線
在前兩個步驟中，您已將 Gatsby 產生的 PWA 新增至 Git 存放庫，且已編輯用來建置和部署程式碼的管線。 我們可以認可程式碼，並觀察其組建和發行管線觀的進度。
在終端機中，從專案 Git 存放庫的根目錄執行下列命令，以將您的程式碼推送至 Azure DevOps 專案：
git add . git commit -m "My first Gatsby PWA" git pushgit push完成後，即會啟動組建。 您可以在 [Azure DevOps 儀表板] 中追蹤進度。您的組建和發行管線應該會在幾分鐘後完成，且您的 PWA 應會部署至容器。 從上方的儀表板按一下 [應用程式端點] 連結，您應該會看到部落格的 Gatsby 起始專案。
清除資源
當您不再需要已建立的 Azure App Service 和其他相關資源時，可以將其刪除。 請使用 DevOps 入門版儀表板的 [刪除] 功能。
後續步驟
在設定 CI/CD 程序後，組建和發行管線會自動建立。 您可以變更這些組建和發行管線，以符合小組的需求。 若要深入了解 CI/CD 管線，請參閱：