Docker 설치해서 백엔드 로컬로 로그인 테스트하기 [Linkiving]

Docker로 백엔드 서버를 가져와서 구글 리다이렉트 로컬로 성공시키기

목차

1. 상황: 구글 OAuth로 로그인하면 배포된 페이지로 리다이렉션이 발생

2. 해결: 도커 파일을 설치해 백엔드 로컬호스트 주소로 리다이렉션 시키기

3. 도커 파일 설치

 

 

---

1. 상황: 구글 OAuth로 로그인하면 배포된 페이지로 리다이렉션이 발생

1. 상황

상황은 이렇다. 

백 인증 구현이 아직 미완성된 상태에서 프론트는 "개발용 로그인" 버튼을 만들어서 직접 로그인 토큰을 넣어 개발을 진행하던 중..

드디어 구글 로그인 로직이 제대로 완성되었다는 사실!

 

그래서 나도 기존 임의로 작성되어 중복 코드 투성이에 약한 보안이 신경쓰였던, 프론트측 인증 로직을 개편했다.

BFF 패턴 적용하고 레이어 계층 나누고 이것저것.. 이건 좀 복잡해서 일단 PR에서만 설명을 대강 적어뒀으나, 추후 블로그에도 정리해야겠다.

 

그런데 개편하고 보니 문제가 백엔드에서 로그인후 리다이렉션이 "현재 주소" 기준이 아니라, 무조건 "배포된 주소"로만 리다이렉션이 되는 것이었다. 이러면 문제가 로컬에서 변경사항을 바로 테스트할 수가 없다.

 

2. 원인

현재 구글 OAuth는 보안을 위해 백엔드 측에서 구현을 했다.

이럴 때 흐름은 아래와 같이 된다.

1. 프론트 → 백엔드로 구글 로그인 엔드포인트 요청

2. 백엔드 → Google 로그인 페이지로 리다이렉트

3. 로그인 성공

4. Google → 사전에 백엔드에서 등록한 redirect URI로 되돌림

5. 백엔드 → 토큰 발급 후 프론트로 이동

 

여기서 이 사전에 등록한 redirect URI가 배포된 도메인으로 고정되어있던 것이다.

https://linkiving.com/auth/google/callback

 

---

2. 해결: 도커 파일을 설치해 백엔드 로컬호스트 주소로 리다이렉션 시키기

1. Docker의 역할

Docker를 사용해서 배포 환경과 동일한 백엔드 애플리케이션을 로컬에서 실행하기 위한 실행 환경이다.

 

구글 OAuth는 사전에 등록된 redirect URI와 정확히 일치하는 주소로만 인증 결과를 전달한다.

따라서 로컬 개발 환경에서도 OAuth를 테스트하려면, Google Console에 등록된 redirect URI와 일치하는 설정을 가진 백엔드가 실행되어야 한다.

 

Docker는 이러한 로컬 전용 설정(localhost:8080 기준 redirect_uri)을 포함한 백엔드 서버를 실행하여 배포 환경과 동일한 방식으로 OAuth 인증 흐름이 동작하도록 만든다.

 

Docker로 백엔드 서버 자체를 실행해서 이 서버로 OAuth 인증을 진행하는 것.

 

2. 전체 흐름

.env에서 NEXT_PUBLIC_BASE_API_URL에 로컬8080을 넣어준다.

pnpm run dev로 로컬3000포트를 띄운 후, 로그인 버튼을 누르면 이 8080을 기준으로 oauth 인증 엔드포인트로 요청이 간다.

 

백엔드에서 사용자를 구글 로그인 화면으로 리다이렉트시킬 때 redirect_uri(8080)이 포함되고, 구글은 이 redirect_uri를 기준으로

로그인 이후 authorization code를 보낸다.

 

이후에는 다른 작업과 동일하게 백엔드에서 authorization code로 구글로부터 인증 정보 토큰을 받고, 쿠키를 세팅하여 로그인 다음 화면으로 리다이렉트시킨다.

 

---

3. 도커 파일 설치 (mac)

 

백엔드로부터 도커 파일 압축 파일을 전달 받았다.

 

1. Docker 설치하기

일단 Docker 먼저 설치해야한다.

Docker는 애플리케이션을 빠르게 구축/테스트/배포할 수 있게 해주는 오픈소스 컨테이너 가상화 플랫폼이다.

코드, 런타임, 시스템 도구 등 실행에 필요한 것들을 컨테이너 단위로 패키징해서 어디서든 동일하게 작동하도록 보장한다.

https://docs.docker.com/desktop/setup/install/mac-install/

Mac

나는 맥미니를 사용해서 Docker Desktop for Mac with Apple silicon을 눌러서 설치했다.

설치 완.

 

 

2. 파일 실행하기

다운받아서 압축 해제를 해보자.

warp로 진행해봤다.

cd Downloads/  # 압축폴더 다운 위치
tar -xvzf linkiving-core-local.tar.gz # 압축 해제
cd linkiving-core-local  # 압축해제된 폴더로 이동
ls # Dockerfile, README.md, app.jar, docker-compose.yml
docker compose up --build  # 도커로 파일 빌드

 

README.md에 사용방법을 정리해줬다고 한다.

 

docker compose up --build로 도커 파일을 실행시킨 상태에서

백엔드 BASE_API_URL, API_TOKEN을 작성한채로 pnpm run dev로 프로젝트를 실행하면 이제 리다이렉트가 로컬에 성공적으로 된다.

저기가 원래 linkiving.com/home으로 리다이렉트 돼서 테스트가 안됐는데 이제 로컬로 떠서 테스트가 가능해졌다 헤헤!

 

 

 

 

참고

https://gabrielyj.tistory.com/223#google_vignette

[Docker] Mac OS에 Docker 설치하기

https://iizz.tistory.com/62

OAuth2 (Google API)