동적 양식을 서버리스로 제공하도록 웹 애플리케이션을 어떻게 재설계했습니까?

이 사용 사례는 대부분의 웹사이트에서 "문의하기"또는 "피드백"섹션에 유용합니다. 전체 웹 사이트를 웹 서버에서 실행하고 DB를 지원하는 대신 제안된 아키텍처는 실제로 서버를 관리하지 않고도 동일한 기능을 수행하는 데 도움이 됩니다.

일반적으로 웹 포트폴리오가 있는 웹 응용 프로그램의 기존 설정을 변경한 방법에 대해 설명하고 싶습니다. 웹 사이트에는 상당히 정적인 콘텐츠가 있으며 누군가가 연락할 때 연락처 양식 데이터를 데이터베이스로 푸시하는 본질적으로 더 동적인 양식 데이터만 있습니다.

이것이 현재 아키텍처입니다.



여기에는 두 가지 문제가 있습니다.

양식 데이터를 제외한 내용은 모두 정적이지만 양식 데이터를 처리해야 하므로 서버에 있어야 합니다. 내 웹 포트폴리오:





서버는 항상 실행 중이므로 정적 콘텐츠나 제한된 형식의 데이터만 제공하더라도 결국 서버 비용을 지불하게 됩니다.

해결책:

처리해야 할 양식 데이터만 있는 경우 위 솔루션을 아래와 같이 변경할 수 있으며 여전히 동일한 기능을 수행하지만 서버는 없습니다. 제안된 아키텍처:



솔루션은 다음 단계를 통해 달성됩니다.

S3에서 정적 콘텐츠를 호스팅합니다.
API 게이트웨이 만들기
API 게이트웨이(json 데이터)에서 양식 데이터를 가져올 Lambda 생성
json 데이터를 사용하여 이메일을 보내거나
json 데이터를 Dynamo DB로 푸시합니다.
구현:

이 구현에서는 5를 구현하는 것이 SES를 보내는 것과 상당히 유사하기 때문에 1에서 4까지에 대해 설명하겠습니다.

S3에서 정적 웹 사이트 호스팅. 이것은 간단합니다. AWS의 문서에는 호스팅 방법이 매우 명확합니다.

https://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html

여기서는 양식 데이터를 처리하고 API 게이트웨이로 전송하기 위해 다음 자바 스크립트를 포함하도록 내 연락처 페이지 HTML을 조정해야 했습니다. SendtoAPI는 웹 페이지에서 보내기 버튼을 클릭했을 때 실제로 트리거되는 기능입니다.

<script>
    function sendToAPI(e) {
    e.preventDefault();
    var URL = "<API Gateway URL here > ";

    var email = document.getElementById("email").value;
    var subject = document.getElementById("subject").value;
    var body = document.getElementById("body").value;
    if (email=="" || subject =="" ||body=="" )
    {
    alert("Please Fill All Required Field");
    return false;
    }

    var data = {
    email : email,
    subject : subject,
    body : body,

    };


    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("<API Gateway URL here >");
    xmlhttp.setRequestHeader("Content-Type", "application/json");
    xmlhttp.send(JSON.stringify(data));
    xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState === 4) {
    var response = JSON.parse(xmlhttp.responseText);
    if (xmlhttp.status === 200 ) {
    console.log('successful');
    document.getElementById("contact-form").innerHTML = "<h1>Thank you for your message <br> I will get back to you soon!</h1>";
    } else {
    console.log('failed');
    }
    }
    }

    document.getElementById('contact-form').reset();

연락처 페이지 html :

<div class="col-md-7">
    <div class="form-group">
    <input name="email" type="email" class="form-control" id="email" placeholder="Email">
    </div>
    <div class="form-group">
    <input name="subject" type="text" class="form-control" id="subject" placeholder="Subject">
    </div>
    <div class="form-group">
    <textarea name="textmessage" class="form-control" rows="5" " id="body" placeholder="Enter your message"></textarea>
    </div>
    <button type="submit" onClick​="sendToAPI(event)" class="btn btn-default btn-lg">Send</button>
    </div>

Lambda 함수 생성:

이 Lambda는 nodejs 런타임에서 실행됩니다. SES에서 이메일을 확인해야 합니다. 그렇지 않으면 이메일 확인 오류가 발생합니다.

var AWS = require('aws-sdk');
var ses = new AWS.SES();

var RECEIVER = 'email@address';
var SENDER = 'email@address';


var response = {
 "isBase64Encoded": false,
 "headers": { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*'},
 "statusCode": 200,
 "body": "{\"result\": \"Success.\"}"
 };


exports.handler = function (event, context) {
    console.log('Received event:', event);
    sendEmail(event, function (err, data) {
        context.done(err, null);
    });
};

function sendEmail (event, done) {
    var params = {
        Destination: {
            ToAddresses: [
                RECEIVER
            ]
        },
        Message: {
            Body: {
                Text: {
                    Data: 'email ' + event.email + '\n subject ' + event.subject+ '\n body ' + event.body ,
                    Charset: 'UTF-8'
                }
            },
            Subject: {
                Data: 'Someone contacted you on your contact form ' + event.name,
                Charset: 'UTF-8'
            }
        },
        Source: SENDER
    };
    ses.sendEmail(params, done);

API 게이트웨이:

API와 Lambda는 밀접한 관련이 있습니다. 람다를 트리거하기 위해 API 게이트웨이를 통합하는 것은 모든 서버리스 구현의 핵심입니다. API 게이트웨이에서 CORS를 활성화해야 합니다. 그렇지 않으면 데이터가 API 게이트웨이에 도달할 수 없고 API를 배포할 수 없습니다.



모든 것을 통합:

모든 것이 올바른 방식으로 설정되면 연락처 페이지에 콘텐츠를 넣을 때 콘텐츠가 API 게이트웨이로 전달되어 Lambda를 트리거하고 확인된 이메일에 모든 콘텐츠를 이메일로 보냅니다.



보내기를 클릭하면 다른 HTML 페이지가 반환되고 동일한 내용이 이메일로 전송됩니다.



이메일:



세부 정보를 저장해야 하는 경우 뒤쪽에서 DynamoDB에 콘텐츠를 게시하도록 유사한 흐름을 리디렉션할 수 있습니다. 그러나 이제 모든 것이 완전 관리형 및 서버리스로 실행됩니다.

GitHub 링크:

https://github.com/durga533/serverless

참조:

https://aws.amazon.com/blogs/architecture/create-dynamic-contact-forms-for-s3-static-websites-using-aws-lambda-amazon-api-gateway-and-amazon-ses/