- 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/">
これでサブディレクトリへの配置する対応が完了しました。
873 views




