# 2023. 06.

# 06. 06.

# redirect시 query parameter가 사라지는 문제

# 시나리오

프론트는 React를 사용했고 AWS Amplify에 배포했고
백엔드는 NestJs를 사용했고 AWS ECS를 통해 배포했다.

프론트에서 카카오 로그인을 위해 /auth/kakao로 백엔드에 접속하고, 로그인을 위해 다음과 같은 과정을 거친다.

카카오 로그인 페이지로 Redirect 시킨다.
로그인 완료 후 카카오는 Redirect URL(backend.com/auth/kakao/redirect)로 사용자를 Redirect 시킨다.
백엔드는 카카오로부터 받아온 유저정보를 조회해서 새로운 토큰을 만들고, 프론트에 전달하기 위해 프론트 서버 URL 뒤에다가 Query parameter로 토큰값을 붙여서 Redirect 시켜준다.
ex) front.com/auth/kakao/redirect?access_token=<토큰값>
프론트는 해당 값을 파싱하여 LocalStorage에 저장한다.

# 문제점

시나리오 3번 과정에서 백엔드에서 프론트로 토큰값을 붙여서 Redirect 시켜주는 과정에서 프론트에서 Query parameter가 없어지는 문제가 발생하였다.

마지막에서 두번째 줄에서 성공적으로 access_token이 들어오나 밑에서 다시 Query parameter가 없어진 상태로 리디렉션이 일어나는걸 볼 수 있다.

# 삽질

원인 파악을 위해 크롬 개발자 도구에서 네트워크 탭을 통해 거쳐온 URL들을 알아볼 수 있었다.
실제로 토큰값을 포함한채로 Redirect front.com/auth/kakao/redirect?access_token=<토큰값> 되는데 다음 과정에서 front.com/auth/kakao/redirect 로 토큰값이 사라진채로 Redirect 되는걸 볼 수 있었고 또한, 로컬에선 잘 돌아가다가 배포 환경에서만 Query parameter가 사라졌다. 다음과 같이 원인이 될만한 요소를 나열해 보았다.

# 1. React 문제인가?

처음엔 React 문제인가 싶어서 자료를 찾아봤는데 해당 이슈가 발생한 사람이 별로 없었다. React에서 문제가 발생 해봤자 사용하고 있는 react-router-dom 라이브러리에서 발생하겠다 싶어 해당 라이브러리를 비활성화 시키고 배포해보았다. 직접 front.com/auth/kakao/redirect?access_token=<토큰값>에 접속해봤을때 토큰값이 사라진걸 보아 React 문제는 아니란게 확신이 들었다.

# 2. Amplify 문제인가?

가장 의심스러웠지만 가장 아니였으면 하는 문제였다. 로컬 환경과 배포 환경에서의 다른점은 Amplify 밖에 없었기 때문에 가장 의심스러웠다. 자료를 찾아보니 나와 정확히 일치하는 이슈를 찾아볼 수 있었다. Pass url params in rewrites and redirects #97 (opens new window)
해당 글은 aws amplify에서 자체적으로 query를 날려버린다는 이슈였다.

amplify에서는 아래와 같이 redirect 정책을 설정할 수 있다.

여기서 query parameter를 전달할 수 있도록 설정할 수 있을것 같애서 공식 문서를 읽어보니

Amplify는 다음과 같은 예외 사항을 제외하고는 Query parameter를 모두 포워딩 해준다.

기존 주소에서 query string이 특정 값으로 지정될 때, amplify는 특정 query parameter만 포워딩 한다.
소스 주소가 일치하는 대상 주소에 query parameter가 포함될 때, 즉 사용자가 명시적으로 query string을 작성했을 때 query parameter는 포워딩 되지 않는다.

# 해결 방법

기존 Amplify 다시 쓰기 및 리디렉션 설정은 다음과 같이 되어있었다.

[
  {
    "source": "https://wooyeons.site",
    "target": "https://www.wooyeons.site",
    "status": "302",
    "condition": null
  },
  {
    "source": "/<*>",
    "target": "/index.html",
    "status": "404-200",
    "condition": null
  }
]

다시 문제점 섹션에 네트워크 추적 사진을 보니 wooyeons.site에서 www.wooyeons.site로 포워딩 된다는 사실을 알 수 있었다.
근데 Amplify Query 정책을 보았을 때 포워딩이 되어야하는거 아닌가?? 라는 의문점이 생겼다.

공식 문서를 좀 더 읽어보니 SPA용 Redirect 설정 값을 찾을 수 있었다.

다음과 같이 Redirect 설정을 해주니 해결되었다.

[
  {
    "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
    "target": "/index.html",
    "status": "200",
    "condition": null
  }
]

# 06. 10.

# DNS Record A vs CNAME

# A Record

Record A란 주소 til.rtolzo.dev에 대해서 IP로 매핑하겠다는 뜻이다.
즉, url 창에 til.rtolzo.dev으로 접속하면 DNS 서버로부터 til.crtolzo.dev에 매핑된 IP를 제공받는다.

# A Record 활용

개인 서버나, 호스팅은 대체로 IP 주소만 제공되므로, 만약 web server나 application server를 서비스할때,
유저들이 접속하기 편하게 A Record를 통해 해당 Domain을 개인서버 IP에 매핑할 수 있다.

# CNAME Record

Record CNAME이란 주소 til.rtolzo.dev에 대해서 다른 Domain으로 매핑하겠다는 뜻이다.
즉, url 창에 til.rtolzo.dev으로 접속하면 DNS 서버로부터 til.rtolzo.dev에 매핑된 Domain를 제공받는다.

# CNAME Record 활용

블로그와 같이 이미 Domain이 존재하는 서비스의 주 Domain을 바꾸고 싶을때 활용된다.
예를 들어, choiyongwon.github.io를 til.rtolzo.dev로 바꾸고 싶을때 활용할 수 있다.

# 06. 14.

# DNS CNAME Record 흐름

# CNAME 시나리오

유저 A는 자신의 블로그 choiyongwon.github.io의 주소가 마음에 안들어서
도메인 til.rtolzo.dev를 구입하여 연결시키려 한다.

DNS 공급자(ex: 가비아)를 통해 til.rtolzo.dev CNAME에 choiyongwon.github.io을 등록하였다.

추가로, github 사이트에서 Custom Domain으로 til.rtolzo.dev을 등록하였다. 이는 주 Domain을 바꾸기 위한 과정이다.
즉, 기존 choiyongwon.github.io으로 접속하면 til.rtolzo.dev으로 리다렉트된다.

# CNAME 실제 동작 과정

# Case 1 (`til.rtolzo.dev`으로 접속할 경우)

til.rtolzo.dev으로 접속한다.
DNS Server로부터 CNAME 레코드로 등록된 choiyongwon.github.io을 받아온다.
choiyongwon.github.io으로 접속한다.
DNS Server로부터 A 레코드로 등록된 choiyongwon.github.io의 IP를 받아온다.
IP로 접속한다.
github 서버에서 source URL이 til.rtolzo.dev임을 확인하고 매핑된 github page로 연결해준다.

# Case 2 (`choiyongwon.github.io`로 접속할 경우)

choiyongwon.github.io으로 접속한다.
DNS Server로부터 A 레코드로 등록된 choiyongwon.github.io의 IP를 받아온다.
IP로 접속한다.
github 서버에서 source URL이 choiyongwon.github.io임을 확인하고 아래 결과값과 같이 301 응답코드를 반환하고 바뀐 등록된 주 도메인(til.rtolzo.dev)으로 리디렉트 시킨다.

GET /TIL HTTP/2
Host: choiyongwon.github.io
user-agent: insomnia/2022.7.0
accept: */*

HTTP/2 301
location: https://til.rtolzo.dev

goto Case 1

← 2023. 10. 2023. 02. →