기본 웹 애플리케이션 구축

자습서

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

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

개요

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

학습 목표

이 모듈에서는 다음을 수행합니다.
  • HTML 페이지에서 API Gateway API를 직접적으로 호출
  • Amplify 콘솔에 웹 앱의 새 버전 업로드

주요 개념

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

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

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

 최소 소요 시간

5분

 사용 서비스

 최종 업데이트 날짜

2023년 4월 4일

구현

    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. 흰색 파일 선택 버튼을 선택합니다.

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

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

    1. 도메인 아래에서 URL을 선택합니다.
    2. 업데이트된 웹 앱이 브라우저에 로드됩니다.
    3. 사용자 이름(또는 원하는 이름)을 입력하고 API 호출 버튼을 선택합니다.
    4. Hello from Lambda로 시작하고 그 뒤에 사용자가 입력한 텍스트가 있는 메시지가 표시됩니다.
     
    축하합니다! 이제 API Gateway를 통해 Lambda 함수를 직접적으로 호출할 수 있는 잘 작동하는 웹 앱이 Amplify 콘솔에 배포되었습니다!

애플리케이션 아키텍처

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

AWS 클라우드에 호스팅된 서비스를 보여 주는 아키텍처 다이어그램으로, 외부 사용자로부터 상호 연결된 AWS 서비스로의 연결을 보여 줍니다.

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

축하합니다!

AWS에서 웹 애플리케이션을 구축했습니다. 다음 모듈에서는 계정에 원치 않는 요금이 청구되지 않도록 이 자습서에서 사용되는 리소스들을 정리할 예정입니다.

이 페이지의 내용이 도움이 되었나요?

리소스 정리