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にアクセスすることができるでしょうか?