home
home

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

2021/11/5

目次

やりたいこと

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

エラー内容

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

調査

どうやらすべてのリクエストに対して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 の公式に記述があるとのことなので、一応読んでおく。

解決

今回の自分の場合は /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をビルドするときの設定を変更しないといけないらしい。

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

{
    "homepage": "/admin",
}

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

おしまい。

sponsored link