참고한 곳
1을 전부 했다면 아마 http 프로토콜을 사용하는 상태로 클라이언트, 서버, 데이터 베이스가 모두 배포된 상태일 것이다.
이제 지옥의 https다.
클라이언트
현재 S3으로 배포되고있는 정적 웹 사이트는 단점이 있다.
1. HTTP 프로토콜 사용중
2. CloudFront에 비해 접속 위치에 대한 대응이 없음 (이론적으로)
3. 비용 문제
이 세가지를 한번에 해결해 주기 위해
CloudFront
를 사용할 것이다.
Distribution을 create을 하는 버튼을 누르면, 아래처럼 설정을 한다.
React 프로젝트의 경우 react-router-dom을 사용한다면 다음과 같은 설정이 필요하다.
distribution setting -> error pages -> create custom error response경로로 들어간다.
여기서create custom response를 눌러서
404,403에러 각각에 아래처럼 설정한다.
Route53 설정
Route 53은 앞에서 언급했던 것처럼 DNS 서비스다.
우선 호스팅 영역을 생성한다.
그 다음 생성된 네임 서버 리스트를 도메인에 등록하면 된다.
나는 가비아에서 도메인을 샀다.
내가 산 도메인의 정보 변경 부분을 들어가니
네임 서버를 변경하는 곳이 있었다.
연결을 다 했으면 레코드 생성을 누른다.
단순 라우팅 클릭
단순 레코드 정의 클릭
CloudFront에서 생성된 도메인 주소와 이어준다.
예시에서 farmworks.site 앞에
www를 작성하면www.farmworks.site로 접속할 수 있다.
client,server등으로 붙여도 된다.
정의를 마친후에 레코드 생성을 누르면 아래와 같이 도메인과 이어진 것을 볼 수 있다.
하지만 여기까지 따라해도 접속은 되지 않는다. 이제 https 사용을 위해 SSL 인증서를 발급받아야 한다.
AWS Certification에 접속한다.
그 다음 인증서를 요청하면 된다.
이때 주의할 점!!!
반드시 미국 동부지역을 선택해야 한다.
인증서를 발급 받아야 할, 즉 클라이언트에 접속 가능한 모든 도메인 을 아래에 기입한다.
쭉 넘어가다가 검증 부분이 나오면 각각 레코드를 생성해준다.
계속 넘기다 보면 이런 식으로 인증서 생성이 된다.
인증서를 전부 만들었다면 CloudFront로 돌아간다. CloudFront와 인증서를 이어줄 것이다.
지금 작업하고 있는 distribution을 열어준 후 왼쪽 위의 edit 버튼을 누른다.
그럼 아래와 같은 화면이 뜬다.
검은색 밑줄 부분을 채워넣는다.
나머지는 모른척 지나가서 하단의 yes edit을 누른다.
🤡클라이언트 완료!!!
아직 한발 남은 서버
로드밸런서로 서버에 https 프로토콜 적용하기
EC2를 들어가서 아래로 쭉~ 내리면 로드밸런서라는 곳이 있다.
그곳을 들어가면
로드 밸런서 생성이라는 버튼이 있을 것이다.
누르자.
맨 왼쪽에 있는 http, https를 눌러준다.
다음 화면에서
1)이름을 아무거나 지정해주고
2) 리스너에 https 추가
3) 가용 영역에 2군데 이상 체크한다.
넘어가면 이런 창이 뜬다. 새 인증서를 요청하자. 인증서롤 요청하는 부분은 앞과 똑같다. (나는 server.farmworks.site 라는 도메인의 인증서를 요청하였다.)
진행하다보면 보안 그룹을 지정하는 부분이 나온다. (이 부분은 뒤에 나온다.)
아래는 건들 ㄴ
로드밸런서를 적용할 인스턴스 연결
아래에 있는 것을 위로 추가한다.
검토 페이지에서 아무것도 없으면 생성을 누른다.
provisioning이 active가 될 때까지 기다린다.
S3 보안그룹 설정
로드 벨런서를 설정하는 와중에 보안그룹을 설정한 부분이 있었다.
우리는 지금 로드 밸런서를 통해
https프로토콜을 통한 인바운드를 받기로 했으므로
https_443 포트를 허가해 주어야한다.요로코롬
이제 클라이언트에 도메인을 연결해줬던 것과 같은 것을 해주어야 한다.
Route 53으로 돌아간다.
Route 53에서 클라이언트를 이어줬던 것처럼 레코드를 생성한다.
다만 이번에는 서버에서 사용될 도메인 이름을 적고,
값/트래픽 라우팅 대상 부분에는
EC2 인스턴스를 생성한 리전을 선택한다.
그러면 로드밸런서 정보가 뜰것이다.
정의를 누르고 생성한다.
생겼다. 두둥
