⛄️
Create React Appで作ったReactアプリケーションを相対パスへデプロイする
概要
Create React Appで作ったReactアプリケーションをhttps://example.com/のようなルートではなく、https://example.com/foobar/のような相対パスへデプロイする方法を書きます。
相対パスへデプロイできるようにする方法
方法はCreate React Appの公式ドキュメント、DeploymentのBuilding for Relative Pathsというセクションに書かれています。
まずpackage.jsonに"homepage": "/foobar/"を追加します。
公式ドキュメントではhttp://mywebsite.com/relativepathというような絶対URIが書かれていますが、/から始まるパスでも大丈夫です。
それから、React Rotuerを使用している場合はBrowserRouterにbasename属性を設定します。
<BrowserRouter basename="/foobar/">
basename属性さえ設定しておけば、Link要素のto属性やRoute要素のpath属性は相対パスを気にすることなく設定できます。
どうやって実現しているの？
package.jsonからhomepageを読み取っているのはpaths.jsです。
読み取った値はwebpack.config.jsでWebpackのPublic Pathに渡されています。
あとはWebpackがjsファイルやcssファイルを設定した相対パスから読み込むようにビルドしてくれます。
なお、React Routerの方はまだソースコードを読んでいないので省略します。
Discussion