カスタムPUBLIC_URLでCreate React Appをビルドする

Japanese Explanation of "Can't build create-react-app project with custom PUBLIC_URL"

問題
create-react-appでカスタムのPUBLIC_URLを設定してビルドできないというエラーが発生しています。

原因
PUBLIC_URLは、ビルド後のアプリケーションのルートURLを指定するための環境変数です。しかし、create-react-appのデフォルト設定では、PUBLIC_URLを直接変更することはできません。

解決方法

1. package.jsonファイルのscriptsオブジェクトを編集
   

   • startスクリプトにBROWSER_RUNTIME=noneを追加します。

   "scripts": {
     "start": "react-scripts start --BROWSER_RUNTIME=none",
     "build": "react-scripts build --BROWSER_RUNTIME=none"
   }
   

2. public/index.htmlファイルの<base href>タグを変更
   

   • PUBLIC_URLに設定したい値を<base href>タグのhref属性に指定します。

   <base href="https://your-custom-url.com/" />
   

• <base href>タグは、ブラウザにアプリケーションのルートURLを指定し、相対パスを絶対パスに変換するために使用されます。
• BROWSER_RUNTIME=noneオプションは、ブラウザのデフォルトの履歴APIを使用せずに、カスタムの履歴管理を実装することを示します。

例
カスタムのPUBLIC_URLをhttps://example.com/my-app/に設定する場合:

1. "scripts": {
     "start": "react-scripts start --BROWSER_RUNTIME=none",
     "build": "react-scripts build --BROWSER_RUNTIME=none"
   }
   

2. <base href="https://example.com/my-app/" />
   

日本語でのコード例解説

"scripts": {
  "start": "react-scripts start --BROWSER_RUNTIME=none",
  "build": "react-scripts build --BROWSER_RUNTIME=none"
}

<base href="https://your-custom-url.com/" />

"scripts": {
  "start": "react-scripts start --BROWSER_RUNTIME=none",
  "build": "react-scripts build --BROWSER_RUNTIME=none"
}

<base href="https://example.com/my-app/" />

解説

• <base href>タグは、ブラウザにアプリケーションのルートURLを指定します。
• public/index.htmlファイルは、プロジェクトのHTMLファイルです。
• buildスクリプトは、プロジェクトをビルドします。
• startスクリプトは、開発サーバーを起動します。
• package.jsonファイルのscriptsオブジェクトは、プロジェクトのスクリプトを定義します。

日本語での代替方法解説

代替方法

react-scriptsの直接使用:

• react-scriptsのドキュメントを参照して、PUBLIC_URLの設定方法を確認してください。
• create-react-appの内部で使用するreact-scriptsパッケージを直接使用することで、より柔軟な設定が可能になります。

cracoの使用:

• cracoは、create-react-appのカスタム設定を可能にするツールです。

viteの使用:

• viteは、新しい世代のフロントエンドビルドツールです。

• それぞれの方法には独自の利点と欠点がありますので、プロジェクトの要件に合わせて適切な方法を選択してください。
• これらの代替方法を使用することで、create-react-appのデフォルト設定に縛られずに、より柔軟なプロジェクト構成が可能になります。

例
cracoを使用してカスタムのPUBLIC_URLを設定する場合:

1. cracoをインストール:

   npm install --save-dev craco
   

2. craco.config.jsファイルを作成:

   module.exports = {
     webpack: {
       configure: (webpackConfig) => {
         webpackConfig.output.publicPath = 'https://your-custom-url.com/';
         return webpackConfig;
       }
     }
   };
   

3. "scripts": {
     "start": "craco start",
     "build": "craco build"
   }