1

Reactで作成したSPAをNginxでホスティングしたいです。
その際に、パスの設定を/login/hoge, /login/fugaのように/login/から始まるパスにアクセスした場合にReactのSPAにルーティングするように設定したいです。
現在以下のように設定を行ったのですが、うまくいきません。

default.conf

server {
  listen 80;
  location /login/ {
    root /usr/share/nginx/html;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

Dockerfile

FROM nginx
RUN mkdir /var/www \
mkdir /usr/share/nginx/html/login \
&& apt-get update \
&& apt-get install vim less -y
COPY build /usr/share/nginx/html/login # Nginxコンテナの/usr/share/nginx/html/loginにReactSPAのindex.htmlが配置されます
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

ReactSPAのパスの設定

function App() {
  return (
    <>
      <ReactNotifications />
      <BrowserRouter>
        <Routes>
          <Route path="/login/common" element={<CommonLogin />} />
          <Route path="/login/fuga" element={<FugaLogin />} />
          <Route path="/login/piyo" element={<PiyoLogin />} />
        </Routes>
      </BrowserRouter>
    </>
  );
}

上記の設定を行ったうえで、Nginxコンテナを立ち上げてhttp://localhost:8080/login/commonにアクセスすると、以下のスクショのように「ページに到達できません」と出て、アドレスバーのポート番号がなくなってしまいます。
画像の説明をここに入力
開発者ツールのネットワークを見るとレスポンスが返ってきていないようです。
画像の説明をここに入力
どのように設定すれば/login/で始まるパスにアクセスしたときにReactSPAにアクセスすることができるでしょうか?

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。