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

📋 目次（クリックで展開）

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

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

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

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

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

package.json
{
  "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 がリターンする指定を記述します。

.htaccess
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 アプリケーションのルーティング機能が動作するようになります。

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

react-routing-app.zip

注意点

package.json の homepage プロパティを、ご自身の契約しているロリポップのドメイン名に変更の上、ご利用ください。※下記参照

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

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

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

💬 コメント