Vytvoření kanálu CI/CD v Azure Pipelines pro Node.js pomocí Azure DevOps Starter

V tomto rychlém startu vytvoříte progresivní webovou aplikaci NodeJS (PWA) pomocí GatsbyJS a zjednodušeného prostředí pro vytváření azure DevOps Starter. Po dokončení budete mít kanál kontinuální integrace (CI) a průběžného doručování (CD) pro pwa v Azure Pipelines. Azure DevOps Starter nastaví, co potřebujete pro vývoj, nasazení a monitorování.

Požadavky

• Účet Azure s aktivním předplatným. Vytvořte si účet zdarma.
• Organizace Azure DevOps .

Přihlášení k webu Azure Portal

DevOps Starter vytvoří kanál CI/CD v Azure Pipelines. Můžete vytvořit novou organizaci Azure DevOps nebo použít existující organizaci. DevOps Starter také vytváří prostředky Azure v předplatném Azure podle vašeho výběru.

1. Přihlaste se k Azure Portal a v levém podokně vyberte Vytvořit prostředek.

   

2. Do vyhledávacího pole zadejte DevOps Starter a pak vyberte. Kliknutím na Přidat vytvořte nový.

   

Výběr ukázkové aplikace a služby Azure

1. Vyberte ukázkovou aplikaci v Node.js.

   

2. Výchozí architektura ukázky je Express.js. Změňte výběr na Jednoduchá aplikace Node.js a pak vyberte Další.

   

3. Cíle nasazení dostupné v tomto kroku jsou diktovány architekturou aplikace vybranou v kroku 2. V tomto příkladu je výchozím cílem nasazení Windows Web App . Ponechte webovou aplikaci pro kontejnery nastavenou a vyberte Další.

   

Konfigurace názvu projektu a předplatného Azure

1. V posledním kroku pracovního postupu vytvoření DevOps Starter přiřadíte název projektu, vyberete předplatné Azure a vyberete Hotovo.

   

2. Při sestavování projektu a nasazení aplikace do Azure se zobrazí souhrnná stránka. Po krátké době se ve vaší organizaci Azure DevOps vytvoří projekt, který obsahuje úložiště Git, panel Kanban, kanál nasazení, testovací plány a artefakty vyžadované vaší aplikací.

Správa projektu

1. Přejděte na Všechny prostředky a najděte svůj DevOps Starter. Vyberte svůj DevOps Starter.

   

2. Budete přesměrováni na řídicí panel, který poskytuje přehled o domovské stránce projektu, úložišti kódu, kanálu CI/CD a odkazu na spuštěnou aplikaci. Vyberte domovskou stránku projektu a zobrazte aplikaci v Azure DevOps a na jiné kartě prohlížeče vyberte Koncový bod aplikace , abyste zobrazili živou ukázkovou aplikaci. Později tuto ukázku změníme tak, aby používala PWA vygenerovaná GatsbyJS.

   

3. V projektu Azure DevOps můžete pozvat členy týmu ke spolupráci a vytvořit panel Kanbanu, který vám umožní začít sledovat vaši práci. Další informace najdete tady.

Naklonujte úložiště a nainstalujte Gatsby PWA.

DevOps Starter vytvoří úložiště Git v Azure Repos nebo GitHubu. Tento příklad vytvořil úložiště Azure. Dalším krokem je klonování úložiště a provedení změn.

1. V projektu DevOps vyberte Úložiště a pak klikněte na Klonovat. Existují různé mechanismy klonování úložiště Git na plochu. Vyberte si ten, který vyhovuje vašemu vývojovému prostředí.

   

2. Po naklonování úložiště na plochu proveďte nějaké změny v úvodní šabloně. Začněte instalací rozhraní příkazového řádku GatsbyJS z terminálu.

    npm install -g gatsby
   

3. V terminálu přejděte do kořenového adresáře úložiště. Měla by obsahovat tři složky, které vypadají takto:

   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
   

4. Nechceme všechny soubory ve složce Application, protože ji nahradíme úvodní aplikací Gatsby. Spusťte následující příkazy, které ho postupně oříznou.

   cp .\Application\Dockerfile .
   rmdir Application
   

5. Pomocí rozhraní příkazového řádku Gatsby vygenerujte ukázkovou aplikaci PWA. Spuštěním gatsby new z terminálu spusťte průvodce PWA a vyberte gatsby-starter-blog úvodní šablonu. Měla by se podobat této ukázce:

   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)
   

6. Teď máte složku s názvem my-gatsby-project. Přejmenujte ho na Application a zkopírujte Dockerfile do něj.

   mv my-gatsby-project Application
   mv Dockerfile Application
   

7. V oblíbeném editoru otevřete soubor Dockerfile a změňte první řádek z FROM node:8 na FROM node:12. Tato změna zajistí, že kontejner používá Node.js verzi 12.x místo verze 8.x. GatsbyJS vyžaduje modernější verze Node.js.

8. Potom otevřete soubor package.json ve složce Application a upravte pole skriptů, abyste zajistili , že vývojový a produkční server naslouchá na všech dostupných síťových rozhraních (například 0.0.0.0) a portu 80. Bez těchto nastavení nemůže služba Container App Service směrovat provoz do aplikace Node.js spuštěné uvnitř kontejneru. Pole scripts by se mělo podobat tomu, co je dole. Konkrétně chcete změnit developcíle , servea start z výchozích hodnot.

     "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"
     }
   

Úprava kanálů CI/CD

1. Před potvrzením kódu v předchozí části proveďte nějaké změny v kanálech sestavení a verzí. Upravte kanál sestavení a aktualizujte úlohu Node tak, aby používala Node.js verze 12.x. Nastavte pole Verze úkolu na 1.x a pole Verze na 12.x.

   

2. V tomto rychlém startu nevytváření testů jednotek a tyto kroky v kanálu sestavení zakazujeme. Při psaní testů můžete tyto kroky znovu povolit. Kliknutím pravým tlačítkem vyberte úlohy s popisky Nainstalovat testovací závislosti a Spustit testy jednotek a zakázat je.

   

3. Upravte kanál verze.

   

4. Stejně jako u kanálu sestavení změňte úlohu Node tak, aby používala 12.x, a zakažte tyto dvě testovací úlohy. Vaše verze by měla vypadat podobně jako na tomto snímku obrazovky.

   

5. Na levé straně prohlížeče přejděte do souboru views/index.pug .

6. Vyberte Upravit a pak změňte nadpis h2. Například zadejte Začínáme hned s Azure DevOps Starter nebo proveďte nějakou jinou změnu.

7. Vyberte Potvrdit a uložte provedené změny.

8. V prohlížeči přejděte na řídicí panel DevOps Starter.
   Teď by se mělo zobrazit probíhající sestavení. Změny, které jste udělali, se automaticky sestaví a nasadí prostřednictvím kanálu CI/CD.

Potvrzení změn a prozkoumání kanálu Azure CI/CD

V předchozích dvou krocích jste do úložiště Git přidali pwa vygenerovaný Gatsby a upravili jste kanály pro sestavení a nasazení kódu. Můžeme potvrdit kód a sledovat jeho průběh v kanálu sestavení a verze.

1. V kořenovém adresáři úložiště Git projektu v terminálu spusťte následující příkazy, které nasdílí kód do projektu Azure DevOps:

   git add .
   git commit -m "My first Gatsby PWA"
   git push
   

2. Sestavení se spustí hned po git push dokončení. Průběh můžete sledovat na řídicím panelu Azure DevOps.

3. Po několika minutách by se vaše kanály sestavení a verze měly dokončit a pwa by se měla nasadit do kontejneru. Na výše uvedeném řídicím panelu klikněte na odkaz Koncový bod aplikace a měli byste vidět úvodní projekt Gatsby pro blogy.

Vyčištění prostředků

Můžete odstranit Azure App Service a další související prostředky, které jste vytvořili, když už je nepotřebujete. Použijte funkci Odstranit na řídicím panelu DevOps Starter.

Další kroky

Při konfiguraci procesu CI/CD se automaticky vytvoří kanály sestavení a verze. Tyto kanály buildu a verze můžete změnit tak, aby vyhovovaly potřebám vašeho týmu. Další informace o kanálu CI/CD najdete tady:

Přizpůsobení procesu CD