Visual Studio Team Servicesを使用してASP.NET Core MVCアプリをデプロイする

皆さん、Visual Studio Team Services（VSTS）使っていますか？

今回はComponentOne Studio for ASP.NET MVCのFlexChartコントロールを利用したASP.NET Core MVCアプリを、VSTSを使用してAzure App Service（Web Apps）へ継続的にデプロイする方法を紹介します。

ASP.NET Core MVCアプリの作成
データソースの作成
FlexChartコントロールの追加
Nuget.configの追加
ソース管理への追加
継続的デプロイの設定
VSTSの設定
ブラウザで動作確認
最後に

ASP.NET Core MVCアプリの作成

まずはASP.NET Core MVCアプリを作成します。ComponentOne Studio for ASP.NET MVCではASP.NET MVCとASP.NET Core MVCで利用できるプロジェクトテンプレートが提供されています。

f:id:GrapeCity_dev:20180425131851p:plain:w600

このテンプレートを利用してComponentOne Studio for ASP.NET MVCを使用したアプリを簡単に作成することができます。早速使ってみましょう。

Visual Studioで［ファイル］→［新規作成］→［プロジェクト］を選択します。さらにインストール済みテンプレートから、［C1］→［Web］→［C1 ASP.NET Core MVC アプリケーション (.NETCore) (C#)］を選択します。

f:id:GrapeCity_dev:20180423160932p:plain:w600

続いて「Razor ページ」を選択します。

f:id:GrapeCity_dev:20180423161920p:plain:w600

次にライセンスキーを設定します。［ツール］メニューまたはソリューションエクスプローラーでソリューションを右クリックして表示されるコンテキストメニューから、［C1 ASP.NET Coreランタイムライセンスを生成］をクリックします。

f:id:GrapeCity_dev:20180423162558p:plain:w600

データソースの作成

このアプリではFlexChartコントロールを使用します。このコントロールで使うデータソースを作成します。プロジェクトを右クリックして表示されるコンテキストメニューから、［追加］→［新しいフォルダー］をクリックして「Models」フォルダーを追加します。

f:id:GrapeCity_dev:20180423165616p:plain:w300

Modelsフォルダーに新しいクラスFruit.csを追加します。

Fruit.cs

namespace C1MvcFlexChart.Models
{
    public class Fruit
    {
        public string Name { get; set; }
        public int MarPrice { get; set; }
        public int AprPrice { get; set; }
        public int MayPrice { get; set; }

        private IEnumerable<FruitSale> _sales = null;
        public IEnumerable<FruitSale> Sales
        {
            get
            {
                if (_sales == null)
                {
                    _sales = GetSales();
                }
                return _sales;
            }
        }

        public static IEnumerable<Fruit> GetFruitsSales()
        {
            var rand = new Random(0);
            var fruits = new[] { "オレンジ", "リンゴ", "梨", "バナナ", "パイナップル" };
            var list = fruits.Select((f, i) =>
            {
                int mar = rand.Next(1, 6);
                int apr = rand.Next(1, 9);
                int may = rand.Next(1, 6);
                return new Fruit { Name = f, MarPrice = mar, AprPrice = apr, MayPrice = may };
            });

            return list;
        }

        private IEnumerable<FruitSale> GetSales()
        {
            var rand = new Random(0);
            var today = DateTime.Now.Date;
            var firstDay = new DateTime(today.Year - 1, 3, 1);
            var dataTimes = new List<DateTime>();
            for (int i = 0; i < 92; i++)
            {
                dataTimes.Add(firstDay.AddDays(i + 1));
            }
            var list = dataTimes.Select((date, i) => {
                FruitSale sale = new FruitSale { Date = date };
                sale.SalesInChina = rand.Next(150, 250);
                if (i % 30 != 0)
                {
                    sale.SalesInUSA = rand.Next(100, 200);
                    sale.SalesInJapan = rand.Next(0, 100);
                }
                else
                {
                    sale.SalesInUSA = null;
                    sale.SalesInJapan = null;
                }

                return sale;
            });

            return list;
        }
    }

    public class FruitSale
    {
        public DateTime Date { get; set; }
        public int? SalesInUSA { get; set; }
        public int? SalesInChina { get; set; }
        public int? SalesInJapan { get; set; }
    }
}

FlexChartコントロールの追加

ソリューションエクスプローラーで、［Pages］フォルダを右クリックして表示されるコンテキストメニューから［追加］→［新しい項目］→［Razor ページ］を選択してページFlexChart.cshtmlを追加します。

f:id:GrapeCity_dev:20180423173117p:plain:w600

FlexChart.cshtml

@page
@model FlexChartModel
@{
}
<c1-flex-chart id="flexChart" binding-x="Name">
    <c1-items-source source-collection="@Model.FruitsSales"></c1-items-source>
    <c1-flex-chart-series binding="MarPrice">
    </c1-flex-chart-series>
    <c1-flex-chart-series binding="AprPrice">
    </c1-flex-chart-series>
    <c1-flex-chart-series binding="MayPrice">
    </c1-flex-chart-series>
</c1-flex-chart>

FlexChart.cshtml.cs

using System.Collections.Generic;
using C1MvcFlexChart.Models;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace C1MvcFlexChart.Pages
{
    public class FlexChartModel : PageModel
    {
        public readonly IEnumerable<Fruit> FruitsSales = Fruit.GetFruitsSales();

        public void OnGet()
        {
        }
    }
}

Nuget.configの追加

ここまででアプリは完成！…といいたいところですが、最後にプロジェクトにNuget.configを追加しておきます。これはVSTSでNuGetパッケージを参照する際に必要な設定を含めます。これがないとVSTSでビルドに失敗しますので必ず設定してください。

f:id:GrapeCity_dev:20180424095724p:plain:w300

Nuget.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <packageSources>
    <add key="nuget.org" value="https://api.nuget.org/v3/index.json" />
    <add key="GrapeCity Nuget Server" value="http://nuget.c1.grapecity.com/nuget" />
  </packageSources>
</configuration>