안녕하세요? 이번 글은 Bluemix를 이용하여 간단한 클라우드 애플리케이션을 디자인하고 만들어 가는 과정을 내용으로 연재되고 있습니다. 아래와 같은 순서로 진행되고 있으므로 참고 부탁 드립니다.


  1. 클라우드 환경 이해
  2. 애플리케이션 구상 및 요건 정의
  3. 요건에 대한 Usecase 및 Wireframe 작성
  4. 마이크로 서비스 아키텍쳐 설계
  5. 애플리케이션 서버 환경 준비
  6. 애플리케이션 로컬 개발 환경 준비
  7. 애플리케이션 프로토타입 작성 Part1
  8. 애플리케이션 프로토타입 작성 Part2
  9. 애플리케이션 프로토타입 작성 Part3
  10. 애플리케이션 DevOps 환경 구성

애플리케이션 로컬 개발 환경 준비

지난 글에서 클라우드 플랫폼인 IBM Bluemix에 Cloud Foundry 애플리케이션과 필요한 서비스를 구성 했습니다. 클라우드 환경에 배포된 애플리케이션을 Bluemix 카탈로그에서 Template 형태로 생성된 것으로 배포된 code를 Bluemix Dashboard에서 download 받을 수 있습니다. 다운로드 받은 코드는 수정 후 다시 Bluemix 환경에 배포 할 수 있도록 Local 개발 환경을 준비하도록 합니다.

애플리케이션 코드 다운로드

Bluemix에서 Catalog를 통해 Cloud Foundry 애플리케이션을 생성하면 해당 애플리케이션에 대한 소스 코드를 다운로드 받을 수 있습니다. 일종의 템플릿으로 생성된 것이라 애플리케이션 이름과 연결된 서비스 정보도 manifest 정보가 반영된 형태로 다운로드 가능합니다.

  • 대시 보드 확인

Bluemix의 애플리케이션 대시 보드를 확인하면 다음과 같습니다.

해당 애플리케이션의 상태, 런타임, 연결 등등에 대한 정보를 볼 수 있는데, 왼편에 시작하기라는 메뉴를 선택합니다.

시작하기에는 해당 애플리케이션을 CLI (Command Line Interface, 명령행 인터페이스)를 이용하여 개발 할 수 있는 방법에 대한 가이드를 제공합니다.

  • 소스 코드 다운로드

화면에 보이는 스타터 코드 다운로드 버튼을 클릭하여 템플릿형태로 작성된 애플리케이션의 소스 코드를 다운로드 할 수 있습니다.

그런데, 만약 표준 유형으로 작성된 애플리케이션이 아닌 경우는 시작하기 화면이 아래와 같이 다를 수 있습니다.

이 경우는 샘플 코드를 다운로드 링크를 클릭하면 해당 애플리케이션의 소스 코드를 다운로드 할 수 있습니다.

각각 서비스 애플리케이션에 대한 모든 소스 코드 압축 파일을 다운로드 후 적당한 위치에 파일을 풀어 놓습니다.

애플리케이션 개발 도구 설치

명령행 인터페이스 도구(CLI) 설치

CLI는 dir이나 ls와 같은 shell 명령을 기반으로 Cloud 환경에 접속하여 애플리케이션을 시작, 중지, 로그 확인과 같은 애플리케이션 관리 기능과, 로컬 환경에서 변경된 애플리케이션을 Cloud 환경으로 업데이트 하는 기능을 제공 합니다.

Bluemix CLI는 Bluexix Cloud 사용을 위한 다양한 기능을 명령행 기반으로 제공하는 도구입니다. 사실 CF Application이므로 cf CLI를 설치하고 이를 이용 할 수도 있지만 CF 앱 이외 다른 Bluemix 기능에 대한 통합 관리를 위해 Bluemix CLI를 설치하여 사용하도록 합니다.

현재 Bluemix CLI는

  • MacOSX
  • Windows 64bit
  • Linux 64bit

세 가지를 플랫폼을 지원하고 있습니다.

Bluemix CLI 다운로드와 사용 정보는 다음 URL을 참고 하시기 바랍니다.

Bluemix CLI가 정상적으로 설치되면 아래와 같이 bluemix -v 또는 bx -v 명령으로 설치된 version 정보를 확인 해 볼 수 있습니다. bxbluemix를 줄여서 사용 할 수 있는 alias 입니다.

$ bluemix -v
bluemix version 0.5.4+ae22935-2017-05-18T06:24:28+00:00
$ bx -v
bx version 0.5.4+ae22935-2017-05-18T06:24:28+00:00

Node.js Runtime 설치

Node.js는 아래 Node.js 홈페이지에서 다운로드 받을 수 있습니다.

현재 Bluemix에서 사용할 수 있는 Node.js의 최신 버젼이 6.10.2이라 6.10.2를 설치하는게 좋습니다만, 로컬 개발 환경인 6.10.3이라 해도 버그 수정과 같은 마이너한 부분이므로 충분히 사용 할 수 있습니다.

만약 6.10.2를 설치하려면 다음 정보를 참고 하시기 바랍니다

참고로, Bluemix의 Node.js 버젼 정보는 https://console.ng.bluemix.net/docs/runtimes/nodejs/updates.html#latest_updates 를 참고 하시기 바랍니다.

Node.js Runtime 설치가 완료되었다면 다음과 같이 명령행에서 설치된 Node.js 정보를 확인 할 수 있습니다.

$ node -v
v6.10.2
$ npm -v
v4.6.1

Bluemix 서비스 신임 정보 저장

Bluemix CF 앱은 Runtime과 Service가 서로 연결되어 있는 형태로 되어 있습니다. Runtime에 연결된 Service는 별도로 구성된 서버에서 Bluemix 서비스로 제공되는 일종의 SaaS (Software as a Service) 형식인데, Bluemix 플랫폼에서는 애플리케이션이 이를 사용 할 수 있도록 VCAP_SERVICES 라는 이름의 환경 변수를 제공합니다.

현재 이 애플리케이션에 연결된 서비스는 Redis CloudCloudant NoSQL DB입니다.

애플리케이션 대시 보드의 런타임 메뉴를 선택하면 애플리케이션 런타임 정보와 함께 환경 변수 정보를 확인 할 수 있습니다.

VCAP_SERVICES의 내용은 아래 내보내기 버튼을 누르면 신임 정보를 JSON 파일 형태로 다운로드 됩니다.

이렇게 다운로드 받은 JSON 파일을 각각 애플리케이션 소스 코드 폴더에 vcap-local.json 라는 이름으로 변경하여 복사해 놓습니다.

로컬 애플리케이션 모듈 설치

Node.js 애플리케이션이므로 명령창을 이용하여 실행합니다.

소스 코드가 ~/smv/smv-ui-app에 있다면 다음과 같이 애플리케이션의 소스 코드가 담긴 곳으로 이동합니다.

$ cd ~/smv/smv-ui-app

다음 명령으로 node runtime에 필요한 모듈을 다운로드하고 설치합니다.

$ npm install

Node.js 모듈 설치 중 Platform 의존성이 있어 source code compile이 필요한 경우가 있습니다. node-gyp라는 build tool이 실행되는데, Mac OSX의 경우 Xcode, Windows의 Visual Studio와 같은 도구가 설치되어야 합니다.

설치 파일:

  • Unix 환경:
    • python (v2.7 추천, v3.x.x지원하지 않습니다 )
    • make
    • GCC와 같은 적절한 C/C++ 컴파일러 툴체인
  • Mac OS X 환경:
    • python (v2.7 추천, v3.x.x지원하지 않습니다) (Mac OS X에는 기본 설치되어 있습니다.)
    • Xcode
      • Xcode 메뉴 중 Xcode -> Preferences -> Downloads 를 통해 Command Line Tools도 설치해야 합니다.
      • 이 단계에서 gccmake를 포함한 관련 툴체인이 설치됩니다.
  • Windows 환경:

    • 옵션 1: 관리자 모드로 실행한 PowerShell이나 CMD.exe 에서 Microsoft가 제공하는 windows-build-tools를 이용하여 필요로 하는 모든 도구 설치와 설정을 완료합니다.
      • npm install --global --production windows-build-tools를 실행
    • 옵션 2: 수동 설치 및 설정:

      • Visual C++ 빌드 환경:
      • 옵션 1: Default Install 옵션을 이용한 Visual C++ Build Tools 설치합니다.

      • 옵션 2: Visual Studio 2015 설치 (또는 기존에 설치된 내용 변경), 설치 하는 동안에 Common Tools for Visual C++ 선택. Community 및 Express for Desktop 에디션에서 무료로 사용 가능합니다.

        [Windows Vista / 7]의 경우 .NET Framework 4.5.1 이 필요합니다.

      • Python 2.7 (v3.x.x 은 지원하지 않음)을 설치하고, npm config set python python2.7를 실행합니다. (또는 아래 Python 버젼과 경로에 대한 안내 참고하세요)

      • cmd에서 다음 명령을 수행합니다. npm config set msvs_version 2015

    만약 위의 명령이 동작하지 않는다면, Microsoft's Node.js Guidelines for Windows를 방문해 추가 팁을 확인해 보세요.

만약, Python의 여러 버젼이 설치되어 있는 경우라면, node-gyp이 기본으로 사용하는 version을 '–python` 변수로 지정해 주어야 합니다:

$ node-gyp --python /path/to/python2.7

node-gyp에 대한 자세한 내용은 https://github.com/nodejs/node-gyp를 참고하시기 바랍니다.

로컬 애플리케이션 실행

이제 다음과 같이 애플리케이션을 실행합니다.

$ node app.js

또는

$ npm start

정상적으로 실행되었다면 다음과 같은 메시지를 볼 수 있습니다.

웹 브라우저로 메시지에 출력된 http://localhost:3000로 접근하면 Bluemix 배포 시 보았던 것과 동일한 모습을 볼 수 있습니다.

이제 다른 Application도 실행 해 볼 차례입니다. 기본적으로 다른 애플리케이션들이 동시에 실행되는 상황이어야 하므로 앞서 실행 했던 애플리케이션과 동시에 실행 될 수 있도록 준비해야 합니다.

하나의 host에서 실행되는 것이므로 hostname으로 구분하기로 했던 서비스들을 localhost의 port 번호로 구분해야 합니다. 각각의 서비스 앱의 실행 시 환경 변수 PORT에 지정할 번호를 부여하고 애플리케이션에서는 각 서비스에 대한 Base URL 정보를 기반으로 사용합니다.

Cloud Foundry 앱은 환경 변수를 이용한 가변 설정 정보를 둘 수 있으며 다음과 같이 환경 변수 정보를 설정합니다.

이름 로컬 원격
임시 출입 카드 서비스 SMV_BADGE_BASE_URL http://localhost:6001 https://smv-badge.mybluemix.net
사용자 인증 서비스 SMV_USERAUTH_BASE_URL http://localhost:6002 https://smv-userauth.mybluemix.net
사용자 정보 서비스 SMV_USERINFO_BASE_URL http://localhost:6003 https://smv-userinfo.mybluemix.net
방문 정보 서비스 SMV_VISIT_BASE_URL http://localhost:6004 https://smv-visit.mybluemix.net

좀 더 우아한 방법이 있긴 하지만 그 부분은 API 관리에 대한 부분으로 나중에 기회가 있을 때 별도로 이야기 하도록 하겠습니다. 우선은 아래와 같이 실행을 위한 shell script를 작성합니다.

smv-ui-app용은 다음과 같이 작성합니다.

export PORT=3000
export SMV_BADGE_BASE_URL=http://localhost:6001
export SMV_USERAUTH_BASE_URL=http://localhost:6002
export SMV_USERINFO_BASE_URL=http://localhost:6003
export SMV_VISIT_BASE_URL=http://localhost:6004
npm start

Windows batch 파일의 경우는 다음과 같습니다.

set PORT=3000
set SMV_BADGE_BASE_URL=http://localhost:6001
set SMV_USERAUTH_BASE_URL=http://localhost:6002
set SMV_USERINFO_BASE_URL=http://localhost:6003
set SMV_VISIT_BASE_URL=http://localhost:6004
npm start

서비스 앱용 스크립트는 Linux나 MacOS의 경우 다음과 같이 작성합니다.

export PORT=6001
export VCAP_SERVICES=$(node vcap-local.js)
npm start

Windows batch 파일의 경우는 다음과 같습니다.

set PORT=6001
FOR /F "delims=" %%i IN ('node vcap-local.js') DO set VCAP_SERVICES=%%i
npm start

앞서 smv-ui-app과 다른점은 VCAP_SERVICES를 설정하는 부분이 추가된 것입니다. smv-ui-app의 app.js에는 local 환경인 경우 vcap-local.json 파일을 읽어 Cloudant 서비스 접근 정보를 얻는 코드가 들어 있습니다. 그런데, smv-ui-app외 다른 서비스 애플리케이션은 단지 Node.js Runtime에서 생성한 것으로 VCAP_SERVICES 정보를 읽어 들이는 부분이 없습니다. 따라서, 이를 로딩하여 환경 변수 VCAP_SERVICES 로 등록하는 내용을 추가 하였습니다. 아래와 같이 vcap-local.js라는 파일도 추가로 작성해 줍니다.

var fs = require('fs'),
    jsonData = fs.readFileSync("vcap-local.json", "utf-8"),
    vcapServices = JSON.parse(jsonData);

console.log(JSON.stringify(vcapServices));

smv-ui-app에 사용된 추가된 환경 변수는 사용자 정의 환경 변수입니다. 앞서 VCAP_SERVICES를 설정했던 Bluemix 대시 보드에서 애플리케이션-런타임-환경 변수 항목에 들어가 추가 할 수 있습니다.

사용자 정의 환경 변수를 추가하거나 변경하면 애플리케이션이 재시작됩니다.

Source Code Editor 설치

사실 Source Code 편집기는 개발자 자신이 가진 개발 환경 중 가장 편하고 빠르게 사용할 수 있는 것을 선택하는 것이 좋습니다. 다만, 편집하고자 하는 내용을 보다 수월하게 하기 위해 다음과 같은 기능이 포함된 것을 선택하는 것이 좋습니다. 소스코드 수정할 때 메모장을 사용해도 상관 없지만, 생산성이 너무 떨어지니까요.

  1. 소스 코드 언어 자동 감지
  2. 문법 강조
  3. 코드 자동 완성
  4. 괄호 또는 태그 강조/이동
  5. 선언 & 함수 이동
  6. 검색
  7. 프로젝트 구성
  8. SCM 통합
  9. 외부 플러그인 지원

Node.js Runtime용 CF App은 기본 런타임 언어로 JavaScript를 사용하고, Manifest Project는 YAML을 형식으로 되어 있으므로 이를 지원하는 편집기 (IDE)를 선택하는 것이 좋습니다. 또한, 여러 사람들과 작업을 하게 되므로 되도록 Platform 독립적인 것이 좋습니다.

다음은 주로 사용하는 IDE이니 참고 하시기 바랍니다.

이름 플랫폼 라이센스 홈페이지
Sublime Text Windows, OSX, Ubuntu Proprietary software https://www.sublimetext.com/
ATOM Windows, OSX, Redhat, Ubuntu MIT https://atom.io/
Microsoft Visual Studio Code Windows, OSX, Linux MIT https://code.visualstudio.com
Eclipse IDE Windows, OSX, Linux EPL https://eclipse.org/ide/

지금까지 로컬 개발 환경을 구성하였습니다. 다음 글에서는 본격적으로 프로토타입을 만들어 보도록 하겠습니다.


  1. 클라우드 환경 이해
  2. 애플리케이션 구상 및 요건 정의
  3. 요건에 대한 Usecase 및 Wireframe 작성
  4. 마이크로 서비스 아키텍쳐 설계
  5. 애플리케이션 서버 환경 준비
  6. 애플리케이션 로컬 개발 환경 준비
  7. 애플리케이션 프로토타입 작성 Part1
  8. 애플리케이션 프로토타입 작성 Part2
  9. 애플리케이션 프로토타입 작성 Part3
  10. 애플리케이션 DevOps 환경 구성

참고