Vite : React 웹서버 서브 디렉토리 배포 설정하기

 

 

React를 통해 빌드를 하고 웹서버에 배포하기 위해서는 웹서버 설정이 추가적으로 필요합니다.

 

예를 들어, react-router와 같은 브라우저 라우터를 사용하게 되면 모든 경로에 대해 Web Root의 index.html로 rewrite 해주는 명령어가 필요합니다. Nginx의 경우 try_files 옵션을 설정하여야 하고,  Apache의 경우 RewriteRule 옵션을 통해 설정할 수 있습니다.

 

위 설정을 해주지 않으면 새로고침시에 404 에러가 발생하는데, 이는 클라이언트에서 라우팅을 처리할때, 서버에 해당 자원이 없다고 인식하기 때문에 이러한 문제가 발생합니다. SPA에서는 모든 요청을 Base가 되는 index.html에서 처리하는데, 다른 경로로 접속하면 해당 경로에 일치하는 파일을 웹서버에서 찾으려고 하기 때문입니다. 따라서 다른 URL을 통해서도 Base의 index.html로 연결시켜주는 작업이 필요한 것입니다.

 

좀더 자세한 내용을 알고 싶으면 이전에 작성한 아래 블로그를 참고해주세요.

Nginx + React : Nginx를 이용하여 서브디렉토리에 React 프로젝트 여러개 배포하기

 

참고로 선행작업으로 필요한 React 서브디렉토리 배포를 위한 Nginx 웹서버 설정도 위에서 공유된 예전 블로그 글을 통해 확인해보시면 도움이 될 것 같습니다.

 

 

Vite에서 서브디렉토리 빌드 설정하기

 

 

오늘은 Vite로 React 프로젝트 빌드 시 웹서버의 서브디렉토리 배포를 위한 설정을 하는 방법에 대해 알아보겠습니다.

최근에 Vite를 통해 프로젝트를 진행하고 있는데, Vite를 통해 빌드된 React 프로젝트에서는 어떤식으로 서브디렉토리 설정을 해야하는지 추후에 잊지 않도록 한번 공유해보도록 하겠습니다.

 

 

1) React의 BrowserRouter 에서 기본 basename 설정

 

 

• `basename` 속성은 애플리케이션이 특정한 기본 경로를 갖도록 설정하는 데 사용됩니다
• `basename` 을 설정하게 되면 모든 애플리케이션의 기본경로가 루트가 아닌 하위 디렉터리 (/myapp) 를 기준으로 작동하게 됩니다.

2) vite.config.js에서의 base 설정하기

 

 

• `base` 옵션은 애플리케이션이 배포될 기본 경로를 지정하는 데 사용됩니다.
• `base` 옵션을 사용하게 되면 애플리케이션의 모든 자산에 대해 설정된 기본 경로(/myapp) 을 기본으로 사용하게 됩니다. 예를들어 빌드된 CSS와 JS 파일들은 /myapp/assets/main.css 또는 /myapp/assets/main.js 와 같이 경로가 지정됩니다.
• `base`와 `basename` 을 일치시키지 않으면 404 에러가 발생할수 있습니다.
  (무조건 일치시킨다고 기억하면 편합니다.)
• 왜냐하면 Vite는 기본적으로 정적 자산을 요청할때 / (루트) 경로를 사용하기 때문입니다. 실제 정적 자산이 존재하는 하위디렉토리 경로는 배포된 하위 디렉토리 (/myapp) 이기 때문에 base를 통해 정적 자산이 배포된 기본 경로를 지정해주어야합니다.

 

 

마무리

 

오늘은 Vite 를 통해 서브디렉토리를 배포하는 설정들에 대해 알아보았습니다. 다음번에도 Vite에 관한 유용한 설정들에 대해서 포스팅해보도록 하겠습니다. 

 

감사합니다.