사용자들이 에밀리 시간표 페이지를 사용할 수 있도록 하기 위해서는 웹 페이지를 호스팅해야합니다. 간단히 호스팅할 수 있는 여러 방법들이 있지만, AWS 공부도 할겸 S3를 이용해 호스팅해보기로 생각했습니다.

먼저 S3에 대해 간단하게 알아보겠습니다. **S3(Simple Storage Service)**는 파일을 저장하기 위한 Storage입니다. 일반적인 파일시스템의 개념과는 약간 다르며, 파일 이름을 대표하는 key와 파일 자체로 구분되는 Object Storage입니다.

S3는 **정적 웹사이트 호스팅 기능**을 사용하는 S3 버킷을 **Route 53**을 통해 도메인과 연결해 사용할 수 있습니다. 여기서 동적 웹 사이트 PHP, JSP 등 서버 측 처리에 의존하는 사이트는 S3를 이용해 호스팅할 수 없습니다. 오직 개별 웹 페이지에서 정적 컨텐츠를 포함하며, 클라이언트 측 스크립트를 포함하고 있는 정적 웹 사이트만이 호스팅 가능합니다. (React의 경우 webpack을 통해 번들링된 파일을 호스팅하면 됩니다.)

1
2
3
4
5
6
7
8
9
10
11
12
13

{
    "Version": "2012-10-17",
    "Id": "Policy1484315866648",
    "Statement": [
        {
            "Sid": "Stmt1484315864175",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::inuemily.com/*"
        }
    ]
}

1. AWS에 로그인 후 Lambda 서비스를 클릭합니다.

2. 저와 같이 이미 생성한 Lambda 함수가 있는 경우는 아래와 같이 Create a Lambda Function 버튼을 클릭하고 처음으로 Lambda 함수를 생성하는 경우는 Get Started Now 버튼을 클릭합니다.

3. Blueprint는 자주 사용되어지는 미리 준비된 Lambda 함수의 환경을 제공합니다. 저희는 Blank Function을 선택해서 직접 trigger(Event)와 환경을 설정합니다.

4. Lambda를 일정 시간 규칙에 맞게 호출할 것이기 때문에 CloudWatch Events - Schedule를 선택합니다. CloudWatch는 AWS에서 실행되는 애플리케이션을 위한 모니터링 서비스 뿐만 아니라 Schedule도 제공합니다.
   (Lambda를 실행시키기 위한 trigger로 다양한 방법이 제공됩니다. 한가지 예시로 S3의 특정 Bucket에 이미지 파일이 업로드 될때마다 ReSizing을 하고싶다면 trigger로 S3를 설정한 후 Bucket과 Event type(Delete, Put, Post, Copy)을 설정하여 해당 Lambda를 수행하도록 할 수 있습니다.)

5. CloudWatch Events - Schedule의 내용을 작성합니다. Rule name과 Rule description에는 해당 Schedule의 이름과 설명을 적고, Schedule expression에는 Event를 발생시키고자 하는 주기에 맞게 Cron 식을 작성합니다.
   Schedule expression에 작성한 Cron 식에 따라 Event가 발생하는 시간이 달라집니다. Cron 식을 처음 접하시는 분은 AWS 홈페이지1, AWS 홈페이지2를 참고해서 Cron 식을 작성합니다.

단, Cron 식에 사용되는 시간은 UTC를 기준으로 하기 때문에 유의해야 합니다. 제가 작성한 cron 식 (0 13 ? * SUN *)을 기준으로 하면 매주 일요일 22(13+9)시에 이벤트가 발생합니다.

6-1) 다음과 같이 Lambda function의 이름, 설명, 실행환경(포스팅 기준 Node.js 6.10 이 최신 버전입니다.) 을 작성합니다.

6-2) 다음으로 CloudWatch Events에 의해서 실행될 코드를 기재해야합니다. 코드를 기재하는 방식은 직접 작성, .ZIP 파일로 압축, S3를 이용하는 3가지 방식중 하나로 진행됩니다.
만약 작성한 코드가 aws-sdk를 제외한 외부 라이브러리를 사용하고 있다면 코드와 함께 라이브러리 파일(node_modules)을 압축하여 .ZIP 파일을 업로드 해야합니다.

6-3) 기존에 작성했던 코드에서 수정이 필요합니다. Lambda function의 코드가 에러없이 잘 완료되었는지 callback을 통해 결과를 반환해야합니다. 지난번에 작성했던 코드는 다음과 같이 수정됩니다. (예시를 들기위해 간단하게 작성했을 뿐, 실제 DB에 Insert 하는 부분은 생략되어 있습니다.)
29, 30번째 줄과, 34번째 줄에 추가된 코드에 주의하셔야 합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

exports.handler = (event, context, callback) => {
    const request = require('request');
    const cheerio = require('cheerio');
    
    const url = "http://www.inu.ac.kr/com/cop/mainWork/foodList1.do?siteId=inu&id=inu_050110010000&command=week";
    
    request(url, (error, response, body) => {
      if (error) throw error;
    
      let $ = cheerio.load(body);
    
      try {
        let krDay = '';
        let corner = '';
        let menu = '';
    
        $('table').find('tr').each(function (index, elem) {
          if (index % 6 === 0) {
            krDay = $(this).find('th').text().trim();
    
            console.log(`${krDay}`);
          } else {
            corner = $(this).find('th').text().trim();
            menu = $(this).find('th').next().text().trim();
    
            console.log(`${corner} -> ${menu}`);
          }
          
          callback(null);
          context.succeed();
        });
      } catch (error) {
        console.error(error);
        callback(err);
      }
    });
};

6_4) 필요에 따라 환경변수(Environment variables)와 Advanced settings를 작성한 후 Role을 작성하고 다음단계로 넘어갑니다. (Handler에 index.handler 라고 작성했기 때문에 .ZIP파일로 압축할때 소스코드(.js)의 파일명은 index가 되어야 합니다)

7. 지금까지 설정한 옵션을 확인하고 최종적으로 function을 생성합니다.

8. 생성된 Lambda Function을 테스트할 수 있습니다. Actions -> Configure test event를 통해 테스트를 위한 이벤트를 설정합니다. trigger(Event)로 CloudWatch Events - Schedule를 설정했기 때문에 event template 목록 중 Schedule Event를 선택합니다.

9. 테스트 후 CloudWatch의 로그를 통해서 lambda function 코드에서 출력했던 로그 및 실행결과를 확인할 수 있습니다.

Javascript에서 웹 페이지 데이터를 가져오기 위해서 request 모듈을 사용합니다.

먼저 request 모듈을 설치합니다.

1

npm install request --save

1
2
3
4
5
6
7
8
9

const request = require('request');

const url = "http://www.inu.ac.kr/com/cop/mainWork/foodList1.do?siteId=inu&id=inu_050110010000&command=week";

request(url, (error, response, body) => {
  if (error) throw error;

  console.log(body);
});

위의 코드를 실행하면 아래와 같이 제가 얻고자 했던 학식 메뉴의 데이터를 포함한 웹 페이지 데이터를 가져옵니다. 해당 데이터는 크롬에서 **보기 - 개발자 정보 - 소스 보기**를 통해서도 확인이 가능합니다.

1

npm install cheerio --save

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<table>
    <thead>
        <tr>
            <th class="bdlrNone">29(월)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1코너</th>
            <td>햄순두부찌개 / 고추장삼겹살볶음 / 훈제오리철판구이 (2인)</td>
            <td></td>
            <td class="bdlrNone"></td>
        </tr>
        <tr>
            <th>2코너</th>
            <td>등심돈까스&해쉬포테이토 / 떡갈비난자완스덮밥</td>
            <td></td>
            <td class="bdlrNone"></td>
        </tr>
        <tr>
            <th>3코너</th>
            <td>냉모밀&닭갈비덮밥</td>
            <td></td>
            <td class="bdlrNone"></td>
        </tr>
        <tr>
            <th>4코너</th>
            <td>삼겹살스테이크,치즈함박스테이크,고르곤졸라피자,치즈오븐스파게티(토마토),빠네파스타,도리아(불닭,불고기),불고기샐러드,닭가슴살샐러드,훈제연어샐러드,옛날통닭</td>
            <td></td>
            <td class="bdlrNone"></td>
        </tr>
        <tr>
            <th>5코너</th>
            <td>신라면,신라면정식,만두라면,쫄면,해물짬뽕라면,폭탄라면,떡라면,치즈라면,크림치즈김밥,참치김밥,즉석떡볶이,짜파게티,냄비우동</td>
            <td></td>
            <td class="bdlrNone"></td>
        </tr>
    </tbody>
    <thead>...</thead>
    <tbody>...</tbody>
    <thead>...</thead>
    <tbody>...</tbody>
    <thead>...</thead>
    <tbody>...</tbody>
    <thead>...</thead>
    <tbody>...</tbody>
    <thead>...</thead>
    <tbody>...</tbody>
    <thead>...</thead>
    <tbody>...</tbody>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

const request = require('request');
const cheerio = require('cheerio');

const url = "http://www.inu.ac.kr/com/cop/mainWork/foodList1.do?siteId=inu&id=inu_050110010000&command=week";

request(url, (error, response, body) => {
  if (error) throw error;

  let $ = cheerio.load(body);

  try {
    let krDay = '';
    let corner = '';
    let menu = '';

    $('table').find('tr').each(function (index, elem) {
      if (index % 6 === 0) {
        krDay = $(this).find('th').text().trim();

        console.log(`${krDay}`);
      } else {
        corner = $(this).find('th').text().trim();
        menu = $(this).find('th').next().text().trim();

        console.log(`${corner} -> ${menu}`);
      }
    });
  } catch (error) {
    console.error(error);
  }
});

이제 Express 프로젝트를 생성하겠습니다.

npm을 통해 **Express generator**를 먼저 설치합니다. (global로 추가하기 위해 -g 옵션을 사용합니다.)

1

$ npm install express-generator -g

Express generator를 사용해서 프로젝트를 생성합니다. 저는 Emily라는 이름으로 프로젝트를 생성했습니다.

1

$ express Emily

생성된 프로젝트 폴더로 이동하여 모듈을 설치합니다.

1
2

$ cd Emily
$ npm install

생성된 프로젝트는 다음과 같은 구조입니다. 이제 옐로아이디 API 문서를 참고해서 간단한 봇을 만들어보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.jade
    ├── index.jade
    └── layout.jade

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

const express = require('express');
const router = express.Router();

// 처음에 사용자가 채팅방에 들어왔을때 호출되는 API. 사용자에게 키보드에 보여질 내용을 리턴
router.get('/keyboard', function (req, res) {
  res.status(200).json(
    {
      type: 'text'
    }
  );
});

// 사용자가 보내는 메세지/사진/동영상 을 받아 처리해 응답
router.post('/message', function (req, res) {
  const { user_key, type, content } = req.body;

  console.log(`"${user_key}"가 "${content}" 메시지 입력`);

  res.status(200).json({
    message: {
      content
    }
  });
});

// 사용자가 옐로아이디를 친구추가했을때 호출되는 API
router.post('/friend', function (req, res) {
  const userKey = req.body.user_key;

  console.log(`"${userKey}"가 옐로아이디 친구 추가`);

  res.status(200).json();
});

// 사용자가 옐로아이디를 친구차단(삭제)했을때 호출되는 API
router.delete('/friend/:userKey', function (req, res) {
  const userKey = req.body.userKey;

  console.log(`"${userKey}"가 옐로아이디 친구 삭제`);

  res.status(200).json();
});

// 사용자가 채팅방 나가기(삭제)했을때 호출되는 API
router.delete('/chat_room/:userKey', function (req, res) {
  const userKey = req.body.user_key;

  console.log(`"${userKey}"가 옐로아이디 채팅방 삭제`);

  res.status(200).json();
});

module.exports = router;

1
2

const api = require('./routes/api');
app.use('/api', api);

옐로아이디 API 문서는 공개되어 있기 때문에 옐로아이디 가입신청 후 기획이 되어있다며 바로 개발이 가능합니다. 가입신청이 완료되면 발급받은 API 키만 적용해주면 됩니다.

신청시 주의사항

• 프로필 이름과 옐로아이디는 개설 후 변경이 불가능합니다.(위의 사진에서 인천대학교 에밀리가 프로필 이름, @인천대학교-에밀리가 옐로아이디를 의미합니다.
• 주소는 입력하지 않아도 상관없습니다.
• 홈페이지 주소를 입력하게 되는데 저는 처음 블로그 주소를 기재하였다가 옐로아이디의 목적과 맞지 않다는 이유로 반려되었습니다. 옐로아이디에 대한 설명이 있는 홈페이지가 없다면 페이스북 페이지를 생성한 후 간단히 옐로아이디에 대한 목적과 서비스에 대해 간단한 글을 남긴 후 홈페이지 주소에 페이스북 페이지를 기재하는 방법이 좋습니다.
• 심사는 2~3일 정도의 시간이 소요됩니다. 심사에서 반려될 경우 해당 반려사유를 참고하여 수정 후 재심사를 요청해야합니다. 재심사도 2~3일 정도의 시간이 소요되기 때문에 처음 신청시 반려되는 불상사가 일어나지 않도록 공들여 작성해야합니다.

신의탑 웹툰에서 에밀리는 사용자가 궁금해 하는것을 모두 알려줍니다. 이러한 에밀리의 특징과 사용자의 범위를 최대한 좁히기 위해 제가 다녔던 인천대학교의 학생을 사용자로 맞추어 인천대학교-에밀리를 개발하게 되었습니다.