Ga0Lee

[Basic Web Application 구축하기(1)] - AWS Amplify 정적 리소스 배포 본문

AWS/Basic Web Application 구축하기

[Basic Web Application 구축하기(1)] - AWS Amplify 정적 리소스 배포

가영리 2023. 11. 15. 15:11

Application Architecture

출처 : https://aws.amazon.com/ko/getting-started/hands-on/build-web-app-s3-lambda-api-gateway-dynamodb/

 

사용하는 서비스

 

Web App 만들기

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

HTML, CSS, JavaScript, 이미지, 기타 파일을 비롯한 모든 정적 웹 콘텐츠는 AWS Ampliry에서 호스팅한다.

최종 사용자는 Amplify에 표시된 URL을 사용하여 해당 사이트에 액세스한다.

1. Amplify 콘솔을 사용한 웹 앱 만들기

1.1 vscode(다른 텍스트 편집기 가능)를 열어 index.html을 작성한다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>

<body>
    Hello World
</body>
</html>

 

1.2 Amplify 콘솔로 이동

 

1.3 리전을 오레곤(us-west-2)로 변경

 

1.4 웹 앱 호스팅 시작하기

1.5 Git 공급자 없이 배포 선택

 

1.6 앱 이름과 환경 이름을 설정

 

1.7 아까 작성한 index.html을 ZIP 파일로 압축

 

1.8 드래그 앤 드롭을 선택하고 index.zip 파일 업로드

 

1.9 모든 작성이 끝났으면 저장 및 배포 선택

 

1.10 배포 완료

 

 

2. 웹 앱 테스트

2.1 도메인 URL복사

 

2.3 브라우저에 URL입력하여 Hello World가 잘 나오는지 확인

 

현재 아키텍처의 모습

저작자표시

'AWS > Basic Web Application 구축하기' 카테고리의 다른 글

[Basic Web Application 구축하기(4)] - 데이터 테이블 생성, DynamoDB, IAM  (0) 2023.11.16
[Basic Web Application 구축하기(3)] - 웹 앱에서 서버리스 함수 연결  (2) 2023.11.16
[Basic Web Application 구축하기(2)] - AWS Lambda 함수 생성  (0) 2023.11.15
'AWS/Basic Web Application 구축하기' Related Articles more