기본 웹 애플리케이션 구축
자습서
모듈 5: 웹 앱에 상호 작용 기능 추가
이 모듈에서는 API를 간접적으로 호출하고 사용자 지정 텍스트를 표시하도록 정적 웹 사이트를 수정합니다.
개요
이 모듈에서는 모듈 1에서 생성한 정적 웹 사이트를 업데이트하여 모듈 3에서 생성한 REST API를 간접적으로 호출하도록 설정합니다. 이렇게 하면 사용자가 입력한 텍스트를 표시하는 기능이 추가됩니다.
학습 목표
- HTML 페이지에서 API Gateway API를 직접적으로 호출
- Amplify 콘솔에 웹 앱의 새 버전 업로드
주요 개념
웹 사이트에 배포 - 사용자가 웹 사이트를 사용할 수 있도록 합니다.
환경 - 애플리케이션 또는 웹 사이트를 실행할 때 거치게 되는 ‘prod’, ‘dev’, ‘staging’ 등의 단계입니다.
API 간접 호출 - API에 이벤트를 전송하여 특정 동작을 트리거합니다.
구현
-
Amplify 콘솔을 사용하여 웹 앱 업데이트
- 모듈 1에서 생성한 index.html 파일을 엽니다.
- 기존 코드를 다음으로 바꿉니다.
<!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에서 생성한 index.html 파일을 엽니다.
-
업데이트된 웹 앱 테스트
- 도메인 아래에서 URL을 선택합니다.
- 업데이트된 웹 앱이 브라우저에 로드됩니다.
- 사용자 이름(또는 원하는 이름)을 입력하고 API 호출 버튼을 선택합니다.
- Hello from Lambda로 시작하고 그 뒤에 사용자가 입력한 텍스트가 있는 메시지가 표시됩니다.
축하합니다! 이제 API Gateway를 통해 Lambda 함수를 직접적으로 호출할 수 있는 잘 작동하는 웹 앱이 Amplify 콘솔에 배포되었습니다!
애플리케이션 아키텍처
이제 모듈을 모두 완료했으므로, 구축한 아키텍처를 살펴보겠습니다.
설정한 모든 AWS 서비스가 서로 안전하게 통신할 수 있습니다. 사용자가 웹 앱에서 버튼을 선택하면 API가 직접적으로 호출되고 Lambda 함수가 트리거됩니다. Lambda 함수는 API Gateway를 통해 데이터베이스에 데이터를 쓰고 클라이언트에 메시지를 반환합니다. IAM은 모든 권한을 관리합니다.
축하합니다!
AWS에서 웹 애플리케이션을 구축했습니다. 다음 모듈에서는 계정에 원치 않는 요금이 청구되지 않도록 이 자습서에서 사용되는 리소스들을 정리할 예정입니다.