백엔드 nginx 연결 및 소셜 로그인 추가하기

정식적으로 웹페이지를 배포된 상태를 보면 기본적으로 http가 아닌 https 형태의 페이지들이 다수일 것이다. 이 s의 의미는 secure라는 의미로 데이터에 대한 보안적인 측면을 향상 시켜주는 중요한 역할을 한다. 보통 이 인증서를 제공해 주는 기관은 따로 kisa 와 같은 공식 보안 관련 기관이 인정해주는 업체가 제 3자가 되어 사이트에 대한 인증을 해준다. 그리고 이 인증서를 제공해 주는 걸 무료로 해줄 수 없는 입장이라 상당히 비싼 돈을 들여서 진행을 해준다. 하지만 무료로 사용을 할 수 있는 종류들도 존재한다. 그래서 내가 사용을 할 것은 Let's Encrypt 에서 제공을 해주는 Nginx 를 이용을 할 것이다.

그림1. Nginx의 역할

 

기본적으로 Nginx를 생성을 하면 /etc 폴더 내에서 생성이 된다. 그러면 Nginx 를 허용하는 설정 파일들을 작성을 해줘야한다. 그 폴더는 /etc/nginx/sites-available/ 이하의 폴더에서 .conf 파일을 작성하여 허용하는 http 와 https 에 대한 설정들을 차례로 추가를 하면 된다.

그림 2: Nginx 설정파일

그 이후엔 

sudo nginx -t
sudo systemctl restart nginx

 

를 타이핑을 해준다. 첫 번째 줄은 작성한 nginx 가 문법적으로 오류가 없는지 확인을 하는 것이고, ok 라는 단어가 있으면 이상이 없는 것이다. 이후 시스템 내부에서 프로세스 재부팅을 진행한다.

이상이 없이 제대로 설정을 했다면, 다음으로 해야될 것은 실제 도메인에 대한 설정이다.

그림 3. dns 설정

다음은 dns 관리 사이트이다. 기본적으로 @만 설정을 할 수 있는데, Nginx 에서 요구가 되는 것은 바로 www가 붙은 것이다. 빨간 줄을 친 곳은 실제 웹서버에서 정해진 ipv4 주소이고, dns 설정란에 추가를 하면 된다.

그렇게 www가 추가된 웹사이트가 설정이 되면 첫 번째 단계는 끝이다. 

두 번째 설정은 웹서버에서 웹 사이트로 통신이 제대로 되는지를 확인 해야된다.

그거는

그림 4. curl 통신 확인

curl -I http://<사이트 ip>

를 입력하여 404 또는 200 응답이 오면 성공한 것이다. 만약에 실패를 한다면, 그 부분에 대해서는 nginx 설정의 오류나 웹서버 설정에 대한 오류가 존재할 수 있으니 최대한 할 수 있는 조치는 다 해보도록 하자. 

그림 5. 웹서버 인바운드 설정

그나마 대표적인 조치 중 하나는 웹 서버 인바운드 설정에서 443 포트와 80 포트를 열어놓지 않아서 생기는 문제가 있을 수 있으니 참조를 하면 좋다.

여차저차 설정을 완료하고 사이트와 연동이 되는 것 까지 확인을 하면 certbot 명령어를 통해서 무료 인증서를 받을 수 있다. 이거까지 완료를 하면 Succeefully라는 메세지가 뜨면서 도메인 주소 앞에 https 가 붙은 것을 확인 할 수 있다.

---

다음은 소셜 로그인 관련해서 기능을 구현을 해봤다. 이는 OAuth 기능을 사용을 하였으며, Node.js 중에서 Passport.js 을 사용하여 제공되는 기능을 사용하여, 구글과 깃허브에 대한 소셜 로그인 기능을 구현을 하였다.

테스트 과정에서 로컬 영역에서 Postman을 사용하여 데이터가 주고받아지는 과정을 하는건 따로 문제는 없었다. 하지만 문제는 이제 실제 페이지를 구현을 했을 때 일어났다.

해당 문제점은 TokenError: Malformed auth code. 에 관한 문제점이었다. 이 문제점은 클라이언트가 구글에게서 받은 인가코드가 제대로 일치하지 않는다는 문제에서 나오게 되었다. 주로 인코딩 문제였을 가능성이 크다. 우선적으로 Authorization Code 에 대한 문제점이 있으면, 그건 OAuth 연결 설정 문제이다. 

그림 6. 구글 OAuth 어플리케이션 설정

OAuth에 관련된 인증을 제작하면 ID값과 PASSWORD 값을 받게 된다. 이 값을 코드 환경에 존재하는 .env 파일에다가 잘 적어놓으면 passport.js 를 통해서 소셜 로그인에 대한 대비는 얼추 되었다고 할 수 있다.

하지만 그 이전에도 말한 그 다음 문제가 좀 골치가 아팠다. TokenError: Malformed auth code , 이 문제점은 연결 문제는 아니고, 파싱에 대한 오류로 인한 것이다. 간혹 Node.js의 낮은 버젼에서는 문제점이 일어나지 않는데, 20 이상의 버젼에서는 파싱 부분에 문제점이 생긴다. 구글에서 제공되는 인가코드가 "/" 이 부분이 제대로 변환이 안된 상태에서 바로 퍼센트 코딩이 되어서 오기 때문에 문제점이 생긴다. 예를 들면 4/D3JD0E00D 이런 형식이 정상적인 인가코드라고 가정을 하면 4%2FD3JD0E00D 형태로 와버려서 계속 인증을 하는데 오류가 생긴 것이다. 

그림 7. 파싱과정 수동처리

그래서 이 부분은 passport가 있는 코드에 넘기기 전에 직접 파라미터를 파싱과정을 거쳐줘야지 오류가 생기지 않는다. 아마 각자 환경에 따라서 파싱되는 과정이 달라지기야 하겠지만, 결론적인 문제점은 Node 20 버젼 이상의 "/" 슬래시에 대한 파싱 오류라는 점을 인지하면 된다.

근 백엔드 서버를 다루면서 이틀동안 씨름했던 가장 큰 두 가지의 문제점에 대해서 작성한 글이다. 만약 비슷한 문제점을 갖고 있는 사람에게 도움이 되었으면 한다.