[DevOps] NGINX Proxy Manager와 CloudFlare를 이용해 로컬 네트워크 내에서 일관된 웹 개발 테스트 환경 구성하기

NGINX Proxy Manager와 CloudFlare를 이용해 로컬 네트워크 내에서 일관된 웹 개발 테스트 환경 구성하기

서론

이번 포스팅에선 NGINX Proxy Manager과 CloudFlare로 같은 로컬 네트워크(공유기) 내 디바이스들이 동일한 도메인으로 개발 서버에 접근할 수 있도록 세팅하고 덤으로 SSL 인증서 적용법까지 소개하도록 하겠다.

TL;DR

1. CloudFlare에 개인도메인을 연결하고 A레코드 서브도메인으로 개발 서버 컴퓨터의 공유기 내 사설 IP주소(예: 192.168.x.x, 172.30.x.x)를 등록해놓은 뒤, NGINX Proxy Manager에서 해당 A레코드 서브도메인으로 들어오면 개발 서버가 실행 중인 로컬 포트로 포워딩 해주면된다. 이때 Forward Hostname을 "localhost"나 "127.0.0.1"이 아닌 CloudFlare에 등록했던 사설 IP주소를 기입해줘야 정상 작동한다.
2. NGINX Proxy Manager의 SSL 기능을 사용하면 로컬 테스트에서도 HTTPS 접근이 가능한데,
   필자가 환경을 구성해보니 DNS Challenge 없이는 접근 도메인에 대한 새로운 Let's Encrypt SSL 인증서 발급이 오류가 발생하며 정상적으로 이루어지지 않았다. 이를 위해 먼저 CloudFlare에서 DNS 영역에 대한 편집 권한을 가진 API 토큰을 발급 받아야 한다. 그리고 새로운 SSL 인증서 발급시 "Use DNS Challenge" 옵션을 활성화 및 DNS Provier를 CloudFlare로 선택한 뒤, 발급 받은 토큰을 기입하여 새로운 SSL 인증서 발급을 시도하면 성공적으로 완료된다.
3. 이러한 세팅이 완료되면 같은 로컬 네트워크(공유기) 내 어떠한 디바이스도 CloudFlare에 연결된 개인도메인의 서브도메인으로 접근하면 동일한 도메인으로 개발 중인 서비스에 접근이 가능하여, 외부 API의 허용 도메인이나 OAuth Callback url 등 때문에 발생하는 문제 없이 동일하게 테스트해볼 수 있다.

1. 근데 이 환경 구성이 왜 필요함?

필자가 Next.js 기반 프로젝트를 작업하면서 NextAuth를 통해 OAuth 로그인 연동을 작업하게 되었다. 그러다보니 구글이나 페이스북, 트위치 등의 플랫폼과 연동을 하려면 API 키와 시크릿 발급이 필요해서 보통 해당 플랫폼의 개발자 콘솔에서 새로운 프로젝트를 생성하고 API 접근 허용 URL과 Callback URL을 기입하여 발급 받는게 일반적이다.

Google Cloud Platform의 접근 허용 URL 입력창 (IP주소 기입을 허용하지 않음)

Twitch Developer Console의 접근 허용 URL 입력란 (IP주소 기입을 허용하나, localhost 외엔 HTTPS로만 접근해야함)

하지만 문제는 여기서부터 발생했다.
필자가 작업할때 사용하는 컴퓨터는 맥북이라서 윈도우 PC와 모바일 상에서의 테스트가 필요하기 때문에 윈도우 PC와 모바일 기기에서 맥북의 IP 주소로 접속하여 테스트하는게 일반적인데, 대부분의 OAuth 로그인 플랫폼들이 접근 허용 URL에 IP주소를 기입하는 것을 금지하고 있어서 맥북 외에 기기에선 로그인이 불가능했다. 가끔씩 몇몇 플랫폼들은 IP 주소의 기입을 허용해주는 경우도 있었다. 하지만 여러 플랫폼의 소셜 로그인을 지원해야하는 경우 몇몇 플랫폼이 허용을 해준다 한들, 어차피 다른 플랫폼에서는 해당 IP 주소로 접근이 불가능하기 때문에 동일한 조건에서 테스트 해볼수 없어서 의미가 없다. 그리고 몇몇 플랫폼들은 "localhost"로의 접근 외에는 모두 HTTPS로만 접근하도록 강제하는 경우도 있어서 골치가 아팠다.

그래서 위와 같은 문제를 해결하려면 두 가지 조건이 충족되어야 했다.

1. 로컬 네트워크(공유기) 내 모든 기기가 동일한 도메인으로 접근할 수 있어야 함.
2. SSL 인증서가 적용되어 HTTPS 접근이 가능해야한다.

이걸 충족할 방법을 찾아보던 도중, 문득 지인분께서 소개해주신 NGINX Proxy Manager(이하 NPM)라는 툴이 떠올라서 직접 적용하게 되었다. NPM은 NGINX의 reverse proxy를 쉽게 관리하고 Let's Encript SSL 인증서를 간편하게 발급 및 적용해주는 툴이다. 어차피 SSL을 적용하려면 개인 도메인이 필요하고, 개인 도메인에 A레코드로 등록된 개발 서버의 사설 IP를 개발 서버 PC의 특정 포트로 연결해주기 위해선 reverse proxy가 필요하기 때문에 지금 상황에 제일 적합한 툴이라고 판단했다.

필자의 도메인은 CloudFlare 네임서버를 사용하고 있기도 하고 이후에 SSL 발급을 위해서 CloudFlare API 토큰을 이용해야 하는 부분도 있어서 본 포스팅에선 CloudFlare를 활용하는 방법을 기준으로 설명한다.

2. 준비물

1. CloudFlare가 연동된 개인 도메인
2. docker 및 docker-compose 설치

CloudFlare를 개인 도메인과 연동하는 방법과 docker 및 docker-compose 설치법은 필자가 이전에 작성한 포스트들를 참고하기 바란다. 포스트 초반부에 해당 내용들이 설명되어있으니 해당 부분만 확인하면 된다.

[DevOps] Netlify에 CloudFlare DNS 연동하기

[DevOps] Docker + Jenkins를 통해 Docker 배포 자동화 구축하기

3. NGINX Proxy Manager 설치

NPM 공식 문서에서는 docker-compose를 이용하여 NPM을 상시 돌릴 수 있도록 구성하기를 권장하고있다. 그래서 NPM의 데이터 파일들이 담길 폴더를 하나 만들고 해당 폴더 안에 docker-compose.yml을 만들어 NPM의 docker 서비스를 구성해야한다.

위 docker-compose.yml을 복사하여 붙여넣은 뒤 저장하고, docker-compose.yml 파일이 있는 폴더로 이동하여 아래 명령어로 docker 서비스를 올리면 된다.

$ docker-compose up -d

docker 서비스가 올라가면 http://localhost:81로 접속 시 NPM 로그인 페이지를 볼 수 있게 된다.
우선 아래에 적어둔 초기 계정을 통해 로그인하고 자신의 이메일과 비번을 등록하도록 하자.

[초기 계정]
Email: admin@example.com
PSWD: changeme

4. CloudFlare DNS 설정 및 API Token 발급

CloudFlare DNS 설정에 앞서, 현재 개발 서버의 공유기 사설 IP 주소를 확인해둬야 한다. 확인 후 잘 적어두자.

CloudFlare에 연결된 개인 도메인의 DNS 설정페이지로 들어가서 새로운 A레코드 서브도메인을 추가하고 해당 레코드의 IPv4 주소를 아까 적어둔 개발 서버의 사설 IP주소로 기입한 뒤 프록시는 해제하고 저장한다. 이렇게 사설 IP주소가 등록된 A레코드 서브도메인을 만들어두면, 개발 서버와 같은 네트워크(공유기) 내의 다른 기기들에서 해당 서브도메인으로 접근했을때 개발서버의 IP주소로 접근하게 된다
(단, 사설 IP주소로 접근하도록 했기 때문에 네트워크 환경이 변경되어 개발 서버에 할당된 IP주소가 변경되면 해당 A레코드의 IPv4 주소도 맞춰서 변경해주어야 한다.)

개인 도메인 DNS에 개발 서버 사설 IP주소를 A레코드로 추가

그리고 이제 NPM에서 SSL 인증서 발급 시 DNS challenge에 사용된 API Token을 발급해야한다.
다시 도메인 개요 페이지로 돌아가서 페이지 오른쪽 하단에 "API 토큰 가져오기"를 클릭한 뒤, "토큰 생성" 버튼을 클릭한다.
그리고 페이지 맨 하단에 있는 "사용자 설정 토큰 생성"의 "시작" 버튼을 클릭하면 된다.

API 토큰 설정 페이지에서 "토큰 이름"과 "권한"을 설정해주면 된다. 이름은 적당히 작성해주고 권한은 "영역", "DNS", "편집"을 선택한 뒤 "요약 계속"을 클릭하고, 다음 페이지에서 "토큰 생성"을 클릭하면 API Token 문자열이 제공된다. 이때 제공되는 API Token은 딱 한 번만 제공되기 때문에 똑같은 토큰을 다시 받을 수 없어서 잃어버리지 않게 꼭 잘 적어두고 공유되지 않도록 주의해야한다.

5. NGINX Proxy Manager Reverse-Proxy 설정하기

이제 준비된 사항들을 바탕으로 NPM에서 reverse proxy를 설정하겠다.
우선 "http://localhost:81"를 접속하여 로그인하고 "Proxy Hosts" 메뉴를 클릭한다.

그리고 오른쪽 상단 쪽에 "Add Proxy Host"를 선택 한 뒤 상세 설정을 기입한다.
Domain Names는 아까 CloudFlare DNS에서 등록한 A레코드 서브도메인을 기입하고, Forward Hostname / IP에는 아까 A레코드의 IPv4 주소로 등록했던 IP주소를 그대로 기입해준다. 그리고 Forward Port에는 개발 서버가 구동되고 있는 TCP 포트를 기입해주면 된다.

이때 주의할 점은, "Scheme"에는 꼭 "http"를 기입해주어야 한다. 보통 우리가 로컬에서 구동하는 개발서버들은 대부분 http로 동작하기 때문이다.

그 다음 SSL 설정으로 넘어가면,
SSL Certificate를 "Request a new SSL Certificate"를 선택하고 "Force SSL", "HTTP/2 Support", "Use a DNS Challenge"를 활성화해준다. Use a DNS Challenge를 활성화하면 DNS Provider 옵션이 나타나는데, 여기서 "CloudFlare"를 선택하고 아래 이미지에서 하이라이트 표시한 API Token 부분에 아까 CloudFlare에서 발급한 API Token을 기입하면된다.

모두 완료되면 save 버튼을 클릭하고 reserse proxy를 생성한다.
아까 CloudFlare랑 마찬가지로 주의할 점은, 네트워크 환경이 변경되어 개발 서버에 할당된 IP주소가 변경되면 Forward Hostname / IP 항목을 맞춰서 변경해줘야 한다.

다른 분들은 DNS Challenge 없이도 정상적인 인증서 생성이 이루어지시는 것 같은데,
필자는 아무리 해도 Internal Error만 발생하길래 그냥 필수적으로 DNS Challenge를 이용하는 방법으로 설명했다.
이후에 이에 대한 해결법을 찾게되면 업데이트 하도록 하겠다.

이렇게 모두 설정하면 같은 네트워크 내에서 어떠한 기기를 사용하든 같은 도메인으로 개발 서버에 접근할 수 있게 된다.