SPA 웹을 클라우드에 배포와 도메인 연결까지 해주는툴
SWS Console
AWS 클라우드에 SPA(React.js, Vue.js, Angular.js 등등)을 배포하려면 아래와 같이 여러가지 옵션이 있다.
첫번째로 EC2에 Nginx 또는 로컬 Node 서버를 띄워서 SPA 프로젝트의 빌드 결과물인 index.html과 bundle.js를 서빙하는 방법
→ 첫번째 방법을 위해선 먼저 EC2 인스턴스를 생성하고 node 환경세팅 OR SPA 빌드 파일을 EC2에 올린 다음 Nginx 또는 아파치 서버를 세팅해서 SPA 빌드 결과물의 index.html을 서빙하도록 한 후 ALB 또는 Elastic Ip에 연결하여 호스팅 해야하는 등의 과정이 있다.
두번째로 SPA 프로젝트를 도커라이징해서 AWS ECR에 업로드하고 AWS ECS에 세팅한 다음 ALB를 통해 호스팅하는 방법
→ 두번째 방법을 위해선 SPA 프로젝트의 도커 빌드에 대한 학습 및 AWS ECR에 업로드하는 스크립트 세팅, ECS에 ECR에 있는 도커 이미지를 실행시키고 ALB 생성 이후에 타겟 그룹을 ECS로 가도록 설정해야하는 등의 과정이 있다.
세번째로 S3 버킷에 SPA 빌드 결과물들을 올린 다음 정적 웹 호스팅을 하고 Cloudfront 호스팅하는 방법
→ 세번째 방법을 위해선 SPA 빌드 결과물(index.html, bundle.js 가 포함된 폴더 내 모든 파일들)을 S3에 업로드하고 S3 버킷에 정적 웹 호스팅 설정을 한 후 Cloudfront에 S3 버킷 엔드포인트를 연결해줘야하는 등의 과정이 있다.
왜 세번째 방법을 선택해야할까? 이유는 아래와 같다.
첫번째 방법은 EC2 인스턴스는 떠있는 시간만큼 과금이 진행되기 때문에 한달 유지 비용이 들기 때문에 비싸다. 또한 EC2는 직접 인스턴스를 관리해줘야한다.
두번째 방법 역시 ECS가 떠있는 시간 만큼 과금이 진행되기 때문에 한달 유지 비용이 들기 때문에 비싸다.
반면 세번째 방법은 S3 비용은 저장당 GB 비용이라서 비용이 거의 안나온다고 보면되고, 트래픽이 정말 많이 일어나는 사이트가 아니라면 Cloudfront 역시 비용이 매우 낮게 든다.
자 이제 세번째 방법을 선택했다면 먼저 배포할 프로젝트인 SWS의 메인 페이지 Steve Web Service 의 프로젝트를 에디터로 열어보겠다.
위 프로젝트는 React.js로 구현되어있는 SPA 프로젝트이다. 위 프로젝트에서 빌드 스크립트를 실행(위 예제에선 npm run build 실행)하면 build 폴더가 생기는데, 그 빌드 폴더를 zip 파일로 압축시킨다.
그 다음 SWS Console에 들어가서 AWS Frontend DMS에 들어간 다음 Project Name을 입력하고 압축한 build 폴더의 zip 파일을 업로드한 다음 Create Project를 누르면 5분만에 S3 정적 웹호스팅부터 Cloudfront까지 한번에 세팅된다.
생성된 프로젝트의 디테일 화면으로 들어가보게 되면 Cloud Front Domain이 있는데, 클릭해서 이동해보면 정상적으로 페이지가 잘 뜨는 것을 알 수 있다. 너무 쉽지 않은가?
SWS AWS Frontend DMS 프로젝트 생성 방법 보러가기
자 이제 S3하고 Cloudfront까지 세팅되었으면 우리가 마지막 할일은 도메인 연결이다.
먼저, 아래 이미지와 같이 Go to purchase a domain in Route53을 눌러 페이지로 이동한 다음, Register domain에 구매하고자하는 도메인 명을 입력한다. 이때 도메인은 abc.com 형식으로 입력해야한다.
그 다음 위 사진과 같이 구매할 도메인 명을 select 한 후에 Proceed to checkout 를 클릭한 후 Next를 클릭하고, Contact information을 입력한 후 Next를 클릭하고 Submit을 누르면 Route53에서 도메인 구매가 완료된다.
AWS Route53에서 도메인 구매하는 방법 보러가기
그 다음 위 이미지와 같이 Route 53 → Domains → Requests로 이동해서 구매한 도메인이 Status가 Successful이 될 때까지 기다린다.
이제 다시 Sws Console의 생성된 프로젝트의 디테일 화면으로 들어가서 구매한 Route53 Domain을 선택한 다음에 Create SSL Certificate 버튼을 클릭하여 SSL Certificate를 발급 받는다.
페이지를 새로고침하면서 SSL/TLS Certificate Status가 ISSUED가 된 것을 확인했다면, 서브도메인 명을 입력하고 Connect Domain 버튼을 클릭하면 도메인 연결이 완료된다. 위 이미지는 web.swstest.net 으로 연결하도록 해보는 예제이다.
해당 주소로 접속해보면 https://web.swstest.net 으로 정상적으로 연결된 것을 확인할 수 있다.
우리는 이렇게 AWS Cloud에 대한 학습 없이도 SWS Console을 통해서 SPA 프로젝트를 배포해보았다.
SWS는 계속 사용자가 AWS Cloud에 대한 학습 없이도 클라우드 아키텍처를 구축할 수 있게 도와주는 툴을 만들어 개발자가 비즈니스에 조금 더 집중할 수 있도록 도와주고 나아가 적은 인원의 개발자로도 최대한의 AWS 리소스들을 사용할 수 있도록 가치를 제공할 것이다.
