상세 컨텐츠

본문 제목

Bluemix 첫 시작, Hello, World 웹 페이지 올리기

CLOUD

by 에스프리터 2017. 1. 13. 15:56

본문


이번 건 가장 쉬운 것입니다. Bluemix에 가입 혹은 로그인해서 Hello, World가 들어있는 간단한 문구의 html 파일을 deploy 하는 것입니다. 어떻게 보면 5분만에 채팅방 만들기편(바로가기)보다 더 쉬울 것 같습니다. Bluemix의 기본 Process가 어떻게 이뤄지는가를 보면 될 것 같습니다. 원문은 바로가기에서 확인이 가능합니다.


STEP1. 필요한 것

1. Bluemix 계정

2. 약간의 HTML 지식

3. 메모장 혹은 그와 비슷한 편집 프로그램

정말 적죠??


STEP2. 시작하기

우선 Bluemix에 접속한 다음 DevOps 서비스(바로가기)로 들어가면 아래와 같이 프로젝트 창이 뜹니다. 기존에 제가 했던 것들을 볼 수가 있는데요. 저희는 새로 프로젝트를 만들 것이니까 가운데 CREATE PROJECT를 눌러줍니다.



그러면 초기 옵션창이 뜨게 되는데 기존 본인의 GitHub에 저장된 프로젝트를 끌고 올건지 아니면 Git이나 JazzSCM 등 다른 저장소와 연계된 새로운 프로젝트를 만들 것인지를 체크합니다. 저희는 새로 만드는 거니까 임의로 [Hello]라는 이름과 함께 새로운 프로젝트를 만드는 것으로 체크하고 진행하겠습니다. 



그러면 GitHub나 GitRepo, JazzSCM 중 하나를 고를 수 있게 되어 있는데 대중적으로 많이 쓰는건 GitHub니까 GitHub를 택하도록 하겠습니다. 



세부적인 세팅을 진행하고 CREATE를 누르면 프로젝트가 생성됩니다. 



STEP2. index.html 만들고 Hello World 넣기

프로젝트가 생성되면 아래 화면과 같은 페이지를 볼 수가 있습니다. 지금은 텅텅 비어있지만 제대로 된 프로젝트라면 수없이 많은 코드들과 파일들로 꽉꽉 채워져 있겠죠. 지금부터 간단한 코드를 만들어 보겠습니다. EDIT CODE를 누릅니다.



그러면 이렇게 WEB IDE가 로드가 되는데 좌측 메뉴에서 File > New > File을 눌러서 index.html 이라는 이름의 파일을 생성해줍니다. 그냥 확장자까지 끝까지 다 쳐서 index.html이라고 하면 됩니다. 그러면 좌측 파일 트리에 index.html이라는 파일이 생성되고 동시에 가운데 화면에 에디터 화면이 생성이 됩니다.


그러면 아래와 같은 코드를 입력하여 줍니다. 사실 (시험해보진 않았는데) HTML 문법을 지키지 않고 아무 글씨가 적어도 아마 브라우저 상에 로딩은 될 겁니다.


<html>

     <body>

          Hello, Bluemix World! 안녕하세요, 블루믹스 세계입니다!

     </body>

</html>


이렇게 입력이 되면 index.html 입력 준비는 완료되었습니다.



STEP3. manifest.yml 넣기

manifest.yml 파일이란 Bluemix에 프로젝트를 올릴 때 이 프로젝트 이름은 어떻게 할지, 용량은 얼마나 필요로 할지 등을 정의하는 파일입니다. 그래서 모든 프로젝트에는 반드시 manifest.yml 파일이 딸려오게 됩니다. 이번 프로젝트에서는 아래와 같이 파일을 생성하고 내용을 넣어보겠습니다.


---
applications:
- buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
  host: helloworld-html-${random-word}
  name: helloworld-html
  memory: 64M
  stack: cflinuxfs2


구성 요소들을 설명하겠습니다.

1. buildpack : Bluemix 상에서 APP을 돌릴 때 필요한 Framework나 Runtime을 돌릴 때 필요한 파일들입니다. 프로젝트 자체적으로 파일들을 다 가지고 있다면 필요 없을수도 있지만 보통 기존의 GitHub에 저장된 것을 가져옵니다.

2. host와 name : Host와 Name은 App이름 및 실제 웹 주소를 지정하는 항목입니다. 본인이 원하는 이름을 지정하면 됩니다.

3. memory : Memory는 이 파일이 Bluemix에서 돌아갈 때 용량을 얼마나 먹을지를 정하는 것입니다. 여기서는 64MB로 지정되었습니다.

4. stack : Bluemix의 Cloud Foundry 에서 쓰는 파일 시스템을 지정해주는 것입니다.


STEP4. Deploy 하기

이제 준비가 끝났으니 Deploy를 하겠습니다. 화면 상단 가운데쯤에 보면 아래 이미지와 같이 Hello가 있는 프로젝트 리스트가 있고 우측에 재생 버튼 및 몇몇 버튼이 있는 공간이 있습니다. 여기서 재생을 누르면 Bluemix 공간으로 deploy가 이뤄지게 됩니다.


[ 재생 버튼을 눌러주면... ]


[ 이렇게 Deploy가 시작됩니다. ]


[ 초록불이 들어오며 실제 사용 가능한 상태임을 알립니다. ]


그러면 재생 버튼 오른쪽에 비활성화 되어 있던 몇몇 버튼들이 활성화되는 것을 볼 수가 있는데 재생 버튼 우측부터, APP 정지 버튼, 새창에서 APP 열기, Log 보기, 마지막으로 Bluemix 관리 페이지 상의 Overview 보기로 구성이 되어 있습니다. 그 중 새창에서 APP 열기 버튼을 누르면 아래 화면 같이 Hello World가 출력되는 것을 볼 수가 있습니다.



이렇게 Bluemix Devops에서 시작하여 index.html을 업로드하고 기본적인 웹 사이트를 구축하는 것을 살펴보았습니다. 예제는 여기까지지만 여기서 더 나아가 웹 사이트를 꾸미거나 혹은 APP 개발을 위한 전초기지처럼 사용할 수도 있을 것입니다. 읽어주셔서 감사합니다.

관련글 더보기

댓글 영역