Zenn
🎃

サブディレクトリにビルドしたReactをアップする方法

2022/02/11に公開
React
ftp
router
ディレクトリ
サーバー
tech

今回はルートディレクトリではなくサブディレクトリにビルドしたReactをアップする方法をご紹介します。

前提

メインディレクトリ/home/sample/www/sample.com
サブディレクトリ/home/sample/www/sample.com/content // 今回はこっちの話

環境

"dependencies": {
	"react-router-dom": "^6.2.1",
	"react": "^17.0.2",
	"react-scripts": "^3.2.0",
	"web-vitals": "^1.0.1"
},
"devDependencies": {
	"babel-core": "^6.26.3"
}

解説

ビルドして[https://sample.com/content]にアップしたのに表示されない

create-react-appで今回は作成していますが、このままnpm run buildを行うとjsやcssのルートパスが /static/js や /static/css となってしまいます。
このままサブディレクトリにビルドされたファイルをアップロードしhttps://sample.com/contentにアクセスしても画面には何も表示されません。

理由

ルートを見てみるともちろん/static/js/~~から読み込むわけですからhttps://sample.com/static/jsとなり/content/から読み込んでくれていないためこうなります。

解決方法

package.jsonに"homepage"を追加

{
	"name": "myproject",
	"version": "0.1.0",
	"private": true,
	"homepage": "./",
	.
	.
	.
}

こうすることでビルド後/static/js/~~となっていたものが./static/js/~~となってくれるのでどのディレクトリに配置しても読み込んでくれるようになりました。

ルーティングをしていた場合

ただここで問題なのがreact-router-domを使ってルーティング設定をしていた場合
例えば

/ がホーム
/news がニュースページ
/about がアバウトページ

だったとします。
その場合、jsやcssは読み込まれていますがうまく表示されない、もしくは404ページに飛ばされるのではないでしょうか。

解決方法

react-router-domにbasenameを付与

<BrowserRouter basename="/content/"> // ここ
	<Routes>
		<Route exact path="/" element={<Home />} />
		<Route exact path="/news" element={<News />} />
		<Route exact path="/about" element={<About />} />
	</Routes>
</BrowserRouter>

こうすることで/content/をベースとしてくれるのでエラーが起きなくなります。

まとめ

  • どのプロジェクトでもとりあえずhomepageは./と指定してどのディレクトリにも対応できるようにすること
  • ルーティングが必要であればルーター系のモジュールの最上階層にbasenameを付与すること

Discussion