React `homepage` 設定ガイド

React.js と create-react-app での homepage フィールドの解説

homepage フィールドは、package.json ファイル内で使用され、プロジェクトの公開URLを指定します。これは、ビルドされたアプリケーションをデプロイする際に、正しいアセットパスを生成するために重要です。

誤った homepage の設定による問題

もし、homepage フィールドを誤って設定すると、特にローカル開発環境（localhost）で、アセットの読み込みに問題が生じることがあります。これは、homepage フィールドが、ビルドされたアプリケーションのベースURLとして使用されるためです。

正しい homepage の設定

create-react-app を使用してプロジェクトを作成した場合、デフォルトでは homepage フィールドは空になっています。ローカル開発環境で問題なく動作させるためには、このフィールドを空のままにしておくことが一般的です。

例

{
  "name": "my-react-app",
  "version": "0.1.0",
  "homepage": "",
  "dependencies": {
    // ...
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eje   ct"
  }
}

デプロイ時の homepage の設定

アプリケーションをデプロイする際には、homepage フィールドをデプロイ先のURLに設定します。これにより、ビルドされたアプリケーションが正しいアセットパスを生成し、適切に動作します。

例
もし、アプリケーションを https://my-app.example.com にデプロイする場合は、package.json の homepage フィールドを次のように設定します。

"homepage": "https://my-app.example.com"

注意

• デプロイする際には、homepage フィールドをデプロイ先のURLに設定します。
• ローカル開発環境では、homepage フィールドを空のままにしておくことが一般的です。
• homepage フィールドは、ビルドされたアプリケーションのベースURLとして使用されます。

ローカル開発環境での homepage フィールド

{
  "name": "my-react-app",
  "version": "0.1.0",
  "homepage": "",
  // ...
}

この例では、homepage フィールドが空になっています。これは、ローカル開発環境で問題なく動作させるための一般的な設定です。

{
  "name": "my-react-app",
  "version": "0.1.0",
  "homepage": "https://my-app.example.com",
  // ...
}

この例では、アプリケーションを https://my-app.example.com にデプロイする場合の homepage フィールドの設定を示しています。

React homepage 設定ガイド

1. ローカル開発環境
   

   • homepage フィールドを空のままにしておく。
   • npm start または yarn start でアプリケーションを起動する。

2. デプロイ
   

   • homepage フィールドをデプロイ先のURLに設定する。
   • npm run build または yarn build でアプリケーションをビルドする。
   • ビルドされたファイルをデプロイ先のサーバーにアップロードする。

注意点

• デプロイする際には、homepage フィールドをデプロイ先のURLに設定することで、正しいアセットパスが生成されます。
• ローカル開発環境では、homepage フィールドを空のままにしておくことで、ローカルホストのパスが正しく解決されます。

PUBLIC_URL 環境変数の使用

create-react-app は、ビルド時に PUBLIC_URL 環境変数を設定します。この環境変数をアプリケーション内で使用することで、homepage フィールドの設定を回避することができます。

// App.js
import React from 'react';

function App() {
  return (
    <div>
      <img src={`${process.env.PUBLIC_URL}/logo.png`} alt="logo" />
    </div>
  );
}

export default App;

このコードでは、process.env.PUBLIC_URL を使用して、画像ファイルのパスを取得しています。これにより、homepage フィールドを設定せずに、正しいアセットパスを指定することができます。

ビルド後のファイル修正

ビルドされたアプリケーションのファイルを手動で修正して、アセットパスを調整することも可能です。ただし、この方法は手間がかかり、ビルドのたびに修正が必要となるため、一般的には推奨されません。

カスタムビルドスクリプトの使用

create-react-app のビルドプロセスをカスタマイズするために、カスタムビルドスクリプトを作成することもできます。これにより、アセットパスを調整する処理をスクリプト内に実装することができます。

// package.json
"scripts": {
  "build": "react-scripts build && sed -i 's/\/static\//\/my-app\//g' build/index.html"
}

この例では、ビルド後に index.html ファイル内のアセットパスを修正する sed コマンドを使用しています。

• カスタムビルドスクリプトは、ビルドプロセスをカスタマイズする必要がある場合に使用します。
• ビルド後のファイル修正は、手間がかかり、推奨されません。
• PUBLIC_URL 環境変数は、ビルド時に設定されるため、ビルド後のファイルには含まれています。