react-routerを使って静的コンテンツを配信する際のrewrite設定覚書

react-router使ってアプリ作った際、ディレクトリ掘ってブックマークすると、
404 not foundになってハマるんですよね。

ということで、rewriteしないといけないんですけども、
調べた範囲でまとめました。

react-router サンプルコード

routerはbrowserHistoryを想定

src/index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import App from '../containers/App';

window.React = React;

ReactDOM.render((
  <Router history={browserHistory}>
    <Route path="/">
      <IndexRoute component={App} />
      <Route path="/:userName" component={App} />
    </Route>
  </Router>
), document.getElementById('root'));

httpd

public/.htaccess

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

Firebase Hosting

./firebase.json

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Netlify

公開ディレクトリに置く必要あり

public/_redirects

/* /index.html 200