回答編集履歴

1

追記

2022/04/07 02:26

投稿

退会済みユーザー
test CHANGED
@@ -28,3 +28,36 @@
28
28
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-04/4b25ee5d-1e33-4349-a009-53a66573602e.jpeg)
29
29
 
30
30
  Visual Studio の中でどのように動いているかは不明ですが、npm start で Node.js 開発サーバーを動かすのと同様な動きになります。ホットリロードも可能です。
31
+
32
+ ---
33
+
34
+ **【追記】**
35
+
36
+ > そこで、質問内容を変えます。
37
+ > IISやApache等のWebサーバアプリケーションでSPAを動作させるためには、どうすればいいでしょうか?
38
+
39
+ その件に対して回答してなかったので、以下にその回答を書きます。
40
+
41
+ IIS とのことなので作業する PC は Windows OS とします。上に紹介した MDN の記事「Reactをはじめる」に従って作ったサンプルをベースに書きます。
42
+
43
+ まず、production build を作ります。npm run build コマンドを実行すると、下の画像のように build ホルダが生成されます。
44
+
45
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-07/2d0e542b-c94f-406c-8a88-4386df15875a.jpeg)
46
+
47
+ デプロイするには IIS に関する知識と、生成された production build の中身がどうなっているかを知ってそれに応じたやりかたを考える必要があります。・・・が、そのあたりの詳しいことは後で自分で調べてもらうとして、とりあえずこうすればできるというやり方を説明します。
48
+
49
+ IIS を使うのには、IIS が匿名アクセスする際に使うアカウント IUSR にデプロイするフォルダ内のファイルに対する読み取り権限を与える必要があります。そのやり方が分からければ、以下のように Users グループが読み取り権限を持っているドライブ、フォルダに生成された build フォルダをそのままコピーしてください。
50
+
51
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-07/05fee856-be0d-4a1c-94b7-f1f4ba57baf6.jpeg)
52
+
53
+ IIS Manager を立ち上げ「Web サイトの追加」メニューで build フォルダを**サイトに設定**してください。サイト名、ホスト名は任意です。なお、Default Web Site などの既存のサイトの下に仮想ディレクトリとして設定したのでは build フォルダの index.html 内に設定されているパスの問題で動かないことに注意してください。
54
+
55
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-07/677582b2-df51-405c-b10e-e97cac3c6ff1.jpeg)
56
+
57
+ ブラウザが要求をかけたら、URL に含まれるホスト名から名前解決をして IIS に接続し、IIS では上に設定したホスト名を頼りに物理パスにアクセスできるようにする必要があります。運用環境ではホスト名と IIS の IP アドレスを DNS に登録ということになりますが、開発環境であれば開発マシンの Hosts ファイルにホスト名と IIS の IP アドレスを登録すれば、開発マシンのブラウザからはアクセスできるようになります。
58
+
59
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-07/5ee314ff-adf0-491f-a052-cdf3574c4518.jpeg)
60
+
61
+ そこまで設定ができたら、ブラウザを立ち上げてアドレスバーに http://reactsample/index.html と入力して要求をかければ、期待通り表示されるはずです。
62
+
63
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-07/d73568ad-f431-425c-a3c3-af4a673a18c8.jpeg)