Vue.js + VueRouter 프로젝트 배포하기

여러가지 방법

서버와 완전히 분리된(api로 통신하는) 프론트엔드 프로젝트를 배포할 수 있는 방법은 많습니다. Vue.js와 VueRouter로 구성된 SPA 프로덕션 코드를 어떤 서비스를 통해 배포했는지, 선택한 이유는 무엇인지에 관한 글입니다.

  • GitHub Pages에 배포
  • 웹서버에 배포
  • AWS S3에 배포

GitHub Pages에 배포

GitHub Pages에 배포하는 방법은 쉽습니다. 게다가 무료입니다. GitHub의 서버에서 코드가 배포되니 서버관리를 할 필요도 없습니다.

하지만 서버 사이드 렌더링은 불가합니다. 결정적으로 프로덕션 코드를 배포하기엔 적합하지 않은 느낌이라 고려하지 않았습니다.

AWS Elastic Beanstalk로 배포

Elastic Beanstalk로 배포하면 정말 쉽고 비쌉니다(?). 앱을 생성하면 EC2 인스턴스(웹서버)를 자동으로 생성해주고, 필요하다면 로드밸런서도 쉽게 설정할 수 있습니다.

Elastic Beanstalk를 사용할 때 요금이 별도로 발생하는 것은 아니지만 EC2 인스턴스는 Static 호스팅보다 비쌉니다.

저렴한 가격으로 배포하기엔 글렀지만 추후 서버 사이드 렌더링의 가능성을 얻었습니다.

VueRouter의 history mode를 사용하면 URI가 아름다워집니다. 예를들어 example.com/#/loginexample.com/login으로 변경됩니다.

앱 내에서 페이지를 이동할 경우 이상없이 동작합니다. 문제는 새로고침하거나 직접 URI에 접근할 때 발생합니다. history mode를 사용하지 않을 때엔 example.com/#/loginindex.html을 바라보니 요청을 처리할 수 있지만 이제는 example.com/login/index.html을 요청하기 때문에 404 에러가 발생합니다.

404 에러를 보지 않기 위해서는 웹서버의 설정을 변경해야 합니다. 해결하는 방법으로 VueRouter 공식 문서에서는 이렇게 안내하고 있습니다.

모든 URI가 index.html을 바라보도록 아래 내용을 .htaccess파일로 저장합니다.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

이제 프로젝트를 압축해 Elastic Beanstalk에 배포하면 VueRouter의 history mode가 정상적으로 작동합니다.

AWS S3에 배포

AWS S3로 프론트엔드 앱을 배포하면 정말 쉽고 저렴합니다. 상시 돌아가는 서버가 없으니 고정비용도 적고, 접속부하를 걱정할 필요도 없고, 때문에 로드밸런서를 붙이는 작업도 필요 없습니다.

S3 버킷의 Properties에서 Static web hosting을 선택하고 다음과 같이 설정합니다.

모든 URI가 index.html을 바라보기 때문에 history mode가 정상적으로 동작합니다.

0
👍
0
❤️
0
😄
0
😝
0
😢
0
😡