79. SPA 호스팅시에 서버에 추가해줘야 하는 설정

VUE CLI 공식 문서에 들어가면 Netlify 칸이 있다.

Netlify 칸에서 _redirects 설정 안내를 확인할 수 있다.

VUE CLI 가이드

가이드대로 적용 - Netlify에서 서버에대한 설정을 이렇게 하겠다고 설정한것

Single-page application 란?

특정 페이지의 정보를 서버에서 받아오는것이 아니라

미리 갖고있다가 필요시에 그 페이지로 (Javascript로) 전환 하는것

그랬을때 특정 주소(path)를  </ask, /news > 서버에서 알 길이 없다.

이 페이지에 대한 정보는 브라우저에 있기 때문에 클라이언트 정보를 알 수가 없어서 서버에 path를 알려줘야할 필요가 있다.

(Netlify로 배포 시 웹사이트 처음 시작할때만 발생하는 에러 - 첫 화면부터 라우팅이 걸려있을때)

 

그걸 해결하기 위해

특정 도메인 뒤에 오는 URL들을 "_redirects" 라는 파일로 모든 접근에 대해서 index.html로 돌리겠단 설정을 서버마다 해줘야한다.

 

이렇게 해주면 웹사이트 처음 접속시에 vue 라우팅이 적용되어 있어도 index.html로 redirect 해주기 때문에 404에러가 안뜬다

---

전 URL에선 링크연결이 안뜨지만 설정 후 URL에선 링크연결이 뜬 모습

설정 해주기 전 URL 끝에 /news가 붙어있을땐  Page Not Found화면이 뜬다

설정 후엔 URL 끝에 /news 가 붙어있어도 정상사용가능