Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

ASP.NET CoreとComponentOneを使って、マルチプラットフォームで動作するWebアプリを作成しよう!【Windows編】

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2018/03/16 14:00

 ASP.NET Coreは、ASP.NET MVCをベースとして再設計されたマルチプラットフォームで利用可能なWebアプリの開発が行えるオープンソースの基盤技術です。しかし、実際のWebアプリを作成やアプリをホストするための方法は、それぞれのプラットフォームによって異なります。また、グレープシティの「ComponentOne Studio for ASP.NET MVC」もASP.NET Core 2.0をサポートしています。

 今回より2回に渡って、以下のポイントについて紹介したいと思います。

  • グレープシティの「ComponentOne Studio for ASP.NET MVC」をASP.NET Core 2.0で使用する方法
  • クロスプラットフォームで動作するWebアプリの作成
  • プラットフォーム毎の開発からWebサーバーにホストするまでの手順

 本記事では、「ComponentOne Studio for ASP.NET MVC」を使用した、Windows環境におけるASP.NET Coreアプリの開発手順について紹介します。

対象読者

  • C#/ASP.NET MVCなどを使用したWebアプリの開発経験者

 ASP.NET Core 2.0を使用したWebアプリの開発については、以下の記事も参考にしてください。

必要な環境

 本稿のサンプルコードを実行する場合は、ComponentOne Studio for ASP.NET MVCのインストールが必要です。

 ComponentOne Studio for ASP.NET MVCは、以下のページの矢印にあるリンクからトライアル版がダウンロードできます。

ComponentOne Studioサイト
ComponentOne Studioサイト

今回利用するコンポーネント

 今回、ComponentOne Studio for ASP.NET MVCより、チャートやゲージといった視覚化に特化したコントロールからInputにある入力系コントロールを使用したWebアプリのサンプルを作成します。

FlexChart for ASP.NET MVC

 FlexChartは、Webアプリケーション上でさまざまな数値データを視覚化する場合に利用できる高機能なコントロールです。

 データのコレクションがあれば、縦棒、横棒、バブル、ローソク足、折れ線、散布図といった、さまざまなチャートを非常に簡単な手順で表示することができます。

FlexChart
FlexChart

Guages for ASP.NET MVC

 Guagesは、数値の割合・比率などを視覚化して表現するためのユニークなコントロールです。

 比率・割合が視覚化されることで、単純な数値表現に比べて直感的に理解できます。

Guages
Guages

InputNumber(Input for ASP.NET MVC)

 InputNumberは、数値を入力するためのコントロールです。

 通常のテキストで整数値を入力するほか、スピンボタン(+、-のボタン)を使用しての入力値の増減や、通貨、パーセンテージなど書式設定されたテキストボックスでの入力もできます。

InputNumber
InputNumber

InputDateTime(Input for ASP.NET MVC)

 InputDatetimeは日時を入力するためのコントロールです。

 入力方法は書式設定されたテキストボックスでの入力やドロップダウンボックスに表示されるカレンダーコントロールから選択して入力することができます。

 他にも日付入力に特化したInputDate、時間入力に特化したInputTimeなどのコントロールもあります。

InputDatetime(日付選択画面)
InputDatetime(日付選択画面)
InputDatetime(時刻選択画面)
InputDatetime(時刻選択画面)

MultiAutoComplete(Input for ASP.NET MVC)

 MultiAutoCompleteは、カスタムオブジェクトの項目や文字列の項目などのリストから複数項目を選択することができます。

 コントロール名のように、入力フィールドにテキストを入力すると該当する項目のリストを表示します。

 該当する項目をリストから選択すると入力フィールドに該当項目が追加されます。

Guages
Guages

クロスプラットフォームで動作するWebアプリ

 前述の通り、ASP.NET Coreで作成したWebアプリはWindows、Mac、Linuxのクロスプラットフォームで動作させることが可能です。

 これは、マネージコードで作成された「Kestrel」と呼ばれるWebサーバー機能が、.NET Coreでホストされる単一のコンソールアプリとして実装されているためです。

 ただし、Kestrelは多くのWebサーバーが持つ、以下のような機能をサポートしないため、ホストするためにはリバースプロキシーとしてIIS、Nginx、Apacheなどを利用することになります。

  • 単一サーバー上に同じIPとポートを共有する複数アプリが存在する場合
  • Webサーバーを公開した際のセキュリティ上の制約を行いたい場合
  • 既存のインフラとの統合が必要な場合
  • 負荷分散およびSSLのセットアップの簡略化を行いたい場合
リバースプロキシーとKestrel
リバースプロキシーとKestrel

 本稿では、IISを利用したホスティング構成を解説します。

使用するWebアプリについて

 今回のサンプルとして利用するWebアプリは、ASP.NET CoreのASP.NET MVCプロジェクトのテンプレートを再利用して作成します。

Modelクラス

 今回のアプリは、表示に利用するサンプルデータが必要になります。

 そこで、プロジェクトのModelフォルダー内に以下のようなSampleModelクラスを追加します。

using System;
using System.Collections.Generic;
using System.Linq;

namespace C101MvcApp.Models
{
    // Chart用サンプルエンティティ
    public class DailySale
    {
        public DateTime Date { get; set; }
        public int? TotalSales { get; set; }
        public int? AsiaSales { get; set; }
        public int? JapanSales { get; set; }
    }

    // サンプルモデルクラス
    public class SampleModel
    {
        // チャートに表示する値は乱数から作成
        private static readonly Random rand = new Random(0);

        // チャートに表示するデータ
        public IEnumerable<DailySale> Sales { get; } = Enumerable.Range(0, 92)
            .Select(index => new DailySale()
            {
                Date       = new DateTime(DateTime.Today.Year, 1, 1).AddDays(index),
                JapanSales = rand.Next(  0, 100),
                AsiaSales  = rand.Next(100, 200),
                TotalSales = rand.Next(200, 300)
            });

        // Guageに表示するデータ
        public int GuageValue { get; set; } = 30;

        // InputNumberのデータ
        public int InputValue { get; set; } = 567;

        // InputDatetimeのデータ
        public DateTime InputDatetime { get; set; } = DateTime.Now;

        // MultiAutoCompleteのデータ
        public List<string> Todofuken { get; set; } = new List<string>
        {
            "Hokkaido",
            "Aomori", "Iwate", "Miyagi", "Akita", "Yamagata", "Fukushima",
            "Ibaraki", "Tochigi", "Gunma", "Saitama", "Chiba", "Tokyo", "Kanagawa",
            "Niigata", "Toyama", "Ishikawa", "Fukui", "Yamanashi", "Nagano", "Gifu", "Shizuoka", "Aichi",
            "Mie", "Shiga", "Kyoto", "Osaka", "Hyogo", "Nara", "Wakayama",
            "Tottori", "Shimane", "Okayama", "Hiroshima", "Yamaguchi",
            "Tokushima", "Kagawa", "Ehime", "KOchi",
            "Fukuoka", "Saga", "Nagasaki", "Kumamoto", "Oita", "Miyazaki", "Kagoshima", "Okinawa",
        };

    }
}

Controllerクラス

 今回のアプリはテンプレートで作成したアプリを極力再利用したいと思います。

 Controllersフォルダー内にある、テンプレートで自動生成されたHomeControllerクラスのアクションメソッドIndexメソッドを、以下のように加工します。

        public IActionResult Index()
        {
            var source = new SampleModel();
            return View(source);
        }

View

 Views\Homeフォルダー内にある、こちらもテンプレート自動生成されたIndex.cshtmlファイルを以下のように加工します。

@model SampleModel
@{
    ViewData["Title"] = "ComponentOne MVC Page";
}
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<Style>
    .chart-title {
        background-color: darkblue;
    }

    .guage-title {
        background-color: darkgreen;
    }

    .number-title {
        background-color: darkcyan;
    }

    .calendar-title {
        background-color: darkred;
    }

    .autocomplete-title {
        background-color: darkgoldenrod;
    }


    .title {
        color: white;
    }

    h2 {
        font-size: 30px;
        font-weight: 700;
        line-height: 30px;
        margin-bottom: 50px;
        text-transform: uppercase !important;
        font-family: Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif;
    }

    .wrap {
        display: flex;
        flex-wrap: wrap;
    }

    .control-item {
        margin: auto;
    }
</Style>

<div class="row wrap">
    <div class="col-md-4 chart-title title">
        <h2>FlexChart</h2>
    </div>
    <div class="col-md-8 control-item">
        <c1-flex-chart binding-x="Date" chart-type="Area">
            <c1-items-source source-collection="Model.Sales" />
            <c1-flex-chart-series binding="TotalSales" name="総売り上げ" />
            <c1-flex-chart-series binding="AsiaSales" name="アジアの売り上げ" />
            <c1-flex-chart-series binding="JapanSales" name="日本の売り上げ" />
        </c1-flex-chart>
    </div>
</div>

<div class="row wrap">
    <div class="col-md-4 guage-title title">
        <h2>Guage</h2>
    </div>
    <div class="col-md-8 control-item">
        <c1-radial-gauge min="0" max="100"
                         start-angle="-20" sweep-angle="220"
                         width="500" height="200"
                         show-text="None" value="Model.GuageValue">
            <c1-gauge-range min="0" max="40" color="red" />
            <c1-gauge-range min="40" max="80" color="yellow" />
            <c1-gauge-range min="80" max="100" color="green" />
        </c1-radial-gauge>
    </div>
</div>


<div class="row wrap">
    <div class="col-md-4 number-title title">
        <h2>InputNumber</h2>
    </div>
    <div class="col-md-8 control-item">
        <c1-input-number value="Model.InputValue"
                         show-spinner="true"
                         step="10" format="n0"
                         min="0" max="1000"
                         placeholder="1~1000までの値を入力してください。">
        </c1-input-number>
    </div>
</div>

<div class="row wrap">
    <div class="col-md-4 calendar-title title">
        <h2>InputDateTime</h2>
    </div>
    <div class="col-md-8 control-item">
        <c1-input-date value="Model.InputDatetime"
                       min="DateTime.Today.AddYears(-1)"
                       max="DateTime.Today.AddYears(1)">
        </c1-input-date>
    </div>
</div>

<div class="row wrap">
    <div class="col-md-4 autocomplete-title title">
        <h2>MultiAutoComplete</h2>
    </div>
    <div class="col-md-8 control-item">
        <c1-multi-auto-complete selected-index="12"
                                max-selected-items="5">
            <c1-items-source source-collection="Model.Todofuken" />
        </c1-multi-auto-complete>
    </div>
</div>

ComponentOne Studio for ASP.NET MVCのプログラミングについて

 ComponentOne Studio for ASP.NET MVCでは、各コントロールをTag Helperで表現できます。つまり、デザイナーなどがViewの作成を行う際、従来行われていたC#ライクなRazor構文を習得していなくとも、HTMLと同様のタグを用いてコーディングできるため、高機能なコントロールを用いた表現を手軽に作成することができます。

<c1-flex-chart binding-x="Date" chart-type="Area">
    <c1-items-source source-collection="Model.Sales" />
    <c1-flex-chart-series binding="TotalSales" name="総売り上げ" />
    <c1-flex-chart-series binding="AsiaSales" name="アジアの売り上げ" />
    <c1-flex-chart-series binding="JapanSales" name="日本の売り上げ" />
</c1-flex-chart>

 Visual Studio 2017では、Tag HelperにおいてもIntellisenseによるコーディングのサポートが行われます。

 ComponentOne Studio for ASP.NET MVCの持つTag Helperを利用する場合には、Viewsフォルダーにある_ViewImports.cshtmlや、Views\Sharedフォルダーにある_Layout.cshtmlなどの共通で参照されるファイルの中に以下のような記述を追記することでIntellisenseが有効な状態でコーディングを行うことができます。

 後述する「C1 ASP.NET Core MVCプロジェクトテンプレート」のウィザードを使用してプロジェクトを作成すると、テンプレートの中でこれらの設定が行われています。

@addTagHelper *, C1.AspNetCore.Mvc
@addTagHelper *, C1.AspNetCore.Mvc.FlexSheet

 Intellisenseが利用できることで、コーディング中に要素名や属性名の入力補完が行われるので、必要なパラメータの設定を簡単に行うことができます。

図1 Tag HelperのIntellisense
図1 Tag HelperのIntellisense

 Razor構文によるコーディングに慣れている開発者の方は、従来通りのHtml Helperによるコーディングもサポートされています。

 ComponentOne Studio for ASP.NET MVCの Html Helperは、コントロールに対するパラメータの設定にGoFのBuilderパターンを使用します。

 具体的には、以下のようにメソッドチェーンによって、必要なパラメータを追加記述することで表示の制御を行うことができます。

@(Html.C1().FlexChart()
    .Bind("Date", Model.Sales)
    .ChartType(C1.Web.Mvc.Chart.ChartType.Area)
    .Series(sers =>
    {
        sers.Add().Binding("TotalSales").Name("総売り上げ");
        sers.Add().Binding("AsiaSales").Name("アジアの売り上げ");
        sers.Add().Binding("JapanSales").Name("日本の売り上げ");
    }))

Windows:IIS を使った構築方法

Windows環境におけるASP.NET Coreアプリの開発手順

 Windows環境であれば、Visual Studioを利用する方法が一番の近道です。

 加えて、ComponentOne Studio for ASP.NET MVCには、Visual Studio用のプロジェクトテンプレートが用意されており、高機能なコントロールが素早く利用できます。

 本稿ではVisual Studioを使用した開発手順についてご説明します。

Visual Studioによる開発手順

 Visual StudioでASP.NET Coreアプリの新しいプロジェクトの作成を行いましょう。

 ASP.NET Coreアプリは、「ASP.NET Coreアプリケーション」のプロジェクトテンプレートを使用して開発を行います。

 ComponentOne Studio for ASP.NET MVCは、通常の「ASP.NET Coreアプリケーション」プロジェクトテンプレートからでも利用できますが、あらかじめ必要な参照設定や必要となるコーディングなどが追記されていることから「C1 ASP.NET Core MVCアプリケーション(.NET Core)(C#)」のプロジェクトテンプレートを利用すると簡単に開発が始められます。 

 今回はこちらのプロジェクトテンプレートを使用します。

  1. Visual Studioを起動し、スタートページから「新しいプロジェクトの作成」を選択します。
  2. 続けて表示された、「新しいプロジェクトダイアログ」の左側のペインのツリーから「C1 > Web」を選択します。
  3. さらに続けて表示された、プロジェクトテンプレートの一覧から「C1 ASP.NET Core MVC アプリケーション(.NET Core)(C#)」を選択します。
新しいプロジェクトの作成
新しいプロジェクトの作成
  1. プロジェクト名やソリューション名に任意の名前(今回はC101MvcAppとします)を入力します。また、必要に応じて、プロジェクトを格納場所も入力します。
  2. 指定が終わったら「OK」ボタンをクリックします。

ComponentOne Studio for ASP.NET MVCアプリケーションウィザードの起動

 「新しいプロジェクトダイアログ」が閉じると入れ替わりに「ConponentOne ASP.NET MVC アプリケーションウィザード」が起動します。

ConponentOne ASP.NET MVC アプリケーションウィザード
ConponentOne ASP.NET MVC アプリケーションウィザード

 ウィザードでは、プロジェクトで使用するASP.NET Coreのバージョンやテンプレート内で使用するテーマの選択の他、追加で使用する設定・機能などが選択できます。

 「C1 ASP.NET Core MVCアプリケーション」プロジェクトには、あらかじめComponentOne Studio for ASP.NET MVCの一般的な設定は行われています。

 その他の追加となるシナリオや項目はこのウィザードに表示されるので、必要に応じて簡単に追加することができます。

 今回のアプリには追加となる項目は必要ありませんので、既定の設定のまま「OK」ボタンをクリックします。

ソースコードの追加、書き換え

 ソースコードは、前頁のソースコードを参考に、以下のようにファイルを追加・更新します。

  • プロジェクト内のModelsフォルダーにSampleModelクラスを追加
  • プロジェクト内のControllersフォルダーのHomeControllerクラスを開き、Indexメソッドを書き換え
  • プロジェクト内の「Views\Home」フォルダーのIndex.cshtmlを全面的に書き換え
ソリューション
ソリューション

ComponentOne Studio for ASP.NET MVCのライセンスの追加

 ComponentOne Studio for ASP.NET MVCを使用する場合、ライセンス情報の追加が必要になります。

 ライセンス情報の追加はソリューションエクスプローラーから行います。

 ComponentOne Studio for ASP.NET MVCのインストールが完了すると、ソリューションエクスプローラーからライセンス情報の追加を行うことができます。

 ソリューションエクスプローラーに表示される「ソリューション」を右クリックします。

 右クリックすると表示されるコンテキストメニューの中に「C1 ASP.NET Coreランタイムライセンスの生成」というメニューが追加されています。

 表示されたコンテキストメニューから「C1 ASP.NET Coreランタイムライセンスの生成」をクリックするとライセンスの生成が始まります。

ライセンスの生成
ライセンスの生成

 ライセンスの生成が成功すると図のようなダイアログが表示されます。

ライセンス生成の成功
ライセンス生成の成功

 ライセンス情報はプロジェクトのルート直下にあるStartup.csのコンストラクターにC1.Web.Mvc.LicenseManager.Keyへのキー設定が追加されます。

        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
            C1.Web.Mvc.LicenseManager.Key = "(埋め込まれたライセンスキー)";
        }

 以上、ソースの準備は完了です。修正に成功している場合は、F5キーなどで実行するとアプリケーションの表示が行われます。

実行成功
実行成功

インターネットインフォメーションサービス(IIS)を使用したASP.NET Coreアプリのホスティング

IISを使用したASP.NET Coreアプリのホスティング概要

 従来のASP.NETアプリケーションは、IISマネージャーからアプリケーションとして登録を行い、必要な設定を行うことで、IISのワーカープロセス上で動作することができました。

 しかし、前述のとおり、ASP.NET Coreクロスプラットフォームで動作できるWebサーバー機能を持つコンソールアプリケーションとして稼働します。

 つまり、Webアプリの実体はIISではなく、IISとは独立したコンソールアプリケーションにホストされて動作しています。

 IISからASP.NET Coreアプリを稼働させるためには、IISからHTTPを連携するように構成する必要があります。

 この一連のHTTPの連携を担うのが「ASP.NET Coreモジュール」とよばれるIIS連携モジュールです。

 ASP.NET Coreモジュールは、IIS内に組み込まれることで、ASP.NET Coreアプリへリクエストやレスポンスを連携するリバースプロキシーとしての機能を実現します。

 また、ASP.NET Coreアプリも、IISの持つセキュリティ機能を利用することで、Kestrelが持たない機能をカバーすることができます。

ASP.NET Core module
ASP.NET Core module

 それでは、以降で具体的な構築手順を確認しましょう。

必要なモジュールのセットアップ

 IISを利用するために、以下のセットアップを実施します。

  • IIS本体
  • .NET Core Windows Server Hosting Bundle

 IISを利用してASP.NET CoreのホスティングができるOSは以下の通りです。

プラットフォーム OS
サーバー Windows Server 2008 R2以降
クライアント Windows 7以降

 それぞれの有効化手順について以下に説明します。

クライアントOSにおけるIISの有効化

 クライアントOSの有効化は、コントロールパネルから「プログラム」>「プログラムと機能」>「Windows機能の有効化または無効化」から行うことができます。

 Windows 10では、設定から「アプリ」>「アプリと機能」>関連設定「プログラムと機能」>「Windows機能の有効化または無効化」から行うことができます。

 Windows機能の有効化または無効化をクリックして開くダイアログから、「インターネットインフォメーションサービス」を有効にします。

Windows機能の有効化または無効化
Windows機能の有効化または無効化

 「インターネットインフォメーションサービス」をクリックすると必要な機能が追加されます。

サーバーOSにおけるIISの有効化

 Windows Serverでは、「役割と機能の追加」から「Webサーバー(IIS)」にチェックを行います。

Web Serverの役割を追加
Web Serverの役割を追加

 チェックすると確認のダイアログが表示されますので、そのまま「機能の追加」ボタンをクリックします。

Webサーバーの機能追加確認ダイアログ
Webサーバーの機能追加確認ダイアログ

 ダイアログが閉じると元の「役割と機能の追加」画面に戻ります。

 その他には特に追加する機能はないので、「インストール」ボタンが有効になるまで「次へ」ボタンのクリックを行い、「インストール」ボタンをクリックします。

.NET Core Windows Serverホスティングバンドルをインストール

 セットアップ直後のIISには、.NET CoreやASP.NET Coreの実行に必要となるファイルはインストールされていません。

 そこで、IISを使用する場合はWindows Server専用のモジュール群である「.NET Core Windows Server ホスティングバンドル」のインストールを行います。

 .NET Core Windows Server ホスティングバンドルの実行には「Microsoft Visual C++ 2015 Redistributable Update 3」が必要になりますので、インストールしていない場合は先にこちらをインストールします。

.NET Core Windows Server ホスティングバンドルインストール画面
.NET Core Windows Server ホスティングバンドルインストール画面

 なお、筆者の環境では、図のように同意のためのチェックボックスが正しく表示されませんでしたが、マウスカーソルをチェックボックスのあたりに移動させると次の図のように表示することができました(Installボタンの上に注目)。

.NET Core Windows Server ホスティングバンドルインストール画面
.NET Core Windows Server ホスティングバンドルインストール画面

 すべてのインストールが完了したら、ここで一度、再起動を行います。

IISの構成

ASP.NET Coreアプリを配置先となるフォルダーを作成

 IISをホストしているサーバー上に、アプリの配置を行うためのフォルダーを作成します。

 フォルダーの作成には、以下の点を考慮する必要があります。

ログフォルダーの作成

 アプリ内でstdoutによるログ出力などが有効になっている場合は、ログを保持するためのlogsフォルダーの作成が必要になります。

 ただし、アプリ配置用のパッケージなどのペイロードに既にフォルダーが含まれる場合は必要ありません。

Visual StudioのWeb配置を利用するかどうか

 Web配置を利用する場合は、フォルダーに対して必要な権限設定を行う必要があります。

 併せて、Web配置用のツールをWeb Platform Installerか、またはダウンロードセンターからダウンロードして、インストールする必要があります。

 今回は配置先としてC:\CoreWebSite\AspNetMvcSiteというフォルダーを作成しました。

アプリケーションプールの設定

 ASP.NET Coreのアプリケーションは通常の.NET Frameworkを使用しないため、.NET Frameworkのロードが必要ありません。

 そこで、マネージコードを使用しないアプリケーションプールを作成します。

 .NET Frameworkの読み込みが行われても、.NET Coreのアプリは実行できるため、この設定は必須ではありません。

 IISマネージャーの「アプリケーションプール」を右クリックし、「アプリケーションプールの追加」をクリックします。

アプリケーションプールの追加
アプリケーションプールの追加

 .NET CLRバージョンを「マネージ コードなし」に設定し、「OK」をクリックします。

マネージコードなし
マネージコードなし

 次に、先ほど作成したフォルダーにアプリケーションプールからのアクセスを許可するため、アカウントの確認を行います。

 IISマネージャーからアプリケーションプールの一覧を表示し、作成したアプリケーションプールを選択します。

 選択したら、操作ペインにある「詳細設定」をクリックします。

アプリケーションプール
アプリケーションプール

 詳細設定を表示したら、「プロセスモデル」にある「ID」を確認します。

アプリケーションプール
アプリケーションプール

 作成したフォルダーに、IDに表示されたアカウントからの読み込み・実行権限が設定されているか確認を行います。

 設定されていない場合は、適切に実行できるようセキュリティ設定を行います。

Webサイトの作成

 IISマネージャーからWebサイトの作成を行います。

 Webサイトを右クリックし、「Webサイトの追加」をクリックします。

Webサイトの作成
Webサイトの作成

 Webサイトの追加ダイアログが表示されるので、以下の項目を設定します。

  • サイト名
  • アプリケーションプール(先ほど作成したもの)
  • 物理パス
Webサイトの設定
Webサイトの設定

 Webサイトの追加を行うと、既定のWebサイトとポートが重複するため、こちらをメインとして利用する場合は、Webサイト「Default Web Site」を停止します。

Webサイトの停止
Webサイトの停止

配置

 ASP.NET Coreのモジュールの配置方法は幾通りかありますが、Visual Studioを利用する場合は、通常のASP.NETと同様にWeb配置を構成する方法が推奨されています。

 他にもXCopyやRobocopy、PowerShellなどいくつかの方法でアプリを配置することが可能です。

 いずれの場合でもアプリそのものが実行中の場合、ファイルがロックされてしまうことががあるため、配置に失敗する場合があります。

 そのため、安全に配置するためには、以下の手順で行う必要があります。

  1. アプリケーションプールの停止
  2. ASP.NET Core側のアプリを停止
  3. モジュールの入れ替え

 他にも、公開中のサイトであれば、入れ替え時にはapp_offline.htmなどを使用して、一時停止することを考慮する必要があります。

配置用モジュールの作成

 配置用のモジュールはVisual Studioで作成することができます。

 まず、ソリューションエクスプローラーからプロジェクトを選択し、右クリックでコンテキストメニューを表示します。

 表示されたコンテキストメニューの中から「発行」をクリックします。

ソリューションエクスプローラー
ソリューションエクスプローラー

 発行をクリックするとワークスペース上に発行のためのペインが表示されます。

発行
発行

 Web配置の場合は、出力されたプロファイルなどを使用しますが、今回は実ファイルをフォルダーに出力します。

 フォルダーボタンをクリックすると、出力先フォルダーを指定するテキストボックスが表示されますので、必要に応じて修正します。

発行先フォルダーの指定
発行先フォルダーの指定

 指定が終わったら、「発行」ボタンをクリックします。

 ビルドが終了して、発行用モジュールができあがると、出力ウインドウ内に該当フォルダーを表示されるので、該当フォルダーからIISの配置先へ任意の方法で配置します。

発行ファイル作成完了
発行ファイル作成完了

 ここまでの設定が完了するとWebサイトの表示を行うことができます。

 IISマネージャーから該当のWebサイトを右クリックし、コンテキストメニューの中から「Webサイトの管理」>「参照」を表示します。

Webサイトの参照
Webサイトの参照

 正しく表示できれば、配置は成功です。

まとめ

 ComponentOne Studio for ASP.NET MVCは、ASP.NET Core 2.0にも対応し、早々と高機能なコントロール群が利用できるように進化しています。

 コントロールに対しての設定もメソッドチェーンやIntellisenseのサポートにより、マニュアルがなくとも非常に快適にコーディングすることができます。

 また、IISに対するホストについては、通常の.NET FrameworkのASP.NETによるWebサイトの構築に比べて多少手順は増えますが、設定が煩雑となる部分に関してはVisual Studioによるサポートも多く、WindowsやIISの操作になじみのある筆者には比較的容易に配置が行えた印象です。

 ASP.NET Coreに関する情報は、まとまった形の情報が少ないので、参考にしていただけると幸いです。

 次回はComponentOne Studio for ASP.NET MVCを使用して、ASP.NET Core 2.0から導入されたRazor Pagesを使用したWebアプリの開発方法と、MacやLinuxによる開発方法やApache、Ngnixによるホスト方法をご紹介したいと思います。

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 森 博之(モリ ヒロユキ)

     .NETテクノロジーを中心とした開発支援や技術記事の執筆、セミナースピーカーを行っているフリーランスのソフトウェアエンジニア。  Microsoft MVPをVisual Studio and Development Technologies、Windows Development、Client...

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5