spa 새로고침 not found

안녕하세요.

 

이 이야기는 실무 개발하면서, SPA를 막 개발하기 시작한 주니어 개발자라면 모를 법한 얘기 입니다.

 

어떤 현상이냐면...

서버에 SPA를 배포 후, 사용자가 브라우저에서의 '새로고침' 또는 '뒤로가기'를 하거나 처음부터 Vue에 설정된 router 경로를 직접 접근하게 되면 아래의 그림처럼 페이지를 찾지 못하는 404에러가 발생하는 문제가 있었습니다.

 

이 문제를 해결하기 위해서

SPA를 서버에 배포할 때, SPA에 설정해 둔 router 경로를 웹 서버에 설정하는 방법을 알아보겠습니다.

해결 방법

 해결 방법은 Vue에 router/index.js에 설정해 놓은 라우트 경로를 웹 서버에 설정해 주면 됩니다.

즉, 웹 서버가 '/'경로가 아닌, path가 담긴 url로 요청을 받았을 때 dist/index.html 페이지를 브라우저에 제공하도록 설정해주면 Not Found 메시지가 아니라 URL 요청 경로에 맞는 페이지를 정상적으로 보여주게 됩니다.

 

실무에서 백엔드는 go로 개발되었기 때문에 go언어로 설정한 부분을 소개드리겠습니다.

수정 파일 : fog/src/route/router.go

  e := echo.New()
  e.File("/", common.GetEnv() + "/web/index.html")
  e.File("/event", common.GetEnv() + "/web/index.html")
  e.File("/plugin", common.GetEnv() + "/web/index.html")

 

 

SPA 특징에 의해서 발생한 원인

해당 에러는 SPA(Single Page Application)를 개발할 때 사용하는 Vue나 React 같은 프레임워크에서 발생합니다.

이 원인을 이해하기 위해서는 SPA의 개념을 이해하고 계셔야 합니다. 

우선적으로 간략하게 SPA의 개념과 SPA가 브라우저 렌더링에 사용하는 index.html에 대해서 설명을 드리고 문제의 원인을 알아보겠습니다.

-SPA

 SPA는 브라우저에 최초 요청에 한 번만 페이지 전체를 브라우저에 로드(렌더링)하고, 이후부터는 Virtual DOM과 Main DOM을 비교해서 변경된 부분만 실시간으로 교체하는 방식으로 브라우저에 웹 애플리케이션을 보여줍니다.

간단히 말해서 URL 경로가 바뀌거나 웹 어딘가에 API 요청에 대한 응답으로 데이터가 변경이 되고 DOM의 구조가 변경되었다고 해서 처음부터 DOM이 브라우저에 다시 로드되는 일은 SPA에서는 일어나지 않습니다.

여기서 오는 SAP의 효용성은 이 글을 참고해주세요.

-index.html

 npm을 사용해서 소스를 빌드를 하게 되면 생성되는 압축파일입니다. index.html 파일 내부는 아래의 코드처럼 HTML, CSS, Javascript 그리고 노드 패키지 모듈이 압축되어 있는 코드 형태로 존재합니다. (index.html은 build를 하게 되면 생성되는 dist 폴더 바로 하위 경로에 존재하게 됩니다.)

아래의 그림은 index.html 내부 코드입니다.

 

웹 브라우저는 서버로부터 전달을 받은 index.html을 사용해서 브라우저에 웹 애플리케이션을 로드하게 됩니다. 쉽게 말해서, index.html은 브라우저가 웹을 보여주기 위해서 각 정적 자원들을 빠르게 찾을 수 있도록 사용하는 하나의 색인 파일이라고 생각하면 됩니다.

그리고, SPA에서 router 요청 경로에 대한 탐색은 'HTML5 History 모드 API'를 통해서 index.html에서 탐색해서 브라우저에 보여주게 됩니다.

 

이제, Not Found 메시지가 발생한 원인을 알아보겠습니다.

원인은 정상적으로 router 경로가 설정되어 있는 node package manager의 server가 url 요청을 받는 것이 아니라

router 경로와 사용자 브라우저로 전달할 파일에 대한 설정이 되어 있지 않은 웹 서버가 요청을 받기 때문입니다.

예를 들어서, 사용자가 브라우저에서 https://192.168.0.88/event 경로를 요청을 보냅니다. 192.168.0.88 웹 서버에서는 80포트에 '/event' 요청을 찾습니다.

이 때, 웹 서버는 친절하게 위에서 간단하게 설명한 SPA의 index.html을 사용자의 브라우저로 전달하지 않습니다. 결과적으로 웹 서버는 '/event'의 요청에 따른 반환할 파일을 찾지 못해서 Not Found 메시지를 브라우저에 보내게 되는 원리입니다.

 

그래서 router 설정이 되어 있고, 요청 경로에 대한 반환 파일까지 정확히 설정된 local 환경에서 npm run serve 명령어로 node package server를 실행할 경우는 에러가 발생하지 않았던 겁니다.

반대로, 웹 소스를 빌드를 하고, 배포가 된 웹 서버가 Vue에서 설정한 router 경로로 요청을 받으면, index.html을 사용자 브라우저로 전달하는 설정이 없어서, 경로가 있는 url에서 새로고침이나 직접 접근을 하게 되면서 Not Found 에러가 발생했던 겁니다.

 

이상으로 SPA를 서버에 배포했을 때, 웹 서버에 SPA의 router 경로를 설정하는 방법에 대해서 알아보았습니다.

 

감사합니다.

 

해당 문제에 대한 참고.

Vue Router - HTML5 히스토리 모드