BLOG main image
WonJae Lee

분류 전체보기 (544)
diAry - 日記 - 일기 (283)
Lecture & Tip (92)
Favor (164)
nutra forskolin
超울트라판..
potty training chart
超울트라판..
251,838 Visitors up to today!
Today 8 hit, Yesterday 36 hit
daisy rss
tistory 티스토리 가입하기!
Daum view
'Lecture & Tip/javascript[자바스크립트]'에 해당되는 글 7건
prev"" #1 #2 next
2013.05.09 17:51

오늘도 삽질의 연속입니다.


이번에는 WebRTC가 현재 지원되는 양대 브라우저 Chrome과 FireFox간의 PeerConnection연결시의 삽질기입니다.


기본적으로 PeerConnection의 연결 순서는

방에 들어가는 Guest의 경우에는 PeerConnection생성->Offer 송신->Answer 수신 순입니다.

그리고 반대로 방에 이미 들어와 있는 방장의 경우에는 Offer 수신 -> PeerConnection 생성 -> Answer 송신 순입니다.

이때 미디어스트림의 연결을 위한 ICE는 비동기적으로 연결이 됩니다. PeerConnection이 생성이 되고 LocalDescription이 설정되는 순간 시작됩니다.


오늘 저는 이곳에서 생각지도 못한 일을 보고 말았습니다.


잘될것이라 생각되던 FireFox <-> Chrome 연결이 PeerConnection 메세징 연결은 되는데 ICE가 시작을 안하는 겁니다.

WireShark로 packet 캡춰를 해보니 Chrome에서 Firefox쪽으로 STUN Binding을 시도하는데 계속 Binding Request Error - 401 (UnAuthorized) 라고 저를 괴롭히네요;


그래서 주구장창 삽질에 삽질을 거듭하다 알아버렸습니다...그 이유를 공개합니다~


FireFox의 SDP안에는 Candidate정보가 들어있어 FireFox간의 PeerConnection들은 Candidate의 추가 정보 없이 바로 SDP교환 만으로 연결이됩니다. 하지만 Chrome의 SDP안에는 Candidate정보가 없습니다. 


Chrome의 SDP 

{"sdp":"v=0\r\no=- 2780233228 2 IN IP4 127.0.0.1\r\ns=-\r\nt=0 0\r\na=group:BUNDLE audio video\r\na=msid-semantic: WMS K0XaoVysxEWQmRePgRuqdCkR8bAcMSvQWXBt\r\nm=audio 1 RTP/SAVPF 111 103 104 0 8 126\r\nc=IN IP4 0.0.0.0\r\na=rtcp:1 IN IP4 0.0.0.0\r\na=ice-ufrag:4Ta+AIUlLaWQVREa\r\na=ice-pwd:+O26tfTqVCo2TBjg55w/TW7C\r\na=ice-options:google-ice\r\na=fingerprint:sha-256 A8:BC:62:5A:CD:DA:3C:1A:51:91:DB:C2:A5:9E:B2:85:82:3B:7E:94:69:6F:16:B6:C0:E8:5F:CB:FC:B0:70:CA\r\na=sendrecv\r\na=mid:audio\r\na=rtcp-mux\r\na=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:+tLUInFCoAIDr14V7PymFkNrgtlD/THXqicwsdLI\r\na=rtpmap:103 ISAC/16000\r\na=rtpmap:104 ISAC/32000\r\na=rtpmap:111 opus/48000/2\r\na=fmtp:111 minptime=10\r\na=rtpmap:0 PCMU/8000\r\na=rtpmap:8 PCMA/8000\r\na=rtpmap:126 telephone-event/8000\r\na=maxptime:60\r\na=ssrc:1134790672 cname:uls4ib6cKUOZoSSK\r\na=ssrc:1134790672 msid:K0XaoVysxEWQmRePgRuqdCkR8bAcMSvQWXBt K0XaoVysxEWQmRePgRuqdCkR8bAcMSvQWXBta0\r\na=ssrc:1134790672 mslabel:K0XaoVysxEWQmRePgRuqdCkR8bAcMSvQWXBt\r\na=ssrc:1134790672 label:K0XaoVysxEWQmRePgRuqdCkR8bAcMSvQWXBta0\r\nm=video 1 RTP/SAVPF 100 116 117\r\nc=IN IP4 0.0.0.0\r\na=rtcp:1 IN IP4 0.0.0.0\r\na=ice-ufrag:4Ta+AIUlLaWQVREa\r\na=ice-pwd:+O26tfTqVCo2TBjg55w/TW7C\r\na=ice-options:google-ice\r\na=fingerprint:sha-256 A8:BC:62:5A:CD:DA:3C:1A:51:91:DB:C2:A5:9E:B2:85:82:3B:7E:94:69:6F:16:B6:C0:E8:5F:CB:FC:B0:70:CA\r\na=sendrecv\r\na=mid:video\r\na=rtcp-mux\r\na=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:+tLUInFCoAIDr14V7PymFkNrgtlD/THXqicwsdLI\r\na=rtpmap:100 VP8/90000\r\na=rtpmap:116 red/90000\r\na=rtpmap:117 ulpfec/90000\r\na=ssrc:1734440088 cname:uls4ib6cKUOZoSSK\r\na=ssrc:1734440088 msid:K0XaoVysxEWQmRePgRuqdCkR8bAcMSvQWXBt K0XaoVysxEWQmRePgRuqdCkR8bAcMSvQWXBtv0\r\na=ssrc:1734440088 mslabel:K0XaoVysxEWQmRePgRuqdCkR8bAcMSvQWXBt\r\na=ssrc:1734440088 label:K0XaoVysxEWQmRePgRuqdCkR8bAcMSvQWXBtv0\r\n","type":"offer"}


Firefox의 SDP


{"sdp":"v=0\r\no=Mozilla-SIPUA-23.0a1 14543 0 IN IP4 0.0.0.0\r\ns=SIP Call\r\nt=0 0\r\na=ice-ufrag:bf658205\r\na=ice-pwd:e36bafda4793a973d11f67d7e5c69229\r\na=fingerprint:sha-256 02:30:EE:83:60:44:91:90:1D:36:54:C3:35:BB:32:46:B4:3D:60:9D:C6:89:DE:37:2A:6D:37:5C:79:A1:F9:E4\r\nm=audio 51868 RTP/SAVPF 109 0 8 101\r\nc=IN IP4 211.195.53.148\r\na=rtpmap:109 opus/48000/2\r\na=ptime:20\r\na=rtpmap:0 PCMU/8000\r\na=rtpmap:8 PCMA/8000\r\na=rtpmap:101 telephone-event/8000\r\na=fmtp:101 0-15\r\na=sendrecv\r\na=candidate:0 1 UDP 2111832319 10.211.55.2 58763 typ host\r\na=candidate:2 1 UDP 2111766783 10.37.129.2 60537 typ host\r\na=candidate:4 1 UDP 2113667327 192.168.10.3 51868 typ host\r\na=candidate:5 1 UDP 1694302207 211.195.53.148 51868 typ srflx raddr 192.168.10.3 rport 51868\r\na=candidate:0 2 UDP 2111832318 10.211.55.2 52716 typ host\r\na=candidate:2 2 UDP 2111766782 10.37.129.2 65239 typ host\r\na=candidate:4 2 UDP 2113667326 192.168.10.3 49396 typ host\r\na=candidate:5 2 UDP 1694302206 211.195.53.148 49396 typ srflx raddr 192.168.10.3 rport 49396\r\nm=video 57151 RTP/SAVPF 120\r\nc=IN IP4 211.195.53.148\r\na=rtpmap:120 VP8/90000\r\na=sendrecv\r\na=candidate:0 1 UDP 2111832319 10.211.55.2 52431 typ host\r\na=candidate:2 1 UDP 2111766783 10.37.129.2 51750 typ host\r\na=candidate:4 1 UDP 2113667327 192.168.10.3 57151 typ host\r\na=candidate:5 1 UDP 1694302207 211.195.53.148 57151 typ srflx raddr 192.168.10.3 rport 57151\r\na=candidate:0 2 UDP 2111832318 10.211.55.2 62458 typ host\r\na=candidate:2 2 UDP 2111766782 10.37.129.2 55023 typ host\r\na=candidate:4 2 UDP 2113667326 192.168.10.3 53994 typ host\r\na=candidate:5 2 UDP 1694302206 211.195.53.148 53994 typ srflx raddr 192.168.10.3 rport 53994\r\n","type":"offer"

}


다시 말해 FireFox는 Chrome으로 부터 받은 SDP만으로는 ICE연결이 되지않고 추가적인 ICE candidate정보를 받아야합니다.


저는 내부적으로 PeerConnection의 onicecandidate 이벤트에서 candidate정보를 받는 시점에 ice candidate를 시작하도록 동기화하였는데

FireFox가 onicecandidate 이벤트에서 candidate정보를 받지 않고 바로 종료해버려 동기화 시점을 놓쳐버렸습니다.


그래서 Chrome에서 추가적인 ICE candidate를 전송하였지만 FireFox에서는 candidate종료되었다고 생각하고 ICE candidate를 받아도 addIceCandidate하지 못하는 우를 범하였습니다;


너무 황당한 일을 겪은터라. 혹시나 비슷한 경험을 하고 계시다면 candidate 처리가 정상적인지 확인해보십시요.

설명이 너무 두서없어 이해가 안되신다면 메일주세용!


덧, FireFox로 테스트중 버그를 보고 찾아보니 Tracking 중인 이슈였습니다. 하지만 NEW!! 금방 수정은 안되겠네요.


https://bugzilla.mozilla.org/show_bug.cgi?id=829591


PeerConnection생성이 안되는 버그인지라 WebRTC 구현중이신 분들에게는 조심할 필요가 있습니다.

문제는 PeerConnection 생성시에 FireFox가 지원하지 않는 option이 들어오면 발생합니다. Chrome의 경우에는 지원하지 않는 옵션은 무시하는데 Firefox는 죽어버리네요;; 


그럼 다들 즐거운 WebRTC하시고 http://www.veckon.com도 많이 애용해주세요~ ^^





Name
Password
Homepage
Secret
2013.01.03 19:07

어쩌다보니 Facebook api를 사용해서 웹사이트를 구성하게 되었는데.


간단한 튜토리얼을 따라하는 도중 FB의 Oauth 정책때문에 다음과 같은 애러가!


입력하신 URL은 해당 앱에서 허용되지 않습니다.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.


이런이런 Facebook App등록시에 Site URL을 등록해야만 정상동작 한단다.


사이트를 appengine을 사용하는 나로써는 url을 등록해서 사용하려면 결국 코드 변경때마다 appengine쪽으로 deploy해야한다는 말! 헉..


이 삽질만은 피하고 싶어서 appengine eclipse plugin에 있는 internal server를 사용하는 방법을 강구해 보았다.


1. appengine app을 internal server로 사용시 argument로 "--address=0.0.0.0" 을 추가 (내부 서버를 외부에서 접근 가능하게 해준다.)

2. ipconfig를 통해서 내 PC의 외부 IP 확인

3. 아래와 같이 Facebook app의 web site등록하는 곳에 내 외부 IP 등록.




똬돤~ 잘된다~





Name
Password
Homepage
Secret
2012.11.04 12:49

느뤼는 Google Korea에서 개최하는 2012년 Google HackFair에 참가를 위해 "WebRTC를 이용한 다중 화상채팅"을 준비하였습니다. 

이 준비 기간중 습득하게된 WebRTC에 대한 정보와 개인적인 고찰(!?)을 글로 남겨 봅니다.




WebRTC? - Web Real-Time Communication (http://www.w3.org/TR/webrtc/)

 - 말그대로 웹을 이용한 실시간 통신을 이야기합니다. 오잉? 그럼 이전에는 실시간 통신이 없었단 말인가? 하고 반문하시는 분들이 있을 텐데 차분하게 뒤쪽에서 기존의 실시간 통신들과의 차이점을 하나하나 알아보도록 하겠습니다. WebRTC는 현재 W3C와 IETF의 주도하에 WebKit API가 정의되어가고 있습니다. 링크로 들어가 확인해보시면 알 수 있지만 아직 진화중에 있습니다. Chrome에서 현재 가장 활발하게 진행중이기 때문인지 웹사이트도 그렇고 포럼도 그렇고 Googler 들이 주도적인 모습입니다.


WebRTC를 이해하기 위한 주변 필요지식들 

 - WebRTC를 이해하기위해 각종 문서들을 접하다 보면 보게되는 선수지식들을 정리해봅니다. 물론 제가 몰랐던 것들을 위주로 정리가 되었으니 이미 알고 계시다면 Pass!


1) GETUSERMEDIA (http://www.w3.org/TR/mediacapture-streams/)

 - WebRTC를 이용한 화상채팅에서 가장 기본이되는 Video, Audio Stream을 Webkit으로 부터 제공받는 API입니다. 만약 이것이 구현되지 않은 webkit browser에서 WebRTC 화상채팅 페이지를 접근하게 된다면....삐~ 동작이 안하게 됩니다. 현재는 Chrome, Safari, Firefox 가 지원됩니다.


2) SDP (Session Description Protocol , http://tools.ietf.org/html/rfc3264)

 - SDP는 각 Peer가 가진 세션의 정보들을 포함한 프로토콜입니다. 특히 제가 준비한 화상채팅의 경우에는 화상통신을 위한 Video, Audio Stream 연결을 위한 Peer Session 정보들이 담겨져 있습니다.


3) ICE (Interactive Connectivity Establishment , http://tools.ietf.org/html/rfc5245)

 - 위 링크를 따라 들어가면 ICE에 대한 장황한 설명이 들어있지만 요약해서 간단히 이야기한다면 네트워크상에서의 Peer간 응답 프로토콜입니다.

 다시 말해, 한쪽의 Peer가 다른 한쪽의 Peer에거 "Offer" - 전화를 겁니다. 그러면 "Offer"를 받은 Peer가 "Answer" - 전화를 받음으로써 서로 연결이 된다는 간단한 프로토콜입니다. 이때 연결은 서로의 SDP 정보를 교환함으로써 이루어집니다. 이미 VOIP서비스에서 사용되고 있는 Protocol입니다.


4) JSEP (Javascript Session Establishment Protocol , http://tools.ietf.org/html/draft-ietf-rtcweb-jsep-02)

 - Javascript session 정보를 ICE를 통해 통신하는 프로토콜에 대한 내용입니다. 아직 정의가 완료되지 않고 현재 진행중으로 2012-11 현재 02 버전이 나와 있습니다.


5) STUN Server (Session Traversal Utilities for NAT, http://en.wikipedia.org/wiki/STUN)

 - STUN 서버는 WebRTC를 이용한 Peer간의 통신 연결시에 내부 IP 또는 DHCP로 설정된 Peer가 Public 망에서의 연결이 가능하도록 해줍니다. 뒤에 예제를 들어가면서 설명할때 나오겠지만 인터넷 세상에 STUN Server 서비스를 무료로 제공하는 곳이 많이 존재합니다. VOIP등의 서비스를 위해 열려있는데 저는 구글에서 제공하는 STUN서버를 사용하였습니다.


자 위의 정보들을 대강이나마 머리속에 집어 넣으셨다면 거침없이 WebRTC에 대해 알아봅니다.


WebRTC는 HTML5와 Javascript를 통한 Webkit API를 사용하여 구현이 됩니다. 다시말해 WebRTC가 지원되는 Webkit Browser의 경우에는 화상 통신을 위한 추가적인 플러그인 설치없이 웹페이지에서 바로 접근 가능하다는 이야기 입니다. 현재 지원되는 Webkit Browser는 Chrome이 대표적이며 2012년 4Q또는 2013년 1Q에 Firefox, Safari가 지원될 예정입니다. 안타깝게도 IE는 아직 지원에 대한 소식이 없고, W3C에서 정의하는 표준과는 다른 표준안으로 구현될 것이라는 아주 MS스러운 루머가 돌고 있습니다. WebRTC가 브라우저 상에서 완전한 표준으로 자리잡게 된다면 Mobile 에서도 특별한 플러그인이나 앱의 추가 설치 없이 화상채팅 서비스를 사용가능하게 됩니다. 이런 Amazing한!


WebRTC는 P2P 통신을 사용합니다. WebRTC API에 정의되어있는 PeerConnection API를 통해 P2P통신이 가능하게 됩니다. 기존의 WebSocket은 웹서버와의 C/S 통신에 사용되었지만 PeerConnection은 Peer간의 MediaStream 공유를 가능하게 해줍니다. 제가 희망하기로는 FileStream까지 연결이 가능하다면 브라우저상의 토렌트가!? ㅋ 


자 이제 그럼 WebRTC 교양은 그만하도록 하고 실제 WebRTC 연결을 StepByStep으로 확인해보도록 하겠습니다.


1. 두 Peer간의 PeerConnection이 연결이되려면 SDP를 서로 주고 받아야합니다. 하지만 PeerConnection도 연결되지 않은 상태에서 상대방에게 정보를 전달하는 방법은 불가능 합니다. 이로인해 불가피하게 Peer사이에 ICE 통신을 가능하게 해줄 중계서버가 하나 필요합니다. 중계서버라고 해서 거창한 무엇인가가 아니고 단순 채팅서버와 같은 메세지 C/S 서버만 있으면 됩니다.  Google에서 기본 예제로 제공하는 (https://apprtc.appspot.com) 사이트에서는 이 중계서버를 GAE의 Channel API를 사용하였습니다. 저도 처음 구현시에 Channel API로 시작하였지만 GAE에서 제공하는 무료 Channel 생성 API 호출 횟수가 100번으로 제한되어있어 그냥 하나의 중계서버를 만들었습니다.





2. Peer간의 메세징 서버가 구성이 되었다면 이제 다음의 순서로 메세지를 주고 받습니다.



3. 이제 각 Peer간의 PeerConnection에 SDP 정보를 공유하면 연결이 끝!....이 아니고 이제 실제 연결은 ICE를 통해서 이뤄집니다.

PeerConnection을 생성할때 사용할 STUN Server의 정보를 입력하게 되어있는데 SDP 공유시에 이 정보도 공유가 됩니다. 그래서 ICE가 시작이되면 우선적으로 UDP를 통해 자신이 가진 SDP에 해당하는 상대방을 탐색하게 됩니다. 만약 UDP로의 탐색이 실패하게 되면 TCP로 HTTP, HTTPS 순으로 탐색을 다시 시작합니다. 이후 탐색이 완료가 되면 비로소 실제 PeerConnection간의 연결이 완료가 되어 상대방의 PeerConnection에서 받은 MediaStream을 사용할 수 있게됩니다.


이렇게 WebRTC에 대한 연결 방식까지 이해가 되셨으면 WebRTC를 처음 접하시는 분들의 바이블 Post인 HTML5Rocks의 Article(http://www.html5rocks.com/ko/tutorials/webrtc/basics/)을 참고해보세요.

다시 복습의 느낌으로 보게되니 느낌이 팍팍 오실겁니다.


아래 동영상은 HTML5Rocks에도 연결되어있지만 2012 Google I/O에서 발표된 WebRTC 소개 동영상입니다.




다음 포스트에서는 실제 HackFair에서 사용한 저의 코드를 보면서 1:1 P2P가 아닌 n:n P2P Trick까지 확인해보겠습니다.


아래는 HackFair에 제출한 WebRTC 동영상입니다. Draft 버전이었기에 UI가 ㅋ



Let's Hack!!





김코딩 | 2013.06.26 17:41 신고 | PERMALINK | EDIT/DEL | REPLY
webRTC를 막 공부하기 시작한 대학생입니다.! 너무나 귀한 자료 감사히 보았습니다~
잘보구가여 | 2013.06.26 21:55 신고 | PERMALINK | EDIT/DEL | REPLY
다음포스트는 언제업로드되나요??소스가 궁금해서요
nurinamu | 2013.07.22 12:58 신고 | PERMALINK | EDIT/DEL | REPLY
요새 정신없이 살다보니; 댓글 이제서야 확인했습니다. 다음 포스트 올리도록 노력하겠습니다~
정순 | 2013.09.25 17:55 신고 | PERMALINK | EDIT/DEL | REPLY
WebRTC 를 알기 쉽게 설명해주셔서 너무 감사하고 유익한 정보네요~~
혹 두번째 포스트는 계획이 없으신지 ㅜㅜ
nurinamu | 2013.09.26 10:51 신고 | PERMALINK | EDIT/DEL
이글을 쓴지 벌써 1년이 되어가려고하는 시점에 webrtc도 api업데이트도 많이 바뀌고 해서 api정리겸해서 올릴려고 생각중입니다. 하지만 이게 게으름병을 이겨내서 해야하는 거라..ㅠ.ㅠ 언제될지;
Name
Password
Homepage
Secret
2012.03.29 00:36

뭔 바람이 또 들었는지. 이번엔 node.js 입니다.

javascript하면 웹초창기때부터 익숙했던 대표적 client-side script였지만 요놈이 server side로 넘어가 node.js 란 이름으로 재탄생되었더군요.

node.js가 javascript라고 보기에는 무리가 있고 javascript의 문법을 차용한 server-side script로 봐야겠습니다.


뭐 암턴 관심을 가지고 요것저것 하는 도중에 server-side script이다보니 뭔가 좀 해보려면 서버가 필요합니다.

그냥 집에서 localhost로 공부만하겠다면 문제없지만 기왕에 시작한것 내 벽돌 갤럭시에서도 돌아가는 모바일 앱 하나 해보자니

node.js hosting 꽁짜를 뒤져봅니다. 


역시나 있습니다 ㅋㅋ


우선 먼저 발견한 것은 AWSheroku

두 가지 node.js hosting이 여기저기 비교도되고 많이 사용되는 것 같습니다.

뭐를 가지고 해볼까 고민중에 홈피가 아기자기하게 이쁜 heroku (오타쿠 스러운 분위기가 딱 맘에 듭니다 ㅋ)로 시작해봅니다.

<가격표 ㅋ. 사이트 곳곳에 오타쿠스러움이 묻어나있다~ 너무 쪽x리스럽지만 좋네~>


일단 계정을 등록하고 어딜가나 중요한 Hello World tutorial을 시작합니다.

이미 Tutorial에 나온 내용은 모두 skip하고 제가 겪은 삽질들을 몇가지 소개합니다.


#1 Tutorial Page에서 나오는 "package.json"파일의 express dependency 버전을 tutorial 그대로 입력하면 안된다!

 - 막무가내로 똑같이 "2.2.0"을 설정하고 npm install을 해버리면 내가 지금 설치한 node.js 버전이 너무 높다고 안된다고 뜹니다;

   당연한 이야기이지만 제가 이제 막 node.js 설치하였으니 지금 버전은 0.6.13, express module의 최신버전을 홈페이지에서 확인해보면 현재 "2.5.8".

  그래서 tutorial에 나온 그대로 입력하면 안되고 버전란에 "2.5.8"라고 하던지 무난하게 "latest"라고 입력해서 진행해야합니다.


#2 git push가 Error를 뿌려준다 - "Heroku push rejected, no Cedar-supported app detected"

 - 이건 Cedar-supported 란 말때문에 뭐가 있나하고 좀 당황했지만, 기존에 있던 파일 일부가 git에 add가 안되서 문제였던 것 입니다. 깔끔하게 그냥 git에 추가하고 push 하면 정상 진행됩니다.


#3 Procfile ? 요건 뭐냐?

 - 아직 이게 뭔지 잘 모르겠습니다. foreman 이 사용하는 process list file이란 심증은 가지만 좀 더 서핑 잉여질 스터디가 필요합니다.(줄줄이 사탕으로 알아둬야할 잉여서핑리스트에 차곡차곡 쌓입니다. ㅋ)

  일단 이것을 만들지 않고 foreman start 하면 Process list가 설정되지 않았다며 아무것도 시작하지 않습니다.


#4 내 App의 web url은 뭐야?

 - heroku 는 호스팅 서비스!! 그러니 내가 App을 올렷으니 확인을 위한 url이 필요한데, 홈페이지에 불친절하게도 자세한 내용이 없습니다.(사실 언급없이 살짝 나오지만 놓치기 쉽상).

  herokuapp.com의 sub domain으로 사용된는 것은 처음 heroku create cmd 생성시 만들어지는 git id가 나의 subdomain이 됩니다.

  아마 그것을 보지못하고 놓쳤다면 git directory의 config 를 열어보면 heroku로 설정된 remote alias에서 찾을 수 있습니다.

http://severe-waterfall-3920.herokuapp.com

이 내 hostring url입니다. ^^*


----추가!

URL을 위에처럼 어렵게 만들어진 이유는 app create할때 app이름을 아래처럼 안넣어줘서이네요;

heroku create --stack cedar

자기만의 subdomain을 app이름으로 할당가능했습니다. 아래처럼

heroku create --stack cedar <app_name>

app을 create하면 http://<app_name>.herokuapp.com 로 가능합니다.


이뿌게 hello world 찍어봤으니. 그럼 뭘 해볼까~ 고민해봅니다 ㅋ







완소타코 | 2012.04.03 10:18 신고 | PERMALINK | EDIT/DEL | REPLY
공부할 때 좋은 참고 자료가 될 것 같습니다~
nurinamu | 2012.04.13 13:13 신고 | PERMALINK | EDIT/DEL
참고하기에는 쫌 짝은 감이 ㅋ
Name
Password
Homepage
Secret
2011.12.19 19:41
GWT + GAE 를 써보겠다고 이전부터 책도 사고 이것 저것 뉴스그룹 등만 뒤적이다가.

근래에 숨돌릴 수 있는 틈이 생겨서 한번 제대로 헤딩해보기로 했다.

이전에도 몇 번 Beta로 서비스 될때 Sample Project 생성해서 그 위에서 투닥여서 사용한 적은 있지만,
이번에는 Empty Project로 시작해서 맨땅에 해딩해보자~

맨땅 헤딩 Start! 
----------------------------------------------------------

역시 맨땅 헤딩의 시작은 "Hello World!" 

Eclipse에서 GAE Plugin을 설치하고(어떻게 설치하는지는 생략! 참조 : http://code.google.com/appengine/docs/)
Project를 생성한다( Google >Web Application Project ). 과감하게 Sample은 uncheck 하고 Finish!

눈앞에는 빈깡통 프로젝트가 생겨나는데 완전 빈깡통은 아니고 기본적인 GWT, GAE library들과 기본적인 configuration file들이 포함되서 생성된다.

그냥 바로 Run 해본다. ㅋㅋ 

Missing required argument 'module[s]' 


주옥같은 애러가 바로 표시된다. ㅋ

이것은 GWT실행을 위한 Module Class가 없다는 것. 당연하다 src안에 아무것도 없으니까 ㅋ

빈깡통 StudyGWT Class를 하나 만들어준다. 여기에서는 내 프로젝트명 (StudyGWT)을 기준으로 설명 ㅋ

그리고 다시 Run!

[ERROR] Unable to find 'com/nurinamu/study/gwt/StudyGWT.gwt.xml' on your classpath; could be a typo, or maybe you forgot to include a classpath entry for source?

어익후 신난다~ 또 뭔가가 떴네. 2가지 문제가 발생했다.

StudyGWT.gwt.xml이 없거나 Entry 가 포함이 안되었다는데. 난 Entry를 만든적이 없으니.

일단 빈깡통 StudyGWT class를 EntryPoint Interface를 상속하도록 변경한다.

그리고 다시 Run! 하지만 다시 같은 애러. Entry는 생성하였지만 StudyGWT.gwt.xml이 없다.

이것이 Emtpy Project생성시에 자동으로 라도 만들어지면 좋았겠지만 왜 안만들어지는 모르겠다.

그래서 결국 Hello포함된 프로젝트에서 업어와서 아래 태그만 수정
(실제 gwt.xml의 doctype은 찾지를 못했고 GWT project사이트의 Issue란에서 URL discussion만 봤고 아직 실제 url을 못봤다;; Tutorial에서도 DTD의 언급은 안보이는군.)
<entry-point class='com.nurinamu.study.gwt.StudyGWT'/>
그리고 다시 Run!
 
그러면 Console에서 뭔가 Server가 동작하는 듯 메세지들이 찍히고 http://localhost:8888 에서 실행되었다고 찍힌다.

그럼 실행되었다니 웹브라우저에서 열어본다.

HTTP ERROR 403

Problem accessing /. Reason:

    FORBIDDEN
멋진 403 애러 뜬다. ㅋ

왜 이럴까 찾아보면 Console msg에 답이 있다. 

[WARN] No startup URLs supplied and no plausible ones found -- use -startupUrl
 
 startupUrl을 argument로 안주어서 ㅋ 거기에다 아직 html 페이지가 하나도 작성되지 않았다.

war폴더 아래에 index.html을 하나 생성해서 "Hello World!" 작성해서 저장한다.

그리고 "http://localhost:8888/index.html"을 browser에 치면!

짜잔 하고 "Hello World!"가 반겨준다.

깔끔한 마지막 마무리를 위해 WARN에서 알려준 startupUrl을 argument로 추가한다.

-startupUrl index.html
다시 Project를 실행하고 "http://localhost:8888"로 접속을 하면 

알흠다운 "Hello World!"가 출력된다.

자 이제 문을 열었으니 다음은 GWT로 간단 예제를 해보도록하쟈!!
 




Name
Password
Homepage
Secret
prev"" # next

www.flickr.com
www.flickr.com