現象#

Create React Appを使ってみました。

それで、ローカルでは動作確認できたものの、作成したサービス用のサブディレクトリを作成してサービスを配置しようとしたら、真っ白い画面が表示されました。

デベロッパーツールを開いて確認したところ、JavaScriptとCSSの読み込みに軒並み失敗している模様。

原因#

スクショからわかるようにhttp://192.168.3.2:8080/reactapp/ というURLに作成したサービスを割り当てました。

サーバにはNginxを使用しているので、サーバの/usr/share/nginx/html/reactapp/にCreate React Appのbuild以下のファイルとディレクトリをそのまま配置しています。

なので、JavaScriptとかCSSのURLは正しくは

1
http://192.168.3.2:8080/reactapp/static/js/ファイル名

となるべきなのですが、index.htmlではURLからreactappが抜けた

1
http://192.168.3.2:8080/static/js/ファイル名

でアクセスしようとしていたので、404エラーになっていました。

対応#

まずはcross-envをインストールします。

1
$ npm install --save-dev cross-env

そしてpackage.jsonのこの部分を

1
"scripts": {
2
  ...
3
  "build": "react-scripts build",
4
  ...
5
},

こう変えます。

1
"scripts": {
2
  ...
3
  "build": "cross-env PUBLIC_URL=/reactapp/ react-scripts build",
4
  ...
5
},

これで以下でビルドして

1
$ npm run build

http://192.168.3.2:8080/reactapp/に配置すると、正常に動くようになります。