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

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í procesu máte kanál kontinuální integrace (CI) a průběžného doručování (CD) pro své PWA v rámci služby 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ření účtu zdarma
Organizace Azure DevOps

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

Přihlaste se k webu Azure Portal a v levém podokně vyberte Vytvořit prostředek.
Do vyhledávacího pole zadejte devOps Startera pak vyberte. Kliknutím na Přidat vytvořte nový prvek.

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

Vyberte ukázkovou aplikaci Node.js.
Výchozí ukázková architektura je Express.js. Změňte výběr na Jednoduchá Node.js Aplikace a pak vyberte Další.
Cíle nasazení dostupné v tomto kroku jsou diktovány architekturou aplikace vybranou v kroku 2. V tomto příkladu je výchozí cíl nasazení pro Windows Web App . Ponechte Web App for Containers nastavenou a vyberte Další.

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

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.
Během sestavení projektu se zobrazí souhrnná stránka a vaše aplikace se nasadí do Azure. Po krátké době se ve vaší organizaci Azure DevOps vytvoří projekt, který zahrnuje úložiště Git, panel Kanban, kanál nasazení, testovací plány a artefakty vyžadované vaší aplikací.

Správa projektu

Přejděte na Všechny prostředky a vyhledejte DevOps Starter. Vyberte svou úvodní sadu DevOps.
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 , aby se vaše aplikace zobrazila v Azure DevOps , a na jiné kartě prohlížeče vyberte koncový bod aplikace a zobrazte živou ukázkovou aplikaci. Tuto ukázku později změníme, aby používala vygenerovanou PWA pomocí GatsbyJS.
V projektu Azure DevOps můžete pozvat členy týmu, aby spolupracovali a vytvořili panel Kanbanu, abyste mohli začít sledovat vaši práci. Další informace najdete zde.

Přehled Azure DevOps

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ě v Azure. Dalším krokem je naklonování úložiště a provedení změn.

V projektu DevOps vyberte Repos a potom klikněte na Klonovat. Existují různé mechanismy pro klonování Git repozitáře do vašeho počítače. Zvolte ten, který odpovídá vašemu vývojovému prostředí.
Po naklonování úložiště na plochu proveďte určité změny úvodní šablony. Začněte instalací rozhraní příkazového řádku GatsbyJS z terminálu.
```
 npm install -g gatsby
```

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

Nechceme všechny soubory ve složce Aplikace, protože ho nahradíme úvodním programem Gatsby. Spusťte následující příkazy postupně, abyste jej zmenšili.
```
cp .\Application\Dockerfile .
rmdir Application
```

K vygenerování ukázkové PWA použijte rozhraní příkazového řádku Gatsby. Spusťte gatsby new z terminálu pro spuštění průvodce PWA a vyberte gatsby-starter-blog jako počáteční šablonu. Měla by vypadat podobně jako v 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)

Teď máte složku s názvem my-gatsby-project. Přejmenujte to na Application a zkopírujte Dockerfile do něj.
```
mv my-gatsby-project Application
mv Dockerfile Application
```
Ve svém oblíbeném editoru otevřete soubor Dockerfile a změňte první řádek z FROM node:8 na FROM node:12. Tato změna zajišťuje, že váš kontejner používá Node.js verze 12.x místo verze 8.x. GatsbyJS vyžaduje modernější verze Node.js.
Dále otevřete soubor package.json ve složce Aplikace a upravte pole skriptů , abyste zajistili, že vývojové a produkční servery naslouchají všem dostupným síťovým rozhraním (například 0.0.0.0.0) a portu 80. Bez těchto nastavení nemůže služba App Service kontejneru směrovat provoz do vaší Node.js aplikace spuštěné uvnitř kontejneru. Pole scripts by mělo vypadat podobně jako dole. Konkrétně chcete změnit cíle develop, serve, a start z jejich 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

Před potvrzením kódu v předchozí části proveďte určité změny kanálů buildu a verze. Upravte 'Build Pipeline' 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.
V tomto rychlém startu nevytváříme jednotkové testy a tyto kroky v procesu sestavení zakazujeme. Při psaní testů můžete tyto kroky znovu povolit. Klikněte pravým tlačítkem myši a vyberte úlohy označené jako Instalovat testovací závislosti a Spustit jednotkové testy a zakažte je.
Upravte uvolňovací kanál.
Stejně jako u kanálu buildu změňte úlohu Node tak, aby používala verzi 12.x, a zakažte tyto dvě testovací úlohy. Vaše verze by měla vypadat podobně jako na tomto snímku obrazovky.
Na levé straně prohlížeče přejděte do souboru views/index.pug .
Vyberte Upravit a potom změňte nadpis h2. Můžete například hned začít s Azure DevOps Starterem nebo provést nějakou jinou změnu.
Vyberte Potvrdita uložte provedené změny.
V prohlížeči přejděte na řídicí panel DevOps Starter.
Měli byste nyní vidět, jak probíhá sestavení. Provedené změny se automaticky sestaví a nasadí prostřednictvím řetězce CI/CD.

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

V předchozích dvou krocích jste přidali PWA vygenerovaný Gatsby do vašeho git repo a upravili vaše pipelines pro sestavení a nasazení kódu. Kód můžeme odeslat a sledovat jeho postup v procesu buildu a vydání.

V kořenovém adresáři úložiště Git vašeho projektu v terminálu spusťte následující příkazy pro nasdílení kódu do projektu Azure DevOps:
```
git add .
git commit -m "My first Gatsby PWA"
git push
```
Sestavení se spustí hned po dokončení git push. Průběh můžete sledovat na řídicím panelu Azure DevOps.
Po několika minutách by se měly dokončit vaše buildovací a uvolňovací rurě a vaše progresivní webová aplikace by se měla nasadit do kontejneru. Klikněte na odkaz na koncový bod aplikace z výše uvedeného řídicího panelu a měli byste vidět úvodní projekt Gatsby pro blogy.

Upravte zdroje

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

Další kroky

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

Přizpůsobení procesu CD

Last updated on 2020-03-24

Sdílet prostřednictvím