カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

Reactプロジェクトをサブディレクトリに配置する

Vite+Reactで作成したプロジェクトをサブディレクトリに配置(デプロイ)する方法を解説いたします。
今回検証したバージョンは以下のようになっています。(抜粋)
vite@5.3.1
react@18.3.1
react-router-dom@6.24.1

基本的にReactプロジェクトはドキュメントルートに配置される前提のため、jsやcss等のパスが/assets/...となっています。
まずそれを回避するためにvite.config.jsbaseプロパティを追加します。

export default defineConfig({
  base: './',
  plugins: [react()],
})

次に、react-router-domを使って画面遷移のあるプロジェクトを作成した場合、サブディレクトリに配置すると遷移した状態でリロードしたときに404エラーでページが見つかりませんとなってしまいます。
それを回避するため、配置するサブディレクトリ直下に配置されるよう.htaccessを作成します。
例として配置するサブディレクトリをsampleディレクトリとします。

public/.htaccess
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /sample/
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . index.html [L]
</IfModule>

これでsampleディレクトリ以下で実際には存在しないファイル・ディレクトリへのアクセスは全てindex.htmlにリダイレクトされることになります。

次に最上位に配置されたBrowserRouterタグに要素を追加します。

src/App.jsx
<BrowserRouter basename="/sample/">

これでサブディレクトリへの配置する対応が完了しました。

281 views