8장 마이크로 서비스로 번역 웹 서비스 만들기

마이크로서비스

소프트웨어를 구축하기 위한 아키텍처
애플리케이션을 상호 독립적인 최소 구성요소로 분할하고, 모든 요소가 독립적이며 동일한 작업을 수행하기 위해 함께 작동

마이크로서비스 특징

1. 편리한 액세스
   하나의 큰 애플리케이션을 더 작은 조각으로 분할하여, 개발자들이 각 조각을 파악하고 업데이트하며 개선하기가 편리 → 에자일 방식과 결합 할 경우 개발 주기 가속화
2. 향상된 개방성
   다중 언어 지원 API를 사용해서, 개발자들은 필요한 기능에 맞는 최적의 언어와 기술을 자유롭게 선택할 수 있다.
3. 간단한 배포
   마이크로서비스 기반 애플리케이션은 전통적인 모놀리식 애플리케이션에 비해 더욱 모듈화되고 규모가 작아져서, 배포에 따르는 우려사항들이 사라졌습니다. 이를 위해서는 더 많은 협업이 필요하지만 몇 배로 향상된 결과를 도출할 수 있습니다.

HTTP 서비스

GET 방식

URI를 통해 데이터를 전달하기 때문에 같은 URI를 전달하면 서버에는 항상 데이터를 같이 전달한다. 쿼리 파라미터를 통해 데이터 전달.

POST 방식

URI 길이 제한, 보안상의 문제로 데이터의 제한 없고, 눈에 보이지 않는 POST 방식을 사용한다.

API 게이트웨이

HTTP 프로토콜을 이용하여 API를 개발자가 손쉽게 구축할 수 있는 완전 관리형 서비스

API 게이트웨이와 데이터베이스 (GET)

실습 아키텍처

인터넷 브라우저 -GET요청→API 게이트웨이 -데이터전달→AWS 람다 -데이터전달→다이나모DB

1. API 게이트웨이용 람다 함수 생성
2. API 게이트웨이용 람다 이벤트 구성
3. 람다 함수 소스코드 작성
4. 다이나모 DB서비스 실행 권한을 위한 IAM 정책 설정
5. 다이나모DB 생성
6. 람다 함수 수정
7. API 게이트웨이 테스트 및 다이나모 DB GET 확인

API 게이트웨이용 람다 함수를 생성합니다

함수 이름을 설정해주고

새 역할을 생성하여 설정해 줍니다. 정책 템플릿은 Lambda@edge를 사용합니다.

다음과 같이 API 게이트웨이를 트리거로 추가해줍니다.

엔드포인트가 생성된 것을 확인할 수 있고, 눌러보면

exports.handler = async (event) => {
    // TODO implement
    const response = {
        statusCode: 200,
        body: JSON.stringify('Hello from Lambda!'),
    };
    return response;
};

이 소스코드로 HTTP Response를 통해 응답 값을 보내고 상태코드를 200으로 전달하는 의미입니다.

지금까지 람다에서 전달해준 데이터를 API게이트웨이를 통해 HTTP프로토콜 GET방식 데이터로 전달받았습니다.

exports.handler = async (event) => {
    // TODO implement
    const response = {
        statusCode: 200,
        body: JSON.stringify(event.queryStringParameters),
    };
    return response;
};

소스코드를 이와 같이 변경 후 엔드포인트 접속을 해보겠습니다.

접속해보면 아무 내용이 나타나지 않습니다. get 파라미터를 지정하지 않았기 때문에 서버로 표시될 내용이 없기 때문입니다.

브라우저 주소창 끝에 ?text=hello를 추가해보면

이와 같이 키와 인자가 표시되는 것을 확인할 수 있습니다.

인자를 더 추가할 수도 있습니다.

이 역할에 대한 정책을 생성하겠습니다.

이와 같이 설정하고 정책을 생성합니다.

역할에 정책을 연결하여 람다함수가 다이나모 db에 접근 할 수 있게 되었습니다.

다이나모db 테이블을 생성해줍니다.

람다함수의 코드를 다음과 같이 입력했습니다.

const AWS = require('aws-sdk')
const dynamodb = new AWS.DynamoDB.DocumentClient()
exports.hander = async (event) => {
    let response
    if (!event.queryStringParameters || !event.queryStringParameters.id){
        response = {
            statusCode: 400,
            body:JSON.stringify("id가 없습니다."),
        }
        return response
    } else {
        let params = {
            Item:{
                id:event.queryStringParameters.id,
                data: event.queryStringParameters
            },
            TableName: "dynamo_apigateway_query",
        }
        await dynamodb.put(params).promise().catch(e => {
            response = {
                statusCode: 500,
                body: JSON.stringify("에러가 발생하였습니다:" + e),
            }
            return response
        })

        response = {
            statusCode: 200,
            body: JSON.stringify("데이터가 성공적으로 저장되었습니다.."),
        }
        return response
    }
}

queryStringParameter를 인자로 받아 다이나모DB에 저장하고 GET데이터나 ID값이 없다면 400, 저장하는데 문제가 있다면 500, 성공적으로 데이터를 넣었다면 200코드를 반환하는 소스코드 입니다.

마이크로서비스 기반 번역 웹 서비스 (POST)

실습 아키텍처

실습 요약

1. 번역 API 게이트웨이용 람다 함수 생성
2. 람다 함수 소스코드 작성
3. 람다 함수 역할 수정
4. 람다 API 게이트웨이 설정
5. index.html 파일 수정 및 s3 버킷 생성
6. s3 버킷에 수정파일 업로드
7. 번역 서비스 정적 웹 사이트 설정 및 테스트

람다 함수를 만들고, 역할 또한 생성해줍니다.

소스코드를 작성하였습니다.

/* AWS SDK 를 가져옵니다.*/
var AWS = require('aws-sdk');

AWS.config.update({region: 'us-east-1'});

var translate = new AWS.Translate();
exports.handler = function(event, context,callback){

console.log(JSON.stringify(event.body));

const response = JSON.parse(event.body)

  //event.body로 POST로 받은 데이터를 받습니다.
  try{
    const translateParams = {
    SourceLanguageCode: 'ko',
    TargetLanguageCode: 'en',
    Text: response.text
  }

  //translate SDK를 불러옵니다.
  translate.translateText(translateParams, function (err, data) {
    if (err) callback(err)
    callback(null,{
        statusCode:200,
        headers: {
        "Access-Control-Allow-Origin" : "*", //S3에서 요청을 할 수 있도록 허용해줍니다.
        "Access-Control-Allow-Credentials" : true
        },
        body:data.TranslatedText
    })
  })
  }catch(e){
    callback(null,{
      statusCode:200,
      body:JSON.stringify(e)
    })
  }

};

이는 POST형식으로 전달한 데이터를 translate 서비스를 통해 번역 후 리턴한 코드 입니다.

이제 역할에 정책을 추가해주는데, 새로운 권한을 만드는 것이 아닌 기존에 있는 TranslateFullAccess를 검색하여 추가해줍니다.

API 게이트웨이를 트리거로 추가해줍니다.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>번역웹사이트</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col align-self-center">
                <h5 id="resultText"></h5>
                <form action="javascript:void(0)">
                    <div class="form-group">
                        <label>텍스트를 입력해주세요.</label>
                        <textarea class="form-control" id="textInput" rows="3"></textarea>
                    </div>
                    <button onclick="sendReqeust()" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>

</body>
<script type="text/javascript">
    var inputSelector = document.querySelector('#textInput');
    var resultText = document.querySelector('#resultText');

    function sendReqeust() {
        resultText.innerHTML = "로딩중..."
        fetch("https://owgl4sw5re.execute-api.us-east-1.amazonaws.com/default/lambda_for_translate_service", {
            method: "POST",
            body: JSON.stringify({
                text: inputSelector.value
            })
        }).then(function (response) {
            return response.text().then(function (text) {
                resultText.innerHTML = text;
            });
        })
    }
</script>

</html>

fetch 안에 API 게이트웨이의 엔드포인트를 추가하여 다음과 같은 html 파일을 작성했습니다.

S3를 통해 홈페이지를 호스팅 하기 위해 S3 버킷을 생성합니다.

생성한 버킷에 해당 index.html을 추가해줍니다.

속성으로 가서 정적 웹 사이트 호스팅을 활성화 하고 인덱스 파일을 지정합니다.

설정이 끝나면 엔드포인트가 생성됩니다.

하지만 여기에 접속하면 다음과 같이 접속이 제한되어 있습니다.

버킷 정책도 설정해줘야 합니다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::wantranslate-bucket/*"
        }
    ]
}

밑에 wanfreelancer 부분은 자신의 버킷 이름에 맞게 바꿔주시면 됩니다.

그 후에 다시 엔드포인트를 접속하면

정상적으로 작동하는 것을 확인할 수 있습니다.