Create React Appで作成したアプリを任意のサブディレクトリに配置する

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/に配置すると、正常に動くようになります。