할 건 많은데 페이지도 띄워야된다면, AWS Amplify로 웹 페이지 호스팅

김재만·2022년 7월 1일
0

사내 프로젝트의 웹 프론트 파트를 담당하여 개발하니, 생각보다 세팅하는데 많은 자원이 들어간다. 덕분에 처음 계획한 것과 달라진 것이 많다. 자원의 투입을 줄이고 효율을 높이는 방향성을 우선시 하게 된다. 웹 페이지 호스팅 역시 예외는 아니다.

AWS Amplify

아마존에서 서비스하는 클라우드 컴퓨팅 서비스다. 웹 프론트엔드 호스팅과 웹 모바일 풀스택 배포를 위해 사용할 수 있다.

기존 프로젝트에서는 웹 프론트엔드 호스팅을 위하여 여러가지 서비스의 기술을 조합하여 활용했다. AWS S3를 활용하여 정적 자원들을 저장, 배포하고 AWS Route53을 활용하여 구매한 도메인 값을 배포한 페이지로 라우팅 처리하며, AWS CloudFront를 활용하여 페이지 접근의 지역적 차이를 극복(CDN)하고 깃 저장소의 변화를 자동으로 반영(CI/CD)하도록 했다.

하나의 페이지를 띄우기 위해서 3가지 서비스의 4가지 기능을 활용해야 했다.

하지만 AWS Amplify는 한 가지만 빼고, 혼자서 다 할 수 있다. 라우팅은 Route53의 도움이 필요하다. 나머지는 Amplify에 페이지를 호스팅하기만 하면, 자동으로 S3에 업로드-배포되고, 그 자원들이 CloudFront에도 업로드 되며, CDN과 CI/CD까지 설정해준다.

클라우드 컴퓨팅

클라우드 컴퓨팅은 사용자의 직접적 관리 없이, 저장소나 성능이 보장된 컴퓨터 환경을 제공하는 서비스를 말한다. 선행 투자 비용을 줄이고, 서비스 개발의 지연을 줄일 수 있다.

다만, 일반적으로 종량제(Pay as You Go)의 비즈니스모델을 채택하므로, 가격 모델을 파악하여 최적화할 필요가 있다.

웹 페이지를 다른 사람들에게 보여주기 위해서는 웹의 주소를 확보하고, 해당 주소로 접근하는 통신에 대해 페이지 정보를 보여줄 컴퓨터가 작동하고 있어야 한다. 서버용 컴퓨터를 두고 자체적으로 운용할 수 있지만, 빠른 개발과 확장이 필요한 환경에서는 클라우드 컴퓨팅 서비스인 AWS, Firebase 등을 많이 활용한다.

클라우드 스토리지

클라우드 스토리지는 데이터 스토리지를 서비스로서 관리하고 운영하는 클라우드 컴퓨팅 공급자를 통해 데이터를 인터넷에 저장하는 클라우드 컴퓨팅 모델입니다. JIT(Just-In-Time) 용량 및 비용이 온디맨드로 제공되며 자체 데이터 스토리지 인프라를 구매하거나 관리할 필요가 없습니다. 따라서 '언제 어디서든' 데이터에 액세스할 수 있는 민첩성, 세계적 규모 및 안정성을 제공합니다.

CDN(Content Delivery Network)

CDN(콘텐츠 전송 네트워크)은 지리적으로 분산된 여러 개의 서버다. 웹 콘텐츠를 사용자와 가까운 곳에서 전송함으로써 전송 속도를 높인다. 전 세계 데이터센터는 파일 복사본을 임시로 저장하는 프로세스인 캐싱을 사용한다. 따라서 사용자는 가까운 서버를 통해 웹 활성화 디바이스 또는 브라우저에서 인터넷 콘텐츠에 빠르게 접속할 수 있다. CDN은 웹 페이지, 이미지, 비디오 등의 콘텐츠를 사용자의 물리적 위치와 가까운 프록시 서버에 캐싱한다. 이렇게 하면 콘텐츠가 로딩될 때까지 기다릴 필요 없이 영화 감상, 소프트웨어 다운로드, 은행 잔고 확인, 소셜 미디어 포스팅, 구매 등의 작업을 할 수 있다.

AWS Amplify로 호스팅하기

  1. Amplify 콘솔 로그인

  2. 웹 앱 호스팅 생성

  3. 코드를 가져올 저장소를 선택

    당연히 깃헙이 아니어도 된다!

  4. 저장소로부터 접근 권한 허가받기

  1. 해당 깃에서 코드 가져올 레퍼지토리 선택하기

브랜치도 선택할 수 있다. 예를 들면 main(혹은 master)로 배포페이지, develop브랜치로 개발자용 페이지 배포할 수도 있다.

  1. 페이지 호스팅 하기

빌드 결과만 기다리면 된다!


이러면 배포, CI/CD, CDN까지는 완료!

AWS Amplify 라우팅처리

라우팅처리는 아주 조금 복잡하지만, 차례대로 쫓아만가면 쉽게 설정할 수 있다.

  1. 도메인 관리 - 도메인 추가

  1. 도메인 선택

만약 루트도메인으로 바로 연결한다면 도메인을 선택해서 저장을 누르면 된다.

아래는 서브도메인을 생성, 연결하는 방법이다.

이미 루트도메인이 사용중인 경우 루트 제외를 활성화 시켜야 한다.

저장을 누르면 인증서를 생성하고 도메인을 활성화하기 시작한다.

  1. DNS 설정

    DNS레코드를 확인하고 도메인 발급처에 설정해줘야한다.







어디서 정보 유출될 지 몰라서 이렇게 캡쳐함..귀찮

회사 서비스는 가비아를 통해 도메인을 구입하였으므로, 가비아에서 설정해주었다.

  1. 기다림

마무리

언젠간 바꿔야겠지만 일단은 해결!

참고문서

위키백과 - 클라우드 컴퓨팅
AWS - 클라우드 스토리지란 무엇입니까?
Akamai - CDN이란 무엇인가요?

profile
듣는 것을 좋아하는 개발자입니다

2개의 댓글

comment-user-thumbnail
2023년 2월 13일

혹시 3번에서 CNAME 등록하고 얼마나 기다리셨나요? ㅠㅠ 자고일어났는데도 도메인활성화에서 넘어가지지않네요....

1개의 답글

관련 채용 정보