CodeZine(コードジン)

特集ページ一覧

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

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

 ASP.NET Coreは、ASP.NET MVCをベースとして再設計されたマルチプラットフォームで利用可能なWebアプリの開発が行えるオープンソースの基盤技術です。前回の記事では、Windows環境における開発方法、およびIISへのホスト方法について説明しました。今回は、「ComponentOne for ASP.NET MVC」をマルチプラットフォームで使用する方法を中心に解説していきます。

「ComponentOne」の製品名称について

 前回の記事では、製品名称を「ComponentOne Studio」と表記していましたが、2018年5月1日より「ComponentOne」に変更となるため、本稿では新しいものに表記を統一しています。名称が変更になるだけで、この2つは同一の製品です。

 ASP.NET Coreは前述した通り、マルチプラットフォームで動作可能であると同時に、マルチプラットフォームでの開発方法が用意されています。グレープシティの 「ComponentOne for ASP.NET MVC」もまた、マルチプラットフォームでの利用をサポートしています。

 そこで本稿では、以下の点について確認していきます。

  • ASP.NET CoreのMac環境やLinux環境での主な開発方法
  • グレープシティの「ComponentOne for ASP.NET MVC」をマルチプラットフォームで使用する方法
  • NgnixやApacheを使用したホスト手順

 なお、最初にお断りしておくと、グレープシティの 「ComponentOne for ASP.NET MVC」は、マルチプラットフォームによる運用利用はサポートしていますが、Mac/Linux環境での開発をサポート対象外としています。

 そこで、筆者の興味によりComponentOne for ASP.NET MVCを使って開発を行ってみたところ、Mac環境やLinux環境で実際に開発できることを確認できました。今回はその手順を紹介します。

対象読者

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

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

必要な環境

 本稿で使用した.NET Core SDKのバージョンは2.1.103です。また、本稿のサンプルコードを実行する場合は、ComponentOne for ASP.NET MVCが必要です。

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

ComponentOneサイト
ComponentOneサイト

 今回紹介する方法は、ComponentOneのサイトにログインする必要があります。トライアル版ユーザーでも試すことができるので、事前にユーザー登録を行っておくことをお勧めします。

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

 利用するコンポーネントは、基本的に前回と同じ以下のコンポーネントを使用します。

FlexChart for ASP.NET MVC

FlexChart
FlexChart

Guages for ASP.NET MVC

Guages
Guages

InputNumber(Input for ASP.NET MVC)

InputNumber
InputNumber

InputDateTime(Input for ASP.NET MVC)

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

MultiAutoComplete(Input for ASP.NET MVC)

MultiAutoComplete
MultiAutoComplete

 各コンポーネントの説明は前回の記事に記載したため、本稿では割愛します。

 今回は、これらのコンポーネントと、ASP.NET Core 2.0の新機能であるRazor Pagesを使用してサンプルを作成します。Razor Pagesの解説は、CodeZineの掲載の記事で解説されているため、本稿では概要のみ説明します。

Razor Pagesと階層分割アプローチ

 Razor PagesはASP.NET Core 2.0の新機能で、「Model-View-ViewModel」という階層分割アプローチを取り入れたアーキテクチャーパターンに沿ったフレームワークです。

 はじめに、Model-View-ViewModelのアーキテクチャーパターンや階層分割アプローチについて、少し触れておきます。

ソフトウェアの規模

 アプリケーションを作成時に開発者が遭遇する問題のひとつに、「ソフトウェアの規模」の問題があります。

 ソフトウェアの規模が小さいアプリケーションは、比較的見通しもよく、可読性が高いことから取り扱いもしやすいため、プログラミングの際に大きな問題となることは多くないでしょう。

 しかし、実際にソフトウェアで取り扱う問題は単純なものばかりではありません。 加えて「複雑な問題を機械的に間違いなく実施することができる」ことは、ソフトウェアを作成する動機のひとつでもあります。

 ソフトウェアで複雑な問題を取り扱うと、その複雑さに比例してソフトウェアの規模も大きくなります。

 規模が大きいソフトウェアを取り扱う場合、何も考慮せずソフトウェアを作成すると、元々の問題の複雑さに加えて、ソフトウェアの複雑さが加わる場合があります。

 その結果、ソフトウェアの可読性・保守性が低下し、ひいては品質の低下につながることになります。

 つまり、複雑なソフトウェアを作成する場合には、それに対応するための対処方法が必要になります。

関心事の分離

 このような複雑な問題に対するひとつのアプローチとして、「関心事の分離(Separation of Concerns、略してSoCと呼びます)」があります。

 SoCでは、ソフトウェアが解決したい問題を個々の問題(関心)毎に分離し、構成する手法です。つまり、「大きな問題」を「小さな複数の問題」に分割して扱うことで、一つひとつの問題の複雑さを軽減し、取り扱いやすくするという設計原則です。

関心事の分離
関心事の分離

 ただし、やみくもに分割すると、分割の粒度があいまいになることで、問題の粒度が不揃いになり、問題の内容がかえって分かりづらくなったりします。その結果、ソフトウェアの全体像が見えづらくなったり、複雑さが増してしまう場合があります。

分離へのアプローチ

 そこで、これらの分割の手法としてよく用いられるのが「階層化アプローチ(Layered approach)」です。

 「階層化アプローチ」 は、責任の分割を主な目的としています。ソフトウェアが扱う問題を特定の役割を持つ階層に分割します。分割した各階層は、他の階層への「インターフェース」、つまり窓口だけを取り決めして、その結果を保証します。

階層化アプローチ
階層化アプローチ

 各階層とやりとりを行う「インターフェース」と、「インターフェース」でどのような「データ」を受け渡すかを取り決めます。

 それ以外の各階層内で行われる処理方法や、階層の内部で使用されるデータについては、他の階層が一切関知しないものとします。

 それにより、各階層内部は処理やデータの影響範囲を限定されるため、ソフトウェア保守時に掌握すべき項目が減るため、可読性・保守性の向上につながります。

階層化アプローチの基準

 実際にどのような階層に分割すればよいかの基準のひとつとして、マーチンファウラーが提唱した「プレゼンテーションとドメインの分離(Presentation Domain Separation、略してPDSと呼びます)」があります。

 PDSでは、ソフトウェアの「ユーザーインターフェース」部分と「その他の機能」部分を分割することで、以下のメリットを享受できるとしています。(引用:Martin Fowler’s Bliki (ja)日本語訳

  • プレゼンテーションロジックとドメインロジックが分かれていると、理解しやすい
  • 同じ基本プログラムを、重複コードなしに、複数のプレゼンテーションに対応させることができる
  • ユーザーインターフェースはテストがしにくいため、それを分離することにより、テスト可能なロジック部分に集中できる
  • スクリプト用のAPIやサービスとして外部化するためのAPIを楽に追加できる(選択可能なプレゼンテーション部分で見かける)
  • プレゼンテーション部分のコードは、ドメイン部分のコードと違ったスキルと知識が必要

 ここにあるような分割のアプローチを具現化したアーキテクチャーパターンが、ASP.NETでも利用されているModel-View-Controller(MVC)であったり、これから利用するModel-View-ViewModel(MVVM)などになります。

Model-View-ViewModel

 Razor Pagesは、階層化アプローチであるModel-View-ViewModelを用いたフレームワークです。ここで、Model-View-ViewModelについても、少し触れておきたいと思います。

 Model-View-ViewModelでは、プレゼンテーション部分をView-ViewModel、ドメイン部分をModelに分割して構成します。

 そして、ViewとViewModelは「データバインディング」のみで関連付けを行うことで、ユーザーインターフェースとデータの分離を実現するアーキテクチャーパターンです。

Model-View-ViewModel
Model-View-ViewModel

 MVVMは元々、Windows Presentation Foundation(WPF)やUniversal Windows Platform(UWP)などで利用されていたパターンです。

 WPFやUWPは、ユーザーインターフェースの記述を「XAML」と呼ばれるXMLベースのマークアップ言語で行います。XAMLは、データとユーザーインターフェースの要素を関連付けして、値の同期を実現する、データバインディング機能を持ちます。このデータバインディング機能を使用することで、ViewとViewModelの分離を実現していました。

 このとき、ViewModelではViewに表示するために必要なデータを「プロパティ」で表現し、Viewはそのプロパティを参照することでユーザーインターフェースの表現に関連付けました。

 以下の例は、実際にデータバインディングを行っているViewのXAMLとViewModelのC#コードです。ここでは、ViewとViewModelが分離されていることを示す例なので、コードの内容は理解できなくてもかまいません。

<Grid>
    <Grid.DataContext>
        <local:SampleViewModel/>                <!-- ViewModelクラスのインスタンスを設定 -->
    </Grid.DataContext>
    <TextBox Text="{Binding CustomerName}"/>    <!-- ViewModelクラスのプロパティにBinding -->
</Grid>
public class SampleViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private string customerName;

    // Bindingするためのプロパティ
    public string CustomerName
    {
        get => customerName;
        set { customerName = value; RaisePropertyChanged(); }
    }

    protected virtual void RaisePropertyChanged([CallerMemberName] string propertyName = null)
        => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

 この分離によって、Viewに表示されるべきデータが正しく表示できない原因は「正しくデータバインディングが設定されていない」または「ViewModel以降の階層が正しく実装されていない」の2点に限定することができました。

 さらにViewModelクラスは、上記のように単独のC#クラスであるため、その他のModelクラスと同様に単体テストの作成も行いやすくなります。

 つまり、View以外のいずれの階層でも単体テストを行うことができるようになったことで、回帰テストが実施しやすくなり、品質の向上に貢献します。

Razor PagesとModel-View-ViewModel

 繰り返しになりますが、Razor Pagesは、このModel-View-ViewModelのアーキテクチャーモデルに倣ってWebアプリの開発が行えるフレームワークです。

 Model-View-ViewModelに沿って、Razor Pagesではcshtml(Razor構文によるView)-cshtml.cs(PageModelクラスを継承した単一のクラス)-Modelクラスで構成します。

RazorPagesとMVVM
RazorPagesとMVVM

 ここで、RazorPagesのテンプレートプロジェクトを見てみましょう。Razor Pagesのプロジェクトテンプレートの作成は、Visual Studioの新規プロジェクトの作成で[ASP.NET Core Web アプリケーション]を選択するか、dotnetコマンドラインで行えます。

 dotnetコマンドライン CLIで行う場合は、任意のフォルダー内で以下のコマンドを実行することで作成されます。

dotnet new razor

 作成された実際のプロジェクトは下図の通りです。

Razor Pages プロジェクト
Razor Pages プロジェクト

 Razor Pagesのプロジェクトテンプレートは、ASP.NET Core MVCのプロジェクトに比べて、フォルダーが「Pages」のみとシンプルです。

 「Pages」フォルダーの中には、いくつかのcshtmlファイルが入っていますが、「About.cshtml」「Contact.cshtml」「Error.cshtml」「Index.cshtml」の4ファイルには、関連する「*.cshtml.cs」ファイルが紐づけされています。

 この「*.cshtml.cs」ファイルが、ViewModelの役割を担う「PageModel」ファイルです。

Razor PagesによるWebページの作成

 Razor PagesによるWebページの作成方法をまとめると、以下の通りになります。

  • Viewである「*.cshtml」は、Razor構文で記述する
  • Razor Pagesのcshtmlファイルの先頭行にはRazor Pagesである宣言として@pageを記述する(先頭にないと404で表示できなくなる)
  • ViewModelは、cshtmlに対応するPageModelクラスを継承する
  • PageModelクラスには、cshtmlにデータバインドするためのpublicプロパティを追加する
  • GET、POSTなどでデータ送信が必要なる項目のプロパティは、BindProperty属性を付与する

 実際にASP.NET Coreによるテンプレートプロジェクトを少し加工し、「Index.cshtml」と「Index.cshtml.cs」を修正したソースが以下です。

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

<!-- Index.cshtml -->
<form method="post">
    <div class="row">
        <div class="col-md-12">
            <h1>@Model.Message</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">Your Name</div>
        <div class="col-md-9">
            <input type="text" asp-for="UserName" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <input type="submit" />
        </div>
    </div>
</form>
    // Index.cshtml.cs
    public class IndexModel : PageModel
    {
        // 表示だけならば通常プロパティでOK
        public string Message { get; set; }

        // 送信時にデータを格納したい場合はBindProperty属性を付与
        [BindProperty]
        public string UserName { get; set; }

        // GET時に行う処理
        public void OnGet()
        {
            Message = "Hello, world";

            UserName = string.Empty;
        }

        // POST時に行う処理
        public void OnPost()
        {
            Message = $"Hello, {UserName}";
        }
    }
実行結果
実行結果

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

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

 ここでは、まずWindows環境での作成方法の説明を行います。

 Windows環境でRazor Pagesアプリを作成する場合、Visual Studio 2017を起動し、[新しいプロジェクトの作成]から[ASP.NET Core Webアプリケーション]を選択します。

新しいプロジェクトダイアログ
新しいプロジェクトダイアログ

 プロジェクト名を設定し(サンプルでは「C1RazorPagesApp」とします)、OKボタンをクリックします。

 続けて[新しいASP.NET Core Webアプリケーション]が表示されます。

新しいASP.NET Core Webアプリケーションダイアログ
新しいASP.NET Core Webアプリケーションダイアログ

 ここでは無印の[Web アプリケーション]のアイコンを選択してOKボタンをクリックします。

Razor PagesからComponentOne for ASP.NET MVCを使用する方法について

 Razor PagesにComponentOne for ASP.NET MVCを使用する場合は、NuGetからパッケージのダウンロードを行います。そのため、インターネットの接続できる環境でパッケージの追加を行う必要があります。

パッケージの追加

 ソリューションエクスプローラーから、プロジェクトを右クリックし、コンテキストメニューを表示します。プロジェクトのコンテキストメニューが表示されたら[NuGet パッケージの管理]をクリックします。

プロジェクトのコンテキストメニューからNuGetパッケージの管理をクリック
プロジェクトのコンテキストメニューからNuGetパッケージの管理をクリック

 クリックするとNuGetパッケージの管理画面が表示されます。

NuGet パッケージの管理画面
NuGet パッケージの管理画面

 パッケージの追加は以下の手順で行います。

  1. 右側上部にある[参照]タブ(図の(1))に切り替えます。
  2. 左側上部にある[パッケージソース](図の(2))を先ほど追加した「GrapeCity」に切り替えます。
  3. 右側上部にあるパッケージの検索ボックス(図の(3)にあるテキストボックス)に「C1.AspNetCore.Mvc.ja」を入力し、Enterキーを押下します。

 正しく検索が行われると、図のようにパッケージの表示が行われます。パッケージをクリックし、プロジェクトにインストールします。

Modelクラス

 ASP.NET CoreのRazor PagesプロジェクトのテンプレートにはModel用のフォルダーが用意されていません。そのため最初に、プロジェクトに「Models」フォルダーを作成します。

 作成した「Models」フォルダーの中に、以下のSampleModelクラスを作成します。

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

namespace C1RazorPagesApp.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; }
    }

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


        public static IEnumerable<DailySale> GetSales() =>  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 static int GuageValue { get; } = 30;

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

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

        // MultiAutoCompleteのデータ
        public static List<string> Todofuken { get; } = 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",
        };

    }
}

Startupクラス

 プロジェクトルートにある「Startup.cs」ファイルを開き、Startupクラスを修正します。

 .NET Core SDKのバージョン 2.0.5以降では、以下の通りルート定義の修正を行う必要があります。Razor PagesでComponentOne for ASP.NET MVCを使用する場合は、この修正が必要です。

            // 2.0.5以前はこちら
            //app.UseMvc(); 
            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller}/{action=Index}/{id?}");
            });

ライセンスの追加

 ComponentOne for ASP.NET MVCを使用する場合、ライセンス情報の追加が必要になります。ライセンス情報の追加はソリューションエクスプローラーから行います。

 ComponentOne 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 = "(埋め込まれたライセンスキー)";
        }

 なお、Mac環境/Linux環境ではLicenseキーの追加方法が異なります。各環境においてのライセンスの追加方法は、それぞれの開発手順の解説の中で説明します。

ファイル「_ViewImports.cshtml」

 「_ViewImports.cshtml」は、Viewの中でアプリケーションを通して、共通的に利用する宣言や定義などを追加するファイルです。

 このファイル「_ViewImports.cshtml」は、「Pages」フォルダーにあります。ここでは以下のように利用する名前空間やTagHelperの設定などを追加します。

@using C1RazorPagesApp
@namespace C1RazorPagesApp.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, C1.AspNetCore.Mvc
@addTagHelper *, C1.AspNetCore.Mvc.FlexSheet

ファイル _Layout.cshtml

 「_Layout.cshtml」は、Viewで使用するHTMLのひな形を定義するファイルです。

 ComponentOne for ASP.NET MVCを使用する場合、各コントロールで使用するCSSやScriptの定義を追加する必要があります。ComponentOne for ASP.NET MVCでは、CSSやScriptの定義を展開するTag Helperが用意されています。

 ここでは「Pages」フォルダーにあるファイル「_Layout.cshtml」を開いて、以下のようにHEADタグ内にTag Helperを追加します。

    <c1-styles></c1-styles>
    <c1-scripts>
        <c1-basic-scripts></c1-basic-scripts>
    </c1-scripts>

PageModelクラス

 PageModelクラスは「Pages」フォルダーにある「Index.cshtml.cs」を加工します。IndexModelクラスに、以下の通りプロパティの追加を行います。

    public class IndexModel : PageModel
    {
        // チャートに表示するデータ
        public IEnumerable<DailySale> Sales { get; set; } = SampleModel.GetSales();

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

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

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

        // MultiAutoCompleteのデータ
        public List<string> Todofuken { get; set; } = SampleModel.Todofuken;

        [BindProperty]
        public string SelectedTodofuken { get; set; }

        public void OnGet()
        {

        }
    }

View(Index.cshtml)

 ViewであるIndex.cshtmlも「Pages」フォルダーにあるので、以下の通り加工します。

@page
@model IndexModel
@{
    ViewData["Title"] = "Home 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;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-box;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        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 id="flexChart" 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" selected-item="@Model.SelectedTodofuken">
            <c1-items-source source-collection="@Model.Todofuken" />
        </c1-multi-auto-complete>
    </div>
</div>

macOS環境の開発

 それでは、macOS環境での開発について説明します。macOSにおけるASP.NET Coreの開発環境には以下があります。

  • Visual Studio for Mac(IDE、Microsoft)
  • Visual Studio Code(エディタ、Microsoft)
  • JetBrains Rider(IDE、JetBrains)

 本稿では、Visual Studio for Macを利用した開発手順を紹介します。

Visual Studio for Macの起動

 Visual Studio for Macを起動すると[スタートページ]を表示します。

Visual Studio for Macスタート画面
Visual Studio for Macスタート画面

 [新しいプロジェクト]をクリックすると[テンプレート選択画面]を表示します。

新しいプロジェクト - テンプレート選択画面
新しいプロジェクト - テンプレート選択画面

 今回はRazor Pagesを使用したアプリの開発なので、[.NET Core]の[アプリ]のテンプレートの中から[ASP.NET Core Webアプリ]を選択します。

 [次へ]ボタンをクリックすると、プロジェクト名やソリューション名など入力や設定を行う[構成画面]を表示します。

新しいプロジェクト - 構成画面
新しいプロジェクト - 構成画面

 環境に合わせてプロジェクト名やソリューション名を入力や場所の設定を行います。今回は、プロジェクト名を「C1RazorPagesApp」とします。

 [作成]ボタンをクリックするとRazor Pagesアプリのプロジェクトを作成し、構成ファイルをダウンロードします。すべての設定が完了するとコードエディタウインドウを表示します。

 今回のサンプルアプリは、Modelクラスを追加するため、まず、Modelクラスを格納する「Models」フォルダーを追加します。

 コードエディタの左に表示されるソリューションエクスプローラーにある[C1RazorPages]プロジェクトを右クリックし、コンテキストメニューを表示します。

プロジェクトのコンテキストメニューを表示
プロジェクトのコンテキストメニューを表示

 コンテキストメニューから[追加]→[新しいフォルダー]をクリックします。

Modelsフォルダーを追加
Modelsフォルダーを追加

 Modelクラスを格納するためのフォルダーなので「Models」と命名します。そして、Modelsフォルダーにモデルクラスを追加します。

 次に、ソリューションエクスプローラーからModelsフォルダーを右クリックして、コンテキストメニューを表示します。

Modelsフォルダーのコンテキストメニューを表示
Modelsフォルダーのコンテキストメニューを表示

 コンテキストメニューから[追加]→[新しいファイル]を選択すると[新しいファイルウインドウ]が開きます。

新しいファイルウインドウ
新しいファイルウインドウ

 [General]→[空のクラス]を選択後、名前を「SampleModel」と設定します。その後、[新規]ボタンをクリックします。

SampleModelクラスをコーディング
SampleModelクラスをコーディング

 SampleModelクラスが作成されるとコードエディタに表示されるので、前ページに記載したSampleModelクラスの内容を入力します。

ComponentOne for ASP.NET MVCのパッケージをインストール

 冒頭でも触れましたが、ComponentOne for ASP.NET MVCは、Mac環境での開発はサポート対象外です。お試しになる場合は自己責任でお願いします。

 Mac環境でComponentOne for ASP.NET MVCのコントロールを使用する場合、ViewやPageModelを作成する前にNuGetからパッケージをダウンロード/インストールしなくてはいけません。

 Visual Studio for MacからNuGet経由でインストールする場合も、パッケージソースの追加を行う必要があります。

Visual Studio for Macにおけるパッケージソースの追加

 パッケージソースの追加は、メニューから[プロジェクト]→[NuGet パッケージの追加(P)]をクリックします。

NuGet パッケージの追加
NuGet パッケージの追加

 [パッケージの追加(P)]をクリックすると[パッケージの追加ウインドウ]が表示されるので、左上部にあるパッケージソースのドロップダウンから[ソースの構成]を選択します。

ソースの構成
ソースの構成

 [ソースの構成]を選択すると[ユーザー設定]ウインドウを開き、[NuGet]→[ソース]の設定画面になります。

NuGetソースの設定画面
NuGetソースの設定画面

 パッケージソースの追加を行う行う場合は、右ペインの下にある[追加]ボタンをクリックします。[追加]ボタンをクリックすると[パッケージソースの追加ウインドウ]が開きます。

パッケージソースの追加
パッケージソースの追加

 [パッケージソースの追加ウインドウ]では以下の項目を設定します。

項目 設定値
名前 GrapeCity
場所 http://nuget.c1.grapecity.com/nuget/

 設定が完了したら[ソースの追加]ボタンをクリックします。

 正しく追加が行われると、パッケージソースのドロップダウンに「GrapeCity」が追加されます。

パッケージソース
パッケージソース

ComponentOne for ASP.NET MVC パッケージのインストール

 今回の記事は、前回の記事と同様のコントロールを使用しているので、前回の記事と同じパッケージを追加します。

 [パッケージソースの追加]が終わり、[OK]ボタンをクリックすると[NuGetパッケージの追加画面]に戻ります。

 ComponentOne for ASP.NET MVCのパッケージをインストールするには、パッケージソースのドロップダウンを「GrapeCity」に切り替えます。

 次に[NuGetパッケージの追加画面]のウインドウ右上部にある検索ボックスから「C1.AspNetCore.Mvc」を検索します。

ComponentOne for ASP.NET MVC
ComponentOne for ASP.NET MVC

 検索結果の一覧から「C1.AspNetCore.Mvc.ja」と「C1.AspNetCore.Mvc.FlexSheet.ja」の2つのパッケージの前にあるチェックボックスにチェックします。チェックが終わったら[パッケージを追加]ボタンをクリックします。

「_Layout.cshtml」「_ViewImports.cshtml」「Index.cshtml」「Index.cshtml.cs」および「Startup.cs」をコーディング

 プロジェクトの中にある「Pages」、フォルダーの中にある「_Layout.cshtml」「_ViewImports.cshtml」「Index.cshtml」「Index.cshtml.cs」、プロジェクトルートにある「Startup.cs」を前ページの通りコーディングします。

Viewをコーディング
Viewをコーディング

License.csの追加

 ライセンス情報の追加は、ComponentOneのサイトにログインすることで、ライセンスキーの発行を行うことが可能です。

 ComponentOneのログイン画面から新規ユーザーの登録を行います。既に登録している場合は、ログインします。

新規ユーザー登録/ログイン
新規ユーザー登録/ログイン

 ログイン後、表示される[アカウントサービス画面]から[ASP.NET Core ライセンス生成]のリンクをクリックします。

ASP.NET Core ライセンス生成
ASP.NET Core ライセンス生成

 シリアルナンバーに有効なシリアルまたはトライアル版を選択し、アプリケーション名に任意の名前を設定します。設定が終わったら[生成]ボタンをクリックします。

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

 [生成]ボタンをクリックし、しばらくするとライセンスキーを含むLicenseクラスのテキストが表示されます。

ライセンスキークラス
ライセンスキークラス

 表示されたライセンスキークラスのテキストを全選択し、コピーします。

 Visual Studio for Macに戻り、プロジェクトにLicense.csクラスを追加し、コピーしたテキストを貼り付けます。

License.csの追加
License.csの追加

 続けて「Startup.cs」にあるStartupクラスのコンストラクタに、ライセンスマネージャーへのキーの設定を追加します。

    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
            C1.Web.Mvc.Sheet.LicenseManager.Key = License.Key;
            C1.Web.Mvc.LicenseManager.Key = License.Key;
        }

        // 以下省略

 ライセンスキーの設定後、コマンドラインでdotnet runで実行します。

コマンドラインで実行
コマンドラインで実行

 コマンドラインに表示されたURLをブラウザで確認すると、下図のように表示されます。

実行
実行

Linux環境の開発

 それでは、Linux環境の開発方法を説明します。Linux環境における開発環境には以下のツールがあります。

  • Visual Studio Code(エディタ、Microsoft)
  • JetBrains Rider(IDE、JetBrains)

 本稿では、高機能エディタであるVisual Studio Codeと.NET Core コマンドラインインターフェース+NuGet コマンドラインインターフェース(CLI)を組み合わせて開発します。

 NuGet CLIは、.NET Frameworkで開発されているツールです。Mac/Linux環境でNugetを実行するためには、Linux環境で動作する.NET Framework互換の実装の「Mono」を使用します。

各CLIツールのインストール

 Linuxの場合は、利用するディストリビューションやバージョンなどによってインストール方法が異なるため、Microsoftのサイトで説明されているインストール方法を参照していただき、以下のツールをインストールします。

 筆者はCentOS 7を使用して環境を作成しました。設定はリリースした.NET Core SDKのバージョンによって変化することがあるため、必ず上記の手順を確認してください。

 参考までに、筆者が本記事執筆時に実施したインストール手順は以下の通りです。

.NET Core SDKのインストール

 .NET Coreをインストールするため、最初にMicrosoftの署名を登録します。

sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc

 続けて、Microsoft製品のフィードを追加します。

sudo sh -c 'echo -e "[packages-microsoft-com-prod]\nname=packages-microsoft-com-prod \nbaseurl=https://packages.microsoft.com/yumrepos/microsoft-rhel7.3-prod\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/dotnetdev.repo'

 次に、.NET Core SDKのインストールします。

sudo yum update
sudo yum install libunwind libicu
sudo yum install dotnet-sdk-2.0.0

 任意の場所から動作できるようPATHの追加を行います。

export PATH=$PATH:/usr/share/dotnet

 以上で、.NET Core SDKのインストールは完了です。

 コマンドラインからdotnetを実行して、下図の通り表示されればインストールは成功です。

dotnet CLI
dotnet CLI

Monoのインストール

 Monoのインストールは以下のコマンドラインで行います。

rpm --import "http://keyserver.ubuntu.com/pks/lookup?op=get&search=0x3FA7E0328081BFF6A14DA29AA6A19B38D3D831EF"
su -c 'curl https://download.mono-project.com/repo/centos7-stable.repo | tee /etc/yum.repos.d/mono-centos7-stable.repo'
yum install mono-devel

 コマンドラインからmonoを実行して、下図の通り表示されればインストールは成功です。

mono CLI
mono CLI

NuGetのインストール

 Nugetのインストールは以下のコマンドラインで行います。

# 最新のnugetをDownloadして `/usr/local/bin`に格納
sudo curl -o /usr/local/bin/nuget.exe https://dist.nuget.org/win-x86-commandline/latest/nuget.exe
# Give the file permissions to execute
sudo chmod 755 /usr/local/bin/nuget.exe

 これで、以下のコマンドラインでNuGetが利用できます。

mono /usr/local/bin/nuget.exe

 NuGet CLIを利用しやすいように、「~/.base_alias」や「~/.bash_profile」などに以下のaliasのスクリプトを登録します。

alias nuget="mono /usr/local/bin/nuget.exe"

 コマンドラインからnugetを実行して、下図の通り表示されればインストールは成功です。

NuGet CLI
NuGet CLI

Razor Pagesアプリの作成

 Linux環境における.NET Coreの開発は、主に.NET Core CLIを使用して開発を行います。.NET Core CLIの基本的な利用方法は、WindowsやmacOSでも同じです。今回はRazor Pagesのテンプレートを使って開発を行う手順を紹介します。

プロジェクトの作成

 まず、任意のディレクトリを作成し、.NET Core CLIでプロジェクトファイルを作成します。

 Razor Pagesのプロジェクトの作成は以下のコマンドラインを実行して作成します。

dotnet new razor

Modelクラスの追加

 プロジェクトの作成を行うと、ディレクトリ内にRazor Pagesのひな形プロジェクトがダウンロードされます。

 これ以降の作業は、Visual Studio Codeを利用して行います。Visual Studio Codeを起動し、プロジェクトのディレクトリを開きます。表示されたディレクトリから、モデルクラスを格納する「Models」フォルダーを追加します。

 続けて、「Models」フォルダーの中に、前ページを参考に「SampleModel.cs」ファイルを作成し、SampleModelクラスの追加を行います。

SampleModelクラスの追加
SampleModelクラスの追加

ComponentOne for ASP.NET MVC パッケージのインストール

 ComponentOne for ASP.NET MVCのコントロールを使用する場合、ViewやPageModelを作成する前にNuGetからパッケージをダウンロード/インストールする必要があります。

パッケージソースの追加

 NuGetコマンドラインからNuGet経由でインストールする場合も、Windowsと同様にパッケージソースの追加を行う必要があります。パッケージソースの追加はNugetの環境設定の構成を編集することによって行います。

 具体的な手順としては、Nugetおよび.NET Core SDKインストール時に追加されたNuget.Configを編集します。Nuget.Configは、Mac/Linux環境では「~/.Nuget/Nuget.Config」に配置されています。

 Nuget.ConfigファイルをVSCodeで開いて、以下のようにpackageSourcesタグにGrapeCityのレポジトリを追記します。

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <packageSources>
    <add key="nuget.org" value="https://api.nuget.org/v3/index.json" protocolVersion="3" />

    <!-- 以下の行を追記 -->
    <add key="GrapeCity" value="http://nuget.c1.grapecity.com/nuget/" />

  </packageSources>
</configuration>

 追記後、ファイルを保存します。

パッケージの追加

 今回の記事は、前回の記事と同様のコントロールを使用しているので、前回の記事と同じパッケージを追加します。パッケージの追加は、プロジェクトファイル(拡張子がcsprojのファイル)を編集して行います。

 VSCodeでプロジェクトファイルを開いて、PackageReference要素が含まれるItemGroupに以下の通り、ComponentOne for ASP.NET MVCのPackageReferenceタグを2つ追記します。

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>netcoreapp2.0</TargetFramework>
  </PropertyGroup>
  <ItemGroup>

    <!-- ここから追加 -->
    <PackageReference Include="C1.AspNetCore.Mvc.FlexSheet.ja" Version="1.0.20173.143" />
    <PackageReference Include="C1.AspNetCore.Mvc.ja" Version="1.0.20173.143" />
    <!-- ここまで追加 -->

    <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.5" />
  </ItemGroup>
  <ItemGroup>
    <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.2" />
  </ItemGroup>
</Project>

「_ViewImports.cshtml」「_Layout.cshtm」「Index.cshtml」「Index.cshtml.cs」および「Startup.cs」をコーディング

 プロジェクトの中にある「Pages」、フォルダーの中にある「_ViewImports.cshtml」 「_Layout.cshtm」「Index.cshtml」「Index.cshtml.cs」、プロジェクトルートにある「Startup.cs」を前ページの通りコーディングします。

「_ViewImports.cshtml」「Index.cshtml」「Index.cshtml.cs」をコーディング
「_ViewImports.cshtml」「Index.cshtml」「Index.cshtml.cs」をコーディング

License.csの追加

 ライセンス情報の追加はComponentOneのサイトにログインすることで、ライセンスキーの発行を行うことが可能です。

 ComponentOneのログイン画面から新規ユーザーの登録を行います。既に登録している場合はログインします。

新規ユーザー登録/ログイン
新規ユーザー登録/ログイン

 ログイン後、表示される[アカウントサービス画面]から[ASP.NET Core ライセンス生成]のリンクをクリックします。

ASP.NET Core ライセンス生成
ASP.NET Core ライセンス生成

 シリアルナンバーに有効なシリアルまたはトライアル版を選択し、アプリケーション名に任意の名前を設定します。終わったら[生成]ボタンをクリックします。

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

 [生成]ボタンをクリックし、しばらくするとライセンスキーを含むLicenseクラスのテキストが表示されます。

ライセンスキークラス
ライセンスキークラス

 表示されたライセンスキークラスのテキストを全選択し、コピーします。

 Visual Studio for Macに戻り、プロジェクトにLicense.csクラスを追加してコピーしたテキストを貼り付けます。

License.csの追加
License.csの追加

 続けて「Startup.cs」にあるStartupクラスのコンストラクタに、ライセンスマネージャーへのキーの設定を追加します。

 他に利用しているコントロールがある場合は、必要なライブラリのライセンスマネージャーにライセンスキーを同様に追加します。

    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
            C1.Web.Mvc.Sheet.LicenseManager.Key = License.Key;
            C1.Web.Mvc.LicenseManager.Key = License.Key;
        }

        // 以下省略

 ライセンスキーの設定後、コマンドラインでdotnet runで実行します。

コマンドラインで実行
コマンドラインで実行

 コマンドラインに表示されたURLをブラウザで確認すると下図のように表示されます。

実行
実行

Linux環境のホスティング

 ASP.NET Coreを使用したWebアプリは、.NET Core上で動作するKestrelというWebサーバー機能を持ち、独立したコンソールアプリとして実行します。

 ただし、Kestrelにはアプリ実行のための基本的な機能しか持たないため、Webサーバーが持つセキュリティ機能や冗長化のための機能、リクエストのキャッシュなど多くのWebサーバーが持つ数々の機能を持ちません。

 ホスティングする場合は、各プラットフォームの稼働するWebサーバー機能などによってリクエストを受けて、リクエストをASP.NET Coreアプリに転送する、いわゆるリバースプロキシーとして設定し、Kestrelが持たないWebサーバー機能を補完します。

 本記事では、Linux環境のWebサーバー機能である「Ngnix」と「Apache」のリバースプロキシー機能を使用して行うホスティング方法をご紹介します。なお、今回ホスティングするLinux環境には、あらかじめ.NET Core SDKのインストールを行っています。

Ngnix によるホスティング

 Nginx(エンジンエックスと発音します)は、オープンソースのWebサーバーです。Apacheほど高機能ではありませんが、処理性能/並列処理/メモリ使用量が小さく、パフォーマンスに優れていることが特徴で、LinuxだけではなくWindowsやMacでも動作します。

 今回は、NgnixをCentOS 7にインストールし、Ngnixのリバースプロキシー機能を利用してASP.NET Coreアプリのホスティングします。

 Nginxのインストール方法は既に多くのサイトで既に紹介されているため、ここでは割愛しますが、参考までに筆者がCentOS 7で行った手順を記しておきます。

Nginxのレポジトリの登録

 Nginxが公開しているyumレポジトリの追加を行います。

 yumレポジトリの追加は、Nginxの公式サイトに記載のある手順で以下の通り行います。

 root権限を持つユーザーで、「/etc/yum.repos.d/nginx.repo」ファイルを作成し、以下の通り内容を記述します。

[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/OS/OSRELEASE/$basearch/
gpgcheck=0
enabled=1

 この内容を保存して、ファイルが正常に作成されていることを確認します。

# ls -l /etc/yum.repos.d/nginx.repo
-rw-r--r--. 1 root root  108  Mar 21 11:35 /etc/yum.repos.d/nginx.repo

Nginxのインストール

 レポジトリ情報の保存が終わると、いよいよインストールです。インストールも引き続きroot権限で、以下の通りコマンドを実行します。

yum install nginx

 インストール完了後、Nginxを自動起動するように設定します。

systemctl enable nginx

 最後に起動して、表示を確認しましょう。

systemctl start nginx

 以上で起動するはずです。あとはブラウザで「http://サーバーホスト名/」の表示を確認しましょう。

Nginxのスタートページ
Nginxのスタートページ

ASP.NET Coreアプリのホスト

 ASP.NET Coreアプリをホストするためには、単独のASP.NET Coreアプリが実行できる環境の作成を行います。Windows、Mac、Linuxの開発環境で、あらかじめ実行用ファイルを作成します。

 実行用ファイルの作成は、プロジェクトのあるディレクトリに移動し、dotnet CLIを使用して行います。

dotnet publish

 publishコマンドの実行に成功するとプロジェクトフォルダー内に「/bin/Debug/netcoreapp2.0/publish」が作成され、発行用モジュール群が作成されます。

 publishに作成された実行モジュールが正しく動作するか確認します。

dotnet [作成された実行モジュール名].dll

 コマンドラインに表示されたURL(下図にある赤い矢印の箇所)をWebブラウザで表示して、正しく表示が行えれば準備完了です。

ASP.NET Core Appの実行
ASP.NET Core Appの実行

Nginxのリバースプロキシー機能を設定

 それでは、Nginxのリバースプロキシー機能を設定します。基本的な設定は、Host ASP.NET Core on Linux with Nginxに記載された方法に沿って行います。

 ここでは、実際に前述のアプリケーションをホストする手順を紹介します。

アプリ側の設定

 今回のホスティングでは、単一のNginxインスタンスと同一のサーバー上にアプリをホストします。

 つまり、Nginxからリクエストがフォワードされてくるので、ASP.NET CoreアプリにMicrosoft.AspNetCore.HttpOverridesパッケージを追加し、パッケージに含まれるForwarded Heaaderミドルウェアを使用します。

 このミドルウェアはX-Forwarded-Protoヘッダーを使用してRequest.Schemeを更新することで、リダイレクトURIやその他のセキュリティポリシーが正しく機能することができます。

 X-Forwarded-Proto(XFP)ヘッダーとは、クライアントがプロシキやロードバランサーに接続するために使用したプロトコル(HTTPまたはHTTPS)を識別するためのヘッダーです。

 一般的なサーバーのアクセスログには、サーバーとプロキシー間で使用されたプロトコルは残されますが、クライアントとプロキシーとの間のプロトコル情報は含まれません。そのため、クライアントとプロキシー間で使用したプロトコルを識別する場合は、XFPを使用します。

 いくつかの種類の認証ミドルウェアでは、Forwarded Headersミドルウェアを最初に適用にすることを必須としています。この適用順序を守ることで認証ミドルウェアがヘッダー値を識別し、正しいリダイレクトURIを生成することができるようになります。

 Forwarded Headersミドルウェアは、StartupクラスのConfigureメソッド内で宣言します。

 認証ミドルウェアを使用する場合は、UseAuthenticationの前で宣言するようにします。

app.UseForwardedHeaders(new ForwardedHeadersOptions
{
    ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto
});

app.UseAuthentication();

Nginx側の設定

 Ngnixは、設定ファイルの定義に基づいてリクエストを処理します。設定ファイルは「/etc/nginx/conf.d」に格納します。(Microsoftサイトでは/etc/nginx/sites-available/defaultと記載がありますが、実際には設定ファイルは「/etc/nginx/conf.d」に格納されています)

Nginxの設定ファイルの記法

 設定ファイルの書式は、シンプルディレクティブとブロックディレクティブに分かれます。

 シンプルディレクティブの書式は[定義名] [定義値];で表現します。ブロックディレクティブは、以下の通り複数のディレクティブを内包することができます。

[ディレクティブ] { 
    [ディレクティブ]    定義値; 
    [ディレクティブ]    定義値; 
    [ディレクティブ] {
        [ディレクティブ]    [定義値];
        [ディレクティブ]    [定義値];
        [ディレクティブ]    [定義値];
    }
}

 ブロックディレクティブにはeventshttpserverlocationなどがあり、ブロックディレクティブに内包の定義群のことを「コンテキスト」、そして、このコンテキストの外に置かれたディレクティブ群のことを「メインコンテキスト」と呼びます。

ASP.NET Coreアプリへのリバースプロキシーを行う場合の設定サンプル

 ASP.NET Coreアプリへのリバースプロキシーとして設定する場合、以下の通り設定ファイルを記述します。

server {
    listen        80;
    server_name  example.com *.example.com

    location / {
        proxy_pass         http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection keep-alive;
        proxy_set_header   Host $http_host;
        proxy_cache_bypass $http_upgrade;
    }
}

 上記の設定では、server_nameディレクティブには、現在example.com *.example.comを設定しています。これは、サーバー名にこのアドレスが指定されている場合に、以下の設定に基づくリクエストの転送が行われることを意味しています。

 設定ファイルにserver_nameが未指定だった場合は、Nginxはデフォルトサーバーを使用します。デフォルトサーバーが未指定だった場合、設定ファイルに記述される最初のサーバーの定義をデフォルトサーバーと見なします。

 そのため、推奨設定としては、デフォルトサーバーが444のステータスコードを返すように設定することで、該当アドレス以外のリクエストを受け付けないように構成することができます。

server {
    listen  80 default_server
    return  444;
}

 逆にすべてのリクエストを処理したい場合はserver_name行を削除することで、受信したリクエストをすべて処理します。

設定の反映

 Nginxの設定の反映は「設定内容の確認」「設定の再読み込み」の順に行います。設定内容の確認はShellから以下のコマンドで行います。

sudo nginx -t

 問題がある場合は、問題行の表示が行われます。問題がなければ、設定の再読み込みを行います。設定の再読み込みは、Shellから以下のコマンドで行います。

sudo nginx -s reload

 以上でNginxの設定は完了ですが、CentOSはSELinuxが既定でON(Enforcing)になっているため、リクエストが「502 Bad Gateway」となってしまう場合があります。その場合は以下のShellから以下のコマンドを実行して、SELinuxをOFF(Permissive)にすることで動作するようになります。

sudo setenforce 0

Apacheによるホスティング

 Apacheは、Linuxの標準的なWebサーバー機能です。

 Nginxの特徴が高速・軽量であるのに対して、Apacheは高度な機能を持つWebサーバーで、Linuxにおける利用実績も多数あります。ここではApacheに対するホスティング方法について説明します。なお、Apacheの詳細なインストール方法については、多くのサイトで詳細に紹介されているため、本記事では割愛します。

 ここでは参考までに筆者がCentOS 7を使用して、構成した手順を紹介します。前述した手順で、あらかじめ.NET Core SDKのインストールを行っておきます。

Apacheのインストール

 最初にCentOSのシステムパッケージの更新を行います。

sudo yum update -y

 Apacheのインストールは以下のコマンドで行います。

sudo yum -y install httpd mod_ssl

Apacheをリバースプロキシーとして構成する

 Apacheのメインとなる構成ファイルは「/etc/httpd/conf/」ディレクトリにある「httpd.conf」です。

 初期インストールされる「httpd.conf」には、IncludeOptional conf.d/*.confの記述があるため、「/etc/httpd/conf.d/」ディレクトリにある拡張子が「*.conf」となっているファイルがアルファベット順に読み込まれます。

 そこで、「/etc/httpd/conf.d/」ディレクトリに、今回は「c1razor.conf」というファイル名で設定ファイルを作成し、以下の通り記述します。

<VirtualHost *:80>
    ProxyPreserveHost On
    ProxyPass / http://127.0.0.1:5000/
    ProxyPassReverse / http://127.0.0.1:5000/
    ServerName www.example.com
    ServerAlias *.example.com
    ErrorLog ${APACHE_LOG_DIR}hellomvc-error.log
    CustomLog ${APACHE_LOG_DIR}hellomvc-access.log common
</VirtualHost>

 VirtualHostブロックは複数定義することができるため、1つの「*.conf」ファイルに複数定義することもできます。

 前述の通り、設定ファイルは拡張子が「*.conf」であれば読み込まれるため、サイト単位で複数ファイルに分けて定義することもできます。

 この構成ファイルは80番ポートのトラフィックを受信し「www.example.com」および「*.example.com」サイトの仮想サーバーとして機能します。

 仮想サーバーとして受信したリクエストは、IPアドレスの127.0.0.1、つまり自身の5000ポートに中継し、ProxyPassProxyPassReverseで定義しているため、双方向通信を行います。

まとめ

 2回にわたって、ASP.NET CoreやComponentOne for ASP.NET MVCを利用したアプリの開発方法やホスティングについて紹介してきましたが、いかがでしたでしょうか?

 ComponentOne for ASP.NET MVCは、非サポートながらもあらゆる環境で高度なコントロールが開発できるため、手間のかかるユーザーインターフェースの開発の大きな手助けになってくれます。

 今回はマルチプラットフォームをキーワードに開発方法の違いや、ホスティング方法の違いなどを確認しました。実稼働でホスティングする場合はアプリの死活監視や再起動、他セキュリティなどさまざまな考慮事項があるため、本稿で紹介したリンクなども併せて参考にしてください。

 まだまだ、日本語のリソースが少ない状況のASP.NET Coreですが、本稿が何かの参考になれば幸いです。

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

著者プロフィール

  • 森 博之(AZPower株式会社)(モリ ヒロユキ)

     Microsoft Azure、.NETテクノロジーを使用したWebサービスのプロダクトアーキテクト。他にも技術記事の執筆やトレーニング、セミナースピーカーを行っている。  Microsoft MVPをDeveloper Technologies、Visual Studio and Develo...

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