Reactをレンタルサーバーの相対パスへデプロイする方法
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 でレンタルサーバーの指定の相対パスにアップロードします。

まとめ
以上の手順で相対パスへデプロイできます。
より詳細な情報は以下の公式ドキュメントを参照してください。