[Ruby on Rails 강좌] 1-1. 한 페이지짜리 웹, 무에서 배포까지 - 기본세팅

2016/01/29 - [입문자용 프로그래밍/Ruby On Rails] - [Ruby on Rails] 0. 초보자도 쉽게 웹사이트 만들기 - 기초 튜토리얼형 강좌

본 게시물은 영문의 레일즈튜토리얼(http://railstutorial.org) 내용을 바탕으로 하며, 해당 내용을 그대로 번역한 포스팅이 아니라 입문자의 이해를 위해 생소한 개념에 대한 설명을 일부 추가하고 복잡한 내용은 간추리거나 제거한 포스팅임을 알려드립니다.

인트로

웹 사이트를 구축하기 위해 우리는 개발플랫폼과 그 웹의 버전관리 위한 Git저장소, 배포를 위한 호스팅서버를 이용할 것입니다. 이 첫 문장을 보시자 마자 당황하시는 분들이 있으실 겁니다. 어렵게 생각하지 마시고 이렇게 접근하시면 됩니다.

우리는 웹사이트를 만들기 위해 프로그래밍이 수행될 컴퓨터(개발플랫폼)와 실수해도 다시돌아가게 할 타임머신기능(Git저장소), 그리고 내가 만든 웹사이트를 다른 사람들도 들어오도록 하기 위한 서버(호스팅서버)를 이용할 것입니다.

개발플랫폼은 Cloud9 (http://cloud9.io) 라는 곳을 사용할 것이며, 개인 컴퓨터에서 개발 시 설치해야할 것이 많고 환경 구축에 꽤 오랜 시간이 소요되는데 그 점을 덜어주고 최적의 개발플랫폼 클라우드를 제공해 줍니다.

Git저장소는 Bitbucket (http://bitbucket.org) 이라는 곳을 사용할 것이고, 대다수 개발자들이 사용하는 Github란 곳과 유사한 곳이라고 생각하시면 됩니다. 개발플랫폼에서 개발한 것을 수정하는 모든 과정을 저장해 주는 버전관리라는 기능이 있는데 그에 대한 것을 저장해주는 곳입니다. Github란 곳과의 차이점은 Github는 Public (공개, private 유료)하도록밖에 저장안되는 반면, Bitbucket는 무료로 Private룰 사용하실 수 있습니다.<br />

호스팅서버는 Heroku (http://heroku.com) 라는 곳을 사용하며, 배포(Deploy)라는 기능을 위함입니다. 개발플랫폼에서 웹사이트를 개발하면 자신의 컴퓨터에서만 접속할 수 있는 웹사이트가 구축됩니다. 이 사이트를 호스팅해주는 서버가 필요한데 그게 Heroku이며 특정 URL이 생겨 누구나 들어올 수 있는 사이트로 배포가 되게 됩니다.

그렇다면 이번 포스팅에선 3개의 웹사이트에 가입 후, 실제로 개발이 일어날 개발환경 세팅까지 해보겠습니다.

Bitbucket 가입

Bitbucket (http://bitbucket.org) 에 접속합니다.

위와 같은 화면이 보입니다. 가운데 연두색 버튼의 Get started for free 버튼이나 오른쪽 상단의 Get started 버튼을 누릅니다. 가입화면이 나오고 기본적인 사항들을 입력해주면 쉽게 가입이 이루어 집니다.

가입이 완료된 화면입니다. 여기서 추가로 수행할 점은 없고 Cloud9으로 넘어가겠습니다.

Cloud9 가입

Cloud9 (http://c9.io) 에 접속합니다. 

오른쪽 상단의 Sign in 버튼을 누르시면 로그인 화면이 나오고, Sign up이란 버튼이 나타납니다. 클릭해줍니다.

위와 같은 가입화면에 자세히 보시면 GitHub 와 Bitbucket 중 1개를 연동 할 수 있게 되있습니다. 방금 가입했던 Bitbucket를 눌러줍니다. 

방금 가입해서 그런지 로그인이 되있었고 승인하겠냐는 문구가 뜨는 군요. Grant access버튼을 눌러줍니다.

Cloud9과 연동이 이루어졌고 승인을 위한 이메일을 등록해야됩니다. 원하시는 이메일을 등로 후, Proceed 버튼을 클릭하면 메일이 발송됩니다. 그리고 설정한 이메일로 접속하여 메일을 확인해주고 승인해줍니다.

위와 같은 메일이 날라와있습니다. 가볍게 Cinfirm this email address를 클릭해 줍니다.

가입이 완료되었습니다..!! Workspaces라는 공간이 보이고 그 중 Demo Project라고 있습니다. 우리는 이 프로젝트 말고, Heroku 가입 후 새로운 프로젝트를 생성하여 진행하도록 하겠습니다. 이제 Heroku를 가입하겠습니다.

Heroku 가입

Heroku (http://heroku.com) 에 접속하면 다음과 같은 화면이 뜹니다.

가운데의 SIGN UP FOR FREE 버튼이나 오른쪽 상단의 Sign up 버튼을 눌러주시면 됩니다.

위와 같은 가입화면이 뜹니다. 내용을 채워주신 후, Pick your primary development language 항목을 Ruby로 선택해 준 후, Create Free Account 버튼을 클릭합니다.

 메일에 접속하여 계정을 승인하라고 합니다. 다시 설정한 메일에 접속, 받은 메일을 확인하겠습니다.

이번에는 승인 버튼이 아닌 링크가 되어있습니다. 해당 링크를 클릭하면 다음과 같이 패스워드 설정 화면이 나옵니다.

원하시는 패스워드를 설정한 후, 가입을 완료하시면 됩니다.

이제 모든 가입이 완료되었습니다..!! 다시 개발플랫폼인 Cloud9으로 접속하겠습니다.

개발플랫폼

Cloud9으로 돌아옵니다. 다음과 같은 화면에서 가운데 회색 칸의 + 라고 되있는부분(Create a new workspace)를 눌러 새로운 개발 환경을 만들겠습니다.

새로 만들 Workspace의 이름은 my_project로 설정하겠습니다. 중요하진 않으니 아무거나 적으시면 됩니다. 하단엔 Private를 선택하셔야 합니다.

또한 Template은 Ruby on Rails tutorial을 선택하셔야 합니다. Ruby on Rails라고 항목이 있는데 와인색의 빨간 학사모 로고가 박힌 아이콘을 클릭하셔야 합니다. 그 후, Create workspace를 눌러주시면 생성됩니다.

이런 화면이 뜨고 잠시 기다리시면 다음과 같은 화면에 접속됩니다.

이상한 검은 화면이 뜨는 것을 확인 할 수 있습니다. 여기서 겁먹으시지 말고 익숙하지 않을뿐 알고보면 쉬운 인터페이스 입니다. ^^ 간단히 파헤쳐 보겠습니다.

FileSystem Navigator - 파일을 탐색할 수 있는 공간입니다. 컴퓨터 상의 탐색기 같은 공간이지요. 파일을 더블클릭하면 Text Editor에서 열립니다.
Text Editor - 실질적으로 프로그래밍 언어를 작성하는 곳입니다. 오픈한 파일을 수정하는 곳이지요.   
Command-line Terminal - Text Editor에선 프로그래밍 언어인 Ruby가 작성되는데 이 공간에선 파일들간의 조작에 관한 명령이 이루어집니다. Ruby와 다른 명령어이므로 핵심적인 몇가지는 숙지해 나갈 것입니다.

세가지 개념에 대해서 깊게 이해하실 필요는 없습니다. 따라오시다 보면 자연스럽게 여긴 이런 공간이구나 하고 직감적으로 이해하실 수 있습니다. 다음 포스팅에선 본격적으로 명령어를 작성해 나갈것입니다.