AWS 시작하기

기본 웹 애플리케이션 구축

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

모듈 1: 웹 앱 만들기

이 모듈에서는 AWS Amplify 콘솔을 사용하여 웹 애플리케이션을 위한 정적 리소스를 배포합니다.

소개

이 모듈에서는 AWS Amplify 콘솔을 사용하여 웹 애플리케이션을 위한 정적 리소스를 배포합니다. 후속 모듈에서는 AWS Lambda 및 Amazon API Gateway를 사용하여, 원격 RESTful API를 호출하는 동적 기능을 이러한 페이지에 추가해 보겠습니다. REST는 ‘Representational State Transfer’를 의미하며, 웹 서비스를 생성하기 위한 아키텍처 패턴입니다. API는 애플리케이션 프로그램 인터페이스를 의미합니다. 따라서 RESTful API는 아키텍처 패턴을 구현합니다.

HTML, CSS, JavaScript, 이미지, 기타 파일을 비롯한 모든 정적 웹 콘텐츠는 AWS Amplify에서 호스팅합니다. 정적 웹 사이트를 손쉽게 호스팅하고 배포할 수 있기 때문에 Amplify를 선택했습니다. 최종 사용자는 Amplify에 표시된 URL을 사용하여 해당 사이트에 액세스합니다.

새로운 서비스를 많이 사용하는 데 부담을 느낄 필요는 없습니다. 웹 사이트를 운영하기 위해 다른 AWS 서비스를 바로 사용할 필요도 없고 웹 서버를 실행할 필요도 없습니다(여기서 ‘서버’란 네트워크를 통해 전송되는 요청을 수신하고 응답하는 소프트웨어 또는 하드웨어 디바이스).

이 웹 사이트는 매우 간단한 "Hello World" 페이지로, 나중에 다른 모듈에서 기능을 추가하게 됩니다.

대부분의 실제 애플리케이션의 경우 사용자 지정 도메인을 사용하여 사이트를 호스트합니다. "사용자 지정 도메인"은 www.amazon.com과 같이 웹 사이트를 식별하는 고유한 브랜드 이름입니다. 관심 있는 고객을 위해 Amplify는 사용자 지정 도메인도 지원합니다.

배우게 될 내용

  • Amplify 앱을 만드는 방법
  • 웹 사이트의 파일을 Amplify에 직접 업로드하는 방법
  • Amplify를 사용하여 웹 페이지의 새 버전을 배포하는 방법

주요 개념

정적 웹 사이트 정적 웹 사이트는 동적 웹 사이트와 달리 콘텐츠가 고정되어 있습니다. 정적 웹 사이트는 가장 기본적인 유형의 웹 사이트로, 만들기가 가장 쉽습니다. HTML 페이지를 몇 개 만들어 웹 서버에 게시하기만 하면 됩니다.

웹 호스팅 웹 사이트를 인터넷에서 볼 수 있도록 만드는 데 필요한 기술/서비스를 제공합니다.

AWS 리전 AWS가 인프라를 구축하는 데 사용하는 분리된 지리적 영역입니다. 전 세계에 분산되어 있으므로 고객이 가장 가까운 리전을 선택하여 클라우드 인프라를 호스팅할 수 있습니다.

 완료 시간

5분

 사용되는 서비스

 모듈 선행 조건

구현

  • Amplify 콘솔을 사용하여 웹 앱 만들기
    1. 컴퓨터에서 자주 사용하는 텍스트 편집기를 엽니다. 새 파일을 생성하여 다음 HTML을 해당 파일에 붙여 넣습니다.
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    
    <body>
        Hello World
    </body>
    </html>

    2. 파일을 index.html저장합니다.

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

    4. 새 브라우저 창에서 Amplify 콘솔에 로그인합니다. 참고: 이 자습서에서는 오레곤(us-west-2) 리전을 사용합니다.

    5. Deploy(배포)에서 [주황색 시작하기(Get Started)] 버튼을 클릭합니다.

    6. [Git 공급자 없이 배포(Deploy without Git provider)]를 선택합니다. 화면에 다음과 같이 표시됩니다.

    full-stack amplify console module one AmplifyAppSetup

    7. 주황색 [계속(Continue)] 버튼을 클릭합니다.

    8. [앱 이름(App Name)] 필드에 GettingStarted를 입력합니다.

    9. [환경 이름(Environment name)]에 dev를 입력합니다.

    10. [끌어서 놓기(Drag and drop)] 방법을 선택합니다. 화면에 다음과 같이 표시됩니다.

    full-stack amplify console module one AmplifyManualDeploy

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

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

    13. 주황색 [저장하고 배포(Save and deploy)] 버튼을 클릭합니다.

    14. 몇 초 후에 배포가 완료되었습니다(Deployment successfully completed)라는 메시지가 나타납니다.

  • 웹 앱 테스트
    1. [도메인(Domain)]의 링크를 클릭합니다.
    2. 새 브라우저 탭에 웹 앱이 로드되고 "Hello World"가 렌더링됩니다. 축하합니다!

애플리케이션 아키텍처

현재 아키텍처의 모습은 다음과 같습니다.

full-stack amplify console arch diagram module 1

AWS Amplify 콘솔만 사용하므로 아직 최소한의 기능만 있는 상태입니다. 이제 사용자가 상호 작용할 수 있는 라이브 웹 앱이 완성되었습니다. 다음으로 Lambda 함수를 생성하겠습니다.

이 모듈이 유용했습니까?

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

서버리스 함수 작성