albatrosary's blog

UI/UXとエンタープライズシステム

Angular Universal and .Net Core Scaffolding

dotnet (ここでは、あえて dotnet と記します)には Angularテンプレートが用意されているという話を聞きましたので実際に触ってみました。ここで dotnet のバージョンは RC4 を使う必要があります。Angular のテンプレートがあるというだけではさほど珍しいものでもなく、むしろ、なら angular-cli を使ったほうが遥かに利便性は良いと思います。

f:id:albatrosary:20170305233406p:plain

dotnet の Angular テンプレートの魅力は Angular Universal を基本的に利用しているところです(現時点で Angular Universal をサポートしているのは Node.js と dotnet core だけ)。

Angular Universal は Angularを使ったサーバサイドレンダリングです。

dotnet インストール

dotnet をインストールする前に .NET - Powerful Open Source Development 書かれている通りの準備を行います。

$ brew update
$ brew install openssl
$ mkdir -p /usr/local/lib
$ ln -s /usr/local/opt/openssl/lib/libcrypto.1.0.0.dylib /usr/local/lib/
$ ln -s /usr/local/opt/openssl/lib/libssl.1.0.0.dylib /usr/local/lib/

準備が完了したら dotnet をインストールしますが、RC4をインストールする必要があるため下記サイトからバージョンを指定しインストールします。

github.com

数分で dotnet-cli のインストールが完了しますので dotnet --info でバージョンを確認します。

$ dotnet --info
.NET Command Line Tools (1.0.0-rc4-004771)

Product Information:
 Version:            1.0.0-rc4-004771
 Commit SHA-1 hash:  4228198f0e

Runtime Environment:
 OS Name:     Mac OS X
 OS Version:  10.12
 OS Platform: Darwin
 RID:         osx.10.12-x64
 Base Path:   /usr/local/share/dotnet/sdk/1.0.0-rc4-004771
$ 

次にSPA(Single-page Application)用のテンプレートをインストールします。ここに Angular, Reactなどのテンプレートが定義されています。

$ dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

Templates                                     Short Name      Language      Tags
------------------------------------------------------------------------------------------
Console Application                           console         [C#], F#      Common/Console
Class library                                 classlib        [C#], F#      Common/Library
Unit Test Project                             mstest          [C#], F#      Test/MSTest
xUnit Test Project                            xunit           [C#], F#      Test/xUnit
Empty ASP.NET Core Web Application            web             [C#]          Web/Empty
MVC ASP.NET Core Web Application              mvc             [C#], F#      Web/MVC
MVC ASP.NET Core with Angular                 angular         [C#]          Web/MVC/SPA
MVC ASP.NET Core with Aurelia                 aurelia         [C#]          Web/MVC/SPA
MVC ASP.NET Core with Knockout.js             knockout        [C#]          Web/MVC/SPA
MVC ASP.NET Core with React.js                react           [C#]          Web/MVC/SPA
MVC ASP.NET Core with React.js and Redux      reactredux      [C#]          Web/MVC/SPA
Web API ASP.NET Core Web Application          webapi          [C#]          Web/WebAPI
Solution File                                 sln                           Solution

Angular テンプレートを使ったアプリケーションの生成

Angular テンプレートを使いアプリケーションを生成します。作業ディレクトリを作成し dotnet-cli を使ってスカッフォールドします。

$ mkdir dotnet-sample && cd $_
$ dotnet new angular

package.json を見ると確認できますが、これで生成される Angular バージョンは 2.4.5 でプラス Angular Universal も利用しています。

ビルド&実行を行います。まずはじめにパッケージをリストアする必要があります:

$ dotnet restore

Ilasm(IL Assembler)コンパイルするには、buildコマンドを使用します:

$ dotnet build

[参考] ILアセンブラは中間言語(IL)から移植可能な実行可能ファイル(PE)を生成します。ILが必要なメタデータを含む実行可能ファイルを実行して、ILが期待どおりに実行されているかどうかを判断できます。

ソースをビルド&実行するためには次のコマンドを使います:

$ dotnet run

http://localhost:5000 での実行を促されますのでブラウザで表示するとテンプレートサイトが表示されます。

f:id:albatrosary:20170305230941p:plain

最後に一言、 .NET foundation ステッカー欲しい。