IISサーバやApache等のWebサーバアプリケーション上で、ReactのSPAを動作できない。

前提・実現したいこと

IISを用いてWebサーバを立ち上げました。そのWebサーバにReact + TypeScriptのコードをデプロイして、ブラウザからアクセスして正常動作を確認したい。

発生している問題・エラーメッセージ

現在、AWSのEC2を利用してIISを用いてWebサーバを立ち上げました。
そこに、React + TypeScriptで作成したコードをアップロードした後、Googleブラウザから確認していますが、ページが真っ白で困っています。

2022/02/19追記
原因が分かりました。ReactでSPAを使用しているからだと思います。
現在は、Reactのreact-router-domでページ遷移のところを仮想的にページを生成してあるため、IISやApacheなどでは物理的な階層ファイルをを読みこもうとしているが、実際にはindex.htmlしかそんざいしないためページが真っ白なのだと思います。
「試したこと」として、AWS S3でのホスティングやAmplifyでのホスティングでは正常にSPAのファイルを読み込むことができました。

そこで、質問内容を変えます。
IISやApache等のWebサーバアプリケーションでSPAを動作させるためには、どうすればいいでしょうか？

試したこと

以下は試しましたが、上記エラーは解決されませんでした。

package.jsonに「"homepage":"./"」を追加
package.jsonに「"proxy": "http://localhost:5000"」を追加

2022/02/19追記

S3やAmplifyでは正常に表示されました。

ブラウザはChrome, Safari, FireFoxどれを使用しても同じエラー

補足情報（FW/ツールのバージョンなど）

liyuta

2022/02/15 13:07

Amazon LinuxにApacheをインストールして同様にbuild後のファイルをアップロードしましたが、上記と同様のエラーでページが真っ白でした。

退会済みユーザー

2022/04/07 02:28

質問者さん、その後無言ですが、回答を書いたのでそれに対するフィードバックを書いてください。役に立った/立たなかったぐらいはすぐにでも返せるのでは。役に立たなかったならどこがダメだったかを書くと、より期待する答えに近いものが出てくるかも。とにかく無言は NG です。

行動規範の内容に同意します

回答2件

IISを用いてWebサーバを立ち上げました。そのWebサーバにReact + TypeScriptのコードをデプロイして、ブラウザからアクセスして正常動作を確認したい。

IIS は開発サーバーではないのでそれでは動かないです。npm コマンドで jsx, TypeScript 等をコンパイルして production build を作ってそれをデプロイしないとダメでしょう。

例えばですが、以下の記事の「アプリの初期化」のセクションに従ってアプリを作ったとします。

Reactをはじめる
https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started

それを「ブラウザからアクセスして正常動作を確認」するなら IIS は不要で (というか、IIS では動かせません)、記事に書いてあるように "moz-todo-reactディレクトリーへ cd して、コマンド npm start を実行" でコンパイルされ、

記事に書いてある通り自動的にブラウザに表示されます。

ブラウザには npm コマンドで jsx, TypeScript 等がコンパイルされた結果が表示されているのです。IIS にはその機能はないので開発には使えません。

Visual Studio 2019/2022 が使えるなら、それで React とか Angular 作ってはいかが？

以下の画像は、Visual Studio 2019 v16.11.11 でテンプレートに「React.js での ASP.NET Core」を選び、フレームワークを .NET 5.0 で作成したプロジェクトの自動生成されたフォルダの構造と App.js (中身は JSX ファイル) です。

Visual Studio でビルドすると ClientApp フォルダ下に node_modules フォルダとその中に開発に必要なライブラリがインストールされます。Visual Studio から [デバッグ(D)] ⇒ [デバッグなしで開始(H)] (または [デバッグの開始(S)]) でアプリを実行すると、自動的に IIS Express または Kestrel が Web サーバーとして立ち上がって、結果が以下のようにブラウザに表示されます。

Visual Studio の中でどのように動いているかは不明ですが、npm start で Node.js 開発サーバーを動かすのと同様な動きになります。ホットリロードも可能です。

【追記】

そこで、質問内容を変えます。
IISやApache等のWebサーバアプリケーションでSPAを動作させるためには、どうすればいいでしょうか？

その件に対して回答してなかったので、以下にその回答を書きます。

IIS とのことなので作業する PC は Windows OS とします。上に紹介した MDN の記事「Reactをはじめる」に従って作ったサンプルをベースに書きます。

まず、production build を作ります。npm run build コマンドを実行すると、下の画像のように build ホルダが生成されます。

デプロイするには IIS に関する知識と、生成された production build の中身がどうなっているかを知ってそれに応じたやりかたを考える必要があります。・・・が、そのあたりの詳しいことは後で自分で調べてもらうとして、とりあえずこうすればできるというやり方を説明します。

IIS を使うのには、IIS が匿名アクセスする際に使うアカウント IUSR にデプロイするフォルダ内のファイルに対する読み取り権限を与える必要があります。そのやり方が分からければ、以下のように Users グループが読み取り権限を持っているドライブ、フォルダに生成された build フォルダをそのままコピーしてください。

IIS Manager を立ち上げ「Web サイトの追加」メニューで build フォルダをサイトに設定してください。サイト名、ホスト名は任意です。なお、Default Web Site などの既存のサイトの下に仮想ディレクトリとして設定したのでは build フォルダの index.html 内に設定されているパスの問題で動かないことに注意してください。

ブラウザが要求をかけたら、URL に含まれるホスト名から名前解決をして IIS に接続し、IIS では上に設定したホスト名を頼りに物理パスにアクセスできるようにする必要があります。運用環境ではホスト名と IIS の IP アドレスを DNS に登録ということになりますが、開発環境であれば開発マシンの Hosts ファイルにホスト名と IIS の IP アドレスを登録すれば、開発マシンのブラウザからはアクセスできるようになります。