Menyusun aplikasi web ASP.NET berbasis data dengan menggunakan Azure Pipelines

Selesai

Untuk menyelesaikan pengujian, Anda perlu memvalidasi langkah-langkah terakhir dari proses penyebaran aplikasi ke Azure App Service. Dalam latihan ini, Anda akan menggunakan pipeline rilis Azure DevOps untuk menyebarkan artefak yang dihasilkan dalam latihan pertama modul ini ke dalam aplikasi web Azure App Service yang Anda terapkan dalam latihan sebelumnya.

Mengonfigurasi Azure Pipeline untuk menggunakan contoh ASP.NET web ke aplikasi web Azure App Service

Sekarang, saatnya untuk mengonfigurasi Azure Pipeline yang Anda gunakan untuk menyediakan sumber daya Azure untuk menyebarkan contoh ASP.NET web Anda. Dalam latihan berikutnya, Anda akan menambahkan tahap lain bernama DeployASPNETApp, yang akan berisi tugas untuk menyebarkan ASP.NET ke dalam aplikasi web Azure App Service yang diterapkan selama tahap DeployAzureResources.

  1. Dalam jendela browser yang menampilkan portal Azure DevOps, di bilah menu vertikal di sepanjang tepi kiri halaman proyek, pilih entri Alur. Pada panel Alur, pilih alur yang Anda gunakan di lab ini, lalu pilih Edit.

  2. Pada panel editor azure-pipelines.yml, tempatkan kursor mouse di bagian paling akhir file dan pilih tombol Enter untuk memulai baris baru.

  3. Pada panel editor azure-pipelines.yml, tambahkan konten berikut untuk membuat tahap DeployAzureResources dan elemen pekerjaan:

    - stage: DeployASPNETApp
      jobs: 
      - job: DeployASPNETApp
        pool: 
          vmImage: 'windows-latest'
        steps:
    
  4. Pada panel editor azure-pipelines.yml, tempatkan kursor mouse di bagian paling akhir file dan pilih tombol Enter untuk memulai baris baru.

  5. Pada panel editor azure-pipelines.yml, di bagian Tugas, di kotak teks Tugas pencarian, masukkan Unduh artefak build, dan dalam daftar hasil, pilih entri tugas Unduh artefak build.

  6. Pada panel Unduh artefak build, di Nama artefak, masukkan lepas, lalu pilih Tambahkan.

    Panel editor azure-pipelines.yml termasuk tugas build artefak unduhan dengan parameternya yang ditetapkan.

  7. Pada panel editor azure-pipelines.yml, dengan tugas yang baru ditambahkan dipilih, pilih tombol Tab dua kali untuk mengindentkannya.

  8. Pada panel editor azure-pipelines.yml, ganti baris downloadPath: '$(System.ArtifactsDirectory)' terakhir tugas yang baru ditambahkan dengan downloadPath: '$(System.DefaultWorkingDirectory)'

    Catatan

    Ini diperlukan untuk mencocokkan lokasi artefak yang dirujuk oleh tugas berikutnya yang akan Anda tambahkan ke saluran.

  9. Pada panel editor azure-pipelines.yml, letakkan penunjuk mouse di bagian paling akhir file dan pilih tombol Enter untuk memulai baris baru.

  10. Pada panel editor azure-pipelines.yml, di bagian Tugas, dalam kotak teks Tugas pencarian, masukkan Layanan Aplikasi, dan dalam daftar hasil, pilih entri tugas terapkan Azure App Service.

  11. Pada panel Sebarkan Azure App Service, pastikan bahwa labAzureSubscription muncul di daftar tarik-turun Langganan Azure. Di daftar tarik-turun Nama App Service, masukkan $(WEBAPPNAME), dan pilih Tambahkan.

    Catatan

    Ini adalah salah satu variabel yang menunjuk nama aplikasi web Azure App Service yang disertakan dalam AzureResourcesVariableGroup yang Anda buat dalam latihan sebelumnya modul ini.

  12. Pada panel editor azure-pipelines.yml, dengan tugas yang baru ditambahkan dipilih, pilih tombol Tab dua kali untuk mengindentkannya.

  13. Pada panel editor azure-pipelines.yml, tempatkan kursor mouse di bagian paling akhir file dan pilih tombol Enter untuk memulai baris baru.

  14. Pada panel editor azure-pipelines.yml, di bagian Tugas, dalam kotak teks Tugas pencarian, masukkan Layanan Aplikasi, dan dalam daftar hasil, pilih entri tugas terapkan Azure App Service.

  15. Pada panel Pengaturan Azure App Service, di daftar turun bawah langganan Azure, pilih entri labAzureSubscription. Di daftar turun bawah Nama Azure App Service, masukkan $(WEBAPPNAME). Di daftar turun bawah Grup sumber daya, masukkan $(RESOURCEGROUPNAME). Di kotak teks String Koneksi, masukkan teks berikut, lalu pilih Tambahkan.

    [
       {
        "name": "MyDbConnection",
        "value": "Server=tcp:$(SQLSRVNAME).database.windows.net,1433;Initial Catalog=tododb;Persist Security Info=False;User ID=$(USERNAME);Password=$(PASSWORD);MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30;",
        "type": "SqlAzure",
        "slotSetting": false
       }
    ]
    

    Panel editor azure-pipelines.yml termasuk tugas pengaturan Azure App Service dengan parameter yang disetel.

  16. Pada panel editor azure-pipelines.yml, dengan tugas yang baru ditambahkan dipilih, pilih tombol Tab dua kali untuk mengindentkannya.

    Catatan

    Pada titik ini, pipeline harus memiliki konten, yang menyerupai daftar berikut:

    # ASP.NET
    # Build and test ASP.NET projects.
    # Add steps that publish symbols, save build artifacts, deploy, and more:
    # https://docs.microsoft.com/azure/devops/pipelines/apps/aspnet/build-aspnet-4
    
    variables: 
    - group: AzureResourcesVariableGroup
    
    trigger: none
    
    stages:
    - stage: Build
      jobs: 
      - job: Build
    
        pool:
          vmImage: 'windows-latest'
    
        variables:
          solution: '**/*.sln'
          buildPlatform: 'Any CPU'
          buildConfiguration: 'Release'
    
        steps:
        - task: NuGetToolInstaller@1
    
        - task: NuGetCommand@2
          inputs:
            restoreSolution: '$(solution)'
    
        - task: VSBuild@1
          inputs:
            solution: '$(solution)'
            msbuildArgs: '/p:DeployOnBuild=true /p:WebPublishMethod=Package /p:PackageAsSingleFile=true /p:SkipInvalidConfigurations=true /p:PackageLocation="$(build.artifactStagingDirectory)"'
            platform: '$(buildPlatform)'
            configuration: '$(buildConfiguration)'
    
        - task: PublishBuildArtifacts@1
          inputs:
            PathtoPublish: '$(Build.ArtifactStagingDirectory)'
            ArtifactName: 'drop'
            publishLocation: 'Container'
    
    - stage: DeployAzureResources
      jobs: 
      - job: DeployAzureResources
        pool: 
          vmImage: 'windows-latest'
        steps:
    
        - task: AzureCLI@2
          inputs:
            azureSubscription: 'Azure Pass - Sponsorship(11111111-1111-1111-1111-111111111111)'
            scriptType: 'bash'
            scriptLocation: 'inlineScript'
            inlineScript: |
              # create a resource group
              az group create -l $LOCATION -n $RESOURCEGROUPNAME
    
              # create and configure Azure SQL logical server and Azure SQL database
              az sql server create -l $LOCATION -g $RESOURCEGROUPNAME -n $SQLSRVNAME -u $(USERNAME) -p $(PASSWORD)
              az sql db create -g $RESOURCEGROUPNAME -s $SQLSRVNAME -n $DBNAME --service-objective Basic
              az sql server firewall-rule create -g $RESOURCEGROUPNAME -s $SQLSRVNAME -n allowazure --start-ip-address 0.0.0.0 --end-ip-address 0.0.0.0
    
              # create and configure an Azure App Service plan and an Azure web app
              az appservice plan create -g $RESOURCEGROUPNAME -n $SVCPLANNAME --sku FREE
              az webapp create -g $RESOURCEGROUPNAME -p $SVCPLANNAME -n $WEBAPPNAME
    
    - stage: DeployASPNETApp
      jobs: 
      - job: DeployASPNETApp
        pool: 
          vmImage: 'windows-latest'
        steps:
    
        - task: DownloadBuildArtifacts@0
          inputs:
            buildType: 'current'
            downloadType: 'single'
            artifactName: 'drop'
            downloadPath: '$(System.DefaultWorkingDirectory)'
    
        - task: AzureRmWebAppDeployment@4
          inputs:
            ConnectionType: 'AzureRM'
            azureSubscription: 'labAzureSubscription'
            appType: 'webApp'
            WebAppName: '$(WEBAPPNAME)'
            packageForLinux: '$(System.DefaultWorkingDirectory)/**/*.zip'
    
        - task: AzureAppServiceSettings@1
             inputs:
            azureSubscription: 'labAzureSubscription'
            appName: '$(WEBAPPNAME)'
            resourceGroupName: '$(RESOURCEGROUPNAME)'
            connectionStrings: |
              [
                {
                  "name": "MyDbConnection",
                  "value": "Server=tcp:$(SQLSRVNAME).database.windows.net,1433;Initial Catalog=tododb;Persist Security Info=False;User ID=$(USERNAME);Password=$(PASSWORD);MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30;",
                  "type": "SqlAzure",
                  "slotSetting": false
                }
              ]
    
  17. Pada panel editor azure-pipelines.yml, pilih Simpan, dan pada panel Simpan, pilih Simpan lagi.

Mengonfigurasi Azure Pipeline untuk menyediakan sumber daya Azure

Dengan tahap baru Azure Pipeline yang dibuat, Anda sekarang dapat meminta eksekusi tugasnya. Anda dapat mengecualikan tahap kedua, karena sumber daya Azure yang diperlukan telah disediakan dalam latihan sebelumnya dari modul ini.

  1. Pada panel editor azure-pipelines.yml, pilih Jalankan.

  2. Pada panel Jalankan alur, pilih Tahapan untuk menjalankan, pada panel Tahapan untuk menjalankan, kosongkan kotak centang DeployAzureResources, dan pilih Gunakan tahapan yang dipilih.

    Kotak centang Tahapan untuk menjalankan panel dengan tahap deployazureresources dikosongkan.

  3. Kembali ke panel Jalankan pipeline, pilih Jalankan.

  4. Pada panel jalankan saluran pipa, perhatikan bahwa tahap DeployAzureResources dilewati.

    Pipa berjalan dengan tahap build dilewati.

  5. Pada panel jalankan saluran pipa, di bagian Tahapan, pilih persegi panjang yang mewakili tahap DeployASPNETApp dan lacak kemajuan eksekusi pipeline untuk tahap tersebut.

  6. Verifikasi bahwa semua tugas tahap DeployASPNETApp berhasil diselesaikan.

Log eksekusi pekerjaan Azure DevOps Pipeline menampilkan pekerjaan yang berhasil diselesaikan.

Memeriksa hasil dari menjalankan Azure Pipeline

Verifikasi bahwa contoh ASP.NET web Anda telah berhasil diterapkan ke aplikasi web Azure App Service.

  1. Beralih ke tab browser web yang menampilkan portal Microsoft Azure.
  2. Di portal Microsoft Azure, pada bilah grup sumber daya aspdevops-rg, pilih entri yang mewakili aplikasi web App Service.
  3. Pada bilah aplikasi web App Service, pilih tautan URL. Ini akan secara otomatis membuka tab browser web baru yang menampilkan contoh ASP.NET aplikasi web Todos.
  4. Pada halaman Todos, pilih Buat Baru dan hingga proses membuat beberapa Entri yang harus dilakukan.

Browser web yang menampilkan contoh ASP.NET yang diterapkan ke aplikasi web Azure.

Mengaktifkan kembali integrasi berkelanjutan

Untuk memvalidasi fungsionalitas Azure DevOps CI/CD, Anda akan mengaktifkan kembali integrasi berkelanjutan.

  1. Di dalam jendela browser yang menampilkan portal Azure DevOps, di bilah menu vertikal di sepanjang tepi kiri halaman proyek, pilih entri Pipelines, pada panel Pipelines, pilih pipeline yang Anda gunakan di lab ini, lalu pilih Edit.

  2. Pada panel editor azure-pipelines.yml, ganti trigger: none entri dengan konten berikut:

    trigger:
    - main
    
  3. Pada panel editor azure-pipelines.yml, pilih Simpan, dan pada panel Simpan, pilih Simpan lagi.

    Catatan

    Ini akan secara otomatis memicu penyebaran baru.

  4. Dalam jendela browser yang menampilkan portal Azure DevOps, navigasikan kembali ke panel Alur, pilih alur yang Anda gunakan di lab ini, lalu pilih entri yang mewakili alur yang dijalankan saat ini dan pantau kemajuannya hingga penyelesaian yang berhasil.

Apa itu integrasi berkelanjutan dan penyebaran berkelanjutan

Untuk menyimpulkan latihan ini, Anda akan memicu integrasi dan penyebaran dengan memodifikasi kode yang dihosting di repositori GitHub.

  1. Dalam jendela browser web yang menampilkan portal Azure DevOps, beralihlah ke tab browser yang menampilkan repositori GitHub yang Anda buat dalam latihan pertama lab ini.
  2. Dalam jendela browser web yang menampilkan repositori GitHub yang Anda buat di latihan pertama lab ini, pilih header tab Kode.
  3. Dalam hierarki repositori, navigasi ke file /DotNetAppSqlDb/Views/Shared/_Layout.cshtml.
  4. Pada halaman yang menampilkan konten _Layout.cshtml, pilih ikonEdit file berbentuk pensil ini.
  5. Ubah konten baris 27 dari<p>&copy; @DateTime.Now.Year - MS Learn Sample ASP.NET Application</p> ke<p>&copy; @DateTime.Now.Year - MS Learn Sample Azure ASP.NET Application</p> dan pilih Lakukan perubahan.
  6. Beralih kembali ke tab browser web yang menampilkan portal Azure DevOps. Di bilah menu vertikal di sepanjang tepi kiri halaman proyek, pilih entri Pipelines.
  7. Dalam jendela browser yang menampilkan portal Azure DevOps, navigasikan kembali ke panel Pipelines, pilih saluran yang Anda gunakan di lab ini, lalu pilih entri yang mewakili pipeline run saat ini, dan pantau perkembangannya hingga berhasil diselesaikan.
  8. Di dalam jendela browser web yang menampilkan portal Azure DevOps, beralihlah ke tab browser web yang menampilkan contoh halaman aplikasi web ASP.NET.
  9. Refresh halaman browser web dan verifikasi bahwa footer halaman berubah sesuai dengan perubahan yang Anda buat di repositori GitHub.

Browser web yang menampilkan contoh ASP.NET yang diterapkan ke aplikasi web Azure setelah perubahan pada repo GitHub.

Hasil

Dalam latihan ini, Anda menggunakan pipeline rilis Azure DevOps untuk menyebarkan artefak ke aplikasi web Azure App Service.

Menyiapkan lingkungan Anda

Anda telah berhasil menyelesaikan semua latihan dalam modul ini. Untuk membersihkan lingkungan lab, Anda harus menghapus proyek Azure DevOps dan sumber daya Azure yang Anda cadangkan dalam dua latihan pertama.

Catatan

Ingatlah untuk menghapus sumber daya Azure apa pun yang tidak lagi Anda gunakan. Menghapus sumber daya yang tidak digunakan menghindari biaya tak terduga.

Menghapus proyek Azure DevOps

  1. Di dalam jendela browser yang menampilkan portal Azure DevOps, di bilah menu vertikal di sepanjang tepi kiri halaman proyek, pilih ikon roda gigi yang mewakili pengaturan Proyek.
  2. Pada panel Detail proyek, gulir ke bawah dan pilih Hapus.
  3. Di jendela popup Hapus proyek, dalam kotak teks konfirmasi, masukkan nama proyek, dan pilih Hapus.

Menghapus sumber daya Azure

  1. Di dalam jendela browser, pada tab browser yang menampilkan proyek Azure DevOps, beralihlah ke tab browser web yang menampilkan portal Microsoft Azure.

  2. Di dalam jendela browser web yang menampilkan portal Microsoft Azure, buka sesi Bash di dalam panel Cloud Shell dengan memilih ikon toolbar di samping kotak teks pencarian.

  3. Dalam jendela browser web yang menampilkan portal Microsoft Azure, dalam sesi Bash pada panel Cloud Shell, jalankan kode berikut untuk memverifikasi nama grup sumber daya yang Anda buat dalam latihan kedua modul ini:

    az group show --resource-group 'aspdevops-rg' --query name --output tsv
    
  4. Dalam jendela browser web yang menampilkan portal Microsoft Azure, dalam sesi Bash pada panel Cloud Shell, jalankan kode berikut untuk memverifikasi nama grup sumber daya yang Anda buat dalam latihan kedua modul ini:

    az group show --resource-group 'aspdevops-rg' --query name --output tsv | xargs -L1 bash -c 'az group delete --name $0 --no-wait --yes'
    

Catatan

Perintah dijalankan secara asinkron (sebagaimana ditentukan oleh parameter --nowait), jadi sementara Anda akan dapat menjalankan perintah Cli Azure lain segera setelah itu dalam sesi Bash yang sama, akan memakan waktu beberapa menit sebelum grup sumber daya dihapus.