Cloud9IDE는 말그대로 클라우드 IDE입니다. 웹에서 개발하고 테스트를 도와주는 웹기반 개발환경입니다. 벌써 이런 시대가 오다니 너무 멋지네요. 근데, 제한적인 것이 Node.js만 현재 웹에서 실행하고 테스트할 수 있고, php 등 다른 언어는 아직 실행은 할 수 없고 편집만 할 수 있는 듯 합니다.
그래도 Node.js는 제대로 쓸 수 있으니 완전 좋네요. 기존 git에 있는 것을 clone해서도 사용할 수 있는 듯 합니다. 일단 제가 git는 잘 모르니 새로 만드는 방법으로.....
Cloud9IDE 사이트입니다. 가입하세요~!
http://cloud9ide.com/
1. 프로젝트 생성 및 개발하기
일단 가입하고 dashboard로 들어갑니다.
거기서 좌측메뉴에서 My Projects에서 +버튼 눌러서 Create a new project를 합니다. 프로젝트 이름을 아무거나 만들고, START EDITING을 눌러서 편집을 합니다.
딱 보이는 화면이 영락없는 개발 툴 같습니다. 완전 좋네요!
이제 초간단 채팅예제를 작성할겁니다.
express와 socket.io를 이용한 예제여서 두개가 설치가 되어야 합니다. 다행히 cloud9ide에서는 npm를 지원합니다. 저기 콘솔에 입력해서 설치합니다.
그리고 메인 javascript를 만듭니다.
app.js
초간단 채팅예제입니다. 보면 socket연결이 chat으로 들어오면 바로 다른 연결된 socket에게 메세지를 그냥 전달하는 예제입니다.
index.html
클라이언트 index.html은 그냥 메세지를 보내고 메세지가 들어오면 ul에 그려주는 내용이 다 입니다. 나 진짜 초간단 시리즈 잘 만드는 듯!
이제 run을 눌러서 실행해봅시다. 신기한 것은! 디버깅도 됩니다! 완전 짱! 그러면 아래 임시 url로 실행되는 것을 확인할 수 있습니다. "프로젝트명.cloude9ide아이디.cloud9ide.com"의 url로 확인할 수 있습니다.
2. Heroku에 배포하기
이제 잘 돌아가는 것을 확인했으면 Heroku에 배포해봅시다.
http://cloud9ide.posterous.com/introducing-heroku-support 저도 이 동영상 을 보고 따라했습니다. 두 개 다 완전 맘에 드는 서비스인데, 이렇게 합쳐질 수 있다는 것에 또 한번 감동하네요ㅠㅠ
편집 왼쪽에 Deploy라는 메뉴가 있습니다. 선택하고, +버튼을 눌러서 Choose type을 Heroku.com으로 바꿉니다. 로그인 해서 인증을 한 뒤에 Create new를 통해 프로젝트를 만듭니다. 원하는 이름으로 만들어서 ADD를 선택합니다.
일단 배포를 누르면 배포가 안될겁니다. 왜냐하면 Heroku에 배포하기 위해서 package.json파일과 Procfile이 필요하기 때문입니다.
package.json
Procfile
여기서 제가 헤맨부분이 있는데, Heroku에 배포하기 위해서는 Heroku에 key가 등록되어야 합니다. 근데, 이건 Cloud9ide에서 배포하는 것이라 Cloud9ide에서 키가 있어야 합니다. 친절하게 이것까지 고려했더라구요.
대시보드로 다시가면 "Show your SSH key"라는 부분이 있습니다. 보시면 공개키가 있습니다. 이걸 등록해줘야하는데, Heroku가 설치되어있는 PC에서 해야합니다.
Heroku설치는 여기에서...
그럼 cmd에서 C:\Users\자신아이디\.ssh\id_rsa.pub파일을 생성합니다. 기존 것은 백업해두시는 게 좋습니다. 그리고 아까 SSH key내용을 붙여넣어서 파일을 저장합니다.
그런 다음에 Heroku에 key를 등록합니다.
그럼 이제 git를 통해 해당 내용을 커밋 후에 push를 하면 끝납니다.
한 뒤에, Deploy에서 생성한 곳을 선택한 뒤, deploy버튼을 눌러주면 배포됩니다.
참 쉽죠!
위에 내용을 배포한 url입니다.
http://socketiochat.herokuapp.com/
PS. 이제 로컬에서 개발하지 않아도 되는 환경이 점점 구축되어가네요! 웹 개발툴인데, 꽤 쓸만해요! 구글닥스가 쓸만하듯이요!
그래도 Node.js는 제대로 쓸 수 있으니 완전 좋네요. 기존 git에 있는 것을 clone해서도 사용할 수 있는 듯 합니다. 일단 제가 git는 잘 모르니 새로 만드는 방법으로.....
Cloud9IDE 사이트입니다. 가입하세요~!
http://cloud9ide.com/
1. 프로젝트 생성 및 개발하기
일단 가입하고 dashboard로 들어갑니다.
거기서 좌측메뉴에서 My Projects에서 +버튼 눌러서 Create a new project를 합니다. 프로젝트 이름을 아무거나 만들고, START EDITING을 눌러서 편집을 합니다.
딱 보이는 화면이 영락없는 개발 툴 같습니다. 완전 좋네요!
이제 초간단 채팅예제를 작성할겁니다.
express와 socket.io를 이용한 예제여서 두개가 설치가 되어야 합니다. 다행히 cloud9ide에서는 npm를 지원합니다. 저기 콘솔에 입력해서 설치합니다.
npm install express
npm install socket.io
npm install socket.io
그리고 메인 javascript를 만듭니다.
app.js
var app = require("express").createServer(),
io = require("socket.io").listen(app);
// 실제 heroku에서는 PORT를 사용. 현재 Cloud9ide에선 C9_PORT사용
var port = process.env.C9_PORT;
if (!port){
port = process.env.PORT;
}
app.listen(port);
app.get("/", function(req, res){
res.sendfile(__dirname + "/index.html");
});
io.sockets.on("connection", function(socket){
socket.on("chat", function(data){
console.log("receivedata = " + data);
socket.broadcast.emit("chat", data);
});
});
io = require("socket.io").listen(app);
// 실제 heroku에서는 PORT를 사용. 현재 Cloud9ide에선 C9_PORT사용
var port = process.env.C9_PORT;
if (!port){
port = process.env.PORT;
}
app.listen(port);
app.get("/", function(req, res){
res.sendfile(__dirname + "/index.html");
});
io.sockets.on("connection", function(socket){
socket.on("chat", function(data){
console.log("receivedata = " + data);
socket.broadcast.emit("chat", data);
});
});
초간단 채팅예제입니다. 보면 socket연결이 chat으로 들어오면 바로 다른 연결된 socket에게 메세지를 그냥 전달하는 예제입니다.
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>초간단 채팅</title>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect();
$(document).ready(function(){
socket.on("chat", function(data){
$("ul").prepend("<li>" + data + "</li>");
});
// 보내기 엔터이벤트
$("#inputMessage").keyup(function(e){
if (e.keyCode == 13){
var val = $("#inputMessage").val();
if (val.length <= 0){
return;
}
send(val);
$("#inputMessage").val("");
}
});
});
function send(message){
socket.emit("chat", message);
$("ul").prepend("<li>" + message + "</li>");
}
</script>
</head>
<body>
<input type="text" id="inputMessage" name="inputMessage"/>
<ul></ul>
</body>
</html>
<html>
<head>
<title>초간단 채팅</title>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect();
$(document).ready(function(){
socket.on("chat", function(data){
$("ul").prepend("<li>" + data + "</li>");
});
// 보내기 엔터이벤트
$("#inputMessage").keyup(function(e){
if (e.keyCode == 13){
var val = $("#inputMessage").val();
if (val.length <= 0){
return;
}
send(val);
$("#inputMessage").val("");
}
});
});
function send(message){
socket.emit("chat", message);
$("ul").prepend("<li>" + message + "</li>");
}
</script>
</head>
<body>
<input type="text" id="inputMessage" name="inputMessage"/>
<ul></ul>
</body>
</html>
클라이언트 index.html은 그냥 메세지를 보내고 메세지가 들어오면 ul에 그려주는 내용이 다 입니다. 나 진짜 초간단 시리즈 잘 만드는 듯!
이제 run을 눌러서 실행해봅시다. 신기한 것은! 디버깅도 됩니다! 완전 짱! 그러면 아래 임시 url로 실행되는 것을 확인할 수 있습니다. "프로젝트명.cloude9ide아이디.cloud9ide.com"의 url로 확인할 수 있습니다.
2. Heroku에 배포하기
이제 잘 돌아가는 것을 확인했으면 Heroku에 배포해봅시다.
http://cloud9ide.posterous.com/introducing-heroku-support 저도 이 동영상 을 보고 따라했습니다. 두 개 다 완전 맘에 드는 서비스인데, 이렇게 합쳐질 수 있다는 것에 또 한번 감동하네요ㅠㅠ
편집 왼쪽에 Deploy라는 메뉴가 있습니다. 선택하고, +버튼을 눌러서 Choose type을 Heroku.com으로 바꿉니다. 로그인 해서 인증을 한 뒤에 Create new를 통해 프로젝트를 만듭니다. 원하는 이름으로 만들어서 ADD를 선택합니다.
일단 배포를 누르면 배포가 안될겁니다. 왜냐하면 Heroku에 배포하기 위해서 package.json파일과 Procfile이 필요하기 때문입니다.
package.json
{
"name": "node-example",
"version": "0.0.1",
"dependencies": {
"express": "2.2.0",
"socket.io": "0.8.2"
}
}
"name": "node-example",
"version": "0.0.1",
"dependencies": {
"express": "2.2.0",
"socket.io": "0.8.2"
}
}
Procfile
web: node app.js
여기서 제가 헤맨부분이 있는데, Heroku에 배포하기 위해서는 Heroku에 key가 등록되어야 합니다. 근데, 이건 Cloud9ide에서 배포하는 것이라 Cloud9ide에서 키가 있어야 합니다. 친절하게 이것까지 고려했더라구요.
대시보드로 다시가면 "Show your SSH key"라는 부분이 있습니다. 보시면 공개키가 있습니다. 이걸 등록해줘야하는데, Heroku가 설치되어있는 PC에서 해야합니다.
Heroku설치는 여기에서...
그럼 cmd에서 C:\Users\자신아이디\.ssh\id_rsa.pub파일을 생성합니다. 기존 것은 백업해두시는 게 좋습니다. 그리고 아까 SSH key내용을 붙여넣어서 파일을 저장합니다.
그런 다음에 Heroku에 key를 등록합니다.
//이건 Cloude9ide에서 하는 것이 아니라 heroku가 깔린 자신의 PC에서 합니다.
heroku keys:add
heroku keys:add
그럼 이제 git를 통해 해당 내용을 커밋 후에 push를 하면 끝납니다.
git init
git add .
git commit -m "init"
git add .
git commit -m "init"
한 뒤에, Deploy에서 생성한 곳을 선택한 뒤, deploy버튼을 눌러주면 배포됩니다.
참 쉽죠!
위에 내용을 배포한 url입니다.
http://socketiochat.herokuapp.com/
PS. 이제 로컬에서 개발하지 않아도 되는 환경이 점점 구축되어가네요! 웹 개발툴인데, 꽤 쓸만해요! 구글닥스가 쓸만하듯이요!
