@jsakamoto

2019年 02月 26日

ASP.NET Core Web アプリプロジェクトで、Node.js 使わずに Sass (SCSS) をコンパイルする

.NET Core SDK 環境のみで Sass (SCSS) をコンパイルする

C# による Web アプリ・サーバー側実装のフレームワーク ASP.NET Core を使った、Web アプリプログラム開発での話。

最近はフロント側を Angular で書くようになったため、Sass (SCSS) を CSS にコンパイルするのは、webpack によるモジュールバンドリング処理の一環として webpack の loader で行なう必要があり、実際そのようにしている。

しかし他方、Angular などのフロント側フレームワークに依らない、静的なちょっとした Web サイト作成や、C# でフロント側を実装する Blazor のようなフレームワークを使うケースでは、Sass (SCSS) ファイルを css ファイルにコンパイルする方法は、必ずしも webpack に頼る必要はない。

実のところ、.NET Core プロジェクトのビルドシステムにおいては、nuget.org で公開されているライブラリ (NuGet パッケージ) による支援もあって、Sass (SCSS) を css にコンパイルすることが可能だ。

.NET Core SDK さえ開発マシンにインストールされていれば、Node.js などがインストールされていなくても、Sass (SCSS) コンパイルが可能なのである。

ただ、現時点では .NET Core プログラムのビルドの一環として Sass (SCSS) コンパイルを実施することが可能、という状況なので、プロジェクトファイル (.csproj など) が必須である。

実際にやってみる

.NET Core プログラムのビルドの一環として Sass (SCSS) コンパイルを実施するには、まず、以下の NuGet パッケージを当該プロジェクトにパッケージ参照追加する。

dotnet CLI であれば、対象プロジェクトがあるフォルダをカレントディレクトリにして、下記を実行すればよい。

> dotnet add package BuildWebCompiler

Windows OS 上で Visual Studio を使っている場合は、GUI のパッケージマネージャから追加してもよいだろう。

次に、対象プロジェクトのルートフォルダに以下のような内容の設定ファイル "compilerconfig.json" を作成する。

[
  {
    "inputFile": "wwwroot/css/test.scss",
    "outputFile": "wwwroot/css/test.css"
  }
]

以上で設定完了だ。

上記 compilerconfig.json の inputFile で指定した Sass (上記例だと SCSS 形式だが) ファイル "wwwroot/css/test.scss" を作成し、ビルドを実行する。

そうすると、この Sass (SCSS) ファイルがコンパイルされて、outputFile で指定されたファイル名の CSS ファイルが出力されるのが確認できるはずだ。

さらにオマケとして、出力先 css ファイルは、そのミニファイ版も同時に生成される（ファイル名は .../test.min.css となっている）。

compilerconfig.json にどのような記述ができるかは、あまり詳しいリファレンスは見つけていないものの、先の NuGet パッケージの GitHub リポジトリにある README (下記 URL) が参考になる。

https://github.com/madskristensen/WebCompiler#compilerconfigjson

このように、.NET Core SDK 環境だけでも、プロジェクトのビルドの一環として、Sass (SCSS) ファイルを css にコンパイルすることが可能である。

ちなみにこの BuildWebCompiler NuGet パッケージ、実は Sass (SCSS) -> css コンパイルのみならず、LESS や CoffeeScript などなど、様々な変換が可能だ。

自分では実際には試したことがないが (※CoffeeScript 書くスキルがない...)、もし需要があるなら試してみるとよいかもしれない。

Sass (SCSS) -> CSS コンパイルだけ実行する

ビルド時に Sass (SCSS) -> CSS コンパイルができるようになったが、しかしながら開発中は、.scss を編集するだけでいちいちプロジェクト全体をビルドはしたくないところである。

dotnet CLI を使うなら、対象プロジェクトがあるフォルダ上で下記 dotnet コマンドを実行することで、Sass (SCSS) -> CSS コンパイルだけを実施することが可能だ。

> dotnet msbuild -t:WebCompile -nologo

ウォッチ

さらにできれば、.scss ファイルを保存したら自動で .css にコンパイルしてくれたら嬉しい。

そのためのやり方のひとつとして、「ファイルの変更を監視し、変更されたらタスク (この場合は .scss > .css のコンパイル) を実行する」という "ウォッチ" 方式がある。

このウォッチ方式による .scss > .css 自動コンパイルの実現は、dotnet CLI のウォッチ機能を利用することで可能となる。

ただし残念ながら自分が知る限り、ちょっとだけ事前の手順が必要。

まず対象プロジェクトファイルをテキストエディタで編集し、下記の要領で .scss ファイルを監視対象に含めるようプロジェクトを構成する必要がある。

<Project Sdk="Microsoft.NET.Sdk.Web">
  ...
  <ItemGroup>
    ...
    <Watch Include="wwwroot\css\*.scss" /> <!-- この行を追加 -->
  </ItemGroup>
  ...

上記変更を施したら、対象プロジェクトがあるフォルダ上で下記 dotnet コマンドを実行することで、ファイル変更の監視を行なう dotnet CLI が常駐する。

> dotnet watch msbuild -t:WebCompile -nologo

この状態で .scss ファイルを上書き保存すると、.scss > .css コンパイルが実行されるようになる。

なお、dotnet CLI の watch 機能は、監視対象のファイルを状況に応じて使い分けることが難しいようで、例えばこの状態で、同プロジェクトに含まれる C# ソースコード (.cs ファイル) を上書き保存しても、.scss > .css コンパイルが走ってしまう。

dotnet CLI の watch 機能を、このプロジェクトでは .scss > .css コンパイルにしか使わない、という場合は、プロジェクトファイルに以下のとおり追記して、C# ソースコードファイルを監視対象から除外することが可能だ。

<Project Sdk="Microsoft.NET.Sdk.Web">
  ...
  <ItemGroup>
    ...
    <Compile Update="**/*.cs" Watch="false" /> <!-- この行を追加 -->
  </ItemGroup>
  ...

IDE/エディタの拡張機能もあるが...

以上ここまで、.NET Core SDK 環境で、プロジェクトのビルドの一環として Sass (SCSS) を CSS にコンパイルする方法について説明してきた。

なお、Sass (SCSS) を CSS にコンパイルする方法としては他にも、Visual Studio のような IDE や、Visual Studio Code などのエディタにおける「拡張機能」を利用することもできる。

実際、Windows OS 上で Visual Studio を使う場合は下記拡張を Visual Studio にインストールしておくと、Visual Studio 上での .scss ファイルの編集・保存時に .css へのコンパイルが実行されるようになる。

実のところ、これまで説明してきた、.NET Core アプリプロジェクトのビルド時に Sass (SCSS) コンパイルが実行されるやり方で使用したに BuildWebCompiler NuGet パッケージと上記 Visual Studio 拡張は同じコードベースで作られている。

そのため、先に説明した compilerconfig.json の設定を読んで同じように動作するので大変使い勝手が良い。

あと、同じ理由で、この Visual Studio 拡張も Sass (SCSS) のみならず LESS やら CoffeeScript やらもファイル保存時のコンパイルが可能だ。

また、Visual Studio Code であれば、下記の拡張が人気があるようだ。

このように、IDE やエディタの拡張機能を用いることで、.scss ファイル保存時に自動で .css にコンパイルすることができるようになり、このほうが開発者体験としてはより良いように感じる。

とはいえ、開発メンバー全員の IDE/エディタ環境を揃えるのが手間だったりうまくいかないことがあるかもしれない。

開発環境を再構築後に、うっかり拡張を入れ忘れてしまい、.scss を変更・保存したけれども、対応する .css が更新されずしまい、というバグだって引き起こしてしまうかも知れない。

そうしたケースに備える目的で、ソースコードをリポジトリから git clone するだけで、開発環境への各種拡張の追加インストールすることなく、最低限ビルドすればちゃんと .scss が .css にコンパイルされるようになるのは、これはこれで便利で大事なことだと思う。

補足

これまでの説明では、あくまでも .NET Core アプリ開発としての説明としてきたが、実は BuildWebCompiler NuGet パッケージは、.NET Framework のプロジェクトに追加しても同じように動作する。

これまでの説明における dotnet CLI を使った用法はできないが、Visual Studio 上で .NET Framework 用アプリ開発時でも、同じようにビルド時に Sass (SCSS) ファイルを CSS ファイルにコンパイルすることが可能となる。

# by developer-adjust | 2019-02-26 22:01 | .NET | Comments(0)

2019年 01月 28日

Angular + SignalR な Web アプリで、HubConnection.invoke() 時の変更検知発動を抑止する

背景

サーバー側は ASP.NET Core 2.1、クライアント側は Angular 5.2.5 を使用し、さらにここに SignalR (JavaScript クライアントは 1.0.4) を加えてライアント/サーバー間でのリアルタイム通信を行なう Web アプリ実装における話。

SignalR は、Node.js で言うところの Socket.IO に相当するようなライブラリ。

ASP.NET Core Web アプリに、ブラウザを含めたクライアントへのプッシュ通信など、リアルタイム Web 機能を実現できるようにするものだ。

クライアント（ブラウザ）側では、サーバー側からのプッシュ通信を待ち受け（ハンドラ関数を登録しておく）するほか、SignalR の通信チャンネルを通じてサーバー側を呼び出すこともできる。

具体的には、クライアント（ブラウザ）側の JavaScript コードにて、SignalR の通信チャンネルを表す HubConnection オブジェクトの invoke メソッドを呼び出すことで実装する。

HubConnection.invoke() で発生する変更検知を debounce したい!

さて、SignalR を使用して、クライアント/サーバー間通信を頻繁に行なう、クライアント側は Angular を採用した SPA 実装を行なっていると、ちょっと処理速度性能的に問題となることがある。

あまりに頻繁に SignalR の HubConnection.invoke() を呼び出す必要があると、Angular の変更検知処理が都度都度走ってしまい、アプリが重くなってしまうのだ。

そのため、Angular の NgZone の機能を使い、HubConnection.invoke() 呼び出し時の Angular の変更検知発生を明示的に抑止し、デバウンス処理などを自前で組み込むことにしていた。

前提知識: Angular の変更検知を走らせないようにする方法

下記記事が参考になる。

記事タイトルは「Angularの外部でイベントが発生した時の変更検知の方法」だが、「逆に Angular に変更検知をさせたくない場合」の節に変更検知を抑止する方法が記載されている。

具体的には、NgZone オブジェクトを DI 機構で受け取っておき、その上で、変更検知を走らせたくない処理を、NgZone.runOutsideAngular() メソッドのコールバック内で実行すればよい。

HubConnection.invoke() での変更検知を抑止

さて、SignalR の HubConnection.invoke() 呼び出し時、Angular の変更検知を走らせないようにするには、結論としては以下の3点。

SignalR の接続開始処理 (HubConnection.start()) を、NgZone.runOutsideAngular() 内で実行する
HubConnection.invoke() を NgZone.runOutsideAngular() 内で実行する
HubConnection.invoke() の呼び出し結果を、async/await ではなく .then() による Promise メソッドチェーンで処理する

なぜ async/await してはいけないか?

上記 3 の「async/await 使うな」についてはちょっと説明が要るかもしれない。

上記 3 を記載したのは、NgZone.runOutsideAngular() を使って変更検知抑止を実施したとしても、その処理を内包している async 関数の Promise が解決されるときに、結局変更検知が走るからである。

もっとも、その async 関数自体をさらに NgZone.runOutsideAngular() 内で実行すればこれまた変更検知は抑止できるので、絶対に async/await を使ってはいけない、と単純に言えるものではない。

また、もしかしたら、「とある async 関数 foo 内での HubConnection.invoke() 呼び出し時は、変更検知は抑止したいが、それら処理がひととおり終わって async 関数 foo から抜け出したら、変更検知が走って欲しい」というケースのほうが多いかも知れない。

そのような要件・シナリオの場合は、むしろ async/await で実装したほうが、コードも読みやすいし、期待した動作結果・挙動となることと思う。

start() と invoke()、片方だけ runOutsideAngular しても効果無し

ちなみに、HubConnection.start() と、HubConnection.invoke()、いずれか片方だけ NgZone.runOutsideAngular() 内で実行しても変更検知は走ってしまう。

特に HubConnection.invoke() だけ NgZone.runOutsideAngular() 内で実行した場合、変更検知は抑止されず、しかし変更検知のタイミングが invoke() の結果処理後にずれこみ、レンダリング内容に反映されないなど面倒なことになるようだ。

いっぽう、 HubConnection.start() を NgZone.runOutsideAngular() 内で実行しておいた場合は、

HubConnection.invoke() をそのまま実行した場合は従来どおり変更検知が実施され、
HubConnection.invoke() を NgZone.runOutsideAngular() 内で実行した場合は変更検知が抑止される、

という具合に呼び分けられるようになる。

つまり、SignalR 通信に関して Angular 変更検知を抑止するつもりなら、HubConnection.start() を NgZone.runOutsideAngular() 内で実行しておくのが肝要なようだ。

注意: HubConnection.on() で登録したハンドラ関数実行時の変更検知も抑止されてしまう

しかしながら、前述の変更検知抑止処置 ― HubConnection.start() をNgZone.runOutsideAngular() 内で実行 ― をしてしまうと、サーバー側からのプッシュ通信を受け取るハンドラ関数呼び出し (HubConnection.on() で登録したコールバック関数の実行時) についても、一切、変更検知が走らなくなってしまう。

より正確に言えば、HubConnection.on() だけではなく、HubConnection.onclose() コールバックでも変更検知は発生しなかった。

これらコールバックでも変更検知を発動させるには、面倒だが、ハンドラ関数内で個別に NgZone.run() 呼び出しを使って明示的に変更検知を走らせるほかないようだ。

もっとも、「SignalR 通信のサーバー側プッシュのハンドラでは、 Angular 変更検知を抑止したい」ということであれば、HubConnection.start() をNgZone.runOutsideAngular() 内で実行すればよい、ということでもある。

コード例

実際のコード例を GitHub にあげておく。

とくにクライアント側コード例の抜粋を以下に貼っておく。

# by developer-adjust | 2019-01-28 22:06 | Web系一般 | Comments(0)

2018年 12月 28日

ASP.NET Core Web アプリの開発中、開発機の外から接続できるようにする

背景

Visual Studio や dotnet CLI + お好みのエディタなどを使っての、ASP.NET Core Web アプリを開発中の話。

開発中の ASP.NET Core Web アプリを、エミュレータではない実機のモバイル端末 (iOS や Android など) から接続して動作確認したいことはよくある。

その実現方法としては、例えば ngrok を使ってローカル開発中の ASP.NET Core Web アプリをインターネット上に晒し、そこにモバイル端末実機のブラウザから接続しにいくのもアリではある。

とはいえ、開発途上のものを、一時的とはいえインターネット上に晒すのは危険が伴う。

そもそも通信経路が長くなる上、ngrok の処理性能やモバイル回線の速度・帯域にも大きく左右されて、すばやい動作確認、トライ&エラーの繰り返しがやりにくい。

ということで、顧客に見てもらうなどの理由がない限りは、開発機と同一ローカルエリアネットワークに Wi-Fi 接続したモバイル端末実機から、同ネットワーク経由で接続するのが普通かと思う。

ただ、ASP.NET Core Web アプリの既定のプロジェクト構成では、開発中の ASP.NET Core Web アプリはローカルホスト (127.0.0.0/24, ::1) でしか待ち受けしていない。

なので、当該開発機の外部からは、そのままでは接続できない。

そこで、プロジェクト構成を変更する必要がある。

Visual Studio 上からの設定変更

Visual Studio で開発中の場合、お勧めの方法は以下のとおり。

まず実行形態を、IIS Express によるホスティングではなく、プロジェクト実行 (いわゆる、"dotnet run" 実行) を選択しておく。
Visual Studio 上で当該 ASP.NET Core Web アプリプロジェクトのプロパティ表示を開き、[デバッグ] カテゴリを開く。
この画面で、[ブラウザを起動] の設定で、「https://localhost:5001」というような絶対 URL を明記。
続けて [環境変数] のところに、[名前] が「ASPNETCORE_URLS」である項目を追加、[値] には「https://*:5001;http://*:5000」というように、ホスト名を「*」で指定した待ち受け URL を、複数ある場合はセミコロン (;) 区切りで設定する。
[アプリケーション URL] の欄は空欄にする。

以上で Ctrl+F5 で実行などすれば、当該開発機の外部からも、この ASP.NET Core Web アプリが接続を受理、応答を返すようになる。

なお、上記で行なった設定内容は、Properties フォルダ内にある、「launchSettings.json」というファイル名の JSON ファイルにその設定内容が保存されている。

例えば次のとおり。

{
  "iisSettings": ...,
  "profiles": {
    "IIS Express": ...,
    "WebApplication1": {
      "commandName": "Project",
      "launchBrowser": true,
      "launchUrl": "https://localhost:5001",
      "environmentVariables": {
        "ASPNETCORE_URLS": "https://*:5001;http://*:5000",
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "applicationUrl": ""
    }
  }
}

"dotnet run" で実行する場合

dotnet CLI を用いた "dotnet run" による実行でも、上記 launchSettings.json に基づいて ASP.NET Core Web アプリを立ち上げる。

なので、 dotnet CLI を使っての開発中の場合でも、上記のように launchSettings.json を作成・記述しておけばそれだけでよい。

また、先の説明では端折ってしまったが、設定のキモは、環境変数 ASPNETCORE_URLS の設定である。

標準のプロジェクトテンプレートで作成された ASP.NET Core Web アプリであれば、環境変数 ASPNETCORE_URLS を見て、そこに設定されている待ち受け URL を採用するようにできているのだ。

先で説明している launchSettings.json の内容も、要するに環境変数 ASPNETCORE_URLS を設定しているわけである。

なので、launchSettings.json がなくても、コマンドプロンプト (ターミナル) で下記のように環境変数 ASPNETCORE_URLS を設定してから dotnet run を実行することでも OK だ。

> rem 以下は Windows OS のコマンドプロンプトでの例
> cd \path\to\yourprojectdir
> set ASPNETCORE_URLS=https://*:5001;http://*:5000
> dotnet run

※ "dotnet run" を実行したコマンドプロンプト (ターミナル) 内で環境変数 ASPNETCORE_URLS を設定しつつ、 launchSettings.json でも環境変数 ASPNETCORE_URLS を設定していた場合は、 launchSettings.json の設定のほうが優先する。

補足: アプリケーション URL を設定すればよいのでは?

ホストアドレスに「0.0.0.0」を指定

実は、Visual Studio での設定時、環境変数 ASPNETCORE_URLS ではなく、[アプリケーション URL] に、「https://0.0.0.0:5001;http://0.0.0.0:5000」というように、ホストアドレスを「0.0.0.0」とした待ち受け URL を設定することでも、外部からの接続を受け付けるようになる。

但し上図の設定だと、IPv4 アドレスでのみ待ち受けすることになるので注意。

すなわち、開発機上のブラウザでアドレスバーに「https://localhost:5001」や「http://127.0.0.1:5001」と入力するぶんには当該 Web アプリにアクセスできるものの、IPv6 アドレスである「https://[::1]:5001」を入力すると、接続不能となるのである。

まぁ、「開発中の Web アプリをモバイル端末実機で確認」という用途であれば、IPv4 アドレスのみでの待ち受けで十分事足りる気もする。

なので、実際上は、上図のようなアプリケーション URL 設定による方式で十分かもしれない。

もっとも、IPv6 アドレスでも待ち受けさせることももちろん可能で、その場合はホストアドレスとして「[::]」を指定すればよい。

例えば「https://0.0.0.0:5001;http://0.0.0.0:5000;https://[::]:5001;http://[::]:5000」というようにアプリケーション URL を設定すれば、IPv4 でも IPv6 でも、外部からつながるようになる。

ただ、ちょっと設定が長すぎではある。

アプリケーション URL 設定で、ホストアドレスに「*」を指定しないのはなぜ?

アプリケーション URL 設定に、（環境変数 ASPNETCORE_URLS での設定と同じように）「https://+:5001」とか「https://*:5001」のように、ホストアドレスとして「+」や「*」を指定すれば、 IPv4 と IPv6 の設定を併記しなくて済むのでは? とも思われた。

試しにやってみたところ、 launchSettings.json を直接編集して "applicationUrl" に "https://*:5001" を設定し、dotnet run で実行するぶんにはうまくいった。

しかし launchSettings.json がこの状態で、当該プロジェクトを Visual Studio で開き、Ctrl+F5 実行すると、「Invalid URI: The hostname could not be parsed.」というエラーメッセージボックスを表示して起動してくれない。

また、Visual Studio 上からは、アプリケーション URL に + や * をホストアドレスとした URL を設定すると入力検証エラーになって設定できない。

加えて、先のとおり launchSettings.json を直接編集した状態でプロジェクトのプロパティ画面から [デバッグ] セクションを開いてしまうと、場合によっては入力検証エラーに阻まれ、プロパティ画面を閉じたり保存したりができなくなり、どうにもならない "詰んだ" 状況に陥ってしまう。

...これらのことから、環境変数 ASPNETCORE_URLS に待ち受け URL を設定する方式がいちばん一貫性もあり、自分のお勧めの方法と結論づけている。

補足: [ブラウザを起動] の URL を明記するのはなぜ?

dotnet run で実行するぶんには、 launchSettings.json の "launchUrl" は無くても (あるいは空文字であっても) なんら問題ない。

本稿作成時点では、dotnet run では、ブラウザの起動までは行なわないからだ。

しかし Visual Studio 上で開発・実行してブラウザも開きたいというケースでは、[ブラウザを起動] の URL を明記しておかないと厄介なことになる。

まず、環境変数 ASPNETCORE_URLS に待ち受け URL を設定する方式の場合、Ctrl+F5 実行すると、Web アプリのプロセスは起動するものの、Visual Studio がエラーメッセージボックスを出してブラウザ起動に至らない。

また、アプリケーション URL にホストアドレス 0.0.0.0 で設定する方式の場合、Ctrl+F5 実行すると、ブラウザは起動するものの、「https://0.0.0.0:5001」という URL を開いてしまってアクセスできない結果となる。

なので、少なくとも Visual Studio 上での実行でブラウザも同時に開きたいケースでは、ちゃんと [ブラウザを起動] の URL を明記しておくに越したことはない。

補足: IIS Express での実行時について書かれてないけど?

需要と余力があれば調べて試して本ブログに投稿する...かもしれない。

# by developer-adjust | 2018-12-28 22:37 | .NET | Comments(0)

2018年 12月 09日

はじめての C# からの Selenium、そして NET Core ではエラーになる場合

Selenium とは

ここで言う Selenium とは、Web ブラウザをプログラミング言語から自動操縦することを可能にするソフトウェアだ。

本稿では、C# から Selenium の .NET バインディングを使用して Web ブラウザを操縦できるようになるまでの手順を紹介する。

なお、Selenium は、Firefox や Google Chrome などなど、各種 Web ブラウザを操縦可能だが、話を簡単にするためにとりあえず今回は Google Chrome を操縦することとする。

.NET Framework + Visual Studio の場合

まずは Visual Studio を起動し、プロジェクトの新規作成から適当な C# プロジェクトを作成する。

ここではコンソールアプリとしたが、必要に応じて WinForms などの GUI プロジェクトや単体テストプロジェクトでも構わない。

続けて、NuGet パッケージマネージャーから、以下の 2 つのNuGet パッケージをこの C# プロジェクトに追加する。

ちなみに、Firefox を操縦したければ Selenium.WebDriver.GeckoDriver NuGet パッケージをプロジェクトに追加すればよい。

あとはブラウザを操縦する C# プログラムを記述すればよい。

下記は Chrome で Bing 検索を開き、"Selenium WebDriver" という語句を検索実行する例だ。

using OpenQA.Selenium.Chrome;
...
using (var driver = new ChromeDriver())
{
  driver.Navigate().GoToUrl("https://www.bing.com/");

  driver
    .FindElementById("sb_form_q")
    .SendKeys("Selenium WebDriver");

  driver
    .FindElementById("sb_form_go")
    .Click();

  Console.WriteLine("OK");
  Console.ReadKey(intercept: true);
}

以上でビルド & 実行 (Visual Studio 上で Ctrl + F5)　すれば、そのとおり実行される。

以上である。

上記手順にあるとおり、ブラウザを Selenium 経由で操縦するための通訳を行なうプログラム、"WebDriver" も NuGet パッケージで配布されていて、これを参照する格好となっている。

例えば Google Chrome 用の WebDriver は (Windows OS の場合) "chromedriver.exe" というプログラムファイルである。

この "chromedriver.exe" が NuGet パッケージ参照によって、ビルド先の出力フォルダに自動でコピーされるのだ。

このため、

「このプロジェクトを git clone してビルド & 実行するには、事前に自分で WebDriver プログラムをダウンロードして、Path の通った適当なフォルダに解凍しておいてね」

みたいな事前の環境整備が不要である。

.NET Core + dotnet CLI の場合

.NET Core がインストールされている環境で、dotent コマンドを使い、同じようにやってみることにしよう。

コンソール (ターミナル) を開き、まずは適当な作業フォルダを作成しよう。

カレントディレクトリをこうして作成した作業フォルダの中に移動し、以下のコマンドで .NET Core なコンソールアプリの C# プロジェクトを新規作成する。

> dotnet new console

続けて、以下のコマンドで、Selenium.WebDriver、及び Selenium.WebDriver.ChromeDriver の両 NuGet パッケージの参照を追加する。

> dotnet add package Selenium.WebDriver
> dotnet add package Selenium.WebDriver.ChromeDriver

これでプロジェクトができたので、適当なテキストエディタを使って C# プログラムを同じように書きあげればよい。

ビルドと実行はコンソール (ターミナル) に戻って「dotnet run」コマンドを実行だ。

dotnet run

これで Google Chrome が起動...

と思ったら起動せずに下記エラーになってしまった。

Unhandled Exception: OpenQA.Selenium.DriverServiceNotFoundException: The chromedriver.exe file does not exist in the current directory or in a directory on the PATH environment variable.

"chromedriver.exe" が見つからない!?

だがしかし、.NET Framework 版のときと同じように、"chromedriver.exe" はたしかに出力フォルダにコピーされている。

.NET Framework 版と同じように作成したのに、一体何故!?

Selennium が WebDriver を探す場所

実は Selenium が WebDriver ファイルを探す場所は、環境変数 PATH が指すフォルダ群の他には、Selenium の .NET アセンブリファイルである WebDriver.dll が配置されているフォルダが対象となっている。

いっぽうで、.NET Core では NuGet パッケージ参照しているアセンブリファイル (.dll) は、出力フォルダにコピーされないのが既定の仕様である。

出力フォルダにコピーされない代わりに、%HOMEPATH%\.nuget\packages フォルダ以下に共有して保存されているアセンブリファイルが実行時にプロセスに読み込まれる仕組みだ。

そのため、.NET Core 版プロジェクトでは、Selenium の WebDriver.dll アセンブリがある場所 = (プロジェクトの出力フォルダではなく) %HOMEPATH%\.nuget\packages\...\selenium.webdriver\... みたいな場所で、"chromedriver.exe" を探してしまい、しかしもちろん、そんなところに "chromedriver.exe" は存在しないから件のエラーになってしまうという顛末である。

回避策 A - 出力フォルダにコピーしちゃう

C# プロジェクトファイル .csproj 内に指定を追記することで、.NET Core なプロジェクトであっても、参照している NuGet パッケージのアセンブリファイルを出力フォルダにコピーすることが可能だ。

具体的には、.csproj ファイル内の PropertyGroup ノード内に以下の記述を追加する。

<CopyLocalLockFileAssemblies>true</CopyLocalLockFileAssemblies>

こうしてビルドすると、WebDriver.dll が (.NET Framework のときと同じように) プロジェクトの出力フォルダにコピーされ、この状態であれば "chromedriver.exe" が見つかるので、無事実行できるようになる。

ただ、.NET Core なプログラムだと、小さな NuGet パッケージをたくさん参照する傾向がありがちで、発行時はさすがにともかくも、通常のデバッグビルド・デバッグ実行のたびに大量の .dll が出力フォルダに毎回コピーされるのもどうかという気がしないでもない。

回避策 B - Selenium に明示的に教える

.NET Core なプロジェクトで、出力フォルダを確実に指す実行時情報がある。

AppDomain クラスの BaseDirectory プロパティだ。

そして幸い、Google Chrome 用 Web Driver "chromediver.exe" との通信を司る ChromeDriver クラスのコンストラクタは、"chromediver.exe" のありかを指定する1引数をもつオーバーロードバージョンがある。

この2者を組み合わせて以下のように "chromediver.exe" のあるフォルダを明示的に指定すれば良い。

var baseDir = AppDomain.CurrentDomain.BaseDirectory;
var driver = new ChromeDriver(baseDir);

こうすれば、.csproj をいじらずとも、期待どおり実行されるようになる。

まとめ

C# なプログラミングにおいては、.NET Framework 版、.NET Core 版のいずれであっても、

プロジェクト作成
NuGet パッケージ参照追加
コーディング

の 3ステップで Selenium によるブラウザ操縦プログラムが実装できる。

このとき、WebDriver ファイルの手動による事前配置は不要で、NuGet パッケージ参照によって WebDriver ファイルは解決される。

ただ、.NET Core のときは .NET Framework のときと比べてちょっとだけ手を掛けてやらねばならず、

プロジェクト設定を書き換えて、NuGet パッケージのアセンブリファイルをすべて出力フォルダにコピーするようにするか、
ソースコード上で、WebbDriver ファイルのあるフォルダを明示するか

しないと実行時に WebDriver ファイルが見つからないエラーとなるので注意。

下記 Issue が参考になるかと思う。

以上。

# by developer-adjust | 2018-12-09 00:00 | Selenium | Comments(0)

2018年 09月 28日

ASP.NET Core のアプリケーション構成を上書きするいろいろ - 特に環境変数とコレクション

ASP.NET Core アプリのアプリケーション構成

ASP.NET Core アプリは、標準のプロジェクトテンプレートで作成すると、プロジェクトのフォルダにある appSettings.json というファイルを読みこんで、アプリケーション構成として使用するようにできている。

この appSettings.json にアプリケーション固有の半固定パラメータなどの設定値を JSON 形式で記述しておき、アプリ中からその設定値を読み取って利用する、というものだ。

詳しくは下記を参照するとよいだろう。

例えば下記のような appSettings.json を用意したとして、

{
  "SiteSettings": {
    "Title": "Hello World",
    "TimeZone": {
      "Name": "Tokyo Standard Time",
      "Offset": 9
    },
    "Tags": [
      { "Text": "Foo", "Priority": 0.7 },
      { "Text": "Bar", "Priority": 0.3 }
    ]
  }
}

ASP.NET Core アプリの実装コード (今回は C#) で、下記のように、上記 appSettings.json の JSON 構造にマッピングされるクラスを用意して、

public class SiteSettings {
  public string Title { get; set; }

  public TimeZoneSettings TimeZone { get; set; }

  public class TimeZoneSettings {
    public string Name { get; set; }
    public int Offset { get; set; }
  }

  public TagSettings[] Tags { get; set; }

  public class TagSettings {
    public string Text { get; set; }
    public double Priority { get; set; }
  }
}

ASP.NET Core アプリの Startup クラスにて、下記のように、appSettings.json ファイル中の SiteSettings ノード以下を DI コンテナへサービス登録することで、

public class Startup
{
  public IConfiguration Configuration { get; }
  
  public Startup(IConfiguration configuration)
  {
    Configuration = configuration;
  }

  public void ConfigureServices(IServiceCollection services)
  {
    services.Configure<SiteSettings>(Configuration.GetSection("SiteSettings"));
    ...

`IOptions<SiteSettings>` 型のインスタンスを DI 機構によって入手できるようになる。

この `IOptions<SiteSettings>` オブジェクトの各プロパティを参照すると、appSettings.json の記載内容が SiteSettings オブジェクトにマッピングされて読み取られ、参照可能となっている寸法だ。

// 変数 settings は、DI 機構から入手した IOptions<SiteSettings> オブジェクトへの参照
settings.Value.Title; // <- "Hello World"
settings.Value.TimeZone.Name; // <- "Tokyo Standard Time"
settings.Value.TimeZone.Offset; // <- 9
settings.Value.Tags[0].Text; // <- "Foo"
settings.Value.Tags[1].Text; // <- "Bar"

アプリケーション構成の "上書き"

この appSettings.json に記載されている設定値だが、いくつかの方法で "上書き" が可能だ。

ひとつは appSettings.Develop.json に記述する方法。

開発環境での実行時は、appSettings.json の設定値に対して、appSettings.Develop.json に記述した設定値で上書きされたように、アプリ側では設定値を読み取るようにできているのだ。

この仕組みにより、appSettings.json には既定値を、appSettings.Develop.json には各開発者固有の環境依存の設定値など（例えばデータベースの接続先設定値とか）を記載しておいたりして、アプリの動作を調整できる。

例えば先の例だと、appSettings.Develop.json に以下のように記述しておくと、

{
  "SiteSettings": {
    "TimeZone": {
      "Name": "Asia/Tokyo",
    }
  }
}

アプリ側の読み取り結果は下記のとおりとなる。

settings.Value.Title; // <- "Hello World"
settings.Value.TimeZone.Name; // <- "Asia/Tokyo" ... 上書きされた!
settings.Value.TimeZone.Offset; // <- 9
settings.Value.Tags[0].Text; // <- "Foo"
settings.Value.Tags[1].Text; // <- "Bar"

なお、appSettings.Develop.json の "Develop" のファイル名部分は、実は環境変数 ASPNETCORE_ENVIRONMENT の値である。

なので、環境変数 ASPNETCORE_ENVIRONMENT に "FooBar" を設定すれば、appSettings.FooBar.json が上書き用に読み込まれる。

アプリケーション構成のセクション名は英字の大小が区別されない

話は逸れるが、面白い(?)ことに、appSettings.Develop.json で appSettings.json の設定値を上書きする際、セクション名 (ノード名、プロパティ名) の英字の大文字と小文字は一致しなくても構わない。

アプリケーション構成のセクション名は Case Insensitive として動作するのだ。

なので、appSettings.json に、英字の大小違いの同一セクションを設けると（例えば下記）、JSON としては間違いではないのだが、その ASP.NET Core アプリは起動時にクラッシュしてしまう。

{
  "SiteSettings": {
    "title": "hello world", // <- セクション名の先頭が小文字
    "Title": "Hello World", // <- セクション名の先頭が大文字

IIS 経由で実行した場合は

「HTTP Error 502.5 - Process Failure - The application process failed to start」

として現れるし、「dotnet run」で実行すると、

「Unhandled Exception: System.FormatException: A duplicate key 'SiteSettings:Title' was found.」

というように、重複キー発生である例外メッセージがコンソール出力から読み取れる。

環境変数で "上書き"

アプリケーション構成を上書きするもうひとつの方法は、環境変数で "上書き" する方法である。

appSettings.json 中の各セクション (ノード、プロパティ) 名を、コロン (:) 区切りで連結した名前で環境変数を定義すると、その環境変数の値がアプリケーション構成として読み取れるのだ。

言い換えると、C# や JavaScript 上、ドット (.) で区切るところをコロン区切りに置き換えた名前、とも言える。

先の例でいくと、例えば環境変数 "SiteSettings:TimeZone:Offset" に "8" と設定してから実行すると、アプリでの読み取り結果は下記のとおりとなる。

settings.Value.Title; // <- "Hello World"
settings.Value.TimeZone.Name; // <- "Tokyo Standard Time"
settings.Value.TimeZone.Offset; // <- 8 ... 9 から 8 に上書きされた!
settings.Value.Tags[0].Text; // <- "Foo"
settings.Value.Tags[1].Text; // <- "Bar"

Windows OS 上で Visual Studio を用いて開発・実行している場合は、Visual Studio の画面上、プロジェクトのプロパティ画面から環境変数を設定することもできる。

このやり方だと、環境変数の設定を変更して保存 (Ctrl +S) すると、Visual Studio が自動で ASP.NET Core アプリのプロセスを再起動してくれ、アプリケーション構成が再読み取りされて、設定内容が即反映されるのだ。

appSettings.json 及び appSettings.Develop.json を編集・保存した場合は、そのようなプロセス再起動をはじめ、自動でアプリケーション構成を再読み取りされることはないようである。

(どこかで、appSettings.Develop.json が変更されたら再読み取りするオプション指定を見かけたような気もするのだが。)

ちなみに、こうして Visual Studio 上から設定した環境変数設定は、プロジェクトのフォルダ以下、Properties フォルダ内の launchSettings.json 内に書き込まれる。

「dotnet run」で実行する際も、この launchSettings.json の内容は読み取られて使われる。

なので、launchSettings.json に環境変数を設定しておいて「dotnet run」で実行すると、その環境変数設定が反映されて実行される。

ご参考までに。

また、これも至極当然のことではあるが、こうして環境変数で上書きする際も、セクション名 (環境変数名) の英字の大小は区別されない。

Microsoft Azure の App Service 設定での "上書き"

実は、Microsoft Azure の App Service 上に Web アプリを配置したときに、Azure ポータルから「アプリケーション構成」で設定する値も、アプリ側には環境変数として現れる。

なので、この仕組みで、ASP.NET Core アプリのアプリケーション構成を Azure ポータルから上書き設定することができるのだ。

その際のセクション名の指定方法は、上記のとおりコロン区切りでセクション名を連結した名前を、Azure ポータル「アプリケーション構成」の欄の "APP SETTING NAME" のところに指定してやれば良い。

"上書き" というよりは "合成" と言ったほうがイメージあってる?

これら "上書き" の動作だが、優先順位としては次のとおり。

環境変数 > appSettings.Develop.json > appSettings.json

上記3者で同じセクション名で異なる値をそれぞれ設定していた場合、環境変数による設定が勝つ。

また、"上書き" とは言ったが、appSettings.json 内に記述のないセクション名のアプリケーション構成を、環境変数で設定してあれば、アプリ側ではちゃんと読み取れる。

例えば appSettings.json に SiteSettings.Title がなくても、

"SiteSettings": {
  "TimeZone": { // <- "Title" プロパティがない!
  ...

環境変数 "SiteSettings:Title" に "HELLO!" が設定されていれば、アプリ側ではちゃんと読み取れる。

settings.Value.Title; // <- "HELLO!" ... 環境変数での設定が見えている!

なお、上記のような例を見ると、appSettings.json に存在しないセクションなので、存在しないものに対して "上書き" という言い方には違和感を覚えるかもしれない。

上書きというよりかは、Key-Value の辞書のツリーを "合成" (マージ) していくようなイメージのほうが理解しやすいかもしれない。

よくよく考えたら、環境変数を読むのに使えたり。

ここまでを振り返ってよくよく突き詰めて考えてくと、実は ASP.NET Core のアプリケーション構成の仕組みで、環境変数がまるっと取得できてしまったりもするのだ。

ここまで紹介してきた例では、Startup にて、"Configuration.GetSection("SiteSettings")" と設定していたので、すべての環境変数は見えず、"SiteSettings:～" で始まる名前の環境変数だけ見えていた。

これを改め、単に "Configuration" オブジェクトそのものを渡してバインドすれば、すべての環境変数値がバインド可能だ。

また、ASP.NET Core アプリケーション構成の仕組みは、必ずしも静的型付けしなくては使えないわけではなく、Configuration オブジェクトを参照し、その GetValue などのメソッドを使って、文字列でセクション名 (= 環境変数名) を指定して取得することもできる (下記など参考に)。

本来の用途ではないが、ASP.NET Core のアプリケーション構成の仕組みを介して、プロセスの環境変数をすべて参照することも可能だ。

ところで、コレクションって何にバインドできる?

ところで、今回の例にある、"Tags" セクションは、JSONN 上、配列になっており、これのバインド先の SiteSettings クラスでも配列としている。

public class SiteSettings {
  ...
  public TagSettings[] Tags ... // <- TagSettings 型の "配列"
  ...

試したところ、実はここ、配列じゃなくても大丈夫だった。

"List<T>" でも "IEnumerable<T>" でも "ICollection<T>" でもバインドできた。

public class SiteSettings {
  ...
  public IEnumerable<TagSettings> Tags ... // <- これでも OK!
  ...

果たして "T[]"、"List<T>"、"IEnumerable<T>"、"ICollection<T>"、etc. のいずれでバインドするのが最適なのか、自分にははっきりとは判断つきかねる。

ただ、どちらかといえばいちばん書き換えできなさそうな "IEnumerable<T>" がいいのかなぁ、と漠然と考えている。

環境変数からコレクションの設定を上書きするには?

さて今回の例の "Tags" セクション内の配列構成を、環境変数で上書きするには、どのような変数名を指定すればよいのだろう?

最初は、"SiteSettings:Tags[0]:Text" というような、C# や JavaScript などでよくあるインデクサ表記を環境変数名とすることで上書きできるのかと考えた。

が、試したところこれは間違い。

正解は "SiteSettings:Tags:0:Text" だ。

これは "JavaScrit 的な考え方" に慣れてるとわかりやすいと思う。

すなわち、配列の要素を、例えば0番目の要素であれば「Tags オブジェクトの、"0" という名前のプロパティ」というように捉えるのだ。

今回の例の、上書き前のオリジナルの appSettings.json の構成内容だと、Tags プロパティの内容は下記のとおりとなっている。

settings.Value.Tags[0].Text; // <- "Foo"
settings.Value.Tags[0].Priority; // <- 0.7
settings.Value.Tags[1].Text; // <- "Bar"
settings.Value.Tags[1].Priority; // <- 0.3

ここで環境変数 "SiteSettings:Tags:1:Text" に "Hoge" を設定すると、下記のとおり上書きされる。

settings.Value.Tags[0].Text; // <- "Foo"
settings.Value.Tags[0].Priority; // <- 0.7
settings.Value.Tags[1].Text; // <- "Hoge" ... "Bar" から上書きされた!
settings.Value.Tags[1].Priority; // <- 0.3 ... ここはそのまま!

上書き前の配列要素数を超えたら...?

さて、では今回の例において、環境変数 "SiteSettings:Tags:999:Text" に "Hoge" を設定したらどうなるのか!?

アプリ側で読み取った結果はこうなった。

settings.Value.Tags[0].Text; // <- "Foo"
settings.Value.Tags[0].Priority; // <- 0.7
settings.Value.Tags[1].Text; // <- "Bar"
settings.Value.Tags[1].Priority; // <- 0.3

// Tags[2] が増えた!
settings.Value.Tags[2].Text; // <- "Hoge"
settings.Value.Tags[2].Priority; // <- 0.0

一瞬戸惑ってしまったが、改めて JavaScript 脳になって考えてみると、何のことはない、環境変数名の "999" は「配列の添え字」ではなく、プロパティ名なのだ。

どうやら、ASP.NET Core のアプリケーション構成の仕組みは、バインド先の型がコレクションである場合、バインド元の値の "プロパティ" を列挙して、その値を順繰り、バインド先のコレクションの要素に編成しているようである。

配列、じゃなくて、結局は Key-Value の辞書である

なので、数字だけじゃなくて、任意の識別子を当てはめられる。

例えば環境変数名を、"SiteSettings:Tags:999:Text" ではなく、"SiteSettings:Tags:FizzBuzz:Text" としても、結果は同じになるのだ。

また、環境変数からの上書きというのではなく、appSettings.json の記述そのものを辞書形式で記述することもできる。

"SiteSettings": {
  ...
  "Tags": [
    { "Text": "Foo", "Priority": 0.7 },
    { "Text": "Bar", "Priority": 0.3 }
  ]
  ...

は、アプリケーション構成的観点では以下のように記述してるのと同義と言える。

実際、アプリでの読み取り結果も変らなかった。

"SiteSettings": {
  ...
  "Tags": {
    "0": { "Text": "Foo", "Priority": 0.7 },
    "1": { "Text": "Bar", "Priority": 0.3 }
  }
  ...

さらには、プロパティ名 (Key) は数字である必要すらない。

下記でも TagSetting[] にバインドされ、読み取り結果は変わりない。

"SiteSettings": {
  ...
  "Tags": {
    "Alpha": { "Text": "Foo", "Priority": 0.7 },
    "Omega": { "Text": "Bar", "Priority": 0.3 }
  }
  ...

ちなみに、上記のような感じで Key-Value 辞書オブジェクトをコレクションにバインドした場合、その要素の追加順序は、プロパティ名 (Key) のオーダーとなるようだ。

削除はできなさそう

なお、このような仕掛けであるようなので、appSettings.json で設定した配列構成要素を、appSettings.Develop.json や環境変数から "削除" することはできなさそうだ。

例えば今回の例において、appSettings.Develop.json を以下のとおり記述し、Tags の設定内容を要素数 0 件に潰そうとしたとする。

"SiteSettings": {
  ...
  "Tags": [] // オリジナルの Tags 構成値を0件にしてやる!
  ...

しかしこれは意図したとおりには動作しない。

配列ではなく、"0" や "1" といった配列序数を名前としたプロパティを持つオブジェクトを "上書き" するのだ、と JavaScript 脳で考える必要がある。

JavaScript で言うならば、オリジナルの Tags オブジェクトに対し、空のオブジェクトで Object.assign するようなものだ。

var tags = {"0":{...}, "1":{...}};
var tagsDevlop = {}; // "Tags":[] は空オブジェクトと同義

// 空オブジェクトを assign しても、tags は何の変化もなし!
Object.assign(tags, tagsDevelop);

結果として、上記 appSettings.Develop.json は、何の効果ももたらさないこととなる。

そう、JavaScript の Object.assign を知っているならば、ASP.NET Core アプリケーション構成の "上書き" の仕組みは、Object.assign であると考えると間違いがないだろう。

まとめ

以上、ASP.NET Core のアプリケーション構成の上書き (というか、"合成") の振る舞いについて色々試した結果となる。

ざっくりおさらいすると下記のとおり。

英字の大文字・小文字は区別されない。
appSettings.Develope.json より環境変数のほうが勝つ。
環境変数ではセクション名をコロンで区切って設定。
Visual Studio での環境変数設定は Properties\launchSettings.json ファイルに保存される。
コレクションのバインド先は "T[]", "List<T>", "IEnumerable<T>", "ICollection<T>" のいずれでも OK。
環境変数でコレクションの要素を上書きするには、序数をプロパティ名として設定。
コレクションもその正体は、"0" や "1" といった序数をプロパティ名とした JavaScript オブジェクト (辞書) であるだけ。
なので、序数じゃない任意の識別子も指定できちゃう - その場合、プロパティ名 (Key) のオーダーでコレクションが編成される。
結局、JavaScript の Object.assign() で重ね書きしてる感じ。
なので、appsettings.json に設定済みの要素を、削除することはできないと思われる。

あと、最後になってしまったが補足しておくと、ここまでのアプリケーション構成の仕組みは ASP.NET Core アプリに限らず、Microsoft.Extensions.Options でアプリケーション構成を扱う .NET アプリ全てに適用される。

今回の投稿はかなりの大作となってしまった。

これでアプリケーション構成の "上書き" で迷うことはなくなった...と思いたい。

# by developer-adjust | 2018-09-28 23:29 | .NET | Comments(0)

.NET Core SDK 環境のみで Sass (SCSS) をコンパイルする

実際にやってみる

Sass (SCSS) -> CSS コンパイルだけ実行する

ウォッチ

IDE/エディタの拡張機能もあるが...

補足

背景

HubConnection.invoke() で発生する変更検知を debounce したい!

前提知識: Angular の変更検知を走らせないようにする方法

HubConnection.invoke() での変更検知を抑止

なぜ async/await してはいけないか?

start() と invoke()、片方だけ runOutsideAngular しても効果無し

注意: HubConnection.on() で登録したハンドラ関数実行時の変更検知も抑止されてしまう

コード例

背景

Visual Studio 上からの設定変更

"dotnet run" で実行する場合

補足: アプリケーション URL を設定すればよいのでは?

ホストアドレスに「0.0.0.0」を指定

アプリケーション URL 設定で、ホストアドレスに「*」を指定しないのはなぜ?

補足: [ブラウザを起動] の URL を明記するのはなぜ?

補足: IIS Express での実行時について書かれてないけど?

Selenium とは

.NET Framework + Visual Studio の場合

.NET Core + dotnet CLI の場合

Selennium が WebDriver を探す場所

回避策 A - 出力フォルダにコピーしちゃう

回避策 B - Selenium に明示的に教える

まとめ

せっかくのエラー詳細がわからない

console.log で出力するように書き換えてしまえ!

xUnit 単体テストプロジェクトも SDK スタイルでやりたい!

SDK スタイル形式で xUnit 単体テストプロジェクトを作る

上手くいったと思ったのだが...

.NET Framework 4.5.2 なら OK!?

まとめ

ASP.NET Core アプリのアプリケーション構成

アプリケーション構成の "上書き"

アプリケーション構成のセクション名は英字の大小が区別されない

環境変数で "上書き"

Microsoft Azure の App Service 設定での "上書き"

"上書き" というよりは "合成" と言ったほうがイメージあってる?

よくよく考えたら、環境変数を読むのに使えたり。

ところで、コレクションって何にバインドできる?

環境変数からコレクションの設定を上書きするには?

上書き前の配列要素数を超えたら...?

配列、じゃなくて、結局は Key-Value の辞書である

削除はできなさそう

まとめ

再起動以外、復旧しない...

でも、ちょっと不思議な不具合...

キーボード入力にかかわるソフトウェアの問題?

犯人がわかった!

Git では空のフォルダはバージョン管理下に登録されない

Git で空のフォルダをバージョン管理に含める方法

exclude 指定してみるが...

exclude 指定でもなく、".gitkeep" ファイルでもなくて...

HTTPS プロトコルでのアクセスを強制する

Azure Web Apps 上では、デプロイするだけでは NG

ファン申請