[TODOMON] EP.17 배포 후 쿠키 공유 문제 해결 with 도메인 연결 및 SSL 인증서

배포의 경우 클라이언트는 vercel을 통해 배포하고, 백엔드 서버는 ECS + ECR로 진행되었다

1차 문제: SameSite

로그인 성공 시 액세스 토큰과 리프레시 토큰을 쿠키에 담아 클라이언트로 리다이렉트 하는 데, 배포 환경에서 쿠키가 저장되지 않는 문제가 있었다..

 

알아보니, 쿠키의 경우 SameSite 속성을 명시하지 않으면 기본으로 Lax가 설정되어 다른 도메인끼리 쿠키 전달이 되지 않는 다는 것..
=> SameSite 옵션을 None으로 설정해주자!

2차 문제: Secure

SameSite를 None으로 설정하려면 Secure 옵션은 true로 설정되어 있어야 한다..
=> 결국 HTTPS 설정이 필수인 것 같다..

 

이를 위해 귀찮지만 도메인 연결 및 SSL 인증서를 발급해주자

도메인 발급 및 연결

1. 가비아에서 550원주고 todomon.shop이라는 도메인을 발급받았다
2. 이 도메인에 우리가 생성한 로드밸런서를 연결해야 한다 -> CNAME 태그에는 원하는 값(ex. www, api)을 넣고, 값에는 로드밸런서의 도메인 주소를 기입하고 저장하자.
3. 로드밸런서 보안 그룹에서 HTTPS 443 포트도 열어주는 것을 까먹지 말자..!
4. 도메인도 발급한 김에, 클라이언트는 www.todomon.shop을, 서버는 api.todomon.shop을 사용하도록 설정

SSL 인증서 발급 및 연결

1. AWS Certification Manager 접속 후, 인증서 요청
2. 서버 도메인을 입력해주고(api.todomon.shop), 요청
3. 이후 발급 대기 중일텐데, 화면에 보이는 'CNAME 이름:CNAME 값' 쌍을 도메인을 발급받은 곳에서 추가해주어야 함
4. 인증서 발급이 완료되었다면, 로드밸런서에서 HTTP:80 리스너는 HTTPS:443으로 리다이렉트 하도록 변경
5. HTTPS:443 리스너를 추가하고 대상 그룹은 ECS에서 생성한 service로 설정

코드

다음은 JwtService에서 쿠키를 설정하는 함수 부분이다. 프로필에 따라 쿠키를 다르게 생성하도록 변경하였다.

public void setCookie(TokenDto tokenDto, HttpServletResponse response) {
    boolean isSecure = "prod".equals(activeProfile);
    String sameSite = isSecure ? "None" : null; // 개발 환경에서는 sameSite를 null로 설정
    String domain = ".todomon.shop";

    ResponseCookie accessTokenCookie = ResponseCookie.from("accessToken", tokenDto.getAccessToken())
            .path("/")
            .httpOnly(true)
            .secure(isSecure)
            .sameSite(sameSite)
            .domain(domain)
            .maxAge((int) (jwtProvider.getAccessTokenExpiration() / 1000))
            .build();

    ResponseCookie refreshTokenCookie = ResponseCookie.from("refreshToken", tokenDto.getRefreshToken())
            .path("/")
            .httpOnly(true)
            .secure(isSecure)
            .sameSite(sameSite)
            .domain(domain)
            .maxAge((int) (jwtProvider.getAccessTokenExpiration() / 1000))
            .build();

    response.addHeader("Set-Cookie", accessTokenCookie.toString());
    response.addHeader("Set-Cookie", refreshTokenCookie.toString());
}