[Nginx] 좌충우돌 연구실 데모 웹페이지 개발기
on
들어가며
올해 7월 부터 고려대학교 NLP & AI 연구실에서 인턴을 시작 했다. 무엇보다 다른 기업이나 연구실에 비해서 서버 지원이 좋았으며, 총 10대(메인서버 7개, 데모서버2개)가 넘는 서버가 가동 되고 있었다. 문제점은 연구 성과 기록을 위해 데모 페이지를 개설 하는데 데모 페이지는 여러 서버에서 중구난방으로 관리 되고 있었으며, 데모 서버들 전부 도메인 뒤에 포트 번호를 달고 있는 상황이였다. (http://nlplab.iptime.org:9080)
단순히 데모 페이지이기 때문에 포트 번호로 구분해도 문제가 없지만, 앞으로 더 많은 데모 페이지 관리를 위해서는 웹 서버를 관리가 필요했다. 인턴이기 때문에 이러한 일을 교수님께서 지시 하지는 않았지만, 이전에 웹 개발 중에 Nginx를 통한 웹 서버 관리가 이해 되지 않았던 경험이 있어 그 궁금했던 점들을 공부하기 좋은 기회라고 생각해서 웹 서버 관리에 들어갔다.
리버스 프록시 (Reverse Proxy)
리버스 프록시는 인터넷으로부터 요청을 받아와서 이것들을 내부망의 서버로 포워드한다. 프록시에 요청을 하는 대상은 내부망을 인지하지 못할 수 있다.
출처: 위키 백과
프록시의 뜻은 대리자라는 뜻으로 서버와 클라이언트 사이에서 대리자 역할을 담당한다. 여러 클라이 언트 에 대한 proxy를 포워드 프록시(Forward Proxy)라고 하고, 여러 서버 에 대한 proxy를 리버스 프록시라고 한다. 예를 들어 본 포스팅에서 살펴볼 리버스 프록시는 http://nlplab.iptime.org:9080, http://nlplab.iptime.org:35777 와 같이 하나의 도메인에 연결된 여러 개의 포트를 관리 할 수 있는 기능이다.
리버스 프록시를 사용하면 백엔드 infra를 숨길 수 있다. 즉, 포트번호 등을 클라이언트로 부터 숨길 수 있다. 사실은 트래픽 분산 목적으로 사용되는데 연구실에서 관리되고 있는 여려개의 포트 번호를 보다 깔끔한 URL로 수정하고 싶어서 해당 개념에 대해 알아 보았다.
http://nlplab.iptime.org:{port_num} -> nlplab.iptime.org/demos/{demo_name}
http://nlplab.iptime.org:9080 -> nlplab.iptime.org/demos/nips
http://nlplab.iptime.org:35777 -> nlplab.iptime.org/demos/krop
하지만, 리버스 프록시를 진행하기 위해서는 웹 서버에 대한 깊은 이해가 필요해 보였다. 항상 백엔드 관리는 눈에 바로 보이는 것들이 없어서 실수를 하면 이를 Fix하기가 굉장히 어렵기 때문에 웹 서버 관리에 대한 지식과 경험이 먼저 필요해 보였다. 그래서, 최근 NIPS 워크샵에 Accept된 연구원들의 웹페이지 개발을 통해 Nginx에 대한 경험과 지식을 쌓고자 했다.
WordPress
우선 촉박한 시간으로 인해 날코딩이 아닌 WordPress를 통해 프론트 개발을 진행했다. 기존에는 날코딩으로만 프론트를 디자인 했는데, 상용툴을 사용해 보니 상당히 충격적이였다. 1~3주 가 걸릴 일들이 하루 이틀 사이에 끝나버렸다. 프론트 디자인 왜 적인 DB 연동을 통한 기능들 또한 플로그인 설치를 통해 손쉽게 구현이 가능했다. 그 동안 날코딩을 하면서 밤낮을 지새운 노력들이 현타가 안 올 수가 없었다 😧.
그렇게 일주일 동안 4개의 웹페이지를 개설했다.
- NMT Group: https://kunmt.org
- Coling 2022 offical blog: https://coling2022.info
- NeurIPS 2021 - Data-centric AI (DCAI) workshop demo1 : http://nlplab.iptime.org:9090/
- NeurIPS 2021 - Data-centric AI (DCAI) workshop demo2: http://nlplab.iptime.org:9091
Nginx
위와 같이 4개의 웹페이지를 개발 후, 2개의 웹 사이트에 대해서는 도메인 연결이 필요했다. 이 때부터 고난길이 시작 되었다. 이전에 Django를 통한 웹 개발 당시에는 Nginx 연결 단계에서는 코드에 대한 이해 없이 무지성으로 따라 해서 웹 서버 개발을 진행 했다. 학습이 제대로 되지 않은 여러 개념들이 혼란 스럽게 작용해서 인지, 하나의 서버에 여러개의 도메인을 연결 하는 개념이 이해 되지 않았다.
참고로, Cafe24와 같은 웹호스팅 업체를 쓰면 간단하게 해결될 문제 였지만(실제로 워드프레스와 Cafe24조합으로 연구실 홈페이지를 운영 중이다.) 배움을 통해 성장 해보고 싶고, 리버스 프록시에 대한 이해를 위해 기초 지식에 대한 학습이 필요하다고 생각해서 무작정 파고 들었다.
가상 도메인
가장 이해가 안되었고, 어려웠던 부분이다. 어떻게 하나으 고정 IP(하나의 물리적 서버)에 여러개의 도메인을 연결 할 수 있는가? 이다. 먼저, 도메인 이라는 개념은 naver.com 이라고 브라우저에 입력하면 도메인이 연결된 실제 고정 IP인 223.130.195.200 를 찾아가는 것으로 알고 있었다.
때문에, 고정 IP와 도메인의 관계를 유일(Unique) 해야하며, 일대다 관계가 되면 안되는 줄 알고 있었다. 왜냐하면 하나의 고정 IP는 하나의 웹 프로그램(웹 서버)와만 연결 될 수 있다고 착각 했기 때문이다. 이렇게 착각하기 쉬웠던 이유는 연구실의 데모 페이지들이 여러개의 포트 번호로 관리 되고 있었기 때문이다. 즉, 여러개의 포트로 유일한 도메인을 생성하고 있었기 때문이다.
여러 개의 포트로 유일하게 데모 사이트를 연결하면 문제가 되지 않는다. 하지만 일반적인 도메인 연결은 포트 번호를 표시 하지않는다. 즉, http는 80번 포트, https 433포트 고정된 하나의 포트를 사용한다. 때문에 실제로 도메인 연결을 고정아이피는 203.xxx.xxx.xxx:80 이라는 건데 여러개의 도메인이 하나의 주소로 들어오면 이는 말이 안된다고 생각 했었다.
http://kunmt.org -> http://203.xxx.xxx.xxx:80
http://nlplab.iptime.org -> http://203.xxx.xxx.xxx:80
그러던 중, 연구실의 개발자로 일하고 계신 연구원 분의 도움을 얻어 가상 도메인에 대한 개념에 대해 학습 할 수 있었다.
즉, 고정 IP가 있는 물리적 서버는 지금 들어오는 REQUEST가 http://kunmt.org에서 요청 된 것인지, http://nlplab.iptime.org 에서 들어 온 것인지 알 수 있다는 것이다. 그럼 이걸 어떻게 아냐? 바로 Nginx에서 작성한 설정값들로 이를 구분 할 수있다. (무지성으로 튜토리얼을 따라한 결과다..)
Nginx에서 가장 위에 작성하는 설정 값이 무엇인가? 바로 server_name과 어떤 포트를 받을지 listen을 작성한다. 이걸 통해서 웹 서버에서는 클라이언트가 어떤 도메인에서 접속한지 알 수 있고, 도메인 마다 다른 정보를 RESPONSE를 보내 줄 있다. 즉, server_name으로 구분이 가능한 것이다.
listen 80;
listen [::]:80;
server_name www.kunmt.org kunmt.org;
이러한 개념이 바로 가상 도메인이다. 이 가상 도메인 개념을 적용해, 하나의 서버에 여러개의 데모 서버를 연결 할 수 있었다.
가상 호스팅 또는 버추얼 호스팅(virtual hosting)은 하나의 서버(또는 서버 풀)에 여러 개의 도메인 이름(각 이름을 별도 관리)을 호스팅하는 방식을 말한다.
출처: 위키백과
다음과 같이 여러개의 사이트를 분리해서 웹 서버에서 관리가 가능해졌다. 추후에는 이렇게 학습한 내용을 발판 삼아, 리버스 프록시를 적용해 보고자 한다.
➜ sites-enabled ll
colling -> /etc/nginx/sites-available/colling
nips-wordpress -> /etc/nginx/sites-available/nips-wordpress
nips-wordpress-eo -> /etc/nginx/sites-available/nips-wordpress-eo
wordpress -> /etc/nginx/sites-available/wordpress