Route 53 도메인 설정

1. 도메인 구입

 1) AWS 콘솔 -> Route53으로 이동

 2) 도메인 등록에 원하는 도메인 등록 후 확인

 3) 결제 후 확인 이메일에서 링크 활성화

 

2. 호스팅 영역 생성

 - 개요 : 프론트 엔드 애플리케이션와 백엔드 애플리케이션을 위한 서브 도메인 설정

 - 호스트 영역 : DNS 영역으로 생성한 도메인이 다수의 레코드를 관리함

 - 레코드 : 이름과 IP를 연결해 놓은 파일 or 엔트리

   1) SOA 레코드 ( Start of Authority) : 영역을 관리하는 관리자 정보

   2) NS 레코드 (Name Server) : 도메인의 IP를 물어볼 서버

   3) A 레코드 : app.도메인 or api.도메인 과 같이 특정 IP 또는 다른 도메인으로 연결하는 레코드

 

- 방법

 1) AWS 콘솔 -> Route53 -> 호스팅 영역 생성

 2) 도메인 이름에 구매한 도메인 입력 후 호스팅 영역 생성 클릭

 3) 레코드 생성 클릭 후 라우팅 정책을 단순 라우팅 선택 후 다음

 4) 레코드 이름 기재 후 값/트래픽 라우팅 대상 설정

    => 이전 엘라스틱 빈스톡으로 배포된 애플리케이션과 region으로 설정해야 함

 5) 단순 레코드 지정 클릭

 

- 확인 : AWS 콘솔 -> EC2 -> 로드 밸런서에서 확인

    로드 밸런서 선택 후 태그 탭의 name key 와 value 를 이용해 연결 확인 가능

 

3. CORS 문제 해결

 프론트 엔드의 app-config.js에서 backendHost 변경

//backend uri를 가져오도록 구현

let backendHost;

const hostname =  window&&window.location && window.location.hostname;

if(hostname === "localhost"){
    backendHost = "https//api.<도메인>";
}

export const API_BASE_URL = '${backendHost}';

이후 재배포 ( eb deploy)

 

 

 백엔드의 WebMvcConfig.java 에서 allowedOrigins 변경

  HTTPS 인증서를 받은 후 또 배포하는 것을 피하기 위해 https도 함께 추가함

package com.example.demo.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration //스프링 빈으로 등록
public class WebMvcConfig implements WebMvcConfigurer{
	//유효시간 설정, 1시간
	private final long MAX_AGE_SECS = 3600;
	
	@Override
	public void addCorsMappings(CorsRegistry registry) {
		registry.addMapping("/**") //모든 경로에 대해
		//origin이 http://localhost:3000, 프론트 엔드 URL 인 경우
		.allowedOrigins("http://localhost:3000",
        				"http://app.<도메인>",
                        "https://app.<도메인>")
		//get, post, put, delete, patch, options 메서드 허용
		.allowedMethods("GET","POST","PUT","DELETE","PATCH","OPTIONS")
		//모든 헤더 허용
		.allowedHeaders("*")
		//인증 관련 정보 허용
		.allowCredentials(true)
		//유효시간 설정
		.maxAge(MAX_AGE_SECS);
	}
}