ロリポップでの React アプリルーティング有効化の全手順（デプロイ用サンプルあり）

ルーティング機能を含む react アプリケーションを、ロリポップにデプロイする際の設定方法を紹介します。これからレンタルサーバーにポートフォリオを公開したい方におすすめの内容になっています。記事最下部に、デプロイ用のサンプルも用意しています。

レンタルサーバーへのデプロイ時にルーティングが動かなくなる問題

開発環境では、react-router-dom は Link コンポーネントの to プロパティに、遷移先コンポーネントを指定すればルーティングが機能します。チュートリアルの通りですね。しかし、ロリポップなどのレンタルサーバーにデプロイする際には、そのままでは react アプリケーションはルーティングが機能しません。別途、追加の設定が必要になります。レンタルサーバーを借りた後に悩む方も多い事象です。本稿では対応方法をご紹介します。

レンタルサーバーではルーティング用に設定が必要と聞いて心配になってる😢レンタルサーバーでも react-router-dom は動作するの？

レンタルサーバーでも react-router-dom のルーティングは動作するよ！注意する設定項目は３つだけ！１つずつ順を追って解説していくので、ご安心を👍最後に動作デモも紹介するよ。

package.json に homepage プロパティを追記する

homepage プロパティに、デプロイ先のディレクトリを指定します。「ロリポップ契約ドメイン」に、ご自身の契約しているドメインを記述します。「react-routing-app」は、デプロイ先のディレクトリとなります。

{
  "name": "react-routing-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://ロリポップ契約ドメイン/react-routing-app/",
  "dependencies": {
    ...
  },
  "scripts": {
    ...
  },
  "eslintConfig": {
    ...
  },
  "browserslist": {
    ...
  }
}

.htaccess ファイルを追加する

React のクライアントサイドレンダリングでは、"react-routing-app/about" や "react-routing-app/contact" を要求する際にも、about.html や contact.html がリターンされるわけではなく、常に index.html を利用します。ルーティング発生時に、常に index.html がリターンする指定を記述します。

RewriteEngine On
RewriteBase /react-routing-app/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /react-routing-app/index.html [L]

この .htaccess ファイルは、public フォルダ配下に保存します。

Router basename プロパティを設定する

react-router-dom の Router コンポーネントの basename プロパティに、デプロイ先ディレクトリ名を指定します。

function App() {
  return (
    <Router basename="/react-routing-app">
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

これら３つの設定を行うことで、ロリポップ上で react アプリケーションのルーティング機能が動作するようになります。

デプロイ用サンプルアプリケーション

{
  "name": "react-routing-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://ロリポップ契約ドメイン/react-routing-app/",
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",

本サイトでのデモ

デプロイ用サンプルアプリケーションを本サイトに公開しました。本サイトはロリポップのライトプランを利用しています。ロリポップで React のルーティングが問題なく動作することが分かります。

https://watermargin.net/react-routing-app/

PR：ロリポッププラン一覧

React そのものは、HTML, CSS, JavaScript の集合体として動作しますので、ロリポップのどのプランでも大丈夫です。ロリポップは安価でサーバーを借りることができるので、ポートフォリオサイトの作成・公開に最適です。

プラン名	データベース	速度	データ容量	料金
エコノミープラン				99 円～
ライトプラン				264 円～
スタンダードプラン				495 円～
ハイスピードプラン				550 円～
エンタープライズプラン				2200 円～

ロリポップ公式サイト

関連記事