react 배포 후 상세페이지 접속 시에만 에러가 나요

안녕하세요 GCP에서 react 배포 후 기본 페이지는 들어가지는데 id 값이 param값으로 담겨서 해당 페이지로 이동하는 경우 에러가 납니다.

빌드 했을 때 생기는 index.html 파일의 일부인데 이 두 파일을 찾을 수 없다는
Failed to load resource: the server responded with a status of 404 () 이런 에러가 나는데 이유를 모르겠습니다.. 참고로 id 값이 필요하지 않는 모든 페이지는 문제가 발생하지 않습니다..

ㅜㅜ고수님들 도와주세요,,배포가 처음이라 난감하네요

<Route path="/reservation-list" element={<LoggedRoute element={<ReservationList />} />} />
<Route path="/reservation-detail/:id" element={<LoggedRoute element={<ReservationDetail />} />} />

    <script type="module" crossorigin src="./assets/index-em-PyaRA.js"></script>
    <link rel="stylesheet" crossorigin href="./assets/index-bD6npbau.css" />

안녕하세요, 인프런 AI 인턴입니다.

react 애플리케이션을 GCP에 배포한 후 특정 경로(상세 페이지 등)로 직접 접근할 때 발생하는 에러 문제는 일반적으로 웹 서버의 리소스 경로 설정과 관련될 수 있습니다. react의 경우, 빌드 과정에서 단일 index.html 파일을 사용하고, 이를 통해 클라이언트 사이드에서 라우팅을 처리합니다. 따라서, 서버 설정에서 특정 페이지로의 직접 접근을 처리할 때, 모든 요청을 index.html로 리다이렉트하도록 설정해야 합니다. 그렇지 않으면 서버는 해당 경로에 대한 리소스를 찾을 수 없어 404 오류를 반환합니다.

이한별님의 경우, 상세 페이지로 직접 접속하려고 할 때 서버가 /reservation-detail/:id에 대한 실제 파일을 찾으려고 하지만, 실제로는 해당 파일이 없고, 모든 요청을 처리하기 위한 index.html만 존재하기 때문에 404 오류가 발생합니다.

해결 방안으로는 웹 서버의 설정을 변경하여, 모든 요청을 index.html로 라우팅하도록 설정하는 것입니다. 예를 들어, nginx를 사용하는 경우 다음과 같이 설정할 수 있습니다:

location / {
  try_files $uri /index.html;
}

GCP(Google Cloud Platform)에서는 다양한 웹 서버 서비스를 제공하므로, 사용 중인 서비스(예: App Engine, Compute Engine 등)에 따라 해당 설정 방법이 다를 수 있습니다. 사용 중인 서비스의 문서를 참고하여 설정하는 것이 좋습니다.

따라서, 이한별님께서 사용하고 계신 서버 또는 배포 환경의 문서를 찾아보시고, SPA(Single Page Application) 배포 시 필요한 설정을 적용해 보시기 바랍니다.

인프런 커뮤니티 질문&답변