AWS 시작하기

기본 웹 애플리케이션 구축

API와 데이터베이스로 웹 애플리케이션 배포 및 상호 작용 기능 추가

모듈 5: 웹 앱에 상호 작용 기능 추가

이 모듈에서는 API를 호출하고 입력된 사용자 지정 텍스트를 표시하도록 정적 웹 사이트를 수정합니다.

소개

이 모듈에서는 모듈 1에서 생성한 정적 웹 사이트를 업데이트하여 모듈 3에서 생성한 REST API를 호출하도록 설정합니다. 이렇게 하면 사용자가 입력한 텍스트를 표시하는 기능이 추가됩니다.

배우게 될 내용

  • HTML 페이지에서 API Gateway API 호출
  • Amplify 콘솔에 웹 앱의 새 버전 업로드

주요 개념

웹 사이트에 배포 사용자가 웹 사이트를 사용할 수 있도록 합니다.

환경 애플리케이션 또는 웹 사이트를 실행할 때 거치게 되는 "prod," "dev", "staging" 등의 단계입니다.

API 호출 API에 이벤트를 전송하여 특정 동작을 트리거합니다.

 완료 시간

5분

 사용되는 서비스

구현

  • Amplify 콘솔을 사용하여 웹 앱 업데이트
    1. 모듈 1에서 생성한 index.html 파일을 엽니다.
    2. 기존 코드를 다음으로 바꿉니다.
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
        <!-- Add some CSS to change client UI -->
        <style>
        body {
            background-color: #232F3E;
            }
        label, button {
            color: #FF9900;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
            margin-left: 40px;
            }
         input {
            color: #232F3E;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
            margin-left: 20px;
            }
        </style>
        <script>
            // define the callAPI function that takes a first name and last name as parameters
            var callAPI = (firstName,lastName)=>{
                // instantiate a headers object
                var myHeaders = new Headers();
                // add content type header to object
                myHeaders.append("Content-Type", "application/json");
                // using built in JSON utility package turn object to string and store in a variable
                var raw = JSON.stringify({"firstName":firstName,"lastName":lastName});
                // create a JSON object with parameters for API call and store in a variable
                var requestOptions = {
                    method: 'POST',
                    headers: myHeaders,
                    body: raw,
                    redirect: 'follow'
                };
                // make API call with parameters and use promises to get response
                fetch("YOUR-API-INVOKE-URL", requestOptions)
                .then(response => response.text())
                .then(result => alert(JSON.parse(result).body))
                .catch(error => console.log('error', error));
            }
        </script>
    </head>
    <body>
        <form>
            <label>First Name :</label>
            <input type="text" id="fName">
            <label>Last Name :</label>
            <input type="text" id="lName">
            <!-- set button onClick method to call function we defined passing input values as parameters -->
            <button type="button" onclick="callAPI(document.getElementById('fName').value,document.getElementById('lName').value)">Call API</button>
        </form>
    </body>
    </html>

    3. 41행에 모듈 3의 API 호출 URL을 추가합니다. 참고: API의 URL이 없는 경우 API Gateway 콘솔에서 API를 클릭한 후 [단계]에서 확인할 수 있습니다.

    4. 파일을 저장합니다.

    5. HTML 파일만 ZIP(압축)합니다.

    6. Amplify 콘솔을 엽니다.

    7. 모듈 1에서 생성한 웹 앱을 클릭합니다.

    8. 흰색 [파일 선택(Choose files)] 버튼을 클릭합니다.

    9. 5단계에서 생성한 ZIP 파일을 선택합니다.

    10. 파일이 업로드되면 배포 프로세스가 자동으로 시작됩니다. 녹색 표시줄이 표시되면 배포가 완료됩니다.

  • 업데이트된 웹 앱 테스트
    1. [도메인(Domain)]의 URL을 클릭합니다.
    2. 업데이트된 웹 앱이 브라우저에 로드됩니다.
    3. 본인의 이름(또는 원하는 이름)을 입력하고 [API 호출] 버튼을 클릭합니다.
    4. "Hello from Lambda"로 시작하고 그 뒤에 사용자가 입력한 텍스트가 있는 메시지가 표시됩니다.
    5. 축하합니다. 이제 API Gateway를 통해 Lambda 함수를 호출할 수 있는 잘 작동하는 웹 앱이 Amplify 콘솔에서 구축되었습니다!

애플리케이션 아키텍처

이제 모듈을 모두 완료했으므로, 구축한 아키텍처를 살펴보겠습니다.

full-stack amplify console arch diagram module 5

설정한 모든 AWS 서비스가 서로 안전하게 통신할 수 있습니다. 사용자가 웹 앱에서 버튼을 클릭하면 API가 호출되고 결과적으로 Lambda 함수가 트리거됩니다. Lambda 함수는 API Gateway를 통해 데이터베이스에 데이터를 쓰고 클라이언트에 메시지를 반환합니다. 모든 권한은 IAM에서 관리됩니다.

이 모듈이 유용했습니까?

감사합니다.
좋아하는 사항을 알려주세요.
실망을 드려 죄송합니다.
오래되었거나 혼란스럽거나 부정확한 사항이 있습니까? 피드백을 제공하여 이 자습서를 개선할 수 있도록 도와주십시오.

축하합니다!

AWS에서 웹 애플리케이션을 구축했습니다. 다음 단계로, 서버리스 및 데이터베이스에 대해 자세히 알아보고 AWS 클라우드 관련 지식을 더욱 쌓으십시오.