create react-app で作った React プロジェクトをサブディレクトリにデプロイする

  • 投稿日
  • 著者 アルム＝バンド
  • カテゴリー React.js

経緯

表題の通りですが、 create react-app で作成した React のプロジェクトをサブディレクトリにデプロイしたくなったのでメモ。

以前(2020年)には react-scripts + cross-env 環境で同じことをしましたが、今回は cross-env なしです。

方法

サブディレクトリにデプロイするために修正する設定は2箇所 (ルーティングがない場合)。

  1. package.json
  2. public/.htaccess (Apache の場合)

package.json

{
  "name": "subdirectory-project",
  "version": "0.1.0",
  "private": true,
  "homepage": "./", // これを追加
  "dependencies": {
    // 略
  }
  // 略
}

package.json には、キー homepage ・値 ./ を追記します。これでリソースファイルを絶対パスではなく相対パスで読むようになるようです。

public/.htaccess

RewriteEngine On
RewriteBase /SUBDIRECTORY_PATH/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [QSA,L]

2つ目は public/ ディレクトリの中に新規で .htaccess を作成し、上述のような記述をします (Webサーバが Apache 前提)。

ただし RewriteBase /SUBDIRECTORY_PATH/ は実際のサブディレクトリのパスに応じて書き換えてください。

(例えば https://www.example.com/hoge/ がプロジェクトのルートならば RewriteBase /hoge/ といった具合。)

この記述のうち3行目以降は「そのディレクトリ配下のアクセスで、 URI のパスに該当するファイルやディレクトリが存在しない場合は全て index.html へのアクセスとする」ということですね。

1～2行目でベースパスをサブディレクトリに変更していることと併せて、アクセスをコントロールしています。

今回はシンプルにルーティングも何もないトップページを表示させて終わり、の簡単なアプリだったのでこれで済みました。

参考

この記事を書いた人

アルム＝バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。

記事一覧