チュートリアル:マルチサービス Service Fabric Mesh アプリを作成、デバッグ、デプロイ、およびアップグレードする

[アーティクル]
09/18/2018

重要

Azure Service Fabric Mesh のプレビューは廃止されました。 Service Fabric Mesh API を介した新しいデプロイは許可されなくなります。既存のデプロイのサポートは、2021 年 4 月 28 日まで継続されます。

詳細については、「Azure Service Fabric Mesh のプレビューの廃止」を参照してください。

このチュートリアルは、シリーズの第 1 部です。 Visual Studio を使用して、ASP.NET Web フロントエンドと ASP.NET Core Web API バックエンドサービスを含む Azure Service Fabric Mesh アプリを作成する方法を学習します。次に、ローカル開発クラスターでアプリをデバッグします。アプリを Azure に発行してから、構成とコードを変更して、アプリをアップグレードします。最後に、使用していないものに課金されないように、未使用の Azure リソースをクリーンアップします。

完了すると、アプリライフサイクル管理のほとんどのフェーズを実施し、Service Fabric Mesh アプリでのサービス間呼び出しを示すアプリが作成されています。

To Do アプリケーションを手動で作成しない場合は、完成したアプリケーションのソースコードをダウンロードし、「アプリをローカルでデバッグする」に進んでください。

シリーズの第 1 部で学習する内容は次のとおりです。

Visual Studio を使用して、ASP.NET Web フロントエンドで構成される Service Fabric Mesh アプリを作成する。
To Do 項目を表すモデルを作成する。
バックエンドサービスを作成し、そこからデータを取得する。
バックエンドサービスのモデルビューコントローラーパターンの一部としてコントローラーと DataContext を追加する。
To Do 項目を表示する Web ページを作成する。
バックエンドサービスを識別する環境変数を作成する。

このチュートリアルシリーズで学習する内容は次のとおりです。

Visual Studio で Service Fabric Mesh アプリを作成する
ローカル開発クラスター内で実行されている Service Fabric Mesh アプリをデバッグする
Service Fabric Mesh アプリをデプロイする
Service Fabric Mesh アプリをアップグレードする
Service Fabric Mesh リソースをクリーンアップする

Service Fabric mesh は現在プレビューの段階です。プレビュー版は、追加使用条件に同意することを条件に使用できます。この機能の一部の側面は、一般公開 (GA) 前に変更される可能性があります。

前提条件

このチュートリアルを開始する前に

Azure サブスクリプションをお持ちでない場合は、開始する前に無料アカウントを作成できます。
Service Fabric ランタイム、SDK、Docker、Visual Studio 2017 がインストールされた開発環境の設定が済んでいることを確認します。

Visual Studio で Service Fabric Mesh プロジェクトを作成する

Visual Studio を実行し、 [ファイル]>[新規]>[プロジェクト] の順に選択します。

[新しいプロジェクト] ダイアログの上部にある [検索] ボックスに「mesh」と入力します。 [Service Fabric Mesh Application]\(Service Fabric Mesh アプリケーション\) テンプレートを選択します (テンプレートが表示されない場合は、開発環境の設定に関するページの説明に従って、Mesh SDK と VS Tools プレビューをインストールしたことを確認してください)。

[名前] ボックスに「todolistapp」と入力し、 [場所] ボックスにプロジェクトファイルを格納する場所のフォルダーパスを設定します。

[ソリューションのディレクトリを作成する] がオンになっていることを確認し、 [OK] をクリックして Service Fabric mesh プロジェクトを作成します。

Service Fabric Mesh プロジェクトを作成する方法を示すスクリーンショット。

次は、 [新しい Service Fabric サービス] ダイアログが表示されます。

Web フロントエンドサービスを作成する

[新しい Service Fabric サービス] ダイアログで、プロジェクトの種類として [ASP.NET Core] を選択し、 [Container OS]\(コンテナー OS\) が [Windows] に設定されていることを確認します。

[サービス名] を「WebFrontEnd」に設定します。 [OK] をクリックして、ASP.NET Core サービスを作成します。

Visual Studio: 新しい Service Fabric mesh プロジェクトダイアログ

次は、[ASP.NET Core Web アプリケーション] ダイアログが表示されます。 [Web アプリケーション] を選択し、 [OK] をクリックします。

Web アプリケーションテンプレートが強調表示されているスクリーンショット。

これで、Service Fabric Mesh アプリケーションが用意できました。次は、To Do 情報のモデルを作成します。

To Do 項目のモデルを作成する

To Do 項目は、わかりやすくするためにメモリ内のリストに格納されます。 To Do 項目のクラスライブラリと、To Do 項目を保持するリストを作成します。このとき todolistapp ソリューションが読み込まれている状態の Visual Studio で、 [ファイル]>[追加]>[新しいプロジェクト] の順に選択します。

[新しいプロジェクトの追加] ダイアログの上部にある [検索] ボックスに「C# .net core class」と入力します。 [Class Library (.NET Core)]\(クラスライブラリ (.NET Core)\) テンプレートを選択します。

[名前] ボックスに「Model」と入力します。 [OK] をクリックして、クラスライブラリを作成します。

ソリューションエクスプローラーで、 [Model] の [Class1.cs] を右クリックし、 [名前の変更] を選択します。 ToDoItem.cs クラスの名前を変更します。すべての参照の名前を変更するかどうかの選択を求めるメッセージが表示されたときは、 [はい] をクリックします。

空の class ToDoItem の内容を次のコードで置き換えます。

public class ToDoItem
{
    public string Description { get; set; }
    public int Index { get; set; }
    public bool Completed { get; set; }

    public ToDoItem(string description)
    {
        Description = description;
        Index = 0;
    }

    public static ToDoItem Load(string description, int index, bool completed)
    {
        ToDoItem newItem = new ToDoItem(description)
        {
            Index = index,
            Completed = completed
        };

        return newItem;
    }
}

このクラスは、To Do 項目を表します。

Visual Studio で、 [Model] クラスライブラリを右クリックし、 [追加]>[クラス] の順に選択して、To Do 項目を保持するリストを作成します。 [新しい項目の追加] ダイアログボックスが表示されます。 [名前] を「ToDoList.cs」に設定し、 [追加] をクリックします。

ToDoList.cs 内の空の class ToDoList を次のコードで置き換えます。

public class ToDoList
{
    private List<ToDoItem> _items;

    public string Name { get; set; }
    public IEnumerable<ToDoItem> Items { get => _items; }

    public ToDoList(string name)
    {
        Name = name;
        _items = new List<ToDoItem>();
    }

    public ToDoItem Add(string description)
    {
        var item = new ToDoItem(description);
        _items.Add(item);
        item.Index = _items.IndexOf(item);
        return item;
    }
    public void Add(ToDoItem item)
    {
        _items.Add(item);
        item.Index = _items.Count - 1;
    }

    public ToDoItem RemoveAt(int index)
    {
        if (index >= 0 && index < _items.Count)
        {
            var result = _items[index];
            _items.RemoveAt(index);

            // Reorder items
            for (int i = index; i < _items.Count; i++)
            {
                _items[i].Index = i;
            }

            return result;
        }
        else
        {
            throw new IndexOutOfRangeException();
        }
    }
}

次は、To Do 項目を追跡する Service Fabric サービスを作成します。

バックエンドサービスを作成する

Visual Studio の [ソリューションエクスプローラー] ウィンドウで [todolistapp] を右クリックし、 [追加]>[新しい Service Fabric サービス] の順にクリックします。

[新しい Service Fabric サービス] ダイアログが表示されます。プロジェクトの種類として [ASP.NET Core] を選択し、 [Container OS]\(コンテナー OS\) が [Windows] に設定されていることを確認します。 [サービス名] を「ToDoService」に設定します。 [OK] をクリックして、ASP.NET Core サービスを作成します。

次に、 [新しい ASP.NET Core Web アプリケーション] ダイアログが表示されます。ダイアログ内で [API] を選択し、 [OK] を選択すると、サービスのプロジェクトがソリューションに追加されます。

Visual Studio: 新しい ASP.NET Core アプリケーション

バックエンドサービスは UI を提供していないので、サービスを起動した際のブラウザーの起動はオフにします。 ソリューションエクスプローラーで ToDoService を右クリックし、 [プロパティ] を選択します。表示された [プロパティ] ウィンドウで、左側の [デバッグ] タブを選択し、 [ブラウザーの起動] をオフにします。 Ctrl + S キーを押して、変更を保存します。

このサービスは To Do 情報を維持するので、Model クラスライブラリへの参照を追加します。ソリューションエクスプローラーで [ToDoService] を右クリックし、 [追加]>[参照] の順に選択します。 [参照マネージャー] ダイアログボックスが表示されます。

[参照マネージャー] で、 [Model] チェックボックスをオンにし、 [OK] をクリックします。

データコンテキストを追加する

次に、データモデルからのデータの提供を調整するデータコンテキストを作成します。

データコンテキストクラスを追加するには、ソリューションエクスプローラーで [ToDoService] を右クリックし、 [追加]>[クラス] の順に選択します。表示される [新しい項目の追加] ダイアログで、 [クラス] が選択されていることを確認し、 [名前] を「DataContext.cs」に設定して [追加] をクリックします。

DataContext.cs 内の空の class DataContext の内容を次のコードで置き換えます。

public static class DataContext
{
    public static Model.ToDoList ToDoList { get; } = new Model.ToDoList("Azure learning List");

    static DataContext()
    {
        // Seed to-do list
        ToDoList.Add(Model.ToDoItem.Load("Learn about microservices", 0, true));
        ToDoList.Add(Model.ToDoItem.Load("Learn about Service Fabric", 1, true));
        ToDoList.Add(Model.ToDoItem.Load("Learn about Service Fabric Mesh", 2, false));
    }
}

この最小限のデータコンテキストでは、サンプルの To Do 項目がいくつか入力され、それらにアクセスできるようになります。

コントローラーを追加する

ToDoService プロジェクトが作成されたときに、HTTP 要求を処理して HTTP 応答を作成する既定のコントローラーが、テンプレートによって提供されます。 ソリューションエクスプローラー の [ToDoService] で、 [Controllers] フォルダーを展開し、 [ValuesController.cs] ファイルを表示します。

[ValuesController.cs] を右クリックして、 [名前の変更] をクリックします。ファイルの名前を ToDoController.cs に変更します。すべての参照の名前を変更するかどうかを尋ねるメッセージが表示された場合は、 [はい] をクリックします。

ToDoController.cs ファイルを開き、class ToDoController の内容を次のコードで置き換えます。

[Route("api/[controller]")]
public class ToDoController : Controller
{
    // GET api/todo
    [HttpGet]
    public IEnumerable<Model.ToDoItem> Get()
    {
        return DataContext.ToDoList.Items;
    }

    // GET api/todo/5
    [HttpGet("{index}")]
    public Model.ToDoItem Get(int index)
    {
        return DataContext.ToDoList.Items.ElementAt(index);
    }

    //// POST api/values
    //[HttpPost]
    //public void Post([FromBody]string value)
    //{
    //}

    //// PUT api/values/5
    //[HttpPut("{id}")]
    //public void Put(int id, [FromBody]string value)
    //{
    //}

    // DELETE api/values/5
    [HttpDelete("{index}")]
    public void Delete(int index)
    {
    }
}

このチュートリアルは別のサービスとの通信に重点を置いているので、追加、削除などは実装しません。

To Do 項目を表示する Web ページを作成する

バックエンドサービスを実装できたら、サービスが提供する To Do 項目を表示するための Web サイトのコードを作成します。次の手順は WebFrontEnd プロジェクトで実施します。

To Do 項目を表示する Web ページでは、ToDoItem クラスとリストへのアクセスが必要です。 ソリューションエクスプローラー で、 [WebFrontEnd] を右クリックし、 [追加]>[参照] を選択して、Model プロジェクトへの参照を追加します。 [参照マネージャー] ダイアログボックスが表示されます。

[参照マネージャー] で、 [Model] チェックボックスをオンにし、 [OK] をクリックします。

ソリューションエクスプローラーで、 [WebFrontEnd]>[Pages]>[Index.cshtml] の順に移動して、Index.cshtml ページを開きます。 Index.cshtml を開きます。

ファイル全体の内容を、To Do 項目を表示するためのシンプルなテーブルを定義する次の HTML で置き換えます。

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div>
    <table class="table-bordered">
        <thead>
            <tr>
                <th>Description</th>
                <th>Done?</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.Items)
            {
                <tr>
                    <td>@item.Description</td>
                    <td>@item.Completed</td>
                </tr>
            }
        </tbody>
    </table>
</div>

ソリューションエクスプローラー で、Index.cshtml ファイルのドロップダウンアイコンをクリックし、Index.cshtml.cs を開きます。

Index.cshtml.cs の上部に using System.Net.Http; を追加します。

public class IndexModel の内容を次のコードで置き換えます。

public class IndexModel : PageModel
{
    public Model.ToDoItem[] Items = new Model.ToDoItem[] { };

    public void OnGet()
    {
        HttpClient client = new HttpClient();

        using (HttpResponseMessage response = client.GetAsync(backendUrl).GetAwaiter().GetResult())
        {
            if (response.StatusCode == System.Net.HttpStatusCode.OK)
            {
                Items = Newtonsoft.Json.JsonConvert.DeserializeObject<Model.ToDoItem[]>(response.Content.ReadAsStringAsync().Result);
            }
        }
    }

    private static string backendDNSName = $"{Environment.GetEnvironmentVariable("ToDoServiceName")}";
    private static Uri backendUrl = new Uri($"http://{backendDNSName}:{Environment.GetEnvironmentVariable("ApiHostPort")}/api/todo");
}

環境変数を作成する

バックエンドサービスの URL は、そのサービスと通信するために必要です。このチュートリアルでは次のコードの抜粋 (IndexModel の一部として上部で定義済みです) を使用し、URL を構成する環境変数を読み取ります。

private static string backendDNSName = $"{Environment.GetEnvironmentVariable("ToDoServiceName")}";
private static Uri backendUrl = new Uri($"http://{backendDNSName}:{Environment.GetEnvironmentVariable("ApiHostPort")}/api/todo");

URL は、サービス名とポートで構成されます。これらのすべての情報は、ToDoService プロジェクトの service.yaml ファイルに存在します。

重要

次の手順では、YAML ファイルが変更されます。 service.yaml ファイル内の変数をインデントするには、タブではなくスペースを使用する必要があります。そうしないと、コンパイルができません。 Visual Studio では、環境変数を作成すると、タブが挿入されることがあります。タブはすべてスペースに置き換えてください。 build のデバッグ出力でエラーが表示されてもアプリは起動します。ただし、タブをスペースに変換して再びビルドしないと起動しません。 service.yaml ファイルにタブが含まれないようにするには、Visual Studio エディターで [Edit AdvancedView White Space]\(詳細>ビューの空白を編集\)> で空白を表示できます。 service.yaml ファイルは英語ロケールを使用して処理されることに注意してください。たとえば、小数点区切り文字を使用する必要がある場合は、コンマではなくピリオドを使用します。

ソリューションエクスプローラーで、 [ToDoService] プロジェクトに移動し、 [Service Resources]\(サービスのリソース\)>[service.yaml] の順に開きます。

図 1 - ToDoService の service.yaml ファイル

サービス名である ToDoService は、services: の次にあります。上の図の (1) を参照してください。

ポートである 80 は、endpoints: の次にあります。上の図の (2) を参照してください。プロジェクトのポート番号はおそらく異なります。

次に、サービス名とポート番号を表す環境変数を WebFrontEnd プロジェクト内で定義する必要があります。これは、バックエンドサービスを呼び出せるようにするためです。

ソリューションエクスプローラーで、WebFrontEnd>Service Resources>service.yaml に移動して、バックエンドサービスアドレスを指定する変数を定義します。

service.yaml ファイルで、次に示す変数を environmentVariables: の下に追加します (まず # を削除してから、environmentVariables: をコメント解除する必要があります)。間隔が重要であるため、追加する変数は他の変数と合わせて environmentVariables: の下に揃えてください。 ApiHostPort の値が、ToDoService の service.yaml ファイルで以前に確認した ToDoServiceListener のポート値と一致することが非常に重要です。

- name: ApiHostPort
  value: 
- name: ToDoServiceName
  value: ToDoService

ヒント

ToDoServiceName の値の指定には次の 2 つの方法があります。

サービス名のみ。これは、Windows 10 のデバッグシナリオでも、サービスを Azure Service Fabric Mesh にデプロイする場合にも解決されます。
servicename.appname として完全修飾。これは、Windows 10 でのデバッグ時にのみ機能します。サービスの解決のためにはサービス名のみの使用をお勧めします。

WebFrontEnd プロジェクトの service.yaml ファイルは次のようなものにする必要がありますが、ApiHostPort の値は異なるものになると考えられます。

WebFrontEnd プロジェクトの Service.yaml

これで、Service Fabric Mesh アプリケーションのイメージを、バックエンドの Web サービスと共に、ローカルクラスターにビルドおよびデプロイする準備が整いました。

次のステップ

チュートリアルのこの部分で学習した内容は次のとおりです。

ASP.NET Web フロントエンドで構成される Service Fabric Mesh アプリを作成する。
To Do 項目を表すモデルを作成する。
バックエンドサービスを作成し、そこからデータを取得する。
バックエンドサービスのモデルビューコントローラーパターンの一部としてコントローラーと DataContext を追加する。
To Do 項目を表示する Web ページを作成する。
バックエンドサービスを識別する環境変数を作成する。

次のチュートリアルに進みます。

ローカル開発クラスター内で実行されている Service Fabric Mesh アプリケーションをデバッグする