create-react-appでルートパスをカスタムした時のStatic Serverの起動について

記事作成日時： 2020/11/03 11:46

最終更新日時： 2020/11/03 11:46

create-react-appの仕様

create-react-appのビルドでは、package.jsonのhomepageの値を参照しています。
無指定だとルートパスは/とります。package.jsonに"homepage": "https://example.com/customと設定するとルートパスは/customになります。

Static Serverでの起動

create-react-appでStatic Serverの起動にはserveが推奨されています。
serveはルートパスが必ず/になり、カスタムすることができません。

ルートパスをを変更した場合は、expressなどのWebフレームワークを使って、自作する必要があります。
expressを利用した例は以下のとおりです。

const express = require('express');
const path = require('path');
const app = express();

app.use("/custom", express.static(path.join(__dirname, 'build')));

app.get('/custom', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(9000);

これでhttp://localhost:9000/customからアクセスできるようになります。