Help us understand the problem. What is going on with this article?

[.NET Conf 2019]のデスクトップアプリケーションでのAzureDevOpsの活用のセッションを日本語訳した(WindowsデスクトップアプリケーションのためのDevOpsとVisual Studio App Centerを始めよう)

この投稿は、.NET Conf 2019(2019/9/23-25)のセッションを日本語訳し文章に起こしたものです。正確なところは、実際のセッションをご確認ください。

Get Started with DevOps for .NET Windows Desktop Apps and Visual Studio App Center
https://www.youtube.com/watch?v=8ioUk4RajpM

1. TL;DR(要約)

  • DevOpsとは何か
  • .NET Core デスクトップアプリケーションを展開(Deploy)する方法
  • Visual Studio App Centerで確認できること
  • ロードマップと関連資料

2. DevOpsを行う企業の高いパフォーマンス

image.png

DevOpsを行う企業では、コードをより早くリリースすることができ、バグをより少なくすることができ、最終的には、収益と利益をあげることができる。

しかし、デスクトップアプリケーション開発者の中では、DevOpsに対する議論が長らく行われてこなかったように感じる。
Webおよびサーバーアプリケーションの展開、さらにはモバイルアプリでは議論されてきたが、デスクトップアプリケーションでは、議論されてこなかった。
なので、本日はデスクトップアプリケーションのDevOpsについて喋る。

3 .NET Core Windows アプリケーションの展開

今回は、デモをシンプルにするために、単一の実行ファイル(.exe)を使用してデモを行う。

今までなら、例えばUSBメモリでテスト用のアプリケーションを渡されたかもしれない。今回は、その代わりとなる方法を示す。

4. 概要

4-1. デモで使用するソース、サービス等

GitHub デモで使用したアプリケーション
https://github.com/diverdan92/DotNetConf2019

Azure DevOps
https://dev.azure.com/

Visual Studio App Center
https://appcenter.ms/

4-2. 概略図

image.png

  • リポジトリにAzure DevOpsを使用することも可能
  • App Centerでビルドすることも可能だが、アプリケーションによってはビルドできないこともある。
  • 今回は、デスクトップアプリケーションに関する記述だが、AzureにホストしたWebアプリなら、自動的にApplication Insightsが組み込まれている。

4-3. 費用

GitHub

https://forest.watch.impress.co.jp/docs/news/1161195.html

無料枠あり。

Azure DevOps

https://azure.microsoft.com/ja-jp/pricing/details/devops/azure-devops-services/

無料枠あり。

また、Visual Studio Subscription を契約しているなら、無償で Azure DevOps を利用できます。

Visual Studio App Center

https://azure.microsoft.com/ja-jp/pricing/details/app-center/

無料枠あり。

また、Visual Studio Subscription を契約しているなら、無償で Azure App Centor を利用できます。

5. Azure DevOpsでの発行と、App Centerとの連携の組み込み

WPFのアプリケーションだが、友人からクラッシュした、という連絡を受けた、というシナリオでやっていく。

5-1. 手順:Azure DevOpsでの発行

  1. [GitHub]GitHubを自分のアカウントにフォークする

    https://github.com/diverdan92/DotNetConf2019

  2. [AzDevOps]自分のAzure DevOpsでに新規にプロジェクトを作成する

  3. [AzDevOps]BuildでNew Pipelineを選択し、GitHubを選択する。既にGitHubと連携済みであれば、認証は自動的に行われる

  4. [AzDevOps]新規パイプラインとして、".NET Desktop"を選択する。すると.NET デスクトップアプリケーションをビルドするための設定が開かれる。

    1. triggerとして、ビルドに使用するブランチを選択する
    2. poolは、ビルドに使用するAzure内の仮想マシンのイメージを示す
    3. variablesとして、solutionとbuildplatformを削除し、以下を追加する。ビルドの使用するVMマシンは、ビルドが終わると捨てられるため、キャッシュする処理は不要。

          DOTNET_SKIP_FIRST_TIME_EXPERIENCE: true
      
    4. "steps:"の次の行以降を削除する。なぜなら、今回は.NET Core用にゼロから設定するためとなる。

      image.png

    5. .NET Core SDKをインストールするステップ

      1. Tasksでuse .net coreを検索し、"Use .NET Core"をクリックして追加する。

        image.png

      2. Versionに3.0.xを入力する。本日リリースされたので、Include Preview Versionsにチェックする必要はない。

        image.png

      3. Addボタンをクリックすると、追加される。

        image.png

      この記述で仮想マシンに.NET Core 3.0.xのSDKがインストールされる。

    6. .NET Coreを発行するステップ

      1. ".NET Core"をクリックして追加する。

        image.png

      2. Commandとして、publishを選択し、Public Web Projectsのチェックを外す。Zip Published Projectsのチェックを外す

        image.png

      3. Addボタンをクリックすると、追加される。

      4. .NET Core CLIコマンドを使用するためにオプションのパラメーターを追加する

        インターフェイスを介して追加することもできるが、手でコードを追加する方がわかりやすい。ビルドアーティファクトの出力を指定するが、Azure DevOpsに用意された構成変数Build.ArtifactStagingDirectoryを使用する。

            arguments: --output $(Build.ArtifactStagingDirectory)
        

      この時点でdotnet publishを使用して自己完結型のexeが生成される。

    7. 成果物を発行する

      1. Tasksでpublish pipelineを検索し、"Publish pipeline artifact"をクリックして追加する。

        image.png

      2. File or directory pathに先ほど入力した出力先を入力する

        $(Build.ArtifactStagingDirectory)
        
      3. nameには、ダウンロードする際に表示する名称を入力する

        image.png

      4. Addボタンをクリックすると、追加される。

    8. この時点の最終的なyaml

      azure-pipelines.yml
      trigger:
      - master
      
      pool:
        vmImage: 'windows-latest'
      
      variables:
        DOTNET_SKIP_FIRST_TIME_EXPERIENCE: true
        buildConfiguration: 'Release'
      
      steps:
      - task: UseDotNet@2
        inputs:
          packageType: 'sdk'
          version: '3.0.x'
      - task: DotNetCoreCLI@2
        inputs:
          command: 'publish'
          publishWebProjects: false
          zipAfterPublish: false
          arguments: --output $(Build.ArtifactStagingDirectory)
      - task: PublishPipelineArtifact@1
        inputs:
          targetPath: '$(Build.ArtifactStagingDirectory)'
          artifact: 'Calculator'
      
    9. Save and run を実行する。

      image.png

      image.png

      この処理により、GitHubのリポジトリに、azure-pipelines.ymlファイルが書き込まれる。

    10. Azure DevOpsではビルドと発行が実行される

      image.png

      実行結果についてはログ等を確認できる。

5-2. 手順:App Centerでの分析と解析の組み込み

  1. [AppCenter]アプリケーションを作成する

    image.png

    OSにWindows、PlatformにWPFを選択する

  2. [VisualStudio]OverViewの説明に従い、MainWindow.xaml.csを書き換える(Overviewの説明では、App.xaml.cs)。

    1. Usingの追加と、コンストラクタメソッドへのコードの追加(サンプルを使用した場合は、既にデモのキーが書き込まれているので、置き換える)

      usingステートメント
      using Microsoft.AppCenter;
      using Microsoft.AppCenter.Analytics;
      using Microsoft.AppCenter.Crashes;
      
      コンストラクタ
      AppCenter.Start("XXXXXXXX-YYYY-ZZZZ-AAAA-99999",
                 typeof(Analytics), typeof(Crashes));
      

      これで開発環境で実行して、数秒すると、AppCenterのAnalyticsに起動したことが反映される。
      Eventsでは、クラッシュしたことなども確認できる。

      image.png

    2. イベントとクラッシュ情報を書き込むには、以下のコードが必要。サンプルでは、すべて組み込まれている(セッション動画でも、コンストラクタのコード以外は記載済みだった)

      以下のコードで、AppCenterのAnalytics - Eventに記載、集計される。

      ボタンクリック等に記載
      Analytics.TrackEvent("Pressed Equals");
      

      以下のコードをCatchブロックに記載すると、AppCenterのDiagnosticsに記載、集計される。

      Catchブロックに記載
      Crashes.TrackError(e, new Dictionary<string, string>() { { "Equation: ", equation } });
      
  3. [VisualStudio]ビルドできることを確認後、チームエクスプローラーの変更から「すべてをコミットして同期」を選択し、masterブランチに変更をコミットし、変更をリモートリポジトリと同期する。

    Azure DevOpsのパイプラインでは、自動的にビルドされる。

    image.png

    GitHubのページでは、CI StatusがSucceededになったことが確認できる

6. Visual Studio App Centerについて

6-1. クライアントデータの収集

重要でエキサイティングなのは、分散しているすべてのクライアントからデータを収集し、それを1か所に集めることができること。USBメモリでの配布をなくしAzure DevOpsでビルドした最新のビルドをWeb上から取り出すことができる!

現在すでにロードマップに上がっている作業項目で、Azure DevOpsのPipelineがApp Centerに接続されるので、後ほど説明する手作業でのリリースの作成は不要となる。

6-2. 分析(Analytics)

App Centerでは、アクティブユーザー数、デバイス、国、言語、あらゆる種類の詳細なデバイスの分析を行うことができる。また、特定のイベントにコードを書くことで、そのイベントが発生したことも集計できる。

6-3. 診断(Diagnostics)

6-3-1. 概略

App Center Diagnosticsでは、アプリケーションがクラッシュしたときの対処方法を検討することができる。通常はアプリがクラッシュした場合、単にクラッシュした、と言うだけで、何が起こったのかわからない。App Centerでは、これらのイベントを受信することができる。

今回の例で言えば、2つのカテゴリの例外に分けられた。

  1. 未処理の例外。ゼロ除算エラーと思われる。
  2. 情報を検証せずにボタンをクリックしたため、不正なエラーが発生した。

例外は、イベントのクラスごとに、バージョン・ビルド・理由によってグループ化される。どのデバイスにいくつのレポートがあったかに関する一般的な情報と、大まかなスタックトレースを提供する。また、個々のレポートに移動し、正確に何を入力した結果例外となったかを確認できる。

実際に結果を分析してみると、電卓アプリは0で割ったことは認識していたが、その先でエラーとなったことがわかる。

6-3-2. 診断結果の添付ファイル

App Centerはモバイルプラットフォームで長い間モバイルサービスを提供してきた。が、これはWindows開発の世界にもたらす価値の一部となる。本当に楽しいのは診断結果の添付ファイルである。

クラッシュが発生した理由と例外時に何が起こっていたかについて他の追加情報を取得したい場合、開発者として私が知りたいことについての詳細の完全なカスタムフォーマットと、何が起こっているのかを理解するのに役立つ、ユーザーのデバイスからSDKが取得した生のクラッシュ情報を実際にダウンロードできる

エラー発生時のマシンの状態、イベントを次の"Download"ボタンからダウンロードできる

image.png

6-3-3. 問題の管理

実際の開発では、10万または100万のユーザーデバイスをデバッグすることは難しい。

しかし、App Centerでは、リモートで結果を収集しグループ化するので、開発者はどの関数でエラーが発生しているかを確認することができる。また、App Centerは、修正する必要があるものと、それができるためにできることを優先順位付けしたリストを作成してくれる。

また、Settingsから、サービス連携することで、Azure DevOpsやGitHubに接続し、Issueを作成できる。クラッシュグループに閾値を設定し、閾値を超えたときにIssueを作成することができる。

image.png

6-4. Releaseの作成

これは統合されたステップであり、iOS、Android、そしてWindowsはApp Centerプラットフォーム上で同等の扱いとなっている。配布して、関連するアプリストアにアプリを送信し、ベータユーザーやテスターに通知を送ることができる。

6-1で述べたように最終的には連携することができるが、今回は手作業でReleaseを作成する。

  1. [AzDevOps]ビルドから成果物(Artifact)ダウンロードする

  2. [AppCenter]App Centerで新しい新しいリリースを作成する

    image.png

    1. ビルドバージョンを指定する。最初のApp Centerバージョンなので"1"を指定する。

      image.png

    2. Notesにテスターへの文言を記載する。ここでは「it's Crashing?(クラッシュしていますか?)」と記載した。

      image.png

    3. 配布先を指定する。(ここでは、Collaborators(共同作業者)というビルトイングループを選んだ)

      image.png

    4. 配布する。

      image.png

      対象者には、メールで通知が届く。

  3. テスト

    メールのリンクを開くと、アプリをダウンロードして使用できる。他の情報は確認できずに、テスターとしてダウンロードできる。

    ダウンロードしたアプリケーションをクラッシュさせると、App Centerにその情報が反映されることを確認できる。GitHub上で、Pull Requestを出すことも可能。(デモでは、メッセージを表示するようなプルリクエストをGitHub上で作成していた)

7. ロードマップ

App Center Azure DevOps task for Deploy

Azure DevOpsのPipelineがApp Centerに接続される

Supporting automatic updates with MSIX

MSIXによる自動更新のサポート

.NET Core 3 CLI cross-platform aps

.NET Core 3 CLIでのクロスプラットフォームアプリケーション

Better build + test support directly in App Center

App Centerでビルドとテストを直接行えるように

MBaaS for Desktop + Mobile apps

デスクトップとモバイルアプリ向けのMBaasの提供

WinAppDriver support for automatic UI testing

WindowsデスクトップアプリケーションのUI自動テスト

Windows React Native with CodePush

Windows React NativeをCodePush対応に

Feedback?

https://github.com/microsoft/appcenter

リソース

Repo for this talk: https://github.com/diverdan92/DotNetConf2019

More advanced talk & repo: https://www.youtube.com/watch?v=vc2edJW34Ps
https://aka.ms/devops4clientapps

MSIX Packaging:
https://docs.microsoft.com/en-us/windows/msix/overview
https://docs.microsoft.com/en-us/windows/msix/desktop/desktop-to-uwp-packaging-dot-net

Publishing Optimizations:
https://www.hanselman.com/blog/MakingATinyNETCore30EntirelySelfcontainedSingleExecutable.aspx

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした