TR-11, AWS Deploy
저번 프로젝트때는 실패했던 AWS Deploy를 성공했다.
게다가 co.kr 도메인 연결까지 완료했다.
어떻게 Deploy를 했는지, 잊지 않기 위해
오늘 바로 정리해서 작성해보고자 한다.
어제 팀원들과 오프라인으로 만나서 아침부터 저녁까지
배포를 시도했지만, 인증서 등 여러가지 문제에 봉착해
할 수 있을듯 말듯 한 상태에서 아쉽게 헤어지게 됐고
집으로 돌아와 몇번의 재시도, 그리고 오늘 아침부터 저녁까지 시도한 결과
www.subllet.co.kr로 당당히 성공하게 됐다.
우선, EC2와 S3, RDS는 TIL에서 한번 정리했기 때문에 거기서 참고하도록 하고,
인증서 발급, Client와 Server에서 https를 사용하는 방법, 그리고 도메인을 연결하는 방법 등을 정리해보자.
ACM 인증서 발급
여기서 정말 많은 삽질을 했다.
ACM에 들어가서 인증서 발급 요청을 하면,
검증 대기 중으로 뜰텐데, 여기서 가만히 냅두면
평생 발급받지 못한다.
방금 요청한 인증서의 인증서 ID를 클릭한 뒤,
이 후 Route53에 접속해
호스팅 영역에 방금 요청한 이름의 도메인으로 호스팅 영역이 보일것이고,
해당 호스팅 영역에 들어가면
도메인 이름으로 된 레코드 이름중에 NS라는 유형을 가진 레코드가 있을것이다.
이 레코드는 값/트래픽 라우팅 대상을 4개 가지고 있다.
이 4개의 대상을 도메인을 구매한 사이트에서
DNS관리 안의 네임서버에 모두 등록해준다.
그러면 약 10분 뒤 ACM에서 인증서 발급이 완료된다.
Client
- CloudFront
client에서 https를 사용할 수 있게 S3를 CloudFront를 이용해서 배포한다.
우선 CloudFront에 들어가서 배포 생성을 눌러준 뒤 사진을 보고 따라하자.
이렇게 만든 뒤 방금 만든 배포의 ID를 클릭해 들어가서
‘오류 페이지’ 탭에서 오류 응답 생성을 한다.
오류 코드 403과 경로는 /index.html 그리고 응답 코드는 200으로 생성한다.
오류코드 404도 동일하게 생성 해준다.
이후 Route 53에서
위와 같이 레코드를 생성해준다.
이제 생성해준 레코드 이름을 주소창에 입력하면
접속이 가능하다! 도메인으로 Client 접속이 가능해진 것이다.
Server
- Load Balancer
server에서 https를 사용하게 해주고, ec를 나눠주는 Load Balancer를 생성해야 한다.
AWS의 ec2에 들어가서 좌측 최하단 부분에 로드 밸런싱 → 로드밸런서에 들어가준 뒤
로드 밸런서 생성을 눌러준다.
ALB(Application Load Balancer)를 Create해주고,
로드밸런서 이름을 입력, 나머지 설정은 내비두고
Mappings를 모두 체크해준다.
3번 Create target group를 클릭한 뒤
Basic configuration에서는 Instances를 선택해주고,
Health checks를 설정해줘야 한다.
여기서 정말정말 많은 삽질과 시간을 허비했다.
로드밸런서가 ec2와 연결되기 위해서는
로드밸런서가 ec2가 Healthy 한 상태인지 체크를 하는데,
이 체크는 어떤 응답이 오느냐? 의 여부로 체크한다.
일단은 Health check path를 ‘/’로 두고,
우리 프로젝트의 server에서
routes폴더의 index.js에 들어가
router.use("/health", (req, res, next) => {
res.send({ title: "success" });
});
위와 같이 미들웨어 설정을 해준다.
루트 ‘/’로 다른 라우트를 설정해줬을 수 있으니 /health로 설정해주고,
저장을 한 뒤
로드밸런서에서 Health checks의 경로를 /health 로 입력해준다.
그 후 Next를 눌러주고,
밸런싱 해 줄 EC2를 체크하고
Include as pending below 버튼을 눌러
Targets에 추가해준 뒤 Register 해준다.
이제 다시 Create target group를 눌렀던 때로 돌아가,
방금 만든 target group를 선택해준 뒤
Create load balancer를 클릭해 로드밸런서를 생성한다.
몇 분간의 ‘프로비저닝 중’ 이라는 상태가 뜬 뒤
‘활성’ 상태로 변한다.
이 때부터 로드밸런서의 설명 탭에 있는 DNS이름으로 주소창에 접속이 가능하다.
https 접속이 가능해진 것이다!
이제 이 서버를 도메인과 연결해주면 된다.
아까와 마찬가지로
Route 53에 들어가 레코드 생성을 눌러
별칭 클릭, 로드밸런서 클릭을 해주고
도메인 이름은 앞에 server를 붙여준다.
이제 주소창에 server.도메인 을 입력하면
도메인 접속이 가능한것이다!
이제 클라이언트와 서버에서 작업이 필요한데,
클라이언트에서는 Build하기 전에
.env의 REACT_APP_API_URL을
방금 만들어줬던 로드밸런서 https를 입력해주고,
(REACT_APP_API_URL=https://server.도메인)
빌드 후 s3 버킷에 다시 넣어준다.
서버에서는 cors 설정을 해줘야 하는데,
origin에 위에서 만들어줬던 CloudFront 주소를 넣어준다.
이때!!!! origin에 [] (대괄호)는 절대 넣지 말고
큰따옴표로만 넣어준다
(origin: “https://www.도메인”)
이제.. 끝이다
https://www.도메인
으로 접속해보면
접속이 될것이다…!