SPA App 배포시 유의점

SPA 는 웹 브라우저 기준으로는 진입점이 하나이다.

index.html 하나에서 여러가지 페이지를 app 이 알아서 보여준다.

앱을 개발하면서 여러가지 라우트를 설정하여 개발한다. 개발할 때는 npm 을 이용해서 테스트 해보기 때문에 브라우저에 특정 패스를 넣으면 그 위치로 잘 넘어간다.

그러나 서버에 배포를 하게되면 문제가 생긴다.

브라우저는 이 앱이 SPA 인지 아닌지 그런건 알 수 없다. 그래서 입력한 주소로 요청을 보내는데 SPA 는 진입점이 하나, 즉 엔드포인트가 하나이므로 입력한 패스에 대한 자원을 찾을 수가 없을 것이다.

localhost:3000/ 는 되지만 localhost:3000/abc 는 접근할 수 없다.

그래서 서버에 설정을 별도로 해줘야하는데 서버는 모든 요청에 대해서 SPA 앱이 인식하도록 index 페이지로 리다이렉트 되도록 설정해야한다.

nginx라면 아래와 같은 설정이 추가로 필요할 것이다.

http {
    server{
        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}