2019년 말부터 운영해온 한세 VPN에 대해서 소개볼까 합니다.
Hansei VPN을 만든 이유
저의 학교에서 무료 VPN 서비스를 시작한 이유는 아래와 같이 크게 4 가지 입니다.
1.기존 Softether VPN Gate 에서 사용하다 계정 해킹사고(메일로 날라온 아이피랑 VPN연결 시 연결했던 아이피랑 같음) 가 일어나 만들기로 함
2.기존에 “한빛”이라는 페이지가 있었지만, 2019년 말에 갑작스럽게 종료되어 급식 정보, 시간표 등을 볼 수 없었음. 그래서 급식정보+시간표에 VPN + 자료실까지 있는 사이트를 구축하기로 함
3.찾는 자료들이 각각 다른 사이트에 있어 하나 하나하나 다운로드 할 때 피로도가 상승하여 한번에 있는 페이지를 구축하기로 함
4.선린에서도 VPN 을 필요로 하기 때문에 HanseiVPN 을 구축하면서 선린 친구랑 회의 끝에 선린인터넷고등학교 내에서도 서비스 하기로 결정
위 4가지 이유가 Hansei VPN을 만드는 이유라고 할 수 있습니다.
그중에서도 1번 문제가 가장 컸습니다. 2019년 초에 이 문제가 가장 많이 일어나서 이 피해를 줄이고자 제작한 게 제일 컸지 않나 싶습니다. 그리고 저희 학교가 아닌 선린인터넷 고등학교에서도 VPN이 필요하다는 친구의 연락을 받아 같이 협력하여 도와주기로 하였습니다.
처음 2019년 초에는 Hansei VPN 비슷하게 아닌 친구들에게만 VPN 서비스를 제공하였습니다. 왜냐하면 ASUS 공유기에 내장되어 있는 PPTP VPN 이였기 때문이죠. 그러기 때문에 조금의 많은 트래픽이 발생할 시 속도가 매우 느려지는 현상이 생겼습니다.
DL380p G8 서버를 구축한 이후 라우터를 Pfsense 라우터로 교체하기로 하였습니다.
Pfsense 라우터 스팩은 이렇습니다 (혹시 이 그를 보시고 Pfsense 구축을 하고싶은 분들을 위해 스팩을 공유합니다)
Intel Xeon E3-1220v3
Samsung UDIMM 4GB
Intel SATA 40G SSD (Boot ONLY)
WD Green 500G (LOG ONLY)
Supermicro X10SLL+-F
FSP 500W 80PLUS
라우터 설정을 모두 끝내고 DL380p G8 서버에 VPN용 VM 을 하나 생성하였습니다. 서버 환경은 아래와 같습니다.
Intel E5-2667 X2
DDR3 RDIMM 48GB
SAS 400G RAID1
Ubuntu Server 20.04 LTS
여기에서 VPN 서버를 구축하였고 웹 서버는 기존에 있던 웹서버를 사용하기로 했습니다. 왜냐하면 두 VM 이 사용하는 ISP가 다르기 때문입니다. 두 VM이 회선이 분리되어 있는 이유는 만약 VPN 서버에 트래픽이 몰리면 웹페이지를 불러오는 시간이 엄청나게 지연되거나 최악의 경우엔 접속 장애까지 올 수 있기 때문입니다.
이렇게 하드웨어적인 구성을 모두 마치고 VPN 서버를 구축 후 웹사이트 제작에 들어갔습니다. 처음에 만든 웹사이트의 목적은 CSS,JS 를 최대한 줄이고 VPN 설명및 사용방법을 전달해 주시만 하는 용도로 아주 가볍게 설계하려고 노력했습니다.
2020-12-03 ~ 2021-03-09 기존 사이트
그런데 이렇게 설계하니 사이트 트래픽은 매우 없었지만 너무 사용자 UI가 불친절 하였습니다. 그래서 이 웹사이트를 보고 VPN 사용을 안하는 친구들도 생겨났죠. 스팸 사이트 같다는 의견을 받았습니다. 그래서 2019년 말 Bootstrap 5 프레임 워크를 사용하기로 하였습니다.
2021-03-10 Bootstrap 적용
웹 라인쪽 트래픽은 그렇게 높아지지 않았습니다. 왜냐하면 Bootstrap5 를 포함한 제이쿼리 등JS, CSS 파일을 CDN서버를 구축하여 배포 했기 때문입니다 .덕분에 트래픽은 아주 조금 올라가게 되었고 UI도 이전보다 깔금해진 것을 볼 수 있습니다.
CDN 서버 구축 관련해서는 [Nginx] 엔진엑스로 CDN(Content Delivery Network)서버 구축 하기 글을 참고해 주세요.
2021-03-13 기본 Container 정리, 자료실 자료 디렉토리 분리
사이트의 방문 횟수를 늘리기 위하여 새로운 콘텐츠를 만들기 시작
2021-03-20 새로운 웹게임 메뉴를 추가, 슬라이딩 Container 추가
클라이언트의 많은 요청으로 슬라이딩 Container 에 자료실 다이랙트 링크를 심어놨습니다.
기존 사이트는 Hansei VPN에 연결 시 사이트가 뜨지 않는 문제가 있었지만, Pfsense NAT 설정에서 Proxy Pass 로 변경 후 접속이 가능하게 하였습니다.
이제 Hansei VPN에 접속하면 사이트 NAV 상단에 Hansei VPN에 연결 상태 문구가 표시되게 변경되었습니다. 이제 Hansei VPN 연결 유무를 한번에 알게 변경했습니다.
2021-04-01 급식API를 불러와 오늘, 내일 급식을 불러옴 + 네비게이션 바 정렬 및 메뉴 폰트 변경
API를 서버단에서 필요한 정보(오늘 내일 급식) 를 처리하고 AJAX로 처리하여 웹 접속 지연 시간을 줄임
2021-04-03 급식 API를 불러오는데 문제 발생
급식 API를 불러오는데 문제가 생겼습니다. 4월3일 토요일은 급식 자체가 없기 때문에 값이 없었고 오류 처리를 하지 않아 로딩 스피너만 계속 돌아갔습니다. 이 문제를 처리하기 위해 백엔드 쪽에서 넘어오는 값을 처리하여 그이 맞게 수정하고 AJAX 쪽에서도 오류코드와 연결할 수 없다는 메시지를 표시하는 방식으로 변경하였습니다.
2021-04-10 IE 체크 스크립트 추가
인터넷 익스플로러에서 일부 Bootstrap UI가 깨지는 문제로 IE브라우저로 접속하면 안내문구를 항상 띄워놓게 해놓았다.
2021-04-15 기준 hansei vpn, 한세 vpn 키워드 검색 1위
hansei vpn, 한세 vpn 키워드로 검색 시 검색 상단에 위치함
2021-04-19 기준 Hansei VPN 3.0 발표
기존 Hansei VPN 보다 10% 더 빨리진 VPN과 다운로드 서버 업그래이드
더욱 개선된 UI3.0으로 훨씬더 심플한 UX를 제공
2021-04-26 기준 통계표, 서비스 상태 업데이트
2021-7-20 Hansei VPN 4.0 업데이트 발표
3.0 버전에 비해 달라진 점
- 기존 메인 페이지 불러올 시 import되어있는 모든 ajax 로드 -> function 으로 묶어 필요한 부분만 호출 (사이트 접근 속도 향상 기대)
- 3.x 버전에 비해 깔끔해진 ui 제공 UX기대치 증가
- HVC 1.0 버전 출시 (더욱 편리하게 VPN 연결 가능으로 사용자 유치 가능성)
- 메인 대쉬보드 기능을 추가하여 최신정보 (보안뉴스 , 코로나 확진자 현황, 오늘의 날씨 및 습도, 오늘급식 등) 를 쉽게 알 수 있음
- 왼쪽 사이트에 있는 알림센터를 통해 오늘의 시간표, 하교까지 남은시간 , 현재시간 등을 알 수 있음
Hansei VPN 업데이트가 있을 시 여기에 업데이트 할 예정입니다.
구현 질문이나 사이트에 대해 질문이 있으시면 아래 댓글로 남겨주세요.