React Router를 사용하여 React 애플리케이션을 S3에 배포할 때 하위 경로가 올바르게 렌더링되지 않습니다. 403 및 404 오류를 해결했습니다.

Question

먼저 스택 오버플로의 다른 스레드에서 이 문제와 일반적으로 관련된 오류 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<IBlogPostData>({ title: "", content: "" });

    useEffect(() => {
        비동기 함수 loadPost() {
            var fileContent = wait fetch(`previews/${postId}`);
            setBlogPostData(fileContent.json()을 기다립니다);
        }
        로드포스트();
    }, []);

    반품 (
        <div>
            <div>블로그 미리보기</div>
            <BlogPreview title={blogPostData?.title} 콘텐츠={blogPostData?.content} />
            <label>Api 키</label>
            <입력 유형="텍스트"></input>
            <버튼>제출</버튼>
        </div>
    );
}

페이지는 자산 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)
);

루트.렌더(
    <React.StrictMode>
        <RouterProvider 라우터={경로} />
    </React.StrictMode>
);

reportWebVitals();

그리고 내 경로 정의:

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

        }]
    }
]

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

참고용 S3 구성:

Answer 1

문제 해결 중에 package.json의 홈페이지 변수를 "."으로 설정했습니다.

브라우저의 개발자 창을 살펴보니 s3 버킷 루트에 있는 정적 디렉터리의 모든 파일에 404 오류가 표시되는 것을 확인했습니다. 이는 로드 중인 URL에 대한 상대 경로를 생성하려고 하기 때문에 발생합니다. 예:

https://d29uq6a9kfzg1q.cloudfront.net/preview/static/js/main.3351ea6b.js

package.json에서 홈 "."을 제거하여 정적 디렉터리를 참조하는 경로를 index.html 파일의 절대 경로로 전환했습니다. 예를 들어 이렇게 하면 문제가 해결되었습니다.