인프런 커뮤니티 질문&답변
작성한 질문수
history mode로 배포 시 404 페이지 반환 관련
작성
·
68
0
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
안녕하세요, 매번 빠르고 친절한 답변 주셔서 감사합니다!
짐코딩님 덕분에 밥 벌어먹고 삽니다..ㅎㅎ
강의 내용 중에
대부분의 서버는 root로 요청하면 index.html 파일을 돌려준다
그런데, 전체 경로(ex. localhost:3000/posts)로 요청했을 때, 해당 경로에 index.html 파일이 있지 않는 이상 404 오류를 만나게 된다
history mode로 요청 시 전체 경로로 요청한다
따라서, history mode로 배포할 때는 서버에 추가 설정이 필요하다
요러한 내용이 있었습니다.
제가 의아한 부분은..
여기서 말하는 '서버'는 웹서버를 의미하는 걸까요?
이 부분에 대해 신경쓰지 않고, history mode로 build, deploy한 개인 프로젝트가 있습니다. 저는 history mode 배포를 위해 특별한 설정을 하지 않았으나 문제 없이 동작하고 있습니다. (여기서 문제가 없다는 건, root 요청이 아니더라도 404를 돌려주지 않고 제가 설정한 Router 정보대로 페이지를 보여줍니다). 그래서 아리까리 한데요.. 제가 이 부분에 대해 조금 더 알아볼 수 있는 학습자료를 공유해주실 수 있을까요?
답변 2
0
안녕하세요.
여기서 말하는 '서버'는 웹서버를 의미하는 걸까요?
맞습니다. 웹페이지를 응답하는 웹서버를 의미합니다.
이 부분에 대해 신경쓰지 않고, history mode로 build, deploy한 개인 프로젝트가 있습니다. 저는 history mode 배포를 위해 특별한 설정을 하지 않았으나 문제 없이 동작하고 있습니다. (여기서 문제가 없다는 건, root 요청이 아니더라도 404를 돌려주지 않고 제가 설정한 Router 정보대로 페이지를 보여줍니다). 그래서 아리까리 한데요.. 제가 이 부분에 대해 조금 더 알아볼 수 있는 학습자료를 공유해주실 수 있을까요?
history mode를 위한 배포 설정은 인프라를 제공하는 플랫폼마다 상이합니다. "SPA 앱 배포시 서버 rewrite 설정" 이러한 키워드로 구글링 하시면 다양한 인사이트를 접할 수 있을거에요~!
0
안녕하세요, 인프런 AI 인턴입니다.
eg2data님의 질문에 대해 Vue.js와 관련된 history mode로 배포 시 404 페이지 반환 문제와 관련한 답변을 준비했습니다. 질문하신 내용과 밀접하게 관련된 기존 답변을 참고하시면 도움이 될 것 같습니다.
서버 설정이 필요한 이유와 무엇을 의미하는지에 대해 궁금하신 부분에 대해서는, Vue-Router의 history mode를 사용할 때 서버 설정이 왜 필요한지에 대한 내용을 담고 있는 답변이 도움이 될 겁니다. SPA(Single Page Application)에서는 서버에 직접 경로를 요청할 때 해당 경로에 대응하는 실제 파일이 없기 때문에 404 오류가 발생할 수 있습니다. 이를 해결하기 위해 서버에 특별한 설정을 해주어야 하는데, 모든 요청을
index.html으로 리라이트(re-write)하는 것입니다. 웹서버(Apache, NGINX 등) 또는 클라우드 서비스(Netlify, Vercel 등)에 따라 설정 방법이 다를 수 있습니다.history mode 배포 시 설정을 하지 않았음에도 문제 없이 동작하는 경우, 이는 배포하신 서버나 서비스가 SPA를 지원하며, 기본적으로 모든 요청을
index.html로 리다이렉트하도록 설정되어 있는 경우일 수 있습니다. 일부 호스팅 서비스는 SPA 배포를 위한 세팅 옵션을 제공하고 있어, 추가 설정 없이도 바람직한 동작을 나타내곤 합니다.
다음은 Vue 관련하여 비슷한 문제에 대한 구체적인 설명과 해결 방법을 제공하는 링크입니다:
- Url로 직접 접근시, 404 Return 문제에 대한 짐코딩님의 답변은 Vue-Router의 history mode 사용 시 서버에 적절한 리다이렉션 설정을 추가하는 방법에 대해 설명합니다. 다양한 배포 환경에서의 설정 방법을 포함하고 있습니다.
Vue.js 공식 문서에서도 history mode와 서버 설정에 관한 상세한 가이드를 제공하고 있습니다. 여기서는 다양한 서버 환경에 다른 설정 방법을 설명하고 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.