- JavaScript
- 2024-07-08
Vite+Reactで作成したプロジェクトをサブディレクトリに配置(デプロイ)する方法を解説いたします。
今回検証したバージョンは以下のようになっています。(抜粋)
vite@5.3.1
react@18.3.1
react-router-dom@6.24.1
基本的にReactプロジェクトはドキュメントルートに配置される前提のため、jsやcss等のパスが/assets/...
となっています。
まずそれを回避するためにvite.config.js
にbase
プロパティを追加します。
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/">
これでサブディレクトリへの配置する対応が完了しました。