SPA を IIS から流す際の ASP 側のルーティング


Single Page Application (SPA) にて、トップ以外のページで F5 （page reload/reflesh) を押すと、サーバーから Page Not Found が返ってくる。通常、SPA をレンダーする Web server は、基本的に、GETリクエストに対して、ごく短い 唯一のページ返すだけがお役目。\cart とか \list 等が GET で飛んできても、左様なページ(MVCだとcontroller) は存在しないので、404 エラーとなる。

そこでさっそく調べると、以下を web.config に追加せよ、とある（Web serverは IIS を想定）。

    <rewrite>
      <rules>
        <rule name="Rewrite Text Requests" stopProcessing="true">
          <match url=".*"/>
          <conditions>
            <add input="{HTTP_METHOD}" pattern="^GET$"/>
            <add input="{HTTP_ACCEPT}" pattern="^text/html"/>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/>
          </conditions>
          <action type="Rewrite" url="/" appendQueryString="true" />
        </rule>
      </rules>
    </rewrite>

これにて、IIS で走っている Server App には、/ が渡され、デフォルトの Controller がトップページをレンダーする。404 は解決し、唯一のページがレンダーされる。しかし、何も表示しない。Fiddlerすると、/list にて返ってくる html の js や css のパスが、全て /list/dist/bundle.js のように、/list が頭に付与されてしまう。これらは全部 404 となるので、ページは真っ白。

唯一のページの一部：
    <link rel="stylesheet" href="~/Content/site.css" />
    <script type="text/javascript" src="~/dist/bundle.js"></script>

ようは "~/" が、"/" となるべきところ、"/list" に置き換わり、レンダーされてしまう。私の目が悪いのか、このあたり、ピシッと解説しているのが見つからない。皆さんどうやって解決しているのだろう。/ で決め打ちだったら動作するだろうなという解説は多いが、~/ はこの場合譲れない。virtual site に置かれる可能性がかなり高いから。

あれこれ試したところ、IISのRewriteはあきらめ、ASP アプリのルーティングでとりあえず解決した。こんな感じ。

    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            var home = new
            {
                controller = "Home",
                action = "Index",
                id = UrlParameter.Optional
            };

            routes.MapRoute(
                name: "list",
                url: "list",
                defaults: home
            );

            routes.MapRoute(
                name: "doc",
                url: "doc/{id}",
                defaults: home
            );

            routes.MapRoute(
                name: "signout",
                url: "signout",
                defaults: home
            );

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: home
            );
        }
    }

IIS での Rewrite をやめたので、ASP の tide の挙動は通常ものに戻り、~/ は常に virtual directory を含めて正確にアプリのルートを示してくれる。上の難点は、F5 が押されたり、Bookmark 等から飛んでくるであろう 正常な Url 全てを定義する必要がある事。ページ数が少ないうちは良いが、、、ベターなやり方があったら、教えてください。

---
次に、Virtual Directory 環境できちんと動作するか、テスト。

VS、Project Property, Web にてIIS Express に Virtual directory を以下のとおり作成。
Project Url: https://localhost:44330/spa
Create Virtual Directory をクリック。

VSにてF5すると、 https://localhost:44330/spa （唯一ページ）がレンダーされるが、React側で、左様なページは無いと叱られた。そうだ、Reactにベース・パスを設定しなければ。これは簡単。

        <BrowserRouter basename="/spa"}>

これで叱られなくなったが、先ほど "~/" は譲れないと偉そうなことを申した手前、deploy 毎にこれを書き直すのは武士の一分が立たぬ。そこで、MVCプロジェクトで良くやってきた手を使う。サーバー側の唯一ページのViewに以下を組み込む。

    <script type="text/javascript">
        var virDir = "@Url.Content("~/")";
    </script>
    <script type="text/javascript" src="~/dist/bundle.js"></script>

タイミングが良く分からぬが、bundle.js の前に置いた方が安全っぽ。これにて確実に virDirに virtual directory の文字列が格納される。先ほどの記述を、

        <BrowserRouter basename={virDir || "/"}>

なのだけど、TypeScript で書いているので左様な変数は無いと叱られる。
declare var virDir: string; // web server to render the virtual dir path
を冒頭に置いてOK。

以上で、綺麗に動いている。production で virtual directory に置かれても問題ないだろう（近々テスト予定）。

コメント

コメントを投稿

このブログの人気の投稿

HiddenFor 要注意

MVC View で、HiddenFor は View Model よりも ModelState の値を優先する。 これで困るのは、以下のようなシナリオ： 初回ページ(GET)で、HiddenFor(p=>p.Step) で値が "1" だとする。 ユーザーが何らかの入力を実施、POST する。 Controller にて Save その他処理し、Step を "2" に増やす。しかしながら必須入力漏れがあり、Redirect せずに、ModelState.IsValid == false のまま Render する。 このRenderの際、HiddenFor(p=>p.Step) は、値 "1" を採ってしまう。 http://stackoverflow.com/questions/4710447/asp-net-mvc-html-hiddenfor-with-wrong-value 仕様なのだそうだが、理由はわからん。 よって、stateが変わる Action の場合、HiddenFor は使わぬが良し。 <input type="hidden" id="Step" name="Step" value="@Model.Step" /> もしくは 、ModelState の値を変えちゃうには、 ModelState.SetModelValue("Property", new ValueProviderResult("", "abc", CultureInfo.InvariantCulture)); ちなみに、bool 値を流したい場合は、文字列に変え、 <input type="hidden" id="Step" name="BoolValue" value="@Model.BoolValue.ToString()" /> JS 側では、 var boolValue = $(...
続きを読む

Jest の テスト・スクリプトをデバッグする術

React が大分わかってきた（ような気がする）ので、Unit Test に進んでみる。またまた忍び難き道を忍ばねばならなかった。以下、備忘録。この世界も jasmine だとかなんだとか、あまりに選択肢が多く目が回るが、とりあえず Jest を勉強してみようと判断。 [Jest のインストール] 以下の要領でいたって簡単。      https://facebook.github.io/jest/docs/en/getting-started.html#content CLI のどこからでも jest と叩きたいので、グローバルにもインストールした。     npm install -g jest [初期動作確認] 上のサイトの要領に従って sum のテストを実施。すんなり動作した。さほどの感激は無し。 --- ここからが実務となり、厚い壁がはだかっているのは既にわかっている。C#でも Unit Test を書くのは、普通にコードを書くのと同じぐらい大変な作業だが、プログラマのライフセーバーとも言えるので、堪えどころ。 まず、私の書く Unit Test自体にバグが発生することが分かっている。これを詳細にデバッグできないと全くお話にならない。まずはここらから検証。 [Unit Test のデバッグ] 暫し調べると、やはり本家のここにたどり着いた：      https://facebook.github.io/jest/docs/en/troubleshooting.html#content 要は、Node上で Jest.js が走り、そこから私の書いた sum.test.js が走るわけだが、Node が web server を立ててくれ、そこに Chrome からアクセスし、Chromeの F12 で Just 向けに書いた Unit Test スクリプトをデバッグ可能、というわけだ。Nodeは偉い。早速 CLI にて：    node --inspect -brk node_modules/.bin/jest --runInBand やはり、さっぱり動作しない（涙）。結論から申すと、４つの問題が上の短い一行に...
続きを読む