Nuxt.js 개발기 (1) Github Pages

(1) Github Pages

---

※이 포스팅은 기술적 정보를 담고 있지 않습니다. 단순 개발 후기입니다.

 

1. Why S.P.A?

 최근 개인 부업용도로 커뮤니티 사이트를 개설하기로 계획하고 국내 대형 커뮤니티들의 월 서버 유지 비용을 알아보았다. 동시접속자 20000명 기준, 월 서버 유지비용은 수백만원대로 운영방식에 따라 굉장히 다양했다. 대부분의 커뮤니티는 php(Was server) + mysql(DB server) + 개별 이미지 서버(Storage server) + CDN 의 전통적인 구성 형태를 가지고있다. 

 서버 용량과 CPU 사용량, 그리고 트래픽에 따른 월 요금이 측정되는데 트래픽 부분이 가장 많은 요금을 차지하게된다. Multi Page Application, 즉 MPA 방식에서는 매번 새로운 페이지를 열때마다 cached되지않은 모든 리소스 200으로 재요청한다. 이 방식은 트래픽의 증가뿐만 아니라 CPU 사용량도 증가 시킨다.

모바일 환경에 맞춰 전통적이 MPA방식 보다 Single Page Application, SPA로 구성하는게 모던한 웹 구성방식이다.

 SPA는 최초 Request시에 모든 리소스를 로드하고 변경되는 컴포넌트만 비동기적(async)으로 불러와 해당 컴포넌트만 교체하는 방식이다. 페이지 로딩 후 대부분의 request는 json형태의 데이터만 요청되는 형태로 구성되므로 트래픽을 상당량 줄일수있다. 따라서 SPA를 사용하기로 결정하고 프론트엔드 프레임워크를 골라보았다.

 

2. Why Vue?

 대표적인 프론트엔드 프레임워크로는 angular2, react, vue가 있다. 이미 angular2, react를 사용해보면서 극악의 러닝커브를 경험해본 나는, 그나마 빠른 적용이 가능하다는 Vue를 선택하기로 했다. 더군다나 Nuxt의 등장으로 SPA의 단점인 SEO를 해결할 수 있을 거란 기대감에 Vue를 선택하게 되었다.

 Vue의 문법은 1-2시간이면 익힐수 있을 정도로 간단 명료했고 Nuxt의 다양한 모듈들은 기능구현에 많은 시간절약을 주었다. Nuxt Github나 Stackoverflow에 react 만큼이나 다양한 자료또한 개발에 많은 도움이 되었다.

 

3. Github pages 배포 

Github Pages 배포화면

 

아티클 카드 리스트를 메인화면에 보여주는 Toy project를 만든 뒤 github pages에 배포했다. github Pages는 repository 기반으로 url이 동작하기때문에 모든 article들은 static file로 deploy 해야한다. article들을 vue에 작성 후, 

npm run generate

 를 실행하여 ./dist 경로에 static으로 변경된 프로젝트 파일을 gh-pages 브런치에 push한다. 본인은 package.json 의 scripts에 push-lib 명령어를 추가하여 

npm run deploy

로 배포하였다. 이로서 간단한 CSR형태의 Nuxt Toy project를 마감했다. 일반적인 Github Pages의 jekyll를 사용한 것과 다름 없지만 Vue를 익혔다는거에 의의를 둔다.

 

다음 포스팅은 Nuxt를 firebase에 hosting하고

async하게 firebase firestore의 데이터를 메인화면 article에 보여주는 Serverless Toy project 개발 후기이다.