[Express] Reactで作成したSPAをExpressで建てたサーバにホスティングして、静的ファイルとしてレスポンスするようにすると、URL直打ちで404が返ってくる

目次

• 目次
• やりたいこと
• エラー内容
• 調査
• 解決

やりたいこと

Express で建てたサーバに React プロジェクトをホスティングして、静的ファイルでレスポンスさせると、ルート以外のURL直打ちで404が返ってくるので、ちゃんとページが返ってくるようにしたい。

エラー内容

Failed to load resource: the server responded with a status of 404 (Not Found)

調査

• 参考記事
  • react-routerを使ったアプリケーションでURL直叩き(or F5)すると404になる
  • Reactをexpressにホストする

どうやらすべてのリクエストに対してpublic/index.html を返すようにしないといけないらしい。で、これをrewrite設定というらしい。

app.use('/*', (req, res) => {
    res.sendFile(path.join(__dirname, '/public', 'index.html'));
});

はい。

つまり、SPAはクライアントでルーティングしているだけで、SPAにログイン画面があってそのpathが /login だったとしても、サーバはそのリクエストのURLに対してルーティングを準備していないから404が返っていたというわけか。だから/login でリクエストが飛んできても、 index.html を返すようにしておかないといけない。

create-react-app の公式に記述があるとのことなので、一応読んでおく。

• Serving Apps with Client-Side Routing

解決

今回の自分の場合は /admin でのリクエストで管理アプリの index.html を静的ファイルとして返していたので、下記のように /admin/* でリクエストが来たときも index.html をレスポンスするようにすればいい。

// 静的ファイルとしてレスポンス
app.use('/admin', express.static(`${__dirname}/public/admin`));

//　admin/*　でリクエストが来たときは　public/admin/index.html を返す
app.use('/admin/*', (req, res) => {
  res.sendFile(`${__dirname}/public/admin/index.html`);
});

でもこれだけではだめだった。

React のSPAをビルドするときの設定を変更しないといけないらしい。

• 参考記事
  • create-react-appのアプリをExpress内で配置、配信する

package.json で homepageプロパティを設定する必要がある。今回は /admin が管理アプリのルートになるので下記のように記述を追加する。

{
    "homepage": "/admin",
}

これで再ビルドして、ビルドしたファイルをExpressにホスティングするとちゃんとURL直打ちでも、再読み込みでも正常にページが表示されうようになった！

おしまい。