Create React Appで作成したサービスをサーバのサブディレクトリ直下に配置したら上手く動かなかったので、その対応メモです。
現象
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は正しくは
http://192.168.3.2:8080/reactapp/static/js/ファイル名
となるべきなのですが、index.html
ではURLからreactappが抜けた
http://192.168.3.2:8080/static/js/ファイル名
でアクセスしようとしていたので、404エラーになっていました。
対応
まずはcross-envをインストールします。
$ npm install --save-dev cross-env
そしてpackage.json
のこの部分を
"scripts": { ... "build": "react-scripts build", ... },
こう変えます。
"scripts": { ... "build": "cross-env PUBLIC_URL=/reactapp/ react-scripts build", ... },
これで以下でビルドして
$ npm run build
http://192.168.3.2:8080/reactapp/
に配置すると、正常に動くようになります。
コメント