[LAB-6] build 후, 페이지 이동으로 인한 404 에러

SSY1203 commented 1 year ago

질문 작성자

신선영

문제 상황

npm run build를 통해 build 후, npx live-server dist를 입력해 라이브서버 실행하고 share-tree경로로 이동하면 아래처럼 화면이 잘 렌더링이 됩니다. 하지만 vscode의 터미널에는 아래와 같은 404 메세지가 출력됩니다.

위 사진처럼 if문 조건에 부합하면 useNavigate를 통해 " share-tree/uid"로 이동은 잘 됩니다. 하지만 로컬스토리지 데이터를 지우거나 하는 등의 동작을 하면 위 사진 처럼 에러가 뜹니다. 왜 이런 걸까요ㅠ npm start로 했을 땐 로컬스토리지 데이터 건들일 경우에 문제가 전혀 없었습니다. 이유가 있을 까요?

추가 질문 : 보통 배포할 때 몇 분정도 걸리는 게 정상일까요?
질문 내용을 자세하고 명확하게 풀어 이해할 수 있도록 작성합니다.
상황 이해를 돕기 위한 이미지 첨부가 필요한 경우 작성합니다. (권장)
이미지, GIF, 비디오 파일을 입력 필드로 끌어 옮기면 자동 삽입됩니다.

프로젝트 저장소 URL

환경 정보

운영체제 정보 (Windows)
Node.js 정보 (예: v16.14.0)
라이브러리 정보 (예: React v18.0.2)

yamoo9 commented 1 year ago

Vite 빌드 프로세스

프로젝트를 최초 빌드 한 결과는 아래와 같이 출력됩니다.

Vite는 현재 빌드 결과에 문제가 있음을 경고합니다. (참고)

일부 청크(chunk) 파일 크기가 압축을 해도 500kb보다 큽니다. 동적 호출을 활용해 코드를 분할(code splitting)하세요. build.rollupOptions.output.manualChunks를 활용하세요.

안내받은 대로 Vite 빌드 옵션을 추가 구성합니다.

vite.config.js

export default defineConfig({
  // ...
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom'],
        },
      },
    },
  },
});

다시 빌드를 수행하면 더 이상 경고가 출력되지 않습니다.

배포 결과 확인

배포된 결과물은 더 이상 개발 중인 상황이 아니기 때문에 live-server 패키지 사용은 적절하지 않습니다. serve 패키지를 사용해 정적(static)으로 호스팅 되도록 아래와 같이 명령을 입력 실행합니다. 🤔

npx serve -s dist

그러면 아무런 문제 없이 빌드된 웹 애플리케이션 사이트가 라우팅 될 것 입니다. 😃

반영 결과는 아래 영상을 확인하세요.

https://user-images.githubusercontent.com/1850554/227874579-fe7adccf-7f46-41cd-95fd-912eabb95213.mp4

SSY1203 commented 1 year ago

그러면 배포 시에도 새로고침 후 404 에러 나는 건 어떻게 해야할까요 ㅠ

yamoo9 commented 1 year ago

그러면 배포 시에도 새로고침 후 404 에러 나는 건 어떻게 해야할까요 ㅠ

문제 상황에 대한 설명이 부족합니다. 배포라면 어디에 배포를 했는 지? 어떤 절차로 배포 했는 지? 상황에 대해 자세히 알려주셔야 답변이 가능하겠죠.

qpsqps123 commented 1 year ago

배포는 현재 Vercel과 Github을 이용해 진행하고 있고, Vite 공식 문서의 '정적 웹사이트 배포하기'를 참고하여 진행하였습니다. 아래는 관련 문서 내용입니다.

배포는 완료되어 현재 부여받은 도메인을 통해 웹사이트를 확인할 수 있는 상황입니다.

문제는 새로고침 시

위와 같은 404 오류와 함께 페이지를 불러오지 못했습니다. 그래서 저희가 추측하기를 라우팅에 문제가 있거나 배포 과정에서 어떤 실수가 있었을 거라 판단했습니다. 문제 해결 방법을 모색하던 중에, vercel.json에 저희가 임의로 판단해서 넣었던

위 코드가 문제였던 것으로 판단하여

위와 같이 코드를 변경했고 다시 배포하였더니 문제가 해결되었습니다.

위 문제와 더불어서 야무쌤께서 언급해주신 key props 오류와 chunk 오류도 수정하였습니다. 저희는 개발 환경에서 live-server로 배포 환경과 동일하게 테스트 해볼 수 있을 거라 생각했는데, 야무쌤께서 알려주신 덕분에 올바르게 테스트를 진행해볼 수 있었습니다.

바쁘실텐데 시간내서 답변 달아주신 야무쌤께 정말 감사드립니다!

yamoo9 / likelion-FEQA