AWS Cloud Front에서 정적 웹 호스팅과 ECS로 띄운 API 컨테이너 연계하기

관련 포스팅

1)  CI/CD ECS 구성

ECS + Github action을 위한 여정

ECS + Github action을 위한 여정 (1) ~ EC2 구성 및 Docker 설치 ~

 

2) CI/CD S3 + Cloud Front 웹 호스팅 구성

Create React App(CRA) 프로젝트를 AWS S3와 CloudFront를 활용하여 배포하고 Github Action을 통해 CI/CD하기

Create React App(CRA) 프로젝트를 AWS S3와 CloudFront를 활용하여 배포하고 Github Action을 통해 CI/CD하기 (1)

 

 

--

 

 

이전 포스팅에서 구성한 정적 웹사이트와 ECS로 구성한 api를 연동하고자 한다.

우선 Cloud Front 콘솔로 이동..

 

 

배포에서 이전 포스팅에서 정의한 coding-orca-test 배포 ID를 클릭하여 상세페이지로 이동해보자.

 

 

"원본" 탭으로 이동하여

"원본 생성" 클릭,

 

정적 프론트엔드 원본인 s3 말고

아래의 ELB 항목에 있는 ECS에서 구성한 test-alb를 선택해주자

 

 

그러면 아래에 "프로토콜" 항목이 나타나는데

HTTP만 할것이므로 HTTP만 선택해주고

포트는 해당 LB의 포트인 9000으로 설정해준다.

 

쭉 내려서 

 

 

이름은 원하는 대로 설정해도 되지만 필자는 default로 놔두겠다.

"원본 생성" 클릭

 

원본이 생성된것을 확인할 수 있다.

 

"동작" 탭을 클릭한 뒤

 

"동작 생성" 클릭 

 

 

1) 경로패턴

 필자는 모든 api 요청은 prefix로 /api 로 설정했으므로 위와 같이 했으나,

/(root)로 놔둬도 무방하다.

 

2) 원본 및 원본그룹 

방금 만든 원본을 선택한다 (default 라면 길고 못생긴 이름)

 

3) 허용된 HTTP 방법

해당 api는 주로 POST 요청을 받으므로 POST가 포함되어있는 맨 아래의 옵션을 선택한다.

캐싱할 필요가 느껴지지 않아 캐시HTTP 방법의 옵션은 빼도록했다

 

API 요청은 동적이기에 캐싱처리가 되면 안된다.

그러기에 캐시 정책은 Disabled로 선택하였다.

 

나머지는 default 로 놔둔 뒤 "동작 생성" 클릭.

 

 

 

이제 확인해보면 되겠다.

 

"일반"탭으로 이동

 

도메인 복사 후이동해서 접속해보자.

 

 

아무것도 표시되지 않던 "정보"페이지가

랜덤 난수를 잘 보여주고 있으며.

generate new list 를 클릭하면 

POST 요청을 통해 잘 받아오는 것을 확인할 수 있다.

 

해당 CRA(React.js) 프로젝트와 Spring API 프로젝트 링크는 아래에..

 

https://github.com/kokomai/base_react

GitHub - kokomai/base_react: base_react for any project

 

https://github.com/kokomai/base-api

GitHub - kokomai/base-api: basic api project with Spring boot, JWT

 

예제에 사용한 ECS와 S3 + CloudFront 포스트는 아래에..

 

관련 포스팅

1)  CI/CD ECS 구성

ECS + Github action을 위한 여정

ECS + Github action을 위한 여정 (1) ~ EC2 구성 및 Docker 설치 ~

 

2) CI/CD S3 + Cloud Front 웹 호스팅 구성

Create React App(CRA) 프로젝트를 AWS S3와 CloudFront를 활용하여 배포하고 Github Action을 통해 CI/CD하기

Create React App(CRA) 프로젝트를 AWS S3와 CloudFront를 활용하여 배포하고 Github Action을 통해 CI/CD하기 (1)

 

 

 

이것으로 기본적인 웹 호스팅을 위한 AWS 여정을 마무리하고자 한다.

 

음성지원 되는 그 짤

안녕히계세요 여러분~~