GrapeCity.devlog

グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の最新情報をお届けします。製品のTIPSや発売情報、イベントのお知らせなどをいち早く発信中です。

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

皆さん、Visual Studio Team Services(VSTS)使っていますか?

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

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>

ソース管理への追加

ここまででアプリは完成です。アプリのソースをVSTSのGitリポジトリに追加します。Visual Studioの右下にある[ソース管理に追加]→[Git]を選択してチームエクスプローラーからVSTSにプッシュします。

f:id:GrapeCity_dev:20180424102638p:plain:w300 f:id:GrapeCity_dev:20180424103023p:plain:w300

継続的デプロイの設定

チームエクスプローラーから[継続的配信]を選択します。

f:id:GrapeCity_dev:20180424103928p:plain:w300

[OK]をクリックします。 f:id:GrapeCity_dev:20180424104310p:plain:w600

継続的配信の構成が開始されます。完了すると以下のメッセージが表示されます。

f:id:GrapeCity_dev:20180424105007p:plain:w600

VSTSの設定

VSTSでビルド定義を参照します。デフォルトではアプリに追加したNuget.configをレストアの際に参照するように設定されていないのでステータスが「failed」になっています。

f:id:GrapeCity_dev:20180424111040p:plain:w600

ビルド定義を編集します。ビルドプロセスのRestoreを選択して以下のようにアプリに追加したNuget.configを参照するように変更します。

f:id:GrapeCity_dev:20180424111416p:plain:w600

[Save & queue]をクリックして確認してみます。ビルドが成功していればOKです!

f:id:GrapeCity_dev:20180424112347p:plain:w600

デプロイの結果はReleaseタブから確認できます。

f:id:GrapeCity_dev:20180424113420p:plain:w600

Azureポータルからも確認できます。

f:id:GrapeCity_dev:20180424113447p:plain:w600

ブラウザで動作確認

デプロイしたアプリをブラウザから確認してみます。

f:id:GrapeCity_dev:20180424114031p:plain

正常に動作しているようですね!これでVisual Studioでコードを修正してVSTSのGitリポジトリにプッシュすれば自動的にビルドとデプロイがVSTSで実施されます。

最後に

ComponentOne Studio for ASP.NET MVCは2018/05/01よりランタイムフリーになります。作成したアプリケーションをクラウドサービスやオンプレミスのサーバーで運用する際によりコストを気にせず使えるようになります。

今回紹介したFlexChart以外にも多くのコントロールを用意しています。動作は以下のサンプルで確認できます。是非お試しください!

ComponentOne デモアプリケーション | Developer Tools - グレープシティ株式会社

Copyright © GrapeCity, Inc. All Rights Reserved.