먼저 스택 오버플로의 다른 스레드에서 이 문제와 일반적으로 관련된 오류 403 및 404를 해결하기 위한 문제 해결 단계를 수행했음을 지적하고 싶습니다. 여기에는 오류 403 및 404에서 /index.html로 리디렉션되도록 CloudFront 오류 페이지를 설정하는 것이 포함됩니다. 또한 Lambda@Edge 함수를 사용하여 URL을 다시 작성해 보았습니다.

내가 겪고 있는 문제는 루트 디렉터리로 이동할 때 내 반응 페이지(반응 라우터 사용)가 aws에서 올바르게 제공된다는 것입니다. 하지만 하위 경로로 직접 이동하려고 하면 아무 것도 렌더링되지 않는 것 같습니다. 그러나 로컬 컴퓨터에서 동일한 프로덕션 버전을 제공하면 문제가 없습니다.

참고용 공개 링크입니다

링크로 바로 이동하시면 문제가 없으니 참고해주세요. 그러나 https://d1e06h60n3f04n.cloudfront.net/preview/assetId로 이동하면 아무것도 렌더링되지 않습니다. 미리보기 페이지 코드는 다음과 같습니다:

'react'에서 React, { useEffect, useState }를 가져옵니다. '반응 라우터'에서 { useParams }를 가져옵니다. './BlogPreview'에서 { BlogPreview } 가져오기; 내보내기 인터페이스 IBlogPostData { 제목: 문자열; 내용: 문자열; } 내보내기 함수 BlogPreviewForm() { console.log("블로그 미리보기 양식 로드 중"); var { postId } = useParams(); const [blogPostData, setBlogPostData] = useState({ title: "", content: "" }); useEffect(() => { 비동기 함수 loadPost() { var fileContent = wait fetch(`previews/${postId}`); setBlogPostData(fileContent.json()을 기다립니다); } 로드포스트(); }, []); 반품 ( 
 
블로그 미리보기
  Api 키 <입력 유형="텍스트"> <버튼>제출 
 ); }

페이지는 자산 ID에서 자산을 가져와서 로드해야 합니다.

내 색인 HTML:

'react-dom/client'에서 ReactDOM을 가져옵니다. import './index.css'; import { AppRoutes } from './Routes'; './reportWebVitals'에서 ReportWebVitals 가져오기; import { createBrowserRouter, RouterProvider } 'react-router-dom'; const 경로 = createBrowserRouter(AppRoutes); const 루트 = ReactDOM.createRoot( document.getElementById('root')(HTMLElement) ); 루트.렌더(    ); reportWebVitals();

그리고 내 경로 정의:

export const AppRoutes: RouteObject[] = [ { 요소: <앱 />, 길: '/', 어린이들: [{ 경로: '미리보기', 어린이들: [{ 경로: '/preview/:postId', 요소: < BlogPreviewForm /> }] }] } ]

CloudFront 및 S3가 로컬에서 잘 렌더링되기 때문에 이것이 CloudFront 및 S3와 관련이 있다고 확신하므로 관련 코드를 게시하는 것이 큰 도움이 될지 확신할 수 없으므로 URL에 링크합니다.

참고용 S3 구성: