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とかはhttp://192.168.3.2:8080/reactapp/static/js/ファイル名 というURLでアクセスすべきなのですが、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/に配置すると、正常に動くようになります。

参考:

301 Moved Permanently

コメント