Reactをレンタルサーバーの相対パスへデプロイする方法

hoge.com というドメインでレンタルサーバーを借りているとします。
そのドメイン直下ではなく、hoge.com/subpath/ という相対パスに作成したアプリをデプロイする方法を紹介します。

相対パスの指定をする

hoge.com/subpath/ のような、subpathという名前の相対パスにデプロイするとします。
事前にReact側で必要な設定は以下の2つです。

1. package.json を修正する

以下のように相対パスを指定します。

"homepage": "/subpath/",

2. Routerを使用している場合は、basenameを指定する

もし、Routerを使用している場合は BrowserRouter の basename に相対パスをしています。

function App() {
  return (
    <BrowserRouter basename="/subpath/">
      <Routes>
        <Route path={"/"} element={<HomePage />} />
        <Route path={"/about"} element={<AboutPage />} />
        <Route path={"/contact"} element={<ContactPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

ビルドする

以下のコマンドでビルドします。

npm run build

fftpでファイルをアップする

build フォルダ以下のファイル一式を fftp でレンタルサーバーの指定の相対パスにアップロードします。

buildフォルダ以下をアップする

まとめ

以上の手順で相対パスへデプロイできます。

より詳細な情報は以下の公式ドキュメントを参照してください。