Bluemix DevOps 활용 1편 : Devops에 앱을 업로드하기

2017.02.20 18:43IT 정보/IBM Bluemix



이번 시간에는 IBM Bluemix Devops를 활용하여 App을 올리고 관리하는 방법에 대해서 알아보는 내용입니다. 이번에 따라해볼 원문은 IBM 테크니컬 라이브러리(바로가기)에서 확인이 가능합니다. 원문의 컨텐츠 그대로 번역하면서, 동시에 제가 수행하면서 진행하는 방식이 될 것 같네요. 번역에 문제가 있거나 실수가 있다면 말씀주시면 수정하겠습니다. 일단 크게 아래 4가지 방식으로 진행이 될 예정입니다.


< 컨텐츠 순서 >

1. Bluemix Devops를 활용하여 앱을 업로드하기 (바로가기)

2. App을 deploy하고 Bluemix 서비스와 연계하기 (바로가기)

3. 새로운 기능을 추가할때 Devops를 활용하여 관리 및 추적하기 (바로가기)


오늘은 1번을 하게 될 텐데요.. 필요한 준비 물품은 아래와 같습니다.

- 파이어폭스15 버전이나 그 이상 버전

- 크롬21 버전이나 그 이상 버전

- 인터넷 익스플로러 10 버전이나 그 이상 버전

- 사파리7 버전이나 그 이상 버전


DevOps의 개념에 대해서는 앞서 간단하게 써놓은 글이 있습니다. 바로가기에서 확인이 가능합니다. 요컨대 개발(develop)과 운영(operation) 사이를 잘 조율해서 지속적으로 앱을 개선하는 운영 방식을 DevOps라고 합니다.


우선 우리는 로렌의 사랑스러운 풍경(원문:Lauren's Lovely Landscapes) 프로젝트를 블루믹스에 올리는 것을 해볼 것입니다. 로렌의 사랑스러운 풍경은 원문 상의 예시로 3장의 사진을 DP하고 판매하는 것을 목표로 하고 있습니다.



STEP1. 프로젝트 FORK하기

우선 바로가기를 통해 프로젝트 페이지에 접속합니다. 그러면 아래와 같이 사전에 작업된 프로젝트 파일들이 보이는데 이것을 fork 할 예정입니다. fork란 포크 나이프의 그 포크인데 말 그대로 프로젝트를 집어온다 해서 fork라는 단어가 지정되었습니다.



우측 상대에 EDIT 코드가 보일건데 그걸 클릭하셔서 내부 코드를 편집할 수 있고 우리는 일단 프로젝트를 그대로 가져올 예정이기 때문에 FORK PROJECT를 클릭합니다. 그리고 내 작업 공간에 활용할 프로젝트 명칭과 작업 영역 등을 설정을 해주고 CREATE를 누르면 프로젝트가 복사가 되게 됩니다. 그럼 준비가 거의다 되었습니다.



STEP2. 프로젝트 확인하기

생성된 프로젝트로 들어가서 파일이 정상적으로 FORK 되었는지 확인합니다. 이상이 있으면 바로 다음 STEP으로 넘어갑니다.



STEP3. 프로젝트 Deploy 하기

프로젝트 메뉴의 우측 상단의 EDIT CODE를 클릭하면 IDE로 접속이 됩니다. 이후 좌측 상단의 재생 버튼을 눌러줍니다. 이게 Bluemix 상에서 앱을 deploy하고 가동시키는 것입니다.



재생 버튼 옆에 보시면 네모 버튼과 사각형에 화살표가 삐쳐나온 아이콘도 있는데 각각 앱 실행 / 앱 중단 / 외부 창에서 앱 실행 확인을 의미하는 것입니다. 어쨌든 재생 버튼을 누르면 몇분간 Bluemix 상에 deploy 작업이 계속됩니다.



STEP4. 앱이 돌아가는지 확인하기

프로젝트 메뉴의 우측 상단의 EDIT CODE를 클릭하면 IDE로 접속이 됩니다. 이후 좌측 상단의 재생 버튼을 눌러줍니다. 이게 Bluemix 상에서 앱을 확인할 수 있습니다. 제 것도 예제와 똑같이 잘 나오네요.


STEP5. 코드 수정하기

이제 본격적으로 페이지를 수정해보겠습니다. 앞서의 Devops 서비스 창으로 넘어가서 EDIT CODE를 누른 다음 뜬 창에서 Views 폴더 안에 있는 antarctical.tpl 파일을 수정해보겠습니다. 파일을 클릭하면 이렇게 코드 수정창이 뜹니다. 여기서 <div id="price">100.00</div> 항목을 찾습니다. 이게 가격 항목입니다. 여기서 숫자 100.00을 본인이 원하는 값으로 바꿔줍니다. 



저는 100,000 Won으로 바꿔보겠습니다. 좋은 사진인데 10만원은 받아야겠지요 : )




코드를 수정하고 좌측 상단에서 파일-저장을 눌러서 변경된 코드를 저장해준 후 다시 재생 버튼을 눌러서 새로이 바뀐 코드를 Bluemix 상에 Deploy 해줍니다. 잠시 앱이 중단된 후 업데이트를 진행하고 다시 스타트가 될 것입니다.



앱 re-deploy 이후 사이트에 들어가서 확인하면 가격이 이렇게 변동되어 있는 것을 확인할 수 있습니다. 이렇게 DevOps를 통해서 간단한 App을 deploy하고 변경하는 것을 연습할 수 있습니다.


이번 시간에는 단순히 DevOps를 활용해서 App을 deploy하고 코드를 수정하는 것까지 진행하였습니다. 다음 시간에는 Bluemix 서비스들을 개설한 후 App과 연계하여 deploy 하기를 연습하여 보겠습니다. 감사합니다.