Azure DevOps Starter ile Node.js için Azure Pipelines'da CI/CD işlem hattı oluşturma

  • Makale

Bu hızlı başlangıçta GatsbyJS ve basitleştirilmiş Azure DevOps Starter oluşturma deneyimini kullanarak bir NodeJS aşamalı web uygulaması (PWA) oluşturacaksınız. İşiniz bittiğinde, Azure Pipelines'da PWA'nız için sürekli tümleştirme (CI) ve sürekli teslim (CD) işlem hattınız olur. Azure DevOps Starter geliştirme, dağıtma ve izleme için ihtiyacınız olan her şeyi ayarlar.

Önkoşullar

Azure portalında oturum açın

DevOps Starter, Azure Pipelines'da bir CI/CD işlem hattı oluşturur. Yeni bir Azure DevOps kuruluşu oluşturabilir veya mevcut bir kuruluşu kullanabilirsiniz. DevOps Starter, seçtiğiniz Azure aboneliğinde De Azure kaynakları oluşturur.

  1. Azure portal oturum açın ve sol bölmede Kaynak oluştur'u seçin.

    Azure portal'de Azure kaynağı oluşturma

  2. Arama kutusuna DevOps Starter yazın ve ardından öğesini seçin. Yeni bir tane oluşturmak için Ekle'ye tıklayın.

    DevOps Starter panosu

Örnek uygulama ve Azure hizmeti seçme

  1. Node.js örnek uygulamasını seçin.

    Node.js örneğini seçin

  2. Varsayılan örnek çerçeve Express.js’dir. Seçimi Basit Node.js Uygulaması olarak değiştirin ve İleri'yi seçin.

    Basit Node.js Uygulamasını seçin

  3. Bu adımda kullanılabilen dağıtım hedefleri, 2. adımda seçilen uygulama çerçevesi tarafından belirlenir. Bu örnekte, Windows Web App varsayılan dağıtım hedefidir. Kapsayıcılar için Web App'i ayarlanmış olarak bırakın ve İleri'yi seçin.

    Dağıtım hedefini seçin

Proje adını ve Azure aboneliğini yapılandırma

  1. DevOps Starter oluşturma iş akışının son adımında bir proje adı atar, bir Azure aboneliği seçer ve Bitti'yi seçersiniz.

    Proje adı atama ve abonelik seçme

  2. Projeniz oluşturulurken ve uygulamanız Azure'a dağıtılırken bir özet sayfası görüntülenir. Kısa bir süre sonra Azure DevOps kuruluşunuzda git deposu, Kanban panosu, dağıtım işlem hattı, test planları ve uygulamanızın gerektirdiği yapıtları içeren bir proje oluşturulur.

Projenizi yönetme

  1. Tüm Kaynaklar'a gidin ve DevOps Starter'ınızı bulun. DevOps Starter'ınızı seçin.

    Kaynak Listesinde Azure DevOps Panosu

  2. Proje giriş sayfanıza, kod deponuza, CI/CD işlem hattına ve çalışan uygulamanızın bağlantısına yönelik görünürlük sağlayan bir panoya yönlendirilirsiniz. Uygulamanızı Azure DevOps'ta görüntülemek için Project Giriş Sayfasını seçin ve başka bir tarayıcı sekmesinde Uygulama Uç Noktası'nı seçerek canlı örnek uygulamayı görüntüleyin. Bu örneği daha sonra GatsbyJS tarafından oluşturulan PWA kullanacak şekilde değiştireceğiz.

    Azure DevOps Panosu

  3. Azure DevOps projenizden ekip üyelerini işbirliği yapmaya davet edebilir ve çalışmanızı izlemeye başlamak için bir Kanban panosu oluşturabilirsiniz. Daha fazla bilgi için buraya bakın.

Azure DevOps'a Genel Bakış

Depoyu kopyalayın ve Gatsby PWA'nızı yükleyin

DevOps Starter, Azure Repos veya GitHub'da bir git deposu oluşturur. Bu örnek bir Azure Deposu oluşturmuştur. Sonraki adım, depoyu kopyalayıp değişiklikler yapmaktır.

  1. DevOps ProjenizdenDepolar'ı seçin ve kopyala'ya tıklayın. Git deposunu masaüstünüzde kopyalamak için çeşitli mekanizmalar vardır. Geliştirme deneyiminiz için uygun olanı seçin.

    Depoyu kopyalama

  2. Depo masaüstünüze kopyalandıktan sonra başlangıç şablonunda bazı değişiklikler yapın. Terminalden GatsbyJS CLI'yi yükleyerek başlayın.

     npm install -g gatsby

  3. Terminalden deponuzun köküne gidin. Şuna benzer üç klasör içermelidir:

    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. Gatsby başlatıcısıyla değiştireceğimiz için tüm dosyaların Uygulama klasöründe olmasını istemiyoruz. Kırpmak için aşağıdaki komutları sırayla çalıştırın.

    cp .\Application\Dockerfile .
rmdir Application

  5. Örnek bir PWA oluşturmak için Gatsby CLI'sini kullanın. PWA sihirbazını başlatmak için terminalden komutunu çalıştırın gatsby new ve başlangıç şablonunuz için öğesini seçin gatsby-starter-blog . Şu örneğe benzemelidir:

    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. Artık adlı my-gatsby-projectbir klasörünüz var. öğesini olarak Application yeniden adlandırın ve içine kopyalayın Dockerfile .

    mv my-gatsby-project Application
mv Dockerfile Application

  7. Sık kullandığınız düzenleyicide Dockerfile dosyasını açın ve ilk satırı olarak FROM node:8FROM node:12değiştirin. Bu değişiklik, kapsayıcınızın sürüm 8.x yerine Node.js sürüm 12.x kullanmasını sağlar. GatsbyJS, Node.js daha modern sürümlerini gerektirir.

  8. Ardından Uygulama klasöründe package.json dosyasını açın ve geliştirme ve üretim sunucularınızın tüm kullanılabilir ağ arabirimlerinde (örneğin, 0.0.0.0) ve 80 numaralı bağlantı noktasında dinlediğinden emin olmak için betikler alanını düzenleyin. Bu ayarlar olmadan kapsayıcı uygulama hizmeti trafiği kapsayıcınızın içinde çalışan Node.js uygulamanıza yönlendiremez. Alan scripts aşağıdakine benzemelidir. Özellikle, , serveve start hedeflerini varsayılan değerlerinden değiştirmek developistiyorsunuz.

      "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 işlem hatlarınızı düzenleme

  1. Önceki bölümde kodu işlemeden önce derleme ve yayın işlem hatlarınızda bazı değişiklikler yapın. 'Derleme İşlem Hattı'nızı düzenleyin ve Node görevini Node.js sürüm 12.x'i kullanacak şekilde güncelleştirin. Görev sürümü alanını 1.x, Sürüm alanını ise 12.x olarak ayarlayın.

    Node.js 12.x'e güncelleştirme

  2. Bu hızlı başlangıçta birim testleri oluşturmuyoruz ve derleme işlem hattımızda bu adımları devre dışı bırakıyoruz. Testleri yazarken bu adımları yeniden etkinleştirebilirsiniz. Test bağımlılıklarını yükle ve Birim testlerini çalıştır etiketli görevleri seçmek için sağ tıklayın ve bunları devre dışı bırakın.

    Derleme Testlerini Devre Dışı Bırakma

  3. Yayın işlem hattınızı düzenleyin.

    Yayın İşlem Hattını Düzenleme

  4. Derleme işlem hattında olduğu gibi Node görevini 12.x kullanacak şekilde değiştirin ve iki test görevini devre dışı bırakın. Sürümünüz bu ekran görüntüsüne benzemelidir.

    Tamamlandı Yayın İşlem Hattı

  5. Tarayıcının sol tarafında views/index.pug dosyasına gidin.

  6. Düzenle'yi seçin ve h2 başlığında bir değişiklik yapın. Örneğin, Azure DevOps Starter'ı hemen kullanmaya başlayın yazın veya başka bir değişiklik yapın.

  7. İşle'yi seçin ve değişikliklerinizi kaydedin.

  8. Tarayıcınızda DevOps Starter panosuna gidin.
    Şimdi devam eden bir derleme görmeniz gerekir. Yaptığınız değişiklikler otomatik olarak oluşturulur ve ci/CD işlem hattı aracılığıyla dağıtılır.

Değişikliklerinizi işleme ve Azure CI/CD işlem hattını inceleme

Önceki iki adımda git deponuza Gatsby tarafından oluşturulan bir PWA eklediniz ve kodu derlemek ve dağıtmak için işlem hatlarınızı düzenlediniz. Kodu işleyebilir ve derleme ve yayın işlem hattında ilerlemesini izleyebiliriz.

  1. Projenizin terminaldeki git deposunun kökünden aşağıdaki komutları çalıştırarak kodunuzu Azure DevOps projenize gönderin:

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

  2. Derleme tamamlandıktan hemen sonra git push başlatılır. İlerleme durumunu Azure DevOps Panosu'ndan takip edebilirsiniz.

  3. Birkaç dakika sonra derleme ve yayın işlem hatlarınızın bitmesi ve PWA'nızın bir kapsayıcıya dağıtılması gerekir. Yukarıdaki panodan Uygulama uç noktası bağlantısına tıkladığınızda bloglar için bir Gatsby başlangıç projesi görmeniz gerekir.

Kaynakları temizleme

Artık kaynaklara ihtiyacınız olmadığında oluşturduğunuz Azure App Service ve diğer ilgili kaynakları silebilirsiniz. DevOps Starter panosundaki Sil işlevini kullanın.

Sonraki adımlar

CI/CD işleminizi yapılandırdığınızda derleme ve yayın işlem hatları otomatik olarak oluşturulur. Ekibinizin gereksinimlerini karşılamak için bu derleme ve yayın işlem hatlarını değiştirebilirsiniz. CI/CD işlem hattı hakkında daha fazla bilgi edinmek için bkz:

CD işlemini özelleştirme