2020.05.02 .NET Core debonki

Headless CMSを作る

最初の業務で使ったVue.jsと業務で使うことの多い.NET系のフレームワークで何か作ってみたいと思い、Headless CMSでブログを作ってみた。CI/CDまで組んで継続的に開発をしていこうと思ったら土台を作るだけで１週間ほどかかったのでその時の手順を後世に残していこうと思う。 Headless CMSの選定 Vueの公式サイトではButter CMSを使ったブログの作成手順が紹介されているがこれは個人利用であってもお金がかかってしまうため、１ユーザーであればFreeのPrismicを使った。Prismicは言語ごとのチュートリアルがものすごく充実しているのでやりたいことは探せばほぼDocumentに乗っていると思う。これで無料はヤバイ。ローカルで動かす。 .NET Coreプロジェクトの作成以下のコマンドで.NET Coreプロジェクトの作成とSPA Extensionパッケージの追加をやります。

dotnet new webapi -n core-spa-sample --framework netcoreapp3.1 --no-https
cd core-spa-sample
dotnet add package Microsoft.AspNetCore.SpaServices.Extensions --version 3.1.3

dotnet new webapi -n core-spa-sample --framework netcoreapp3.1 --no-https

cd core-spa-sample

dotnet add package Microsoft.AspNetCore.SpaServices.Extensions --version 3.1.3

ここにVue cliプロジェクトを追加し、Coreに設定を追加していきます。 Vue.jsを埋め込むための設定 PrismicのGitHubにVueのテンプレートがあるのでクローンします。

git clone https://github.com/prismicio/vuejs-starter

1	git clone https://github.com/prismicio/vuejs-starter

npm installも忘れずにここまででフォルダ構成はこんな感じ

>>> tree
.
├── Controllers
│   └── WeatherForecastController.cs
├── Program.cs
├── Properties
│   └── launchSettings.json
├── Startup.cs
├── WeatherForecast.cs
├── appsettings.Development.json
├── appsettings.json
├── core-spa-sample.csproj
├── obj
│   ├── core-spa-sample.csproj.nuget.cache
│   ├── core-spa-sample.csproj.nuget.dgspec.json
│   ├── core-spa-sample.csproj.nuget.g.props
│   ├── core-spa-sample.csproj.nuget.g.targets
│   └── project.assets.json
└── vuejs-starter
    ├── README.md
    ├── babel.config.js
    ├── custom_types
    │   ├── index.json
    │   └── page.json
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.png
    │   └── index.html
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   ├── css
    │   │   │   ├── prismic-edit-button.css
    │   │   │   ├── resetr.css
    │   │   │   └── tutorial
    │   │   │       ├── highlight.min.css
    │   │   │       └── tutorial.min.css
    │   │   └── img
    │   │       ├── prismic-logo.svg
    │   │       ├── tutorial
    │   │       │   ├── bb.gif
    │   │       │   ├── chevron.svg
    │   │       │   ├── open.svg
    │   │       │   └── rocket.svg
    │   │       └── vue-logo.png
    │   ├── components
    │   │   └── FooterPrismic.vue
    │   ├── main.js
    │   ├── prismic
    │   │   ├── html-serializer.js
    │   │   └── link-resolver.js
    │   ├── router.js
    │   └── views
    │       ├── NotFound.vue
    │       ├── Preview.vue
    │       └── Tutorial.vue
    └── vue.config.js

>>> tree

├── Controllers

│ └── WeatherForecastController.cs

├── Program.cs

├── Properties

│ └── launchSettings.json

├── Startup.cs

├── WeatherForecast.cs

├── appsettings.Development.json

├── appsettings.json

├── core-spa-sample.csproj

├── obj

│ ├── core-spa-sample.csproj.nuget.cache

│ ├── core-spa-sample.csproj.nuget.dgspec.json

│ ├── core-spa-sample.csproj.nuget.g.props

│ ├── core-spa-sample.csproj.nuget.g.targets

│ └── project.assets.json

└── vuejs-starter

├── README.md

├── babel.config.js

├── custom_types

│ ├── index.json

│ └── page.json

├── package-lock.json

├── package.json

├── public

│ ├── favicon.png

│ └── index.html

├── src

│ ├── App.vue

│ ├── assets

│ │ ├── css

│ │ │ ├── prismic-edit-button.css

│ │ │ ├── resetr.css

│ │ │ └── tutorial

│ │ │ ├── highlight.min.css

│ │ │ └── tutorial.min.css

│ │ └── img

│ │ ├── prismic-logo.svg

│ │ ├── tutorial

│ │ │ ├── bb.gif

│ │ │ ├── chevron.svg

│ │ │ ├── open.svg

│ │ │ └── rocket.svg

│ │ └── vue-logo.png

│ ├── components

│ │ └── FooterPrismic.vue

│ ├── main.js

│ ├── prismic

│ │ ├── html-serializer.js

│ │ └── link-resolver.js

│ ├── router.js

│ └── views

│ ├── NotFound.vue

│ ├── Preview.vue

│ └── Tutorial.vue

└── vue.config.js

次は.csprojを書き換えていきます。vue cli使ったことのある人なら見覚えのあるコマンドが並んでいるはず。

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
    <RootNamespace>core_spa_sample</RootNamespace>
    <!-- root directoryを変数として定義 -->
    <SpaRoot>client-app\</SpaRoot>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="3.1.3" />
  </ItemGroup>

  <ItemGroup>
  <!-- vue cli project以下のフォルダがデプロイされないように設定 -->
    <Content Remove="$(SpaRoot)**" />
    <None Remove="$(SpaRoot)**" />
    <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
  </ItemGroup>

    <Target Name="ExecNpmInstall" BeforeTargets="Build" Condition="'$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)\node_modules')">
    <Exec WorkingDirectory="$(SpaRoot)\" Command="npm install" />
  </Target>

  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
  <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm install --save vue-router" />
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />

  <!-- Include the newly-built files in the publish output -->
  <ItemGroup>
    <DistFiles Include="$(SpaRoot)\dist\**" />
    <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
      <RelativePath>%(DistFiles.Identity)</RelativePath>
      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
    </ResolvedFileToPublish>
  </ItemGroup>
</Target>
</Project>

<TargetFramework>netcoreapp3.1</TargetFramework>

<RootNamespace>core_spa_sample</RootNamespace>

<SpaRoot>client-app\</SpaRoot>

</PropertyGroup>

</ItemGroup>

</ItemGroup>

</Target>

<ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">

<RelativePath>%(DistFiles.Identity)</RelativePath>

<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>

</ResolvedFileToPublish>

</ItemGroup>

</Target>

</Project>

コード側 Vue.jsとCoreを繋ぐコードを書きます。

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.SpaServices;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using System;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Net.NetworkInformation;
using System.Runtime.InteropServices;
using System.Threading.Tasks;

namespace core_spa_sample.VueCoreConnections
{
    public static class Connection
    {

        private static int Port { get; } = 8080;
        private static Uri DevelopmentServerEndpoint { get; } = new Uri($"http://localhost:{Port}");
        private static TimeSpan Timeout { get; } = TimeSpan.FromSeconds(60);

        private static string DoneMessage { get; } = "DONE  Compiled successfully in";

        public static void UseVueDevelopmentServer(this ISpaBuilder spa)
        {
            spa.UseProxyToSpaDevelopmentServer(async () =>
            {
                var loggerFactory = spa.ApplicationBuilder.ApplicationServices.GetService<ILoggerFactory>();
                var logger = loggerFactory.CreateLogger("Vue");

                if (IsRunning())
                {
                    return DevelopmentServerEndpoint;
                }


                var isWindows = RuntimeInformation.IsOSPlatform(OSPlatform.Windows);
                var processInfo = new ProcessStartInfo
                {
                    FileName = isWindows ? "cmd" : "npm",
                    Arguments = $"{(isWindows ? "/c npm " : "")}run serve",
                    WorkingDirectory = "vuejs-starter",
                    RedirectStandardError = true,
                    RedirectStandardInput = true,
                    RedirectStandardOutput = true,
                    UseShellExecute = false,
                };
                var process = Process.Start(processInfo);
                var tcs = new TaskCompletionSource<int>();
                _ = Task.Run(() =>
                {
                    try
                    {
                        string line;
                        while ((line = process.StandardOutput.ReadLine()) != null)
                        {
                            logger.LogInformation(line);
                            if (!tcs.Task.IsCompleted && line.Contains(DoneMessage))
                            {
                                tcs.SetResult(1);
                            }
                        }
                    }
                    catch (EndOfStreamException ex)
                    {
                        logger.LogError(ex.ToString());
                        tcs.SetException(new InvalidOperationException("'npm run serve' failed.", ex));
                    }
                });
                _ = Task.Run(() =>
                {
                    try
                    {
                        string line;
                        while ((line = process.StandardError.ReadLine()) != null)
                        {
                            logger.LogError(line);
                        }
                    }
                    catch (EndOfStreamException ex)
                    {
                        logger.LogError(ex.ToString());
                        tcs.SetException(new InvalidOperationException("'npm run serve' failed.", ex));
                    }
                });

                var timeout = Task.Delay(Timeout);
                if (await Task.WhenAny(timeout, tcs.Task) == timeout)
                {
                    throw new TimeoutException();
                }

                return DevelopmentServerEndpoint;
            });

        }

        private static bool IsRunning() => IPGlobalProperties.GetIPGlobalProperties()
                .GetActiveTcpListeners()
                .Select(x => x.Port)
                .Contains(Port);
    }
}

100

101

102

103

using Microsoft.AspNetCore.Builder;

using Microsoft.AspNetCore.SpaServices;

using Microsoft.Extensions.DependencyInjection;

using Microsoft.Extensions.Logging;

using System;

using System.Diagnostics;

using System.IO;

using System.Linq;

using System.Net.NetworkInformation;

using System.Runtime.InteropServices;

using System.Threading.Tasks;

namespace core_spa_sample.VueCoreConnections

{

public static class Connection

{

private static int Port { get; } = 8080;

private static Uri DevelopmentServerEndpoint { get; } = new Uri($"http://localhost:{Port}");

private static TimeSpan Timeout { get; } = TimeSpan.FromSeconds(60);

private static string DoneMessage { get; } = "DONE Compiled successfully in";

public static void UseVueDevelopmentServer(this ISpaBuilder spa)

{

spa.UseProxyToSpaDevelopmentServer(async () =>

{

var loggerFactory = spa.ApplicationBuilder.ApplicationServices.GetService<ILoggerFactory>();

var logger = loggerFactory.CreateLogger("Vue");

if (IsRunning())

{

return DevelopmentServerEndpoint;

}

var isWindows = RuntimeInformation.IsOSPlatform(OSPlatform.Windows);

var processInfo = new ProcessStartInfo

{

FileName = isWindows ? "cmd" : "npm",

Arguments = $"{(isWindows ? "/c npm " : "")}run serve",

WorkingDirectory = "vuejs-starter",

RedirectStandardError = true,

RedirectStandardInput = true,

RedirectStandardOutput = true,

UseShellExecute = false,

};

var process = Process.Start(processInfo);

var tcs = new TaskCompletionSource<int>();

_ = Task.Run(() =>

{

try

{

string line;

while ((line = process.StandardOutput.ReadLine()) != null)

{

logger.LogInformation(line);

if (!tcs.Task.IsCompleted && line.Contains(DoneMessage))

{

tcs.SetResult(1);

}

catch (EndOfStreamException ex)

{

logger.LogError(ex.ToString());

tcs.SetException(new InvalidOperationException("'npm run serve' failed.", ex));

}

});

_ = Task.Run(() =>

{

try

{

string line;

while ((line = process.StandardError.ReadLine()) != null)

{

logger.LogError(line);

}

catch (EndOfStreamException ex)

{

logger.LogError(ex.ToString());

tcs.SetException(new InvalidOperationException("'npm run serve' failed.", ex));

}

});

var timeout = Task.Delay(Timeout);

if (await Task.WhenAny(timeout, tcs.Task) == timeout)

{

throw new TimeoutException();

}

return DevelopmentServerEndpoint;

});

}

private static bool IsRunning() => IPGlobalProperties.GetIPGlobalProperties()

.GetActiveTcpListeners()

.Select(x => x.Port)

.Contains(Port);

}

次にStartup.csの編集

using MyCMS_API.VueCoreConnections;

// 省略

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllers();
            services.AddSpaStaticFiles(options => options.RootPath = "vuejs-starter/dist");
        }

// 省略

            // use middleware and launch server for Vue  
            app.UseSpaStaticFiles();
            app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "vuejs-starter";
                if (env.IsDevelopment())
                {
                    spa.UseVueDevelopmentServer();
                }
            });

using MyCMS_API.VueCoreConnections;

// 省略

// This method gets called by the runtime. Use this method to add services to the container.

public void ConfigureServices(IServiceCollection services)

{

services.AddControllers();

services.AddSpaStaticFiles(options => options.RootPath = "vuejs-starter/dist");

}

// 省略

// use middleware and launch server for Vue

app.UseSpaStaticFiles();

app.UseSpa(spa =>

{

spa.Options.SourcePath = "vuejs-starter";

if (env.IsDevelopment())

{

spa.UseVueDevelopmentServer();

}

});

これで.NET Coreの上でVue.jsを動かすことができます。

2019.11.15 C# debonki

LINQの書き方（C#）

LINQとは LINQについて、Webサイトで調べると、"LINQはプログラミング言語（C#やVB）に統合されたクエリ用言語です。通常データベースアクセスに使用するSQLが、C#やVBのプログラム内では文字列として扱われるのに対し、LINQはそれ自体が言語に統合されたクエリとして認識されます。( 参考 )などと書かれていたりしますが、書籍管理アプリでLINQを使う場合のサンプルがあったほうが、わかりやすいかと思いますので、サンプルを貼っていきます。基本的な考え方ここでは、蔵書テーブルに対するやり取りのサンプルコードを使用しますクエリ文の宣言

var Books = from m in _context.BookCollection select m;

1	var Books = from m in _context.BookCollection select m;

条件を加える

// 廃棄フラグが0の場合という条件を加える
 Books = Books.Where(s => s.FlgDisposal == "0");

1 2	// 廃棄フラグが0の場合という条件を加える Books = Books.Where(s => s.FlgDisposal == "0");

リストとして実体化する

// ここでは、非同期でクエリ文を実行して、BookListにテーブルのデータをリストにして格納しています。
var BookList = await Books.ToListAsync();

1 2	// ここでは、非同期でクエリ文を実行して、BookListにテーブルのデータをリストにして格納しています。 var BookList = await Books.ToListAsync();

１～３までの処理を一行にまとめる

var BookList = await _context.BookCollection.Where(s => s.FlgDisposal == "0").ToListAsync();

1	var BookList = await _context.BookCollection.Where(s => s.FlgDisposal == "0").ToListAsync();

処理を一行でまとめるとシンプルなコードが書けるのですが、クエリ文を作成するところと、実体化する部分を分けることによって、検索やソートの処理を簡単に実装することができます。以下は参考です。 Microsoft Document→ ASP.NET Core の Razor Pages と EF Core – 並べ替え、フィルター、ページングやりがちなミス演習を進めていくと、貸し出しテーブルの「ステータス」と書籍マスタの書籍名を一つのページに表示させたいという場面があるかと思います。その時に、以下のようにLINQを書くと、上手くいきません。

// BooksにBookCollectionテーブルとBorrowBooks、Booksテーブルの内容を格納したい
var Books = await _context.BookCollection.Include(x => x.BorrowBooks).Include(x => x.IsbnNavigation).ToListAsync();
//                                          　       ↑この部分がおかしい。 モデルのコードを見ればわかるのですが、
//                                              　   ICollection<BorrowBooks>で宣言されています。

// BooksにBookCollectionテーブルとBorrowBooks、Booksテーブルの内容を格納したい

var Books = await _context.BookCollection.Include(x => x.BorrowBooks).Include(x => x.IsbnNavigation).ToListAsync();

// 　 ↑この部分がおかしい。モデルのコードを見ればわかるのですが、

// 　 ICollection<BorrowBooks>で宣言されています。

理由としては、上の図を見てもらえば分かると思うのですが、テーブルの設計上、BorrowBooksテーブルからしか、Booksテーブルの内容を参照できないことが原因になります。他のテーブルのデータを取ってきたい場合は、青い矢印でたどっていくように、以下のようにコードを書くと上手くいくと思います。

var Books = _context.BorrowBooks
                   .Include(x => x.IdBookNavigation.IsbnNavigation)
                   .Include(x => x.IdBookNavigation.IsbnNavigation).ToListAsync();

var Books = _context.BorrowBooks

.Include(x => x.IdBookNavigation.IsbnNavigation)

.Include(x => x.IdBookNavigation.IsbnNavigation).ToListAsync();

CATEGORY C#

Headless CMSを作る

.NET Core 3.0 MVCで作成したプロジェクトが起動しない

Azure Functionチュートリアルをやってみた

LINQの書き方（C#）

.NET Framework3.5を有効化する時に、「エラー: 0x800f0954」でハマった

広告

Recent Posts