Side Project Journey - 4. cut corners with serverless

이미지
사이드 프로젝트 여정 제 4탄의 주제는 AWS 비용을 줄여보자! 이다. Back-end Spring boot 와 Docker 와 ECR 등 정리해야 될 것들이 남아 있지만.. 그동안 너무 글을 쓰는게 귀찮았다. 그러다가 요 몇달동안 AWS 비용이 부담스러워서 비용절감을 하는 과정을 정리한다.  우선 아래는 그동안 1~3탄의 내용이다. 1탄 : SSO 2탄 : AWS Amplify 3탄 : CORS && SOP with Spring Boot 2021년 3월 AWS 사용 요금이다. 10만 7천원 가량 나왔다.. RDS 는 익히 가격이 비싸다는 것은 알고 있지만, ELB 가 이렇게 비싼줄 몰랐다. 2월 보다 더 나온 이유는 당연히 3월은 31일 까지 있으니.. 2월 보다 가동시간이 많다.    아래는 2021년 2월 요금이다. 2월 부터 1 ~ 말일 까지 풀로 24시간 내내 돌린 비용이다.. 아래는 2021년 1월 요금이다. 1월 초중순에 서비스를 출시 했었나?,, 기억이 정확하게 안나지만,, 1월 내내 풀로 가동한것이 아니기 때문에 제일 비용이 낮다. my.new 서비스의 처음 출시 아키텍쳐 다이어그램이다. 인증 서버와 자원(Resource) 서버를 나누어서 만들었다. 인증서버는 user.my.new 라는 도메인을 사용했고, ALB 와 ACM 을 통해서 SSL 을 적용했다. 자원(Resource) 서버는 app.my.new 라는 도메인으로 그리고 마찬가지로 ALB 와 ACM 을 통해서 SSL 적용했다. 이처럼 ALB 2개, 인증 서버 EC2 t3.micro, 자원 서버 t3.small 을 프로비저닝 했다. 위에 1월, 2월, 3월 요금 내역을 보면 ELB 가 가장 많은 비용이 든다. ELB 를 사용한 이유는 1가지 뿐이였다.  바로 CORS 를 위해서 SSL 적용이다. 물론 이 서비스가 진짜 잘되서 EC2 하나로 트래픽을 감당하지 못해서 Auto Scale group 을 사용하기위해서 ELB 를 사용할 수 도 있지만...

Side Project Journey - 3. CORS ( Cross Origin Resource Sharing ) && SOP ( Same Origin Policy ) With Spring Boot

이미지
사이드 프로젝트 여정 제 3탄의 주제는 개발자라면 누구나 한 번 쯤 마주치는 SOP, CORS 에 대해서 이전에 정리한 것 보다 상세하게 정리하고, Spring Boot 에서 어떻게 동작 하는지 어떻게 적용하는지 정리를 해보려고 한다. 1탄 : SSO 2탄 : AWS Amplify 3탄 : CORS && SOP with Spring Boot 먼저, CORS 란 무엇인가? Cross Origin Resource Sharing 의 약자이다. 한국어로는 교차 출처 리소스 공유이다. 역시 번역은 쓸모없는 경우가 많다.  Origin ? Protocol + Host + Port 를 합쳐서 Origin 이라고 부른다. ex) http://localhost:8080 은 하나의 Origin 이다. 그렇다면 Cross Origin 은 뭘까? 한국어로 교차 출처라고 하는데, 쉽게 말해서 Origin 이 다를 때 Cross Origin 이라고 한다. Origin 이 다르다는 의미는 무엇일까? 방금 언급한 Protocol + Host + Port 중 하나라도 다르면 Cross Origin 이다. ex) http://localhost:8080 과 http://localhost:9090 은 Cross Origin 이다. ex) http://example.com 과 https://example.com 도 Cross Origin 이다. ex) https://example.com 과 https://www.example.com 도 Cross Origin 이다. Cross Origin 이 무엇인지 알아봤는데 리소스 공유는 무엇인가? web application 스스로 자원을 가지고 있어서 방문자들에게 serving 을 할 수 도있지만, 다른 server 에 있는 자원을 요청해서 보여주거나, 다른 server 에 어떤 자원을 생성하거나 삭제하거나 변경하기 위해서 요청을 할 수도 있다. 다른 server 에 요청할 때 이는 Cross Origin 에게 요청을 하는 것을 의미한...

Side Project Journey - 2. AWS Amplify With Angular

이미지
사이드 프로젝트 여정 두 번째 이야기이다. 첫 번째 이야기는 SSO 를 다루어 보았다. 이번에는 Front 를 구현하고, CI/CD Pipeline 및 Infra 구성에 대해서 간략하게 정리해보려고 한다. 우선, 간단하게 프로젝트 Front 는 angular11 로  my.new 루트 도메인을 가진 repository 한 개, shortcut.my.new 서브 도메인을 가진 repository 한 개로 두 개의 repository 이다. 처음 infra 구성은 S3 Static web hosting 과 CloudFront 구성을 취하려고 했었다. 하지만, 해당 구성을 취하는 과정에서 관리비용이 꽤나 큰 것을 느꼈다. 각가의 CI/CD pipeline 을 손수 구성해줘야 되었다. 예를 들어, Github Action 을 사용할 경우, 특정 브랜치 master 에 Pull Request 혹은 Push 가 발생할 경우, angular project 를 build 하고 artifact 를 aws cli 통해서 S3 에 put object 를 통해서 업로드 하고, CloudFront Invalidation 을 직접 구성해주어야 하며, Domain 연동도 Route 53 Record 및 SSL 인증서를 ACM 에 직접 발급받고, 도메인을 구입한 DNS Provider 에서 Record 설정을 꼼꼼하게 신경써야한다. 혼자서 사이드 프로젝트를 진행하면서 Front 뿐만 아니라, Back-end 도 개발 및 인프라 관리를 하기 때문에 관리 비용이 꽤나 크게 다가왔다. 그러던 도중에 AWS Amplify 라는 서비스를 이용해보았고, 굉장히 큰 도움이 되었다. AWS Amplify 에 대한 내용을 정리하기 전에 우선 간단하게 S3 Static website hosting 설정을 정리하겠다. 아래는 CloudFront 를 이용하여 S3 웹사이트 호스팅 방법에 관련한 안내서이다. 4가지 방법을 알려주고 있는데, 웹사이트 엔드 포인트를 오리진으로 사용하는 방법만 일단 간략하게 ...