使用 Azure DevOps Starter 在 Azure Pipelines 中為 Node.js 建立 CI/CD 管線

在本快速入門中，您會使用 GatsbyJS 建立 NodeJS 漸進式 Web 應用程式（PWA），以及簡化的 Azure DevOps 入門版建立體驗。完成後，您會在 Azure Pipelines 中擁有適用於 PWA 的持續整合（CI）和持續交付（CD）流程。 Azure DevOps Starter 設定您開發、部署和監控所需的一切。

先決條件

具有有效訂閱的 Azure 帳戶。免費建立帳戶。
Azure DevOps 組織。

DevOps 入門版會在 Azure Pipelines 中建立 CI/CD 管線。您可以建立新的 Azure DevOps 組織或使用現有的組織。 DevOps 入門版也會在您選擇的 Azure 訂用帳戶中建立 Azure 資源。

登入 Azure 入口網站，然後在左窗格中選取 [ 建立資源]。
在搜尋方塊中，輸入 DevOps Starter，然後選取。點擊新增以創建新的。

選取範例應用程式和 Azure 服務

選取 Node.js 範例應用程式。
預設範例架構 Express.js。將選取項目變更為 [簡單 Node.js 應用程式 ]，然後選取 [ 下一步]。
此步驟中可用的部署目標取決於步驟 2 中所選取的應用程式架構。在此範例中， Windows Web 應用程式 是預設部署目標。保留 [ 適用於容器的 Web 應用程式 ] 設定，然後選取 [ 下一步]。

設定項目名稱和 Azure 訂用帳戶

在 DevOps 入門版建立工作流程的最後一個步驟中，您會指派專案名稱、選取 Azure 訂用帳戶，然後選取 [ 完成]。
當您的專案建置並部署至 Azure 時，會顯示摘要頁面。在短暫的期間之後，Azure DevOps 組織中會建立專案，其中包含 Git 存放庫、工作流程看板、部署管線、測試計劃和應用程式所需的成品。

管理您的專案

流覽至 [所有資源 ]，並尋找您的DevOps入門版。選取您的 DevOps入門版。
系統會將您導向至儀錶板，讓您能夠看見您的專案首頁、程式代碼存放庫、CI/CD 管線，以及執行中應用程式的連結。選取 [專案首頁 ] 以在 Azure DevOps 中檢視您的應用程式，然後在另一個瀏覽器索引標籤中選取 [應用程式端點 ] 以檢視即時範例應用程式。我們稍後將這個範例變更為使用 GatsbyJS 產生的 PWA。
從您的 Azure DevOps 專案中，您可以邀請小組成員共同作業並建立工作流程看板來開始追蹤您的工作。如需詳細資訊，請參閱這裡。

Azure DevOps 概觀

複製存放庫並安裝您的 Gatsby PWA

DevOps 入門版會在 Azure Repos 或 GitHub 中建立 Git 存放庫。此範例已建立 Azure 存放庫。下一個步驟是複製存放庫並進行變更。

從您的 DevOps 專案中選取 Repos，然後按下 Clone。有各種機制可複製 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

我們不希望 Application 資料夾中的所有檔案，因為我們要將它取代為 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 工作以使用版本 Node.js 12.x。將 [ 任務版本] 字段設定為 1.x，並將 [ 版本] 字段設定為 12.x。
在本快速入門中，我們不會建立單元測試，而且我們正在建置流程中停用這些步驟。撰寫測試時，您可以重新啟用這些步驟。以滑鼠右鍵按下以選取標示為 [安裝測試相依性 ] 和 [ 執行單元測試 ] 的工作，並加以停用。
編輯您的發行流程。
如同建置管線，請將 Node.js 工作變更為使用 12.x，並停用這兩個測試任務。您的版本應該類似此螢幕快照。
在瀏覽器左側，移至 views/index.pug 檔案。
選取 [編輯]，然後變更 h2 標題。例如，輸入 開始使用 Azure DevOps 入門版 ，或進行其他變更。
選取 [提交]，然後儲存變更。
在您的瀏覽器中，前往 DevOps Starter 儀表板。
您現在應該會看到建置正在進行中。您所做的變更會透過 CI/CD 管線自動建置和部署。

提交您的變更或檢查 Azure CI/CD 流程

在前兩個步驟中，您已將 Gatsby 產生的 PWA 新增至 Git 存放庫，並編輯您的管線來建置和部署程式代碼。我們可以認可程序代碼，並透過建置和發行管線來監看其進度。

從終端機中專案的 Git 存放庫根目錄，執行下列命令，將您的程式代碼推送至 Azure DevOps 專案：
```
git add .
git commit -m "My first Gatsby PWA"
git push
```
一旦 git push 完成，組建即會啟動。您可以從 Azure DevOps 儀錶板遵循進度。
幾分鐘之後，您的組建和發行管線會完成，然後您的 PWA 將部署至容器。按兩下上述儀錶板中的 [應用程式端點 ] 連結，您應該會看到適用於部落格的 Gatsby 入門專案。

清理資源

您可以刪除當您不再需要資源時所建立的 Azure App Service 和其他相關資源。使用 DevOps Starter 儀錶板上的 Delete 功能。

後續步驟

當您設定 CI/CD 程式時，會自動建立建置和發行管線。您可以變更這些組建和發行管線，以符合小組的需求。若要深入瞭解 CI/CD 管線，請參閱：

自定義CD程式

Last updated on 2020-03-24

共用方式為