관리 메뉴

HAMA 블로그

Vert.x 를 이용한 실시간 웹 어플리케이션 (1) 본문

Vert.x

Vert.x 를 이용한 실시간 웹 어플리케이션 (1)

[하마] 이승현 (wowlsh93@gmail.com) 2015. 5. 21. 17:07


간단한 웹 어플리케이션을 만들어 보겠습니다. (http://www.yes24.com/24/goods/14562423?scode=032&OzSrank=1 )

프런트엔드는 AngularJS 고 서버는 Vert.x 로 ~ 마인드맵 어플리케이션을 만들겁니다.


순서 

1. Vert.x  설치 및 Hello world !! 

2. 간단히  Vert.x  다루어보기 

3..Vert.x 와 MongoDB 연결 

4. 실시간 통신

5. 모듈개발 

6. 배포 



1. Vert.x  설치 및 Hello world !!


윈도우 기준 설치 

- JAVA 7 버전을 설치합니다.(http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html)
- JAVA PATH 를 세팅합니다.

CMD 창에서 java -version 치면 java version "1.7. xxx " 뭐 이렇게 나오면 됩니다.

- VERT.X 를 설치합니다.(https://bintray.com/vertx/downloads/distribution/2.1 여기서 zip 다운후 아무데나 압축해제) 
- VERT.X  PATH 를  세팅합니다.


CMD 창에서 vertx version 치면 2.1 나오면 됩니다.

설치 끝 



Hello world 해보기 


아무 편집기에서 hello.js 파일만들봅니다. 개인적으론 서브라임 텍스트 (http://www.sublimetext.com/3) 가 좋더군요.

var console = require("vertx/console");

console.log("hello world");

이거 넣으면 Vert.x 어플리케이션 개발 끝입니다.



vertx run hello.js 를 해당 폴더에서 쳐주면 무슨 모듈같은거 자동으로 다운받고 바로 실행합니다.

"hello world"

가 찍혔네요.


웹서버 

vert.x 만으로 웹서버설정에 필요한 모든게 다 있지만 , 좀더 편하게 사용하기위한 상위레벨 모듈을 사용한다.

1. mindmap  이라는 폴더를 만든다.

2. 내부에 app.js 파일을 만들고 다음과 같이 타이핑한다. 

var container = require("vertx/container");

container.deployModule("io.vertx~mod-web-server~2.0.0-final", {

  port: 8080,

  host: "localhost"

});

3. vertx run app.js 실행시킨다.(폴더에가보면 웹서버 모듈을 다운받은걸 확인할수있다.)

4. 웹브라우저를 열고 http://localhost:8080/ 접속하면 404 에러난다.

5. web 이라는 폴더만들고 내부에 index.html 만든후 다음과 같이 타이핑한다.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

</head>

<body>

      Hello!

</body>

</html>


브라우저에 Hello ! 찍힌것을 확인할수있다. 




Comments