

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

default.conf

[code]

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

Dockerfile

[code]

    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
    
[/code]

ReactSPAのパスの設定

[code]

    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>
        </>
      );
    }
    
[/code]

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


CC BY-SA 4.0
2023-02-12T01:11:13.010
93805
2023-02-12T02:38:20.753
2023-02-12T02:38:20.753
40485
40485
question
reactjs nginx
Reactで作成したSPAをNginxでホスティングする時のdefault.confの設定を教えてください。