ぬまろぐ

←戻る

reactでPUBLIC_URLのパスを変更する方法

2022/02/26

create-react-appで作成したreactアプリに%PUBLIC_URL%という変数でリンクのパスが指定されていますが、そのままだとビルドした際にドメイン直下のルートディレクトリになってしまいます。

デプロイ先によってはサブディレクトリに配置されることもあるため、その場合リンクが見つからずエラーとなってしまいますので変更方法を記載します。

やりたいこと

<html lang="en">
  <head>
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
...
  </head>
...
</html>

上記のような%PUBLIC_URL%をビルド後に以下のようにしたい。

NG例）何もしないと/直下のパスとなる
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/logo192.png">
<link rel="manifest" href="/manifest.json">
<script defer="defer" src="/static/js/main.9af90a4d.js"></script>
OK例）ルートでなくサブディレクトリとしたい
<link rel="icon" href="/path/favicon.ico">
<link rel="apple-touch-icon" href="/path/logo192.png">
<link rel="manifest" href="/path/manifest.json">
<script defer="defer" src="/path/static/js/main.9af90a4d.js"></script>

対処方法

package.jsonにhomepage項目を追加設定すれば解決しました。

{
  "name": "xxx",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
  ...
  },
  ...
  "homepage": "/path/"
}