演習 - Web アプリケーションを Azure App Service にデプロイする

13 分

このモジュールでは、アプリケーションをビルドして Azure App Service にデプロイするマルチステージパイプラインを作成します。次の方法を学びます：

Web アプリケーションをホストする App Service インスタンスを作成します。
マルチステージパイプラインを作成します。
Azure App Service にデプロイします。

App Service インスタンスを作成する

Azure portal にサインインします。
左側のウィンドウで [App Services ] を選択します。
[ 作成>Web アプリ ] を選択して、新しい Web アプリを作成します。

[基本] タブで、次の値を入力します。

設定	価値
プロジェクトの詳細
サブスクリプション	あなたのサブスクリプション
リソースグループ	[ 新規作成] を選択し、「 tailspin-space-game-rg」と入力して、[ OK] を選択します。
インスタンスの詳細
名前	tailspin-space-game-web-1234 などの一意の名前を指定します。この名前は Azure 全体で一意である必要があります。ドメイン名の一部になります。実際には、サービスを説明する名前を選択します。後で使用する名前をメモします。
公開する	Code
ランタイムスタック (実行時スタック)	.NET 8 (LTS)
オペレーティングシステム	Linux
リージョン	リージョンを選択します。できれば、近くのリージョンを選択してください。
価格プラン
Linux プラン	既定を受け入れます。
料金プラン	ドロップダウンメニューから Basic B1 価格レベルを選択します。

[ 確認と作成] を選択し、フォームを確認して、[ 作成] を選択します。デプロイの完了には少し時間がかかります。
デプロイが完了したら、[リソースに移動] を選択します。 App Service Essentials には、デプロイに関連する詳細が表示されます。
URL を選択して、App Service の状態を確認します。

重要

このモジュールの「Azure DevOps 環境のクリーンアップ」ページでは、App Service インスタンスを終了した後に破棄する方法について説明します。クリーンアップは、このモジュールを完了した後に Azure リソースに対して課金されないようにするのに役立ちます。このモジュールを完了していない場合でも、クリーンアップ手順に従ってください。

サービス接続を作成する

重要

同じ Microsoft アカウントで Azure と Azure DevOps にサインインしていることを確認します。

Azure DevOps で、 Space Game - Web - Release プロジェクトに移動します。
ページの左下隅にある [ プロジェクトの設定] を選択します。
[パイプライン] で、[サービス接続] を選択します。
[ サービス接続の作成] を選択し、[ Azure Resource Manager ] を選択し、[ 次へ] を選択します。
[ サービスプリンシパル (自動)] を選択し、[ 次へ] を選択します。

次のように必須フィールドに入力します。メッセージが表示されたら、Microsoft アカウントにサインインします。

フィールド	価値
スコープのレベル	予約
サブスクリプション	お使いの Azure サブスクリプション
リソースグループ	テイルスピン・スペース・ゲーム・RG
サービス接続名	Resource Manager - Tailspin - Space Game

[すべてのパイプラインにアクセス許可を付与する] が選択されていることを確認します。
[保存] を選択します。

ビルドステージをパイプラインに追加する

マルチステージパイプラインを使用すると、変更がパイプラインを通じて昇格される際に通過する個別のフェーズを定義できます。各ステージは、パイプラインのそのフェーズを実行するために必要なエージェント、変数、およびステップを定義します。このセクションでは、ビルドを実行する 1 つのステージを定義します。 Web アプリケーションを App Service にデプロイする 2 番目のステージを定義します。

既存のビルド構成をマルチステージパイプラインに変換するには、 stages セクションを構成に追加し、パイプラインの各フェーズに 1 つ以上の stage セクションを追加します。ステージは、1 つの単位として順番に実行される一連のステップであるジョブに分割されます。

Visual Studio Code でプロジェクトから 、azure-pipelines.yml を開き、その内容を次のコードに置き換えます。

trigger:
- '*'

variables:
  buildConfiguration: 'Release'

stages:
- stage: 'Build'
  displayName: 'Build the web application'
  jobs: 
  - job: 'Build'
    displayName: 'Build job'
    pool:
      vmImage: 'ubuntu-20.04'
      demands:
      - npm

    variables:
      wwwrootDir: 'Tailspin.SpaceGame.Web/wwwroot'
      dotnetSdkVersion: '6.x'

    steps:
    - task: UseDotNet@2
      displayName: 'Use .NET SDK $(dotnetSdkVersion)'
      inputs:
        version: '$(dotnetSdkVersion)'

    - task: Npm@1
      displayName: 'Run npm install'
      inputs:
        verbose: false

    - script: './node_modules/.bin/node-sass $(wwwrootDir) --output $(wwwrootDir)'
      displayName: 'Compile Sass assets'

    - task: gulp@1
      displayName: 'Run gulp tasks'

    - script: 'echo "$(Build.DefinitionName), $(Build.BuildId), $(Build.BuildNumber)" > buildinfo.txt'
      displayName: 'Write build info'
      workingDirectory: $(wwwrootDir)

    - task: DotNetCoreCLI@2
      displayName: 'Restore project dependencies'
      inputs:
        command: 'restore'
        projects: '**/*.csproj'

    - task: DotNetCoreCLI@2
      displayName: 'Build the project - $(buildConfiguration)'
      inputs:
        command: 'build'
        arguments: '--no-restore --configuration $(buildConfiguration)'
        projects: '**/*.csproj'

    - task: DotNetCoreCLI@2
      displayName: 'Publish the project - $(buildConfiguration)'
      inputs:
        command: 'publish'
        projects: '**/*.csproj'
        publishWebProjects: false
        arguments: '--no-build --configuration $(buildConfiguration) --output $(Build.ArtifactStagingDirectory)/$(buildConfiguration)'
        zipAfterPublish: true

    - publish: '$(Build.ArtifactStagingDirectory)'
      artifact: drop

統合ターミナルから、次のコマンドを実行して、変更をステージング、コミット、およびリモートブランチにプッシュします。
```
git add azure-pipelines.yml
git commit -m "Add a build stage"
git push origin release-pipeline
```
Azure Pipelines で、パイプラインに移動してログを表示します。
ビルドが完了したら、[戻る] ボタンを選択して概要ページに戻り、パイプラインと発行された成果物の状態を確認します。

開発環境を作成する

環境は、デプロイ環境の抽象的な表現です。環境を使用して、環境へのデプロイが承認されているパイプラインなど、リリースの特定の条件を定義できます。環境を使用して、デプロイが再開される前に承認する特定のユーザー/グループの手動承認を設定することもできます。

Azure Pipelines で、[ 環境] を選択します。
[環境の作成] を選択します。
[ 名前] に「 dev」と入力します。
残りのフィールドは既定値のままにします。
作成を選択します。

パイプライン変数に Web アプリ名を格納する

作成する デプロイ ステージでは、名前を使用して、デプロイする App Service インスタンスを識別します。たとえば、 tailspin-space-game-web-1234 などです。

パイプライン構成でこの名前をハードコーディングすることもできますが、変数として定義すると、構成がより再利用可能になります。

Azure DevOps で、[ パイプライン ] を選択し、[ ライブラリ] を選択します。
[+ 変数グループ] を選択して、新しい変数グループを作成します。
変数グループ名として「Release」と入力します。
[変数] で [追加] を選択して、新しい変数を追加します。
変数名に WebAppName を入力し、その値として App Service インスタンスの名前を入力します (例: tailspin-space-game-web-1234)。
[保存] を選択します。

パイプラインにデプロイステージを追加する

パイプラインを拡張するには、デプロイステージを追加して、とdownloadタスクを使用して AzureWebApp@1 を App Service にデプロイし、ビルド成果物をダウンロードしてデプロイします。

Visual Studio Code から、 azure-pipelines.yml の内容を次の yaml に置き換えます。

trigger:
- '*'

variables:
  buildConfiguration: 'Release'

stages:
- stage: 'Build'
  displayName: 'Build the web application'
  jobs: 
  - job: 'Build'
    displayName: 'Build job'
    pool:
      vmImage: 'ubuntu-20.04'
      demands:
      - npm

    variables:
      wwwrootDir: 'Tailspin.SpaceGame.Web/wwwroot'
      dotnetSdkVersion: '6.x'

    steps:
    - task: UseDotNet@2
      displayName: 'Use .NET SDK $(dotnetSdkVersion)'
      inputs:
        version: '$(dotnetSdkVersion)'

    - task: Npm@1
      displayName: 'Run npm install'
      inputs:
        verbose: false

    - script: './node_modules/.bin/node-sass $(wwwrootDir) --output $(wwwrootDir)'
      displayName: 'Compile Sass assets'

    - task: gulp@1
      displayName: 'Run gulp tasks'

    - script: 'echo "$(Build.DefinitionName), $(Build.BuildId), $(Build.BuildNumber)" > buildinfo.txt'
      displayName: 'Write build info'
      workingDirectory: $(wwwrootDir)

    - task: DotNetCoreCLI@2
      displayName: 'Restore project dependencies'
      inputs:
        command: 'restore'
        projects: '**/*.csproj'

    - task: DotNetCoreCLI@2
      displayName: 'Build the project - $(buildConfiguration)'
      inputs:
        command: 'build'
        arguments: '--no-restore --configuration $(buildConfiguration)'
        projects: '**/*.csproj'

    - task: DotNetCoreCLI@2
      displayName: 'Publish the project - $(buildConfiguration)'
      inputs:
        command: 'publish'
        projects: '**/*.csproj'
        publishWebProjects: false
        arguments: '--no-build --configuration $(buildConfiguration) --output $(Build.ArtifactStagingDirectory)/$(buildConfiguration)'
        zipAfterPublish: true

    - publish: '$(Build.ArtifactStagingDirectory)'
      artifact: drop

- stage: 'Deploy'
  displayName: 'Deploy the web application'
  dependsOn: Build
  jobs:
  - deployment: Deploy
    pool:
      vmImage: 'ubuntu-20.04'
    environment: dev
    variables:
    - group: Release
    strategy:
      runOnce:
        deploy:
          steps:
          - download: current
            artifact: drop
          - task: AzureWebApp@1
            displayName: 'Azure App Service Deploy: website'
            inputs:
              azureSubscription: 'Resource Manager - Tailspin - Space Game'
              appName: '$(WebAppName)'
              package: '$(Pipeline.Workspace)/drop/$(buildConfiguration)/*.zip'

強調表示されているセクションと、 download タスクと AzureWebApp@1 タスクの使用方法に注目してください。パイプラインは、前に作成した変数グループから $(WebAppName) をフェッチします。

また、 environment を使用して 開発環境 にデプロイする方法にも注目してください。

統合ターミナルから、インデックス にazure-pipelines.yml を追加します。その後、変更をコミットし、GitHub にプッシュします。
```
git add azure-pipelines.yml
git commit -m "Add a deployment stage"
git push origin release-pipeline
```
Azure Pipelines で、パイプラインに移動してログを表示します。
ビルドが完了したら、[戻る] ボタンを選択して概要ページに戻り、ステージの状態を確認します。この場合、両方のステージが正常に終了しました。

App Service でデプロイされた Web サイトを表示する

App Service タブが開いている場合は、ページを更新します。それ以外の場合は、Azure portal で Azure App Service に移動し、インスタンスの URL を選択します(例: https://tailspin-space-game-web-1234.azurewebsites.net
Space Game Web サイトが Azure App Service に正常にデプロイされました。

おめでとうございます! Azure Pipelines を使用して 、Space Game Web サイトを Azure App Service に正常にデプロイしました。