search

CodeSoom / project-react-3-yoonhe

3 stars 2 forks source link

새로고침시 404 페이지가 보이는 문제 #69

Closed yoonhe closed 3 years ago

yoonhe commented 3 years ago

문제점

새로고침 또는 주소창에 입력시 404 페이지가 보입니다

시도한 방법

루트 경로를 제외한 페이지로 라우팅되었을때에도 index.html을 제공해주면 페이지가 제대로 나올거라 예상하고 webpack.config.js에서 아래와같이 historyApiFallback: true을 제공해주었지만 여전히 404 페이지가 보입니다.

devServer: {
    port: 7777,
    contentBase: path.join(__dirname, 'public/'),
    historyApiFallback: true, 
  },

클라이언트 사이드 렌더링으로 접근했을때는 아래와같이 bundle.js를 가져오고 image

서버사이드 렌더링으로 접근했을때때는 bundle.js를 가지고 오지 못해 404 페이지를 띄워주는 것이라고 생각하는데.. 맞나요?.. image image

문제를 해결하기 위해 구글링중입니다 🥲

moonkii commented 3 years ago

GitHub Pages 에서는 라우팅을 지원하지 않기 때문에

CI 에서 빌드할 때 index.html -> 404.html 로 옮겨서 처리해줘야 해요.

그래서 404 페이지를 index 페이지로 잡아줘서 라우팅을 시켜주는방법이에요.

yoonhe commented 3 years ago

gitHub Pages 에서는 라우팅을 지원하지 않기 때문에 CI 에서 빌드할 때 index.html -> 404.html 로 옮겨서 처리해줘야 해요. 그래서 404 페이지를 index 페이지로 잡아줘서 라우팅을 시켜주는방법이에요.

감사합니다! 말씀해주신 방법과 참고글들을 보고 아래와 같은 방법으로 해결하였습니다

- name: Install and Build 🔧 
        run: |
          npm install
          npm run build
          cp dist/index.html dist/404.html // 추가

이해한 내용 정리

github pages에서 라우팅을 지원하지 않아 루트 경로 이외의 경로는 404.html을 반환합니다. 이를 해결하기 위해 빌드 단계에서 index.html과 내용이 같은 404.html을 만들어서 404.html이 반환되었을때 index.html 내용이 보이도록 합니다

참고글