ソフトウェア-Web関連開発

Blazor WebAssembly アプリ(ASP.NET Core hosted)をフォルダーに発行する

前回は、Blazor WebAssembly App の「ホストしない(ASP.NET Core hosted にチェックを入れない)」プロジェクトをフォルダーに発行し、IIS で動くようにした。

CoreHosted今回は、「ホストされた(ASP.NET Core hosted な)」Blazor WebAssembly App をフォルダーに発行する。

プロジェクト新規作成時、テンプレートから「Blazor アプリ」を選んだ後、「新しい Blazor アプリを作成します」の画面で、左上のフレームワークを「.NET 5.0」に、テンプレートは「Blazor WebAssembly App」に、そして右側の「ASP.NET Core hosted」にチェックを入れる。

SolCore hosted にすると、作成されるソリューションの中にプロジェクトが 3 つぶら下がる。Client、Server、Shared の 3 つ。

CoreHostedWebF5 でデバッグ実行すると、Core hosted でないバージョン(以降「単体版」と呼ぶ)とほぼ同じサイトが表示される。

違いは Fetch data。単体版では所定のファイルを読み込んでいたので毎回同じ内容が表示されたが、Core hosted 版ではサーバーと通信してデータを取得する。サーバー側はランダムな数値を返してくるので、毎回表示される内容が変わる。

発行

前回の単体版発行時とほぼ同じなので、異なる部分のみを記載する。

発行するのは 3 つあるプロジェクトのうちの「Server」プロジェクト。それ以外のプロジェクトは、Server を発行すると自動的にくっついてくる。

x64公開の設定ダイアログでは、配置モードが「自己完結」なのは前回と同じだが、ターゲットランタイムは browser-wasm が選択肢にないので「win-x64」を選ぶ(32 ビット OS を使っていれば win-x86 かと思う)。

wasm じゃなくてちゃんと WebAssembly になるのか不安はあったが、あくまでもサーバー側のバイナリが win-x64 になるだけで、クライアントはちゃんと WebAssembly になるようだ。実行時の通信を見ていると、最初に blazor.webassembly.js をダウンロードさせているし、Fetch data 以外のページ切替では通信が発生しなかったので、必要時以外はクライアント側で完結しているようだ。

その他の設定は前回と同じ。

IIS の設定も前回と同じ。

これで、Core hosted 版も IIS でホストできる。

トラブルシューティング

実は最初、Core hosted 版はうまく IIS で動かなかった。IIS で動かしている Core hosted 版のページを表示しようとすると
  • HTTP エラー 500.19 - Internal Server Error
  • エラーコード 0x8007000d
  • 構成ファイル web.config
というエラーが表示された。

publish フォルダーに IIS のアクセス権限がない場合とは異なり、web.config にアクセスできないのではなく、web.config の内容が良くないという趣旨のようだった。

結果的には自動生成された web.config の内容には問題はなく、以下の対応でページが表示されるようになったが、具体的にどの対応が必要だったのかは不明。
  • 「Windows の機能の有効かまたは無効化」で、「インターネットインフォメーションサービスのホスト可能な Web コア」も念のためチェックを入れた。
  • ASP.NET Core Hosting Bundle を再インストール(IIS の有効化をした後にはやらないといけないらしい)。
  • 1 度、管理者権限で起動した Visual Studio でプロジェクトを発行した(ページ表示に成功してからは、ユーザー権限での発行でも問題なく発行できている)。
  • publish フォルダーの 1 つ上のフォルダーにもファイルがたくさんできていたので、1 つ上のフォルダーにも「IIS_IUSRS」「IUSR」にアクセス権限を付与。
  • IIS マネージャーでサイトの設定を変更する際は、いったんサイトを止めて、publish フォルダーを含む同レベルのフォルダーをすべて削除して、発行し直した。
なお、配置モードは自己完結だけでなく「フレームワーク依存」、ターゲットランタイムを「移植可能」にしても IIS で動かせた(ASP.NET Core Hosting Bundle を入れているので当然とも言えるが)。

Poolまた、アプリケーションプールの設定はデフォルト(.NET CLR 4、マネージドパイプライン統合)で問題ない。




Blazor アプリをフォルダーに発行して IIS でホストする

前回は Blazor WebAssembly アプリ(C# Blazor クライアントサイドアプリ)を Visual Studio の F5 でデバッグ実行したが、今回は、本番運用の雰囲気を掴むために、アプリを Web サーバー(Windows 10 の自サーバー)で公開してみる。Web サーバーにアクセスするとクライアントアプリがダウンロードされて実行される。ローカル LAN のみでの公開で、インターネットには公開しない。

インストール

有効化または無効化まずは Windows 10 に内蔵されている IIS の有効化。

Windows 10 の設定で「機能」で検索すると「Windows の機能の有効かまたは無効化」が出てくるのでクリック。

IIS有効化リストの下の方にある「インターネットインフォメーションサービス」にチェックを入れる。完全チェックにはならないがデフォルトで問題ないようだ。

また、その下にある「インターネットインフォメーションサービスのホスト可能な Web コア」はチェックを入れなくて問題ないようだ(チェック入れておいた方が安心かも?)。

OK を押すと構成を更新してくれる。

Hosting次にホスティング機能のインストール。

マイクロソフト公式サイトから ASP.NET Core Hosting Bundle をダウンロード・インストール。

特段のオプションも無く、簡単にインストールが完了する。

Rewrite最後に URL をリダイレクトするモジュールのインストール。

マイクロソフト公式サイトから URL Rewrite Module 2 をダウンロード・インストール。

言語とプラットフォームでダウンロードファイルが異なっているが、通常は Japanese x64 installer だろう。

こちらもインストールは簡単。

発行

MenuVisual Studio での作業。Blazor のプロジェクトを、IIS 下で実行できるようにビルド(発行)する。

ソリューションエクスプローラーでプロジェクトを右クリックし、「発行」をクリック。

Targetターゲットをフォルダーにする。

Place場所はデフォルトで構わない。

bin\Release\net5.0\browser-wasm\publish

Publishウィザードが閉じて、公開シートが表示される。

デフォルトでは WebAssembly になっていないので、「ターゲットランタイム」などの右側にある鉛筆マークをクリックし、公開の設定ダイアログを開く。

「配置モード」を「自己完結」、「ターゲットランタイム」を「browser-wasm」にして保存する。

Publish2公開シートが更新されたのを確認後、「発行」ボタンをクリックするとビルドが行われ、「ターゲットの場所」で指定したフォルダーにファイル一式が保存される。

IIS の設定

StartMenu発行した Blazor アプリにブラウザからアクセスできるようにするため、IIS の設定を行う。

スタートメニューから「インターネットインフォメーションサービス(IIS)マネージャー」を起動。

IIS マネージャー右側の操作ペインにて、サーバーを開始しておく。

AddSiteIIS マネージャー左側の接続ペインより、「サイト」を右クリックして「Web サイトの追加」をクリック。

Web サイトの追加ダイアログが表示される。
  • サイト名:好きな名前にする。今回はアプリの名前と同じ「BlazorApp1」とした。
  • アプリケーションプール:サイト名と同じ名前で自動入力される。
  • 物理パス:発行時のフォルダーを指定する。ここで指定したフォルダーの直下に「wwwroot」フォルダーと「web.config」が存在しているはずである。wwwroot 自体を指定してはいけない。
  • 種類:https にする。
  • ポート:大きめのポートで好きなポートにする。今回は 10001 にした。
  • SSL 証明書:IIS Express Development Certificate を選択。
設定できたら OK する。

(補足)
試行錯誤中は https でないとうまく動かなかった気がしていたが、改めて試してみたら http でも動くようだ。

http500この段階でブラウザで https://localhost:10001 にアクセスしてページが表示されれば良いが、おそらくは HTTP エラー 500 となるはず。

発行したフォルダーに IIS がアクセスできないことによるエラーなので、フォルダーのアクセス権限を設定する。

FolderSecurity発行したフォルダーのプロパティーを開き、セキュリティタブの編集ボタンをクリック。

続いて追加ボタン、詳細設定ボタンをクリックすると、「ユーザーまたはグループの選択」ダイアログが開く。

UserGroup検索ボタンをクリックするとユーザー一覧が表示されるので、「IIS_IUSRS」「IUSR」の 2 つを選択してから OK する。

以上で準備完了。

アクセス

Accessブラウザで https://localhost:10001 にアクセスすると、BlazorApp1 の Hello, world! が表示される。http「s」であることに注意。

Access2同じ LAN 内の別のパソコンから、サーバーマシンのローカル IP でアクセスすると、セキュリティの警告は出るが、強行すればやはりページは表示される。

以上、無事に IIS で Blazor WebAssembly アプリを公開できた。


Visual Studio で Blazor

「C# で Web ページが作れるんだって」「Blazor って言って、WebAssembly で高速な Web アプリになるらしいよ」

というわけで、Blazor に触れてみるべく、公式のチュートリアルを見てみると……

dotnet new blazorserver -o TodoList

いきなりコマンドラインが出てきたよ! え? Visual Studio でちょちょいとできないのか?

いやいや、ちゃんと Visual Studio でできました。というわけで、その方法まとめ。

ASP.NET のインストール

Henko環境は、Windows 10 + Visual Studio Community 2019 Ver 16.8.2。

Visual Studio Installer を起動し、「変更」をクリック。

aspワークロードタブの「ASP.NET と Web 開発」にチェックを入れて「変更」ボタンをクリック。これで Blazor に必要なコンポーネントがインストールされる。

Blazor アプリ

BlazorAppVisual Studio を起動し、新しいプロジェクトの作成で絞り込みを「C#」「Windows」あたりにすると、選択肢に「Blazor アプリ」が表示されるので選択し、「次へ」。

NewBlazorプロジェクト名や場所などを決めて「作成」すると、「新しい Blazor アプリを作成します」の画面になる。

プラットフォームは「.NET 5.0」、テンプレートは「Blazor WebAssembly App」を選択して「作成」。

SolutionExpBlazor のテンプレートプロジェクトが作成される。

実行

runF5 キーを押してデバッグ実行すると、ブラウザが起動し、テンプレートプロジェクトで作成された Web アプリが表示される。

最初は「Loading...」と表示されるが、少し経つと右のように「Hello, world!」となる。

テンプレートの Web アプリは 3 ページ構成になっていて、左側のメニューでページを切り替えられる。

run2Counter ページでは、「Click me」をクリックする度にカウントアップしていく。

run3Fetch data ページには日付と気温がいくつか並んでいる。これは、予め用意された json ファイルを読み込んで表示するサンプルになっている。

……というように、Visual Studio でも簡単に Blazor を始められた。普段 ASP.NET で Web 開発をしている人にとっては常識的なことなのだと思うが、Web 開発素人にとっては試行錯誤が必要だったので、ここにまとめておく。

(補足)
現時点で、ブラウザは Chrome(か Edge)にしないとデバッグ実行時のブレークができない。ブラウザはツールバーの「IIS Express」で切り替えられる。


TYPINGMANIA の自作曲レベルを算定するサイトを公開

音楽に合わせて歌詞を入力するタイピングゲーム「TYPINGMANIA」は、曲データを自作することができますが、そのデータのレベルを自動算定するウェブページを公開しました。


作成した XML ファイルを指定するだけで、簡単にレベルを算定できます。


TYPINGMANIA 5 は、PV でタイピングできるようになったのでさらに楽しくなりましたね。


ホムンクルスの夢 星の在り処

千本桜 カシオペイア

まるくなる 紅一葉
レクイヱム 夕日坂




Google App Engine の制限が厳しくなったので

GAE-Cron という Web アプリが公開されている。一定時間ごとに特定の Web ページを読み込むためのツールで、主な用途は Web 型 bot の駆動。癒やし系 bot「とわのっと」も GAE-Cron で駆動している。

GAE-Cron は Google App Engine (GAE) 上で動く。ソースコードが公開されており、誰でも GAE アカウントがあれば設置できる。また、1 人が設置して URL を公開すれば、複数人が利用できる便利なツールだ。

かくいう自分も GAE-Cron をデプロイ(公開)して GAE-Cron プロバイダーの 1 つとなっている。

しかしこの度の GAE の無料アカウント負荷制限の厳格化により、GAE-Cron のリソースが厳しくなってきた。

GAELoadGAE のダッシュボードを見てみると、「Frontend Instance Hours」が 25.18/28.00 の 90% に到達しており、ギリギリの状態。名前からして何らかのインスタンスを生成した数なのだろうが、推移を見ていると、Hours という名前に反して、1 時間ごとの平均ではなく、24 時間積もっていくような印象を受ける。日本時間の 17 時にリセットされる。画像は 17 時直前のもの。

折れ線グラフの右側の値が高いのは、ブラウザでメンテナンス作業をしたからかも。

割り当てをオーバーするとしばらくの間使えなくなってしまうので、対策を講じた。

登録できる人数を減らし、無効化されているアカウントを削除。また、極端に負荷の高い設定をしているアカウントは削除させてもらった。

これでどのくらい負荷が改善されるかな。

とわのっと再構築に向けて

実音とわの関連情報をつぶやく(というより最近は飯レスがメインになっている気がしなくもないけど)Twitter bot の「とわのっと」、プログラムとしては EasyBotter を使わせて頂いている。

しかし、とわのっとに必要な機能を追加するために、自分でいろいろプログラムをいじっていて、それがだんだんカオスになってきた。

この際、bot プログラムを新規開発しよう、と PHP と格闘中。クラスを作るのは初めてなのでちょっと戸惑いながら。自クラスのメンバを参照する時に必ず $this が必要とは……。

メンバ関数(PHP 的表現だとメソッド)をインラインでしか書けないのはちょっと嫌。宣言と定義を別にした方が一覧性が良いのに。

WiMAX 鉄道スピードテストのよもやま話

既に日常日記の方で報告したように、WiMAX エリアマップの鉄道版とも言える「WiMAX 鉄道スピードテスト」を公開。UQ も力を入れている鉄道での WiMAX エリア化について、スピードテストの実測値をみんなで共有するサイトなので、WiMAX ユーザーの方は是非、速度を測定して結果をご登録下さい。

さて、こちらは PC 日記なので、WiMAX 鉄道スピードテストの仕組み的なところなどを。

大まかな流れは、予め路線&駅のデータベースを用意しておき、ユーザーの結果登録の際には、選択肢から路線や駅を選んでもらう。結果が投稿されたら、データベースに登録すると共に、駅別・路線別での集計を行う。

基本的な設計思想は、「なるべくサーバーに負担をかけない」。無料レンタルサーバーなので、重い処理をやらせると本当に重くなってしまいそうだったのと、下手するとアカウントを消されてしまいそうなので。

そのため、集計ページにアクセスされる度にデータベースを読んで、ダイナミックにページを生成する方式は却下。本当は、ダイナミックに生成する方が、最近 3 ヶ月だけの結果を表示するとか、いろいろなことができそうなんだけど、我慢我慢。測定結果登録時に静的 HTML を生成する方式とした。

測定結果登録時、カテゴリ・鉄道会社の選択によって路線の選択肢が変わるようになっているが、こういうインタラクティブな部分も、極力 JavaScript の実装にして、サーバーに負担を掛けないようにしている。

鉄道会社のカテゴリのうち、JR は 1 社 1 カテゴリになっているのも、実は負荷軽減のため。測定結果が登録された場合、最終的にはカテゴリの路線一覧を更新する必要があるが、JR 全体を 1 カテゴリにまとめてしまうと、路線数がかなり多くなってしまい、更新に時間がかかってしまう。

右側メニューの「最近の登録」は、実はインラインフレーム。正攻法でいくと、測定結果が登録されたら、既存の全てのページの「最近の登録」を書き換えないといけないが、これはとてもとても重すぎる。そこで、「最近の登録」を集めた HTML 1 つのみを更新し、他の全てのページは、この HTML をインラインで読み込んでいる。

ブログシステムは「最近の記事」をどうやって処理してるんだろう。さすがに記事登録ごとに全ページ更新はやっていないのではと思うのだけど。キャッシュ機構を導入して、初回表示時に「最近の記事」を合成する、とかなのかな。

負荷以外の面で言えば、路線ごとのつながりをちゃんと管理しているのがポイント。例えば、山手線では、大崎駅で埼京線などに乗り換えができる旨の表示を行い、ワンクリックでその路線の結果を見ることができるようになっている。

表示で苦労したのは、速度の棒グラフ。グラフ自体は簡単なんだけど、グラフに数字を重ねるというのが難しい。毎回グラフの長さが違うので、グラフを背景画像にするというわけにはいかない。いろいろ試行錯誤した結果、棒グラフと数字を 2 行で表示し、棒グラフは行半分だけ下にずらし、数字は逆に行半分だけ上にずらすことで、重ね合わせを実現している。この方法であれば、乗り換えセルが複数行になっても、棒グラフはきちんと重ね合わせが維持される。

単純そうなサイトだけど、意外とそれなりに苦労しているのであった。

お手軽に PHP+SQL サーバーを立てる

PHP+MySQL なプログラミングをしてみんとす。

最終的にはレンタルサーバーを借りてそこで PHP スクリプトを動かすのだが、最初からサーバー上でプログラムを動かしながら開発するのは効率が悪いので、ローカル環境に PHP+SQL サーバーを立てたい。なるべくお手軽に。ちなみに、Linux、Apache、MySQL、PHP を合わせて LAMP と呼ぶそうだ(PHPMyAdmin も合わせると LAMPP)。

Windows 環境に PHP をインストールするのは何かとトラブルがおきそうなので、仮想マシン上(VMWare)に Linux をインストールしてサーバーを立て、ネットワークでつなぐことにした。

Linux は Ubuntu 11.04 をチョイス。CentOS も評判だが、Ubuntu の方が手軽らしい。Ubuntu はサーバー版というのがあるが、これは本格的にサーバーを立てる人向けで、GUI すら無い玄人向け。なので Ubuntu のデスクトップ版をチョイス。

仮想マシン設定VMWare の仮想マシン設定は、HDD 15GB、メモリ 512MB、ネットワークアダプタはブリッジ。仮想マシン名は「LAMP-VM」にしておいた。

CD から Ubuntu を起動してインストール。キーボードレイアウトは OADG 109A を選択。インストール後の初回起動時に「It seems that~」のエラーメッセージが表示されるが、特に問題なく起動できる。

端末アイコンの作成利便性のため、Ubuntu のデスクトップにアイコンを作成。[Ubuntu メニュー⇒アプリケーション⇒アクセサリ⇒端末]で右クリックし、「このランチャをデスクトップへ追加」を選択。また、エクスプローラー(Ubuntu では nautilus と言う)で /usr/bin を開き、nautilus のアイコンをデスクトップにドラッグ&ドロップ、マウスを離す際に Alt キーを押して「ここへリンクを作る」を選択。

続いてサーバー類のインストール。端末上で
sudo apt-get install apache2 php5 php5-gd mysql-server php5-mysql phpmyadmin
localhostと入力。HTTP サーバーの選択画面では Apache を選択(スペースキーを押す)。「phpmyadmin のデータベースを dbconfig-common で設定しますか?」の問いには「はい」で回答。パスワードの設定を何回か求められるので設定する。インストール後、ブラウザで localhost にアクセスしてインストールの成功を確認する。

Apache(Apache 2)が表示するドキュメントは /var/www にあるが、ここのファイルは root 権限でしか編集できない。これでは不便なので、
sudo chmod -R 777 /var/www
として、一般ユーザーでも編集できるようにする。あくまでも開発環境で、インターネットに公開する訳では無いので(ネット越しの仮想マシンへのアクセスはルーターで遮断する)、セキュリティは気にしない。

テキストエディタ(gedit)を起動し、/var/www 内に、test.php というファイル名で
<?php print_r (phpinfo()); ?>
という内容のファイルを保存する。ブラウザで localhost/test.php にアクセスし、PHP が動作していることを確認する。

AutoEth0の編集続いて、/var/www に Windows ファイル共有でアクセスできるようにする。まず、仮想マシンに固定 IP アドレスを割り当てる。[Ubuntu メニュー⇒システム⇒設定⇒ネットワーク接続]を開き、「有線」タブの  Auto eth0 を編集する。方式を「手動」にして、固定 IP アドレスを割り振る。ネットマスクは「24」にする。

smbconfnautilus(エクスプローラー)上で /var/www を右クリックして「共有のオプション」を選び、フォルダを共有しようとすると、「共有サービスがインストールされていません」と怒られるので、「サービスのインストール」を実行。

/etc/samba/smb.conf を gedit で開き、[global] セクション内に
usershare owner only = false
Windowsファイル共有の一文を追加する。再び nautilus で /var/www を共有しようとすると、今度は共有できる。これで、Windows 側から /var/www にアクセスできるようになったので、使い慣れた Windows アプリで HTML/PHP ファイルを作成できる。Windows のエクスプローラーで、ネットワーク⇒仮想マシン名(LAMP-VM)⇒www でドキュメントにアクセスできる。

WindowsIE また、この時点で、Windows 側からブラウザ経由でもドキュメントを表示できるようになっている。Windows 側のブラウザで、仮想マシンに割り振った IP アドレスにアクセスすると、Ubuntu 上で localhost にアクセスした時と同じドキュメントが表示される。

MySQL が動作しているかどうかは、次のスクリプトを作成・閲覧すれば良い。
<?php
mysqli_connect("localhost","root",[インストール時に指定したパスワード]) or die("Error");
echo "Success";
?>
以上により、仮想マシンを起動しておけば、Windows 上で HTML/PHP ファイルの作成と閲覧、MySQL データベースの利用ができるようになった。

LAMP設定後

月別アーカイブ
記事検索
最新コメント
  • ライブドアブログ