leanvas.com Stack

유료 서비스를 최대한 배제한 웹사이트 스택

무료 호스팅, 무료 뭐시기 등등은 워낙에 많고, 국내에서도 찾아보면 개인이 운영하는 무료 서버 호스팅부터 나야나에서 무료 웹호스팅도 받을 수 있다. 찾아보면야 돈 들이지 않고 무수히 많은 좋은 서비스를 찾을 수 있겠지만 이 글에서는 웹사이트를 하나 올리는데에 큰 노력을 들이지 않고도 쉽게 쓸 수 있는 서비스, 즉 비개발자인 나도 쉽게 사용한 것들을 나열하도록 하겠다.

서비스의 설계는 일반적인 웹서비스이나, 주된 특징은 Back-end 영역 대부분을 직접 운영하지 않는 다는 것이다. 유저 인증부터 디비 설치, 인터페이스나 API 설계 등 모두 BaaS가. 웹서버와 서버환경 설정, 분산 환경 구성 같은 부분은 PaaS로 넘긴다. 즉, 나는 프론트만 팬다.

SPA를 프론트로 두는 평범한 웹사이트 아키텍쳐를 생각해보았다. 그림에서의 프레젠테이션만 만들면 된다. 전체 구성은 위와 비슷하게 간다고 해도 사실 전혀 신경 쓸 필요가 없는 것이다.

Front-end

근래 들어서는 세상 참 좋은 것이 Angular, Backbone, Ember 요런 MVW 패턴들이 참 많이 쓰이고 있고 많이 쓰임에 따라 나 같은 초심자들 쫄지 말라고 기본적으로 잘 구성된 예시와 뼈대들이 제공된다. 아무 것이나 가져다 쓰면 된다. 이 사이트를 위해 가져온 것은 다음과 같다.

• Yeoman > generator-angular-fullstack

Grunt, Bower와 기타 잡다한 npm 패키지들 모두 위 두개만 깔면 전부 뒤따라 오니 참으로 편하지 않을 수 없다. 위에것을 설치하면 그대로 뼈대가 구성이 되고 grunt 가 개발에 필요한 로컬머신과 파일 변경 감지해서 브라우저에 업데이트 해주는 과정 등 까지 전부 세팅 되어있고. 심지어는 heroku에 디플로이 하는 것 까지 task 를 짜놨다.

CSS Framework 같은 것들은 사이트 규모도 작으니 사용하지 않고 전부 직접 짰다. scss+live reload로 짜다보면 예전보다 꽤 빠른 속도로 만들수가 있었다.

사실 이런 구성이긴 한데, Backbone 보다 Angular쪽이 좀 더 이런 그림 신경쓰지 않고 막 만들어도 되는 듯한 배려가 묻어난다. 아 물론 나같은 쪼렙 수준에서는.

WebServer

Heroku를 사용했다. 사이트에 무료 사용에 대한 상세한 설명이 없어 검색을 해보니 제한이 꽤 낮긴하지만, 어차피 이런 취미 사이트 용으로는 충분하다. 아주 간단한 node express 서버 코드가 위의 angular-fullstack에서 제공되는데, 이것을 그냥 올려두었다. 여러모로 편한 것이 무엇이냐면. 코드를 쓰고 제공되는 cli 툴로 로그인해서 연결해두고 git commit > git push 하면 바로 업로드>디플로이 된다. 요런 류 설정이 다른 곳에서도 똑같이 할 수 있다는 것은 알았지만 이것도 또 나름 설정하고 테스트 해보고 하는데에는 나같은 초심자에겐 버거운 일이라 별 것 따로 안해도 되는 것에 감사할 따름이다. 난중에 travis ci랑 연동하는 것도 해봐야겠다.

DB

Firebase는 Angular랑 처음부터 잘 맞아떨어진듯 하다.

GA

Google Analytics로 로그 분석 + AB테스팅. 실험을 위한 준비과정 정도까지만 구현해놓았다.

끝.

말하자면 yo > generator-angular-fullstack 이 이 사이트의 stack이다. 거기에 간단하게 firebase 덧붙인 것.

사실 비슷한 구성의 웹사이트를 AWS에 올려서, MongoDB 로 데이터 저장, auth 서비스, 스태틱파일 서브용 웹서버, 웹소켓 API 서버를 분산 구성할 수 있도록 로드밸런서 연결하고, 나눠진 서버때문에 Redis로 세션이랑 임시데이터 잡고, S3에 파일 업로드, s3>cloudfront 연결을 해봤었는데..

BaaS, PaaS 가져가 쓰고, 남이 잘 만들어놓은 뼈대 가져다 프론트 만드는 이 과정과는 정말 비교도 안되는 간단하고 짧은 과정이었다. 이 정도라면 나 같은 잘 모르는 사람도 비교적 쉽게 만들 수 있는 정도이고 근래의 다작하는 사업 방식에도 잘 맞을 것이라고 본다.