웹 애플리케이션 만들기 실습

아마존 웹서비스

소개

아마존 웹서비스란 온라인 서점으로 유명한 amazon.com에서 만든 웹서비스 인프라다. 이 인프라를 이용하면 클릭 한 번으로 몇 초 만에 자신의 서버를 생성할 수 있고, 사용하지 않을 때는 서버를 죽여서 비용을 절감할 수 있다. 자세한 내용은 생활코딩의 아마존 소개를 참고하자.

참고. 본 과정은 해외에서 사용할 수 있는 신용카드(VISA, MASTER 등)가 필요하다. 만약 신용카드가 없다면 본 과정을 따라할 수 없다. 이 수업을 완주하지 못했다고 웹서비스를 이용할 수 없는 것은 아니다. 웹호스팅을 이용하거나, 심지어 자신의 컴퓨터를 이용해서 웹서비스를 할 수도 있다. 아마존 웹서비스는 실서비스를 운용할 수 있는 한 방법에 불과하다.

비용

아마존 웹서비스는 무료가 아니다. 하지만 아마존에서는 일 년간 이 서비스를 사용해 볼 수 있는 프리티어(free usage tier)를 제공한다. AWS 프리티어를 방문해보면 아마존의 무료 정책을 볼 수 있다. 여기서 우리가 주목할 서비스는 Amazon EC2인데 매월 750시간을 무료로 1년간 사용할 기회를 준다. 750시간을 24로 나누면 31.5일이기 때문에 중지시키지 않고 사용해도 과금되지 않는다. 한가지 주의할 것은 12개월이 지난 후에 계속 과금이 이루어질 수 있다는 점이다. 그렇기 때문에 실습이 끝나면 서비스를 꼭 종료시키자. 설령 과금이 된다고 해도 프리티어가 적용되는 상품은 저렴하기 때문에 막대한 트래픽을 사용하지 않는다면 큰 비용이 지출되지는 않을 것이다.

서비스 소개

아마존의 주요 서비스들을 아래와 같이 정리해봤다. 이 중에서 우리가 사용할 서비스는 EC2다.

EC2

EC2는 Amazon Elastic Compute Cloud의 약자다. 쉽게 생각하자. EC2를 신청하면 서버로 사용할 컴퓨터가 아마존의 인프라 위에 만들어진다. SSH라는 수단을 이용해서 서버를 제어할 수 있다.

S3

S3는 Amazon Simple Storage Service의 약자다. 파일을 저장할 때 사용하는 서비스다. 파일은 용량이 큰 데이터이기 때문에 파일의 용량이 늘어나면 디스크를 늘려야 한다. 그보다 파일이 많아지면 여러 컴퓨터로 파일을 분산 저장해야 하는데, 이 서비스를 이용하면 그냥 저장만 하면 된다.

RDS

RDS는 Amazon Relational Database Service의 약자다. 이 서비스는 관계형 데이터베이스인 MySQL이나 ORACLE과 같은 데이터베이스를 제공하는 서비스다. 이 서비스를 이용하면 데이터베이스의 백업과 업그레이드와 같이 복잡하고 위험한 작업을 아마존 웹서비스에서 알아서 다해준다.

실습

지금부터 우리가 만든 opentutorials 초기 버전을 아마존 웹서비스를 통해서 실제로 서비스해볼 것이다.

회원가입

1. 회원가입 페이지에 방문한다.

2. 이메일을 입력하고 I am a new user. 항목을 선택한다.

2. 이름과 이메일 그리고 로그인 비밀번호를 입력한다.

3. 개인정보를 영어로 입력한다.

  • zip 코드의 경우 다음 URL을 참고한다. http://invnroad.tistory.com/72
  • Security Check의 Image를 보고 그 문자를 Type the characters in the above image에 입력한다.

4. 결재방법 선택

계정을 만들기 위해서 $2가 결재되는데, 이것은 신원확인을 위한 절차일 뿐 실제로는 결제되지 않는다. Cardholder's Name은 카드 뒷면에 서명부를 보면 숫자가 적혀있다. 예를 들어, 카드 뒷면 서명부에  '2404 941'라고 적혀 있으면 이 중에 뒷 3자리인 941을 입력하면 된다.

5. 전화번호 인증

Country Code를 Korea, Republic of로 변경한다. 전화번호를 기입한다. 예를 들어 휴대전화 번호가 01045888806 이라면 1045888805 를 입력한다. Call Me Now를 누르면 전화가 온다. '

전화가 걸려온다. 말이 끝나면 Your PIN에 기록된 번호를 입력한다. 화면에서는 4499를 입력한다.

6. 회원가입 완료

위와 같은 화면이 나타나면 회원가입이 완료된 것이다.

EC2 생성

웹서비스를 시작하려면 서버를 생성해야 한다. 이때 사용할 수 있는 제품이 EC2다. EC2를 신청하면 아마존의 인프라 위에 자신의 서버 컴퓨터가 즉시 만들어진다.  여기에 아파치, MySQL, PHP를 설치하면 인터넷을 통해서 바로 웹서비스를 시작할 수 있다. 우선 EC2 홈페이지를 방문해보자. EC2라는 서비스에 대한 자세한 설명을 볼 수 있다. 하지만 서비스를 체험하기 전까지는 이 내용이 추상적으로 느껴질 것이다. 그러니 우선 아래의 절차를 모두 수행한 후에 이 곳으로 돌아와서 내용을 찬찬히 읽어보자. 훨씬 더 많은 것을 이해할 수 있을 것이다.

콘솔에 접근

AWS Management Console에 접속한다. 이것은 웹 상에서 아마존의 모든 서비스를 원격으로 제어할 수 있는 편리한 수단을 제공한다.

콘솔에 접근하면 아래와 같은 화면을 볼 수 있다. 이 중에 EC2를 선택한다.

콘솔로 진입하면 제일 먼저 Region을 지정해야 한다. Region은 아마존의 인프라가 있는 지역을 의미하는데 사용자와 인프라가 지리적으로 가까울수록 빠르게 서비스를 할 수 있기 때문에 가까운 지역을 선택해야 한다. 지역에 따라서 가격 정책도 조금씩 다르다는 점도 고려해보자. 아래는 Region을 선택하는 화면이다.

참고 Region에는 한국이 없다. Region은 아마존 웹서비스의 장비들이 위치하는 지역을 의미하는데,  만들고자 하는 서비스의 사용자와 Region이 가까울수록 빠른 서비스를 제공할 수 있다. 현재(2012년 9월 5일) 한국에는 Region이 없고, 필자는 주로 tokyo를 사용한다. Region의 상황은 계속 바뀌기 때문에 상황에 맞게 설정해줘야 한다.

인스턴스를 생성한다. 인스턴스란 한 대의 서버 컴퓨터를 의미한다. Launch Instance 버튼을 누르면 인스턴스 생성을 위한 절차가 시작된다.

Create a New Instance에서 Quick Launch Wizard를 선택한다. 그럼 아래와 같은 화면이 나타난다.

이 중에서 Name Your Instance 항목에는 서버의 이름을 지정한다. 필자는 opentutorials 를 사용했다.

Choose a Key Pair에서는 Create New를 선택하고 이름은 임의로 입력한다. 필자는 opentutorials_key를 사용할 것이다. 그리고 오른쪽의 Download 버튼을 누르면 파일을 다운로드 받게된다. 이 파일은 지금 만들고 있는 인스턴스에 접속할 때 사용하는 비밀번호와 같은 역할을 하는 것이기 때문에 분실/유출에 주의하자. 이것을 사용하는 방법은 곧 알게 된다.

Choose a Launch Configuration 에서는 Ubuntu Server 중 버전이 높은 것을 선택한다. (운영체제에 따라서 로그인 할 때 사용하는 아이디가 다르기 때문에 운영체제 선택에 주의한다.)

Continue 버튼을 누른다. 아래와 같은 화면이 나타나면 정상적으로 인스턴스를 생성한 것이다. Lanuch 버튼을 누르자.

콘솔로 돌아가서 사이드 바의 항목 중 Instances를 선택한다. 생성한 인스턴스들의 리스트를 관리할 수 있는 화면으로 이동된다.

인스턴스의 리스트가 보인다. 이 화면을 통해서 각 인스턴스의 상태를 파악할 수 있고, 인스턴스를 제어하고 추가할 수 있다.

서버접속 (SSH)

인스턴스에 접속해보자. SSH라는 방식을 이용할 것인데, SSH는 네트웍을 통해서 다른 컴퓨터를 제어하는 방법이다. SSH를 이용하기 위해서는 key pair에서 다운로드 받은 비공개 키를 이용해야 한다. 그리고 서버에 접속을 하려면 서버의 URL을 알아야 한다. AWS EC2 인스턴스 리스트에서 접속하려는 인스턴스 위에 마우스를 올려놓고 오른쪽 클릭을 하면 아래와 같은 메뉴가 나타나는데 이 중에서 Connect를 선택한다.

아래와 같은 대화상자가 나타나면 Connect from your browser using the Java SSH Client 를 선택한다. 그리고 User name 에는 root 대신에 ubuntu를 입력하고 다운받은 SSH키의 위치를 적어준다. 자신의 운영체제에 맞는 경로를 적어주면 된다. Save key location은 키가 저장되는 위치를 기억하는 기능이다. Private key는 시스템에 로그인하는 비밀번호와 같은 역할을 하기 때문에 절대로 유출돼서는 안된다. (필자처럼 다운로드 폴더에 저장하면 안된다. 반면교사로 삼자!) 모든 정보가 입력됐으면 Launch SSH Client 버튼을 누른다.

참고 접속 방법 중 Connect with a standalone SSH CLIENT는 각자의 SSH 클라이언트를 이용해서 접속할 수 있는 메뉴다. 윈도우 사용자라면 puttyxshell을 이용하고, 맥 사용자라면 terminal을 사용하면 된다.

이 방법으로 접속하기 위해서는 자바가 컴퓨터에 깔렸어야 한다. 만약 자바가 없다면 안내에 따라서 자바를 설치한 후에 다시 시작하자.

위와 같은 화면이 뜨면 무사히 접속한 것이다. 한가지 주의할 점이 있다. 데이터를 입력할 때 한글이 깨질 수 있는데 아래와 같은 방법으로 이 문제를 해결할 수 있다.

터미널의 메뉴 중 Settings > Terminal을 선택한다.

Encoding의 항목을 utf-8으로 변경한다.

여기까지 잘 따라왔다면 운영체제 시간에 했던 작업까지 도달한 셈이다. 이제 서버구축 시간에 했던 작업을 그대로 수행하겠다. 자세한 내용은 서버구축편을 참고하고, 이번 수업에서는 필요한 명령을 단순 열거하겠다.

참고 복사는 ctrl+ins(insert), 붙여넣기는 shift + ins(insert) 키를 조합해서 사용한다.
  1. sudo apt-get update;
  2. sudo apt-get install apache2;
  3. sudo apt-get install libapache2-mod-auth-mysql;
  4. sudo apt-get install mysql-server mysql-client;
    root의 비밀번호를 입력한다. 실습을 편하게 하려면 비밀번호로 111111을 입력하자.
    그렇다!! 이것은 몹시 고약한 방법이다. 실제로는 이런 비밀번호를 사용하면 안된다.
  5. sudo apt-get install php5-common php5 libapache2-mod-php5;
  6. sudo apt-get install php5-mysql;
  7. sudo /etc/init.d/apache2 restart;
  8. sudo /etc/init.d/mysql restart;

이렇게 해서 웹서비스를 운영하기 위한 소프트웨어들을 설치했다. 설치가 잘 됐는지 확인해보자. 아마존 웹서비스는 방화벽을 기본적으로 제공한다. 방화벽이란 아무나 서버로 접속할 수 없도록 하는 보안수단인데, 아마존은 기본적으로 웹접근을 허용하지 않기 때문에 누구나 서비스에 접근하도록 하려면 아래와 같은 단계를 수행해야 한다. 이 단계는 지금 이해하지 못해도 된다. 어렵게 느껴져도 걱정하지 말자. 그냥 따라하면 된다.

인스턴스 리스트에서 Security Groups의 내용을 확인한다. 아래 그림은 필자의 화면을 캡처한 것인데, 그림에 따르면 필자의 인스턴스 opentutorials의 Security Groups는 붉은색으로 강조 표시한 'quicklaunch-1'다. 각자 자신의 Security Groups를 확인하자.

그럼 opentutorials 인스턴스에 적용된 보안설정을 변경하기 위해서 quicklaunch-1의 보안설정을 변경해보자. 콘솔 사이드바의 항목 중 NETWORK & SECURITY 하위에 Security Groups 항목을 선택하자.

Security Groups 항목 중에 quicklaunch-1을 선택하면 하단에 Security Group selected 내용이 달라질 것이다. 아래의 이미지를 참조해서 HTTP를 Inbound 규칙으로 추가하자. 웹브라우저가 특정 URL로 접속을 하면 80번 포트로 접근을 하게 되는데, Inbound에 80번 포트가 등록되어 있어야 해당 인스턴스로 불특정다수가 접속 할 수 있다. 쉽게 말해서 누구나 웹을 통해서 서버에 접속할 수 있게 하기 위한 설정이다.

웹서버도 설치했고, 방화벽도 열었다. 접속이 가능한지 확인해보자. 이제 웹을 통해서 서버에 접속할 수 있는지 확인해보자. 웹을 통해서 접속하려면 URL을 알아야 한다. 인스턴스 항목에서 오른쪽 클릭을 한 후에 connect 항목을 선택하면 아래와 같은 화면이 나타날 것이다. 이 중에서 Public DNS가 웹을 통해서 접근할 수 있는 URL이다. (인스턴스의 connect 항목을 선택하는 부분 참고)

위에서 알아낸 Public DNS를 브라우저의 주소창에 복사&붙여넣기하면 아래와 같은 화면이 뜰 것이다.

데이터베이스 셋팅

소스코드를 실서버에 적용해서 서비스를 구동하기에 앞서서 데이터가 저장되는 공간인 데이터베이스를 셋팅하자. 이 절차는 데이터베이스편에서 이미 상세하게 다뤘기 때문에 간단하게 언급하겠다.

1. 데이터베이스 서버에 접속한다.

mysql -uroot -p

데이터베이스 설치과정에서 입력한 root 유저의 비밀번호를 입력한다.

2. 데이터베이스를 생성한다.

CREATE DATABASE opentutorials CHARACTER SET utf8 COLLATE utf8_general_ci;

3. 데이터베이스를 선택한다.

use opentutorials;

4. 테이블을 생성한다 .

CREATE TABLE `topic` (
    `id`  int(11) NOT NULL AUTO_INCREMENT,
    `title`  varchar(255) NOT NULL ,
    `description`  text NULL ,
    `created`  datetime NOT NULL ,
    PRIMARY KEY (`id`)
);

5. 아래의 SQL을 복사&붙여넣기해서 데이터를 입력한다.  

INSERT INTO topic (title, description, created) VALUES('JavaScript란', '<h2>자바스크립트는</h2><ul><li>브라우저에서 실행되는 언어</li><li> 가장 많이 사용되는 언어</li><li>주로 html을 프로그래밍적으로 조작하 기 위해서 사용됨</li></ul>', NOW());
 
INSERT INTO topic (title, description, created) VALUES('변수와 상수', '<p>변수란</p> <ul> <li> 변하는 값</li> <li> x = 10 일 때 왼쪽항인 x는 오른쪽 항인 10에 따라 다른 값이 지정된다.</li> </ul> <p> 상수란</p> <ul> <li> 변하지 않는 값</li> <li> x = 10 일 때 오른쪽항인 10이 상수가 된다.</li> </ul>', NOW());
 
INSERT INTO topic (title, description, created) VALUES('연산자', '<p> 연산에 사용되는 기호들. (y = 5 일 때)</p> <table border="1" cellpadding="0" cellspacing="0" class="reference" sytle="table-collapse:collapse" width="100%"> <tbody> <tr> <th align="left" width="15%"> Operator</th> <th align="left" width="40%"> Description</th> <th align="left" width="25%"> Example</th> <th align="left" width="20%"> Result</th> </tr> <tr> <td valign="top"> +</td> <td valign="top"> 더하기</td> <td valign="top"> x=y+2</td> <td valign="top"> x=7</td> </tr> <tr> <td valign="top"> -</td> <td valign="top"> 빼기</td> <td valign="top"> x=y-2</td> <td valign="top"> x=3</td> </tr> <tr> <td valign="top"> *</td> <td valign="top"> 곱하기</td> <td valign="top"> x=y*2</td> <td valign="top"> x=10</td> </tr> <tr> <td valign="top"> /</td> <td valign="top"> 나누기</td> <td valign="top"> x=y/2</td> <td valign="top"> x=2.5</td> </tr> <tr> <td valign="top"> %</td> <td valign="top"> 나머지</td> <td valign="top"> x=y%2</td> <td valign="top"> x=1</td> </tr> <tr> <td valign="top"> ++</td> <td valign="top"> 증가</td> <td valign="top"> x=++y</td> <td valign="top"> x=6</td> </tr> <tr> <td valign="top"> --</td> <td valign="top"> 감소</td> <td valign="top"> x=--y</td> <td valign="top"> x=4</td> </tr> </tbody> </table> ', NOW());
 
INSERT INTO topic (title, description, created) VALUES('함수', '<h2> 함수는(function, method)</h2> <ul> <li> 일련의 로직을 다시 사용할 수 있도록 묶어둠(모듈화) - 개발자의 미덕은 게으름</li> <li> 입력(인자,argument)와 출력(반환,return)으로 이루어짐&nbsp;</li> <li> 사용자 정의 함수와 내장함수가 있다.</li> </ul>', NOW());

실서버 적용 (deploy)

개발환경의 작업물을 실서버에 적용하는 행위를 디플로이(deploy)라고 부른다. 지금부터 디플로이하는 법을 알아볼 것인데, Git을 이용해서 버전관리를 하지 않았다면 아래와 같이 하면 된다. 버전관리를 한 경우는 뒤에서 설명한다.

버전관리를 하지 않은 경우 디플로이

버전관리를 하지 않은 경우는 설명할 것이 많기 때문에 그냥 필자가 작업한 내용을 적용하자.

웹서비스를 위한 파일이 위치하는 경로인 document root로 이동하자.

cd /var/www

아래의 URL을 방문해서 필자가 만든 opentutorials 저장소에 접속한다.

https://github.com/opentutorialsorg/opentutorials4-egoing

zip 버튼 위에서 오른쪽 클릭을 하고 링크 주소 복사를 선택(파이어폭스 기준)

콘솔에 아래와 같이 입력한다.

sudo wget https://github.com/opentutorialsorg/opentutorials4-egoing/zipball/master -O o.zip

이 명령은 https://github.com/opentutorialsorg/opentutorials4-egoing/zipball/master에 위치하는 파일을 다운로드한 후에 o.zip 이름으로 저장한다는 의미다.

그럼 /var/www/o.zip 파일이 생성됐을 것이다.

이제 압축된 파일을 해제한다. 압축을 해제하려면 unzip이 설치되어 있어야 한다. 이 프로그램을 설치해보자.

sudo apt-get install unzip;

이제 압축을 풀어보자. 아래와 같이 입력한다.

sudo unzip o.zip;

아래와 같은 화면이 출력된다.

위의 내용은 압축된 파일들이 opentutorialsorg-opentutorials4-egoing-7df5b42 디렉토리 하위에 풀렸다는 것을 의미한다. 우리는 이 파일들이 /var/www/opentutorials 하위에 풀리기를 원한다. 그럼 이 디렉토리의 이름을 아래와 같은 명령으로 변경하면 된다. 디렉토리명은 달라질 수 있기 때문에 자신의 상황에 맞는 이름으로 변경한다.

sudo mv opentutorialsorg-opentutorials4-egoing-7df5b42 opentutorials

이제 웹을 통해서 서비스에 접근해보자. 아래의 URL은 필자의 서버 URL이다. 노란색으로 강조 표시한 부분을 각자 자신의 Public DNS로 변경해서 접근해야 한다. (public DNS 알아내는 법)

http://ec2-23-21-14-98.compute-1.amazonaws.com/opentutorials/index.php

버전관리를 하는 경우 디플로이

버전관리를 하는 경우라면 디플로이가 매우 쉽다. 일단 Git을 설치해야 한다. Git을 사용하는 방법은 버전관리편에서 자세히 설명하고 있기 때문에 여기서는 간단하게 언급하겠다.

Git 설치을 설치한다.

sudo apt-get install git

http://github.com 에 있는 자신의 저장소에 방문한 후에 아래 화면처럼 HTTP를 클릭한 후에 그에 해당하는 URL을 복사한다. 아래 화면은 필자의 git 저장소 URL이다.

참고 clone을 할 때 SSH가 아니라 HTTP를 사용했다. 어느 쪽을 사용해도 무관하다. HTTP를 사용하면 원격저장소로 push 할 때마다 비밀번호를 입력해야 하는 불편함이 있다. 하지만 지금 우리는 실서버에 소스를 반영하고 있는 것이고, 일반적으로 실서버에서 직접 소스를 수정하는 경우는 없다. 개발서버에서 소스를 수정하고, 테스트한 후에 문제가 없으면 그걸 원격저장소로 업로드(push) 한 후에 그걸 실서버로 다운로드(pull)하는 것이 일반적인 절차다. 따라서 HTTP 모드를 사용해도 된다.

웹서비스를 위한 파일이 위치하는 경로인 document root로 원격저장소의 파일을 동기화(다운로드)하자. 아래 명령은 '/var/www/opentutorials'로 'https://github.com/opentutorialsorg/opentutorials4-egoing.git'에 위치한 저장소의 파일들을 동기화한다.

sudo git clone https://github.com/opentutorialsorg/opentutorials4-egoing.git /var/www/opentutorials

이제 웹을 통해서 서비스에 접근해보자. 아래의 URL은 필자의 서버 URL이다. 각자 자신의 Public DNS로 접근해야 하는 것을 잊지말자.

http://ec2-23-21-14-98.compute-1.amazonaws.com/opentutorials/index.php

이렇게 해서 대장정이 정말로 끝났다. 우리는 웹서비스를 기획해서, 디자인하고, 개발하고 운영하는 전 과정을 풀코스로 돌아봤다. 특히나 가상머신을 이용한 개발이나, Git, github.com, 아마존 웹서비스등은 이 튜토리얼이 만들어지고 있는 시점에서는 최신의 트랜드를 반영한 것들이기 때문에 이것들을 경험해 봤다는 점에 대해서 자부심을 가져도 좋다.

이제 무엇을 모르는지 모르는 상태에서 어느 정도 벗어났기 때문에, 슬슬 무엇을 모르는지 아는 상태로 나아갈 때가 됐다. 생활코딩에는 각각의 기술들에 대한 수업들이 대부분 준비되어 있다. 신중한 사람이라면 이것들을 하나씩 마스터해나가면 좋을 것이고, 필자처럼 성미가 급한 사람이라면 종이를 펼쳐놓고 만들고 싶은 것을 일단 그려보자. 출발

댓글

본 수업은 웹 애플리케이션 만들기 수업으로 대체 되었습니다. 개편된 수업에서 뵙겠습니다. 본 수업은 2015년 6월 이후에 폐지됩니다. http://opentutorials.org/course/1688

 

궁금하신 점은 각 강의의 댓글로 문의해주세요. 답변이 없는 것은 운영자가 못 봤거나 모르는 것입니다. 생활코딩 커뮤니티에 질문하면 더 많은 분의 도움을 받을 수 있습니다. 그리고 문제를 해결했다면 본문의 댓글로 공유해주시면 다른 분에게 큰 도움이 됩니다. 원하는 답변을 얻는 것은 확률의 문제입니다. 질문의 품질이 높으면 그 확률도 올라갑니다. 질문자의 상황을 더 잘 전달하기 위해서 screenr.com이나 이미지 캡처의 이용을 권합니다.

 

댓글 본문
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기