본문 바로가기
IBM - old/IBM Bluemix

처음 사용자를 위한 IBM Bluemix 한글 튜토리얼

by freeman98 2016. 6. 7.

안녕하세요 이정운 입니다.

IBM Bluemix Meetup Seoul 에서 사용되던 실습 가이드가 누구나 접근할 수 있게 공유되어있는데 모르는 분들이 계실까봐 공유차원에서 다시한번 공유드리오니 참고하시기 바라겠습니다. 좀 더 자세한 사항은 하단의 링크를 참고하시기 바라겠습니다.

http://bmseoul-tutorial.mybluemix.net/

Bluemix 용어 정리

  • 지역 - Region
    • 애플리케이션 런타임 및 서비스가 실행되는 지역
    • US South: 미국 달라스
      • Sydney 호주 시드니
      • United Kingdom
      • Container 는 현재 US South, UK 만 지원
  • 조직 - Organization
    • 과금 및 협업 단위
      • 가입한email@domain.com형식으로 자동 생성
      • 조직 관리에서 이름 변경, 다른 사용자 초대, 도메인 수정 등이 가능
  • 영역 - Space
    • Application, service, container 의 분리를 위한 공간
    • Container 는 현재 container 를 처음 만든 영역 에서만 사용 가능
  • DevOps
    • hub.jazz.net 도메인으로 시작
    • Projects - Git repository
    • Edit code - 웹 편집기
    • Build and deploy - Delivery pipeline
    • Track and plan - 이슈 추적 및 개발상황 확인

DevOps tutorial

Bluemix 가입하기

  1. https://ibm.biz/Meetup_Seoul 링크를 클릭하여 가입합니다. 이메일은 반드시 수신 가능한 이메일을 입력해야 합니다.

    1.registrer_form.png

    1_2.register_complete.png

  2. 약 3분 후 등록한 이메일로 가입 확인 메일이 수신됩니다. 이메일의 링크를 클릭하면 계정이 활성화됩니다.

    2.confirm_mail.png

    2_2.confirm_successful.png

    지역 변경

  3. https://bluemix.net 로그인

  4. 오른쪽 상단 사람 모양 계정 버튼을 클릭

    3-2.account.png

  5. 지역 (Region) 클릭

    3-3.region.png

  6. 미국 남부 (US South) 클릭

    3-4.us-south.png

  7. 영역이 (Space) 존재하지 않는다는 메시지가 나오면 영역 이름을 입력 후 작성 버튼을 클릭

    3-5.new_space.png

    App 만들기

  8. Cloud Foundry 앱 작성을 클릭합니다.

    4_create_app.png

  9. 웹을 선택합니다.

    5.web.png

  10. SDK for Node.js 를 선택 후 계속을 클릭합니다.

    6.nodejs.png

  11. 앱에 사용할 이름을 입력합니다.

    7.appname.png

  12. 어플리케이션 스테이징을 기다립니다. 3분가량 소요됩니다.

    8.staging.png

  13. 앱이 실행 상태가 되면 링크를 눌러 기본 페이지가 동작하는지 확인합니다.

    9.staged.png

    9_2.running.png

    Git 저장소 만들기

  14. 대시보드로 돌아가 개요를 클릭하고 오른쪽 위의 GIT 추가를 클릭합니다.

    10.overview.png

    10_2.addtogit.png

  15. DevOps 접속이 처음이라면, DevOps 에서 사용할 아이디를 새로 입력합니다. git 및 기타 명령어에서 사용되는 아이디를 새로 입력해주시면 됩니다. 계정당 한번만 입력하면 계속 사용할 수 있습니다.

    11.devopsid.png

    11_2.devopsid_created.png

  16. 스타터 앱 패키지를 올리고 Build & Deploy 파이프라인을 사용하도록 설정합니다.

    12.defsrc.png

    12_2.repository_created.png

  17. 대시보드에서 GIT URL 을 클릭하여 소스 저장소로 이동합니다.

    13.git_repository.png

    온라인 소스 수정: 채팅 앱 만들기

  18. 소스 편집을 위해 EDIT CODE 를 클릭합니다. 잠시 동안 Git 저장소를 클론하여 작업공간이 설정됩니다.

    18.project_overview.png

    18_2.cloning_repository.png

  19. (선택사항) Git 사용이 익숙하다면 git clone 명령어를 사용해도 됩니다. Git URL 을 클릭하면 현재 저장소의 git 주소가 표시됩니다.

    19.giturl.png

  20. 채팅에 필요한 기본적인 파일들을 수정합니다.

    • socket.io 모듈 사용을 위해 package.json 파일을 다음과 같이 변경합니다.
    {
    "name": "NodejsStarterApp",
    "version": "0.0.1",
    "description": "A sample nodejs app for Bluemix",
    "scripts": {
            "start": "node app.js"
    },
    "dependencies": {
            "express": "4.12.x",
            "cfenv": "1.0.x",
            "socket.io": "*"
    },
    "repository": {},
    "engines": {
            "node": "0.12.x"
    } 
}
    • 서버쪽 채팅 기능을 위해 app.js 파일을 다음과 같이 변경합니다.
    /*eslint-env node*/

//------------------------------------------------------------------------------
// node.js starter application for Bluemix
//------------------------------------------------------------------------------

// This application uses express as its web server
// for more info, see: http://expressjs.com
var express = require('express');

// cfenv provides access to your Cloud Foundry environment
// for more info, see: https://www.npmjs.com/package/cfenv
var cfenv = require('cfenv');

// create a new express server
var app = express();

// serve the files out of ./public as our main files
app.use(express.static(__dirname + '/public'));

// http 와 socket.io 를 사용
var http = require('http').Server(app);
var io = require('socket.io')(http);

io.on('connection', function(socket) {
  console.log('Client connected');
  socket.on('P', function(msg) {
    console.log('P: ' + msg);
    io.emit('P', msg);
  });
});

// get the app environment from Cloud Foundry
var appEnv = cfenv.getAppEnv();

// start server on the specified port and binding host
http.listen(appEnv.port, '0.0.0.0', function() {

  // print a message when the server starts listening
  console.log("server starting on " + appEnv.url);
});
    • 클라이언트쪽 채팅 인터페이스를 위해 public/index.html 파일을 다음과 같이 변경합니다.
    <!DOCTYPE html>
<html>

  <head>
    <title>NodeJS Starter Application</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="stylesheets/style.css">
  </head>

  <body>
    <ul id="msgs"></ul>
    <form>
      <input id="m" /><button>Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>

$(document).ready(function() {
  var socket = io();

  $('form').submit(function(){
    socket.emit('P', $('#m').val());
    $('#m').val('');
    return false;
  });

  socket.on('P', function(msg) {
    $('#msgs').append($('<li>').text(msg));
  });
});

</script>
  </body>
</html>
    • 다른 앱으로 배치를 위해 manifest.yml 파일을 다음과 같이 변경합니다.
    applications:
- path: .
  memory: 256M
  instances: 1
  domain: mybluemix.net
  disk_quota: 1024M

  21. 라이브 편집을 켜서 수정 내용이 실시간으로 반영되도록 합니다. 라이브 모드로 재배치되는데는 몇 분 가량이 소요되며, 앱이 개발자 모드로 실행됩니다.

    21.live_edit.png

    21_2.live_edit_confirm.png

    22.live_test_progress.png

  22. 앱 재배치가 완료되면 배치된 채팅 앱을 확인합니다.

    22_2.live_edit_on.png

    22_3.chat_test1.png

    테스트 앱 파이프라인 작성

  23. BUILD & DEPLOY를 클릭하여 파이프라인으로 이동합니다.

    23.build_deploy.png

  24. Deploy Stage 스테이지의 톱니바퀴 버튼을 눌러 단계 구성으로 들어갑니다.

    24_deploy_stage_configure.png

  25. 애플리케이션 이름 뒤에 -test 를 붙입니다.

    25.deploy_to_test.png

  26. EDIT CODE로 돌아가 왼쪽 git 아이콘을 클릭합니다.

    26.git_mode.png

  27. 커미트 메시지 를 입력하고 수정한 파일 4개를 선택 후 커미트를 클릭합니다.

    27.commit.png

  28. 푸시를 눌러 코드를 git 저장소에 올리고, BUILD & DEPLOY 로 돌아가 자동 배치 상황을 확인합니다.

    28.push.png

    28_2.deploy_with_push.png

  29. 배치가 완료되면 테스트 앱의 링크를 클릭하여 잘 동작하는지 확인합니다. 대시보드에서도 실행된 테스트앱을 확인 가능합니다.

    29.test_deployed.png

    29_2.test_link_clicked.png

    29_3.test_dashboard.png

    협업을 위한 공동작업 준비

  30. (관리자) 왼쪽 위의 프로젝트 이름을 눌러 OVERVIEW로 이동해서 오른쪽 Invite others to join your project를 클릭하고 초대할 개발자의 이메일을 입력합니다.

    30.invite_others.png

  31. (개발자) 초대받은 개발자의 메일함에 초대장이 도착합니다. 초대장의 링크를 클릭하면 해당 프로젝트의 멤버가 됩니다.

    31.invitation_letter.png

    31_2.invitation_click.png

    TRACK & PLAN 에서 작업 할당

  32. (관리자) 위의 TRACK & PLAN 버튼을 눌러 TRACK & PLAN 메뉴로 들어갑니다.

  33. (관리자) 프로젝트에서 처음 TRACK & PLAN 을 사용했다면 프로젝트 설정에서 활성화해야 합니다. 위의 Project Settings 링크를 눌러 설정으로 이동 후 Enable Track & Plan 을 체크하고 아래 SAVE를 클릭하여 저장합니다.

    33.enable_track_plan.png

    33_2.project_options.png

  34. (관리자) 다시 위의 TRACK & PLAN 버튼을 눌러 TRACK & PLAN 메뉴로 들어갑니다. 작업 항목 작성 을 클릭 후 작업에 대한 요약을 작성합니다. 본 예제에서는 닉네임 기능 추가라는 내용을 적고, 유형은 Task로 소유자는 개발자로 선택합니다. 내용을 다 입력하면 작성 버튼을 눌러 작업을 생성합니다.

    34.track_plan_main.png

    34_2.new_task.png

    34_3.task_owner.png

  35. (개발자) 개발자가 TRACK & PLAN 으로 들어가면 내 작업에 할당된 작업 내용이 표시됩니다. 작업을 클릭하여 상태를 New에서 Start Working으로 변경한 후 위의 저장을 눌러 저장합니다. 작업 완료 후 커미트 단계에서 사용하기 위해 작업의 번호를 적어둡니다.

    35.assigned_task.png

    35_2.start_task.png

  36. (관리자) 프로젝트 관리자는 해당 작업이 시작되었음을 확인 가능합니다.

    35.task_started.png

  37. (개발자) 개발자는 EDIT CODE로 돌아가 다음과 같이 소스를 수정합니다.

    • app.js
    /*eslint-env node*/

//------------------------------------------------------------------------------
// node.js starter application for Bluemix
//------------------------------------------------------------------------------

// This application uses express as its web server
// for more info, see: http://expressjs.com
var express = require('express');

// cfenv provides access to your Cloud Foundry environment
// for more info, see: https://www.npmjs.com/package/cfenv
var cfenv = require('cfenv');

// create a new express server
var app = express();

// serve the files out of ./public as our main files
app.use(express.static(__dirname + '/public'));

// http 와 socket.io 를 사용
var http = require('http').Server(app);
var io = require('socket.io')(http);

io.on('connection', function(socket) {
  console.log('Client connected');
  socket.on('P', function(msg) {
    console.log('P: ' + {'nick': socket.nick, 'text': msg});
    io.emit('P', {'nick': socket.nick, 'text': msg});
  });
  socket.on('N', function(newnick) {
    io.emit('P', {'nick':  socket.nick, 'text': '-> <' + newnick + '>'});
    socket.nick = newnick;
  });
  socket.nick = 'User' + Math.floor(Math.random() * 1000);
});

// get the app environment from Cloud Foundry
var appEnv = cfenv.getAppEnv();

// start server on the specified port and binding host
http.listen(appEnv.port, '0.0.0.0', function() {

  // print a message when the server starts listening
  console.log("server starting on " + appEnv.url);
});
    • public/index.html
    <!DOCTYPE html>
<html>

  <head>
    <title>NodeJS Starter Application</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="stylesheets/style.css">
  </head>

  <body>
    <ul id="msgs"></ul>
    <form>
      <input id="m" /><button>Send</button>
    </form>
    <input id="n" /><button id="nick_btn">닉네임 변경</button>
    <script src="/socket.io/socket.io.js"></script>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>

$(document).ready(function() {
  var socket = io();

  $('form').submit(function(){
    socket.emit('P', $('#m').val());
    $('#m').val('');
    return false;
  });

  socket.on('P', function(msg) {
    $('#msgs').append($('<li>').text('<' + msg.nick + '> ' + msg.text));
  });

  $('#nick_btn').click(function() {
    socket.emit('N', $('#n').val());
  });
});

</script>
  </body>
</html>

  38. (개발자) 왼쪽 git 아이콘을 클릭후 커미트 메시지를 닉네임 기능 지원 Task XXX 라고 입력합니다. XXX 에는 위에서 적어둔 작업 번호를 넣어야 합니다. 수정한 파일 2개를 선택 후 커미트후 푸시를 눌러 코드를 git 저장소에 올립니다.

    38.commit_push.png

  39. 개발자와 관리자 모두 BUILD & DEPLOY 에서 배치 상황을 확인 가능합니다. TRACK & PLAN 에서 작업을 선택하여 LINK 를 클릭하면 개발자가 커밋하고 푸시한 내용을 확인 가능합니다.

    39.pushed_link.png

  40. (개발자) 작업을 Closed 로 변경합니다.

    프로덕션 앱 파이프라인 생성

  41. BUILD & DEPLOY로 이동하여 + 단계 추가를 클릭합니다.

    41.add_stage.png

  42. 이름을 입력하고, 입력 탭에서 단계 트리거를 이 단계를 수동으로 실행할 때만 작업 실행 으로 맞춥니다.

    42.stage_input.png

  43. 작업 탭으로 이동하여 작업 추가를 클릭하고 배치를 선택합니다. 애플리케이션 이름에 -prod 를 붙입니다.

    43.stage_add_deploy.png

    43_2.stage_save.png

  44. 영역에서 새 영역 작성을 클릭하고 prod라는 영역을 작성합니다. 영역이 prod 로 선택되면 저장합니다.

    44.new_space.png

    44_2.new_prod_space.png

  45. 단계 실행 버튼을 눌러 프로덕션 앱 배치를 시작합니다. 몇분 가량이 소요되며, 배치가 끝난 후 링크를 눌러 잘 배치되었는지 확인합니다. 대시보드에서 prod 스페이스에 프로덕션 앱이 배치된 것을 확인 가능합니다.

    45.run_stage.png

    45_2.running_stage.png



'IBM - old > IBM Bluemix' 카테고리의 다른 글

[Bluemix]Microservices에 대한 간단한 소개  (0) 2017.02.25
[Bluemix]Cloud 와 Legacy 간 보다 안전한 보안 연결을 위한 Secure Gateway 서비스  (0) 2016.08.01
막무가내로 시작해보는 cloud - IBM Bluemix - 5. 서비스 추가 및 연결  (0) 2016.06.07
막무가내로 시작해보는 cloud - IBM Bluemix - 4. Eclipse 를 활용한 IBM Bluemix 연동/개발  (0) 2016.06.07
막무가내로 시작해보는 cloud - IBM Bluemix - 3. 개발  (0) 2016.06.07

관련글

댓글

티스토리툴바