26
Amazon Web Services – AI Services Bootcamp Lab guide May 2017 Page 1 of 26 Amazon Polly 를 이용한 Serverless 기반 Text To Speech(TTS) 웹 어플리케이션 만들기 2017. 5. 25 김용우 매니저 ([email protected]) Partner Solutions Architect

Serverless Text To Speech(TTS) - Amazon Web Services Services... · 웹 어플리케이션 만들기 2017. 5. 25 ... RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Serverless Text To Speech(TTS) - Amazon Web Services Services... · 웹 어플리케이션 만들기 2017. 5. 25 ... RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여

Amazon Web Services – AI Services Bootcamp Lab guide May 2017

Page 1 of 26

Amazon Polly 를 이용한

Serverless 기반 Text To Speech(TTS)

웹 어플리케이션 만들기

2017. 5. 25

김용우 매니저 ([email protected])

Partner Solutions Architect

Page 2: Serverless Text To Speech(TTS) - Amazon Web Services Services... · 웹 어플리케이션 만들기 2017. 5. 25 ... RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여

Amazon Web Services – AI Services Bootcamp Lab guide May 2017

Page 2 of 26

실습 목차

1. 실습개요 ............................................................................................................................................................................... 3

2. 전체 다이어그램 아키텍쳐 및 Workflow .............................................................................................................. 4

3. 단계 1 : DynamoDB 테이블 생성 ............................................................................................................................. 5

4. 단계 2: S3 버킷 생성 ...................................................................................................................................................... 6

5. 단계 3: SNS 토픽 생성 ................................................................................................................................................... 7

6. 단계 4: IAM Role 생성 ................................................................................................................................................... 7

7. 단계 5: “PostReader_NewPost” Lambda 함수 생성 ........................................................................................... 9

8. 단계 6: “ConvertToAudio” Lambda 함수 생성 ................................................................................................. 12

9. 단계 7: “GetPost” Lambda 함수 생성 ................................................................................................................... 15

10. 단계 8: Lambda 함수로 구현한 기능을 RESTful 웹 서비스로 만들기 ................................................... 16

11. 단계 9: Serverless 사용자 인터페이스(웹 페이지) 만들기 ......................................................................... 22

Page 3: Serverless Text To Speech(TTS) - Amazon Web Services Services... · 웹 어플리케이션 만들기 2017. 5. 25 ... RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여

Amazon Web Services – AI Services Bootcamp Lab guide May 2017

Page 3 of 26

실습 개요

본 실습을 통해, Polly 의 Text to Speech (TTS)를 이용하여 mp3 파일을 생성해주는 간단한

Serverless Web application 을 구현해 보실수 있습니다. Amazon Polly 는 사용이 간편하고, 음성으로

변환이 필요한 텍스트를 Polly API 를 통해 요청하면, 즉시 오디오 스트림으로 변환해서 반환해

주기때문에 이를 바로 재생하거나, MP3 와 같은 표준 오디오 파일 형식으로 손쉽게 저장해서

반복적으로 사용할 수 있습니다.

Severless 기반 TTS 웹 어플리케이션

준비 사항

이 랩을 수행하려면 다음이 필요합니다.

1. 실습을 위한 AWS 계정

2. 반드시 Amazon Polly 가 지원되는 리전 사용 (US East-1, US East-2, US West-2, EU West-1)

3. 본 실습에서 사용되는 코드 (Download)

Page 4: Serverless Text To Speech(TTS) - Amazon Web Services Services... · 웹 어플리케이션 만들기 2017. 5. 25 ... RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여

Amazon Web Services – AI Services Bootcamp Lab guide May 2017

Page 4 of 26

전체 아키텍쳐 Diagram 및 Workflow

[새로운 Text 변환 Flow – Blue 라벨]

1) 사용자 입력(변환요청)은 Amazon API 게이트웨이를 통해 수신됩니다. 이번 실습 시나리오

에서는 Amazon S3 (Amazon Simple Storage Service)에서 호스팅되는 정적 웹 페이지에 의해

어플리케이션이 호출 됩니다.

2) Amazon API 게이트웨이는 MP3 파일을 생성하는 프로세스를 시작하는 전용 Lambda 함수

"New Post"로 수신된 요청을 넘기도록 설정합니다.

3) Lambda 함수는 모든 게시물에 대한 정보가 저장되는 DynamoDB 테이블에 새롭게 포스팅 된

요청 정보를 추가합니다.

4) 전체 프로세스를 비동기 적으로 실행하기 위해 Amazon SNS 를 사용하여 새 게시물에 대한

정보를 수신하고 변환을 시작하는 프로세스를 분리합니다.

5) 또 다른 Lambda 함수 인 "Convert to Speech"는 SNS 토픽에 등록되어 있어, 새 메시지가

게시될 때마다 트리거 됩니다. (즉, 새 게시물을 오디오 파일로 변환해야 함)

6) "Convert to Speech" Lambda 함수는 Amazon Polly 를 사용하여 텍스트를 지정된 언어의

오디오 파일 (텍스트 언어와 동일)로 변환합니다.

7) 새로운 MP3 파일은 전용 S3 버킷에 저장됩니다.

Page 5: Serverless Text To Speech(TTS) - Amazon Web Services Services... · 웹 어플리케이션 만들기 2017. 5. 25 ... RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여

Amazon Web Services – AI Services Bootcamp Lab guide May 2017

Page 5 of 26

8) 게시물에 대한 정보는 DynamoDB 테이블에서 업데이트됩니다. 그런 다음 S3 버킷에 대한 참조

(URL)가 이전에 저장된 데이터와 함께 저장됩니다.

[ 기존 변환 데이터 검색 Flow - Red 라벨]

1) RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여 처리되며, 또한 게시물 정보 검색

방법을 제공합니다. 이 메소드에는 게시물의 텍스트와 MP3 파일이 저장된 S3 버킷에 대한

링크가 포함됩니다. 이 시나리오에서 이 웹 서비스는 Amazon S3 에서 호스팅되는 정적 웹

페이지에 의해 호출됩니다.

2) Amazon API 게이트웨이는 게시 데이터를 검색하기위한 로직을 배치하는 "Get Post"Lambda

함수를 호출합니다.

3) "Get Post"Lambda 함수는 DynamoDB 테이블에서 게시물에 대한 정보 (Amazon S3 에 대한

참조 포함)를 검색합니다.

단계 1. DynamoDB 테이블 생성

1) 사용자로부터 Text 를 입력받아 MP3 로 변환하는 과정에서, Text 내용, MP3 가 저장되는

URL 등을 DynamoDB 테이블에 저장합니다. DynamoDB 콘솔에서 하나의 테이블을

생성하고, “posts” 라고 이름 짓습니다. 그리고, Primary Key 는 String 으로 선택하는데, 이

값은 새로운 열이 DB 에 추가되면 Lambda 함수가 생성하는 값이 저장됩니다.

이번 단계에서, 테이블의 정체 구조를 정의하지는 않지만, 실제 레코드 들이 저장된 모습을 미리

한번 살펴 보도면 다음과 같습니다.

Page 6: Serverless Text To Speech(TTS) - Amazon Web Services Services... · 웹 어플리케이션 만들기 2017. 5. 25 ... RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여

Amazon Web Services – AI Services Bootcamp Lab guide May 2017

Page 6 of 26

id - 게시물의 ID 입니다.

상태 - MP3 파일이 이미 생성되었는지 여부에 따라 UPDATED 또는 PROCESSING

text - 오디오 파일이 생성되는 게시물의 텍스트입니다.

url - 오디오 파일이 저장되는 S3 버킷에 대한 링크

voice - 오디오 파일을 만드는 데 사용 된 Amazon Polly 음성

단계 2. S3 Bucket 생성

1) 이번 단계에서는 어플리케이션에서 Polly 를 통해 생성한 모든 오디오 파일을 저장하는 S3

버킷을 만들어야합니다. 버킷의 이름은 Globally unique 해야하며 아래와 같이 audioposts-1-

Name 으로 만들어줍니다.

Page 7: Serverless Text To Speech(TTS) - Amazon Web Services Services... · 웹 어플리케이션 만들기 2017. 5. 25 ... RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여

Amazon Web Services – AI Services Bootcamp Lab guide May 2017

Page 7 of 26

단계 3. SNS 토픽 생성

앞쪽에 설명된 아키텍처 다이어그램에서 알 수 있듯이, 본실습에서는 입려된 텍스트를 오디오

파일로 변환하는 과정을 두 개의 Lambda 함수로 분할했습니다. 첫번째 이유는, 응용 프로그램에

비동기 호출을 사용하여 어플리케이션에 새 게시물(새 텍스트)을 보내는 사용자가 DynamoDB

항목의 ID 를 수신받도록 하여, 추후 해당 ID 를 기반으로 검색을 할수 있도록 구성하기 위함

입니다. 이렇게 하면, 검색을 위해 매번 변환이 끝나기를 기다리는 것을 피할 수 있습니다. 적은

글자수의 게시물일 경우 오디오 파일로 변환하는 데 수 밀리 초 이내라도 끝날수 있지만, 텍스트가

많아지면 (10 만 단어 이상) 이를 음성으로 변환하는 데 시간이 제법 걸릴 수 있습니다. 실시간

스트리밍의 경우에는 Polly 가 첫번째 바이트를 수신하는대로 즉시 변환을 시작하기 때문에

이런점이 문제가 되지 않습니다.

두 번째로, 본 어플리케이션은 Lambda (lambda) 함수를 사용하기 때문에 단일 실행이 최대 5 분 을

넘길수 없습니다. 따라서, 새로운 텍스트를 음성으로 변환할때는 5 분 이내에 완료되는 정도의

크기여야 합니다. 만약, 더 긴 Text 변환을 한번에 수행하고자 한다면, Lambda 대신 AWS Batch

서비스를 사용할 수 있습니다.

이번 실습의 경우처럼 하나의 로직이 두 개의 Lambda 함수들로 나뉘어 있을때는, 하나의

Lambda 함수의 실행 결과를 다른 Lambda 함수가 인지하고 있어야 하는데, 이를 매개해 주는

방법으로 본 실습에서는 Amazon SNS 를 사용합니다.

1) SNS 콘솔에서 아래와 같이 new_posts 라는 이름의 새로운 토픽을 생성합니다.

Page 8: Serverless Text To Speech(TTS) - Amazon Web Services Services... · 웹 어플리케이션 만들기 2017. 5. 25 ... RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여

Amazon Web Services – AI Services Bootcamp Lab guide May 2017

Page 8 of 26

단계 4. IAM Role 생성

Lambda 함수를 만들기 전에 함수에 대한 IAM 역할(Role)을 생성해야 합니다. Role 은

Lambda 함수가 특정 서비스/자원에 접근할수 있는 권한을 부여합니다. 이번 실습에서는 하나의

Role 을 통해 3 개의 Lambda 함수가 공유할 예정입니다.

1) IAM 콘솔에서 Role 을 선택하고 Create New role 버튼을 클릭합니다.

2) Select role type 에서 AWS Service Role 에 나열된 서비스들중 AWS Lambda 를 Select 합니다.

3) Attach Policy 화면에서는 아무 Policy 도 선택하지 않은채로 Next Step 를 클릭합니다.

4) Role Name 에서 LambdaPostsReaderRole 이라고 이름 짓습니다.

5) Role 에서 생성한 4)에서 생성한 LambdaPostsReaderRole 을 클릭하면 해당 Role 의 Summary

화면으로 이동하는데, 아랫 부분에서, Inline Policies 항목에서 아랫방향 화살표를 눌러 화면을

확장하고, Click Here 라는 링크를 누릅니다.

Page 9: Serverless Text To Speech(TTS) - Amazon Web Services Services... · 웹 어플리케이션 만들기 2017. 5. 25 ... RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여

Amazon Web Services – AI Services Bootcamp Lab guide May 2017

Page 9 of 26

6) Set Permissions 에서 Custom Policy 를 선택하고 Select 버튼을 누릅니다.

7) 임의의 Policy Name 을 입력하고, 아래 상자에 있는 내용을 Copy & Paste 해서 상자 안에

복사해 넣고 Apply Policy 를 누릅니다. (다운받은 Text 파일에서 복사)

{

"Version": "2012-10-17",

"Statement": [

{

"Effect": "Allow",

"Action": [

"polly:SynthesizeSpeech",

"dynamodb:Query",

"dynamodb:Scan",

"dynamodb:PutItem",

"dynamodb:UpdateItem",

"sns:Publish",

"s3:PutObject",

"s3:PutObjectAcl",

"s3:GetBucketLocation",

"logs:CreateLogGroup",

"logs:CreateLogStream",

"logs:PutLogEvents"

],

"Resource": [

"*"

]

}

]

}

단계 5. “PostReader_NewPost” Lambda 함수 생성

이번 단계에서 만드는 첫 번째 Lambda 함수는 본 어플리케이션 워크 플로우의 첫 진입 점입니다.

이 Lambda 함수에서 오디오 파일로 변환해야하는 새 게시물(Post)에 대한 정보(Text, Voice)를

받아 DynamDB 에 기록하고, SNS 토픽을 통해 새로운 Post 가 들어온 사실을 공지합니다.

1) Lambda 콘솔로 이동하여 Create new Lambda 버튼을 클릭하고, Select blueprint 에서 Blank

Function 을 선택합니다.

2) Triggers 선택화면 에서 아무것도 선택하지 않고 Next 버튼을 누릅니다.

Page 10: Serverless Text To Speech(TTS) - Amazon Web Services Services... · 웹 어플리케이션 만들기 2017. 5. 25 ... RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여

Amazon Web Services – AI Services Bootcamp Lab guide May 2017

Page 10 of 26

3) Configure Function 에서 아래와 같이 PostReader_NewPost 라고 이름 짓고 Runtime 은

Python 2.7 을 선택합니다.

4) Code entry type 을 “Edit code inline”으로 선택하고, 아래 Python 코드를 붙여 넣습니다.

(다운받은 Text 파일에서 복사)

import boto3

import os

import uuid

def lambda_handler(event, context):

recordId = str(uuid.uuid4())

voice = event["voice"]

text = event["text"]

print('Generating new DynamoDB record, with ID: ' + recordId)

print('Input Text: ' + text)

print('Selected voice: ' + voice)

#Creating new record in DynamoDB table

dynamodb = boto3.resource('dynamodb')

table = dynamodb.Table(os.environ['DB_TABLE_NAME'])

table.put_item(

Item={

'id' : recordId,

'text' : text,

Page 11: Serverless Text To Speech(TTS) - Amazon Web Services Services... · 웹 어플리케이션 만들기 2017. 5. 25 ... RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여

Amazon Web Services – AI Services Bootcamp Lab guide May 2017

Page 11 of 26

'voice' : voice,

'status' : 'PROCESSING'

}

)

#Sending notification about new post to SNS

client = boto3.client('sns')

client.publish(

TopicArn = os.environ['SNS_TOPIC'],

Message = recordId

)

return recordId

위에 제공된 Lambda 함수가 수행하는 일은 다음과 같습니다.

(1) 두 개의 입력 매개 변수를 전달 받습니다.

Voice - Amazon Polly 에서 지원하는 수십 가지 음성 중 하나

Text – 사용자가 오디오 파일로 변환하려는 게시물의 텍스트입니다.

(2) 새 게시물(Post)에 대하여 DynamoDB 테이블에 새 레코드를 만듭니다.(id, text, voice, status)

(3) 새 게시물에 대한 정보를 SNS 에 게시합니다 (DynamoDB 항목의 ID / 게시물 ID 가 메시지로

게시됩니다)

(4) 사용자에게 DynamoDB 항목의 ID 를 반환합니다.

5) Lambda 함수에서 참조하는 SNS 토픽 ARN 과 DB Table 이름은 환경변수로 별도로 설정하도록

되어 있으며 아래와 같이 여러분이 만드신 SNS 토픽의 ARN 및 DynamoDB 테이블 이름을

입력하세요.

(* 브라우저에서 별도의 Tab 을 열어 DynamoDB 및 SNS 의 해당 정보을 확인하세요)

6) Lambda function handle and role 항목에서 이전 단계에서 생성한 Role 을 골라주세요.

Page 12: Serverless Text To Speech(TTS) - Amazon Web Services Services... · 웹 어플리케이션 만들기 2017. 5. 25 ... RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여

Amazon Web Services – AI Services Bootcamp Lab guide May 2017

Page 12 of 26

7) 다른 항목은 변경없이 Next -> Create function 을 눌러 Lambda 함수를 생성해 주세요.

이번 단계를 끝으로 “PostReader_NewPost”를 처리하는 Lambda 함수가 생성되었습니다. 생성후

테스트를 위해서 Lambda 함수에서 Test 버튼을 누르시고, 아래의 값을 입력 값으로 넣어주시면

방금 생성한 함수가 제대로 동작 하는지 확인하실 수있습니다.

{

"voice": "Joanna",

"text": "This is working!"

}

8) 수행된 Lambda 함수가 postId 를 반환하며 성공적으로 종료하면, DynamoDB 테이블에서

새롭게 추가된 레코드를 확인할 수 있습니다.

단계 6. “Convert to Audio” Lambda 함수 생성

앞의 단계 5 에서 New Post Lambda 가 수행되고 나면 새로운 정보(Text, Voice)가 DynamoDB 의

레코드로 추가된후, SNS 에 해당 내용을 게시하도록 되어 있습니다. 이번 Convert to Audio

Lambda 함수는 Trigger 를 위한 입력소스로 앞단계에서 생성한 SNS 토픽을 선택하여, 해당

SNS 토픽에 새 항목이 게시되면 Trigger 되도록 설정합니다.

Page 13: Serverless Text To Speech(TTS) - Amazon Web Services Services... · 웹 어플리케이션 만들기 2017. 5. 25 ... RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여

Amazon Web Services – AI Services Bootcamp Lab guide May 2017

Page 13 of 26

1) Lambda 콘솔에서 Create new Lambda 버튼을 클릭하고, Select blueprint 에서 Blank

Function 을 선택합니다.

2) Trigger 선택화면 에서 SNS 를 선택하고, 이전 단계에서 만들어둔 Topic 을 골라줍니다. 그리고,

Enable Trigger 체크박스를 체크합니다.

3) 새로운 Lambda 함수의 이름은 PostReader_ConvertToAudio 라고 이름짓고, Runtime 으로

전단계와 동일하게 Python 2.7 로 선택합니다.

ConvertToAudio Lambda 함수가 하는 역할은 다음과 같습니다.

(1) 입력 메시지 (SNS 이벤트)에서 오디오 파일로 변환되어야하는 DynamoDB 항목의 ID (게시물

ID)를 검색합니다.

(2) DynamoDB 에서 항목 검색

(3) 텍스트를 오디오 스트림으로 변환합니다.

(4) 오디오 (MP3) 파일을 S3 버킷에 저장 합니다.

(5) DynamoDB 테이블에 저장된 레코드에서 상태(Status)를 Processing 에서 Updated 로 바꾸고,

MP3 가 저장된 S3 버킷의 URL 정보를 업데이트합니다.

Page 14: Serverless Text To Speech(TTS) - Amazon Web Services Services... · 웹 어플리케이션 만들기 2017. 5. 25 ... RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여

Amazon Web Services – AI Services Bootcamp Lab guide May 2017

Page 14 of 26

다음에 제공되는 Python 코드중 Amazon Polly 를 호출하는 부분을 살펴 보겠습니다.

synthesize_speech 메소드는 변환 되어야하는 텍스트와 사용할 음성(Voice)을 수신하고, 오디오

스트림을 반환합니다. 여기서 주의할 점은 synthesize_speech 는 입력텍스트의 크기를 최대 1,500

자로 제한하고 있다는 것입니다. 따라서, 본 Lambda 함수는 1,000 자 단위의 블록으로 나눠 오디오

스트림으로 변환후 다시 결합하는 형태로 구성되어 있습니다. 아래 제공되는 Python Code 를

Lambda 함수 구성화면에 붙여(Copy & Paste) 넣습니다.

//convertToAudio python code

Click Here : 지면관계상 Link 로 처리 (또는 다운받은 Text 파일에서 복사)

4) New Post Lambda 함수와 마찬가지로, 환경 변수는 별도로 처리하도록 구성되어 있으므로

아래와 같이 DB_TABLE_NAME 과 BUCKET_NAME 을 별도로 입력해 주세요.

5) IAM Role 구성도 이전 단계와 같이 전단계에서 생생하신 Role 을 선택하세요.

6) 이번에는 Next 를 누르기전 Advanced Setting 을 선택하시고, Lambda 실행 Time out 값을

최대 5 분으로 변경해 주세요. (*현재 Lambda 의 최대 수행 시간은 5 분 입니다)

Page 15: Serverless Text To Speech(TTS) - Amazon Web Services Services... · 웹 어플리케이션 만들기 2017. 5. 25 ... RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여

Amazon Web Services – AI Services Bootcamp Lab guide May 2017

Page 15 of 26

7) 여기까지 설정이 끝나면 Next -> Create function 을 눌러 Lambda 함수를 생성해 주세요

convertToAudioLambda 함수가 잘 동작하는지 확인하시려면, 아래 8)번 9)번을 통해

테스트랠 해 보실수 있습니다. .

8) 테스트를 위해 이전에 생성해둔 Lambda 함수인 PostReader_NewPost 를 선택하고, Actions->

Configure Test Event 를 누른후 아래 입력값들을 넣고 Save and Test 버튼을 누릅니다.

{

"voice": "Joanna",

"text": "This is working!"

}

9) 테스트가 정상적으로 완료 되었다면, S3 Bucket 에 MP3 파일이 생성되고, DynamoDB 에

URL 및 Status 값이 변경되는 것을 확인하실 수 있습니다.

단계 7. “Get Post” Lambda 함수 생성

마지막으로 생성할 Lambda 함수는 처리가 끝난후 DynamoDB 에 저장되어 있는 정보를 가져오는

역할을 수행합니다.

1) Lambda 콘솔에서 Create new Lambda 버튼을 클릭하고, Select blueprint 에서 Blank

Function 을 선택합니다.

2) Triggers 선택화면 에서 아무것도 선택하지 않고 Next 버튼을 누릅니다.

3) Configuration Function 에서 Lambda 함수의 이름을 PostReader_GetPost 로 입력하고

Runtime 은 Python 2.7 을 선택합니다.

이번에 제공되는 Python 코드는 DynamoDB 에 저장된 Post ID 와 해당 id 를 기반으로 연관된 모든

정보들 (S3 링크, 처리상태, Voice 등) 을 가져오는 역할을 수행합니다. 또한, “*” 를 입력값으로

받으면 데이터베이스에 있는 모든 정보를 반환합니다. (다운받은 Text 에서 복사)

import boto3

import os

from boto3.dynamodb.conditions import Key, Attr

def lambda_handler(event, context):

postId = event["postId"]

Page 16: Serverless Text To Speech(TTS) - Amazon Web Services Services... · 웹 어플리케이션 만들기 2017. 5. 25 ... RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여

Amazon Web Services – AI Services Bootcamp Lab guide May 2017

Page 16 of 26

dynamodb = boto3.resource('dynamodb')

table = dynamodb.Table(os.environ['DB_TABLE_NAME'])

if postId=="*":

items = table.scan()

else:

items = table.query(

KeyConditionExpression=Key('id').eq(postId)

)

return items["Items"]

4) 이전 단계와 마찬가지로 아래와 같이 DyanmoDB 테이블 이름을 가리키는 환경변수를

입력해줍니다.

5) IAM Role 구성도 이전 단계와 같이 전단계에서 생생하신 Role 을 선택하세요.

6) 다른 항목은 변경없이 Next -> Create function 을 눌러 Lambda 함수를 생성해 주세요.

이번 단계를 끝으로 “Get Post”를 처리하는 Lambda 함수가 생성되었습니다. 생성후 테스트를

위해서 Lambda 함수에서 Test 버튼을 누르시고, 아래의 값을 입력 값으로 넣어주시면 방금 생성한

함수가 제대로 동작 하는지 확인하실 수있습니다.

{

"postId": "*"

}

Page 17: Serverless Text To Speech(TTS) - Amazon Web Services Services... · 웹 어플리케이션 만들기 2017. 5. 25 ... RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여

Amazon Web Services – AI Services Bootcamp Lab guide May 2017

Page 17 of 26

단계 8. Lambda 함수로 구현한 기능을 RESTful 웹서비스로 만들기

이제 마지막으로 해야 할 일은 애플리케이션 로직을 RESTful 웹 서비스로 노출시켜 표준 HTTP

프로토콜을 사용하여 쉽게 호출 할 수 있도록하는 것입니다. 이를 위해 Amazon API 게이트웨이를

사용합니다.

1) API Gateway 콘솔로 이동하여 Create API 옵션을 선택합니다. New API 를 선택하고 API 의

이름은 PostReaderAPI 라고 짓도록 하겠습니다.

1) API 가 생성 된 후, 두 개의 HTTP 메서드 (Actions 버튼을 누르고 Create Method 선택) 를

생성합니다. 첫번째로, POST 메서드는 아래 첫번째 화면과 같이 Integration Type 으로

Lambda Function 을 선택후, 현재 사용중인 리젼선택 및 PostReader_NewPost Lambda

함수를 선택하고 Save 버튼을 누릅니다.

Page 18: Serverless Text To Speech(TTS) - Amazon Web Services Services... · 웹 어플리케이션 만들기 2017. 5. 25 ... RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여

Amazon Web Services – AI Services Bootcamp Lab guide May 2017

Page 18 of 26

마찬가지로 GET 메소드는아래 화면과 같이 PostReader_GetPost Lambda 함수를 호출합니다.

2) 그리고 마지으로 설정할 메서드는 CORS (교차

출처 자원 공유)입니다. 이 메서드를 사용하면

다른 호스트 이름을 가진 웹 사이트에서도

API 를 호출 할 수 있습니다. 별도의 수정없이

Enable CORS and Replace existing CORS

headers 버튼을 누릅니다. 이후 나타나는 확인

창에서, Yes, replace existing values 버튼을

누릅니다.

Page 19: Serverless Text To Speech(TTS) - Amazon Web Services Services... · 웹 어플리케이션 만들기 2017. 5. 25 ... RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여

Amazon Web Services – AI Services Bootcamp Lab guide May 2017

Page 19 of 26

이제 리턴되어야하는 게시물 ID 에 대한 정보를 제공하는 조회 매개 변수 postId 에 대해 GET

메소드를 구성합니다.

3) 다음 화면과 같이 GET 메서드를 클릭하고 Method Request 의 구성에서, URL 쿼리 문자열

파라미터에서 Add Query String 을 누르고 를 아래 두번째 화면과 같이 입력해 줍니다.

(Name 필드에 postId 만 입력)

4) Lambda 함수 (PostReader_GetPost)는 입력 데이터를 JSON 형식으로 수신하기 때문에 매개

변수를이 형식으로 매핑하도록 API 를 구성해야합니다. 이를 위해 아래화면과 같이 GET

메소드의 Integration Request 구성을 클릭합니다.

Page 20: Serverless Text To Speech(TTS) - Amazon Web Services Services... · 웹 어플리케이션 만들기 2017. 5. 25 ... RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여

Amazon Web Services – AI Services Bootcamp Lab guide May 2017

Page 20 of 26

5) 다음 화면에 보이는 Body Mapping Templates 를 확장한후, Request body

passthrouth 에대에서 When there are no templates defined 를 선택 합니다.

6) Content-Type 을 입력하면 아래 Generate Template 항목이 나오는데 아래 내용을 붙여넣기

하세요.

{

"postId" : "$input.params('postId')"

}

Page 21: Serverless Text To Speech(TTS) - Amazon Web Services Services... · 웹 어플리케이션 만들기 2017. 5. 25 ... RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여

Amazon Web Services – AI Services Bootcamp Lab guide May 2017

Page 21 of 26

7) 다음 화면과 같이 API Action 에서 Deploy API 를 선택하세요.

8) Deployment Stage 를 묻는 대화상자에서는 임의의 단계를 입력해 주시고 Deploy 버튼을

눌러주세요.

9) 화면 상단에 생성된 Invoke URL 은 ConvertToAudio 어플리케이션이 API 통신을 할때 사용할

엔드포인트 이므로, 메모장에 따로 Copy & Paste 해 두면 편리합니다.

Page 22: Serverless Text To Speech(TTS) - Amazon Web Services Services... · 웹 어플리케이션 만들기 2017. 5. 25 ... RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여

Amazon Web Services – AI Services Bootcamp Lab guide May 2017

Page 22 of 26

단계 9. Serverless 사용자 인터페이스(웹 페이지) 만들기

이번에는 본 실습의 마지막 단계로 지금까지 구성한 어플리케이션 로직을 RESTful 웹 서비스로

구축 합니다. Amazon S3 가 제공하는 Static Web hosting 기능을 통해, EC2 서버를 별로도

사용하지 않고도 손쉽게 정적 웹 페이지를 호스팅 할수 있습니다. 또한, 이 웹 페이지에 자바

스크립트를 추가하고 이를 API Gateway 에서 생성한 API 와 연결하면, 동적 요청을 처리하는

Serverless 웹 어플리케이션을 구성하실수 있습니다.

1) S3 콘솔에서 Static 웹 호스팅을 위한 Bucket 을 새롭게 생성해 주세요. 편의를위해 MP3 저장용

버킷인 audioposts-Name 앞에 www 를 추가하여 www-audioposts-Name 으로 만듭니다.

(리전은 현재 사용중인 리전과 동일한 곳으로 선택해주세요)

2) S3 Bucket property 에서 Static Web hosting 을 다음 화면과 같이 enable 하고 index.html 을

입력합니다.

아래 링크에서 웹 호스팅 인터페이스 역할을 하는 파일을 받아서 www-audio..버킷에 업로드

해주세요. 이때, 압축파일 안에 들어 있는 scripts.js 파일은 별도의 편집기로 열어 이전 단계에서

생성해둔 API Gateway 엔드포인트 값을 입력한후 (첫번째 줄) S3 버킷에 업로드 합니다.

*파일링크 : (index.html, script.js, styles.css)

Page 23: Serverless Text To Speech(TTS) - Amazon Web Services Services... · 웹 어플리케이션 만들기 2017. 5. 25 ... RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여

Amazon Web Services – AI Services Bootcamp Lab guide May 2017

Page 23 of 26

https://s3.amazonaws.com/aws-bigdata-blog/artifacts/ai-text-to-speech/text-to-speech-demo.zip

3) 마지막 단계는 해당 웹 사이트에 모든 사용자가 액세스 할 수 있도록 버킷의 권한을 변경하는

것입니다. Bucket 의 Permission 탭에서 다음 정책을 추가하여 버킷 정책을 편집하십시오. 12

번째 줄에 여러분의 S3 Bucket 이름을 입력하세요.

Page 24: Serverless Text To Speech(TTS) - Amazon Web Services Services... · 웹 어플리케이션 만들기 2017. 5. 25 ... RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여

Amazon Web Services – AI Services Bootcamp Lab guide May 2017

Page 24 of 26

{

"Version": "2012-10-17",

"Statement": [

{

"Sid": "PublicReadGetObject",

"Effect": "Allow",

"Principal": "*",

"Action": [

"s3:GetObject"

],

"Resource": [

"arn:aws:s3:::www-audioposts-1-yourname/*"

]

}

]

}

그리고 Save 버튼을 눌러 설정을 마무리 합니다.

4) 여기까지 완료하셨다면 이제 모든 설정이 끝난 것입니다. 이제, S3 Bucket 의 Static Website

Hosting 탭에서 URL 찾아서 클릭해 보세요. 다음과 같은 화면이 나오면 정상적으로 설정이

완료된 것입니다.

Page 25: Serverless Text To Speech(TTS) - Amazon Web Services Services... · 웹 어플리케이션 만들기 2017. 5. 25 ... RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여

Amazon Web Services – AI Services Bootcamp Lab guide May 2017

Page 25 of 26

5) 음성으로 변경을 원하시는 원문 텍스트를 구해서 테스트 해보세요.

6) 어플리케이션은 Text 를 입력후 Say it! 으로 변환 작업을 수행하자마자 Post ID 를 반환하는데,

이를 ID 바로 Search 를 통해 검색하시면, 변환작업이 끝나지 않았더라도 어떤 내용의 항목이

처리중(Processing)인지를 확인하실수 있습니다.

7) 만약 여러번의 테스트 이후 DynamoDB 에 저장되어 있는 모든 작업처리 내용들을 불러오려면

( * ) 를 입력하고 Search 버튼을 누르시면 됩니다.

< 테스트 완료화면 >

Page 26: Serverless Text To Speech(TTS) - Amazon Web Services Services... · 웹 어플리케이션 만들기 2017. 5. 25 ... RESTful 웹 서비스는 Amazon API 게이트웨이를 사용하여

Amazon Web Services – AI Services Bootcamp Lab guide May 2017

Page 26 of 26

Learning Tips:

본 실습 초기에 설명된 전체 워크플로우를 염두에 두시고, 설정해 두었던, SNS, Lambda,

DynamoDB, S3 Bucket 을 개별적으로 확인하시면서, 해당 서비스들간의 메시지 흐름을 단계별로

천천히 살펴 보시면 AWS 서비스 기반 Severless 아키텍쳐 구성을 좀 더 잘 학습하실 수 있습니다.

수고하셨습니다!

Polly 를 이용한 Serverless 기반 TTS 웹 어플리케이션 실습을 모두 마치셨습니다.

*본 실습은 AWS AI Blog 에 포스팅된 내용을 손쉽게 따라 하실수 있도록 단계별로 각색되어

만들어졌습니다. (원문링크)