TIL: 오늘 Nginx랑 친해지면서 했던 몇 가지 생각들

오랜만에 적어보는 TIL. 특별히 형식 없이 적어보려고 한다. (왜냐면 잘 시간이 모자라기 때문에, 횡설수설 하고나서 퇴고할 시간이 없다...)

 

오늘 한 일 첫번째. 메가존에서 구매한 도메인 Route53에 갖다 붙이기.

언젠가 여유가 좀 나면 자세하게 포스팅 해볼 수 있겠지만 과정 자체에 특별히 생소한 건 없었다. 아주 짧게 당장 한 일을 요약하면 아래 두개 정도.

1. 호스팅 영역 하나 생성해서, NS 정보 나오면 복사해서 메가존 네임서버 관리 화면에 붙여넣기. 

2. 필요한 서브도메인 있으면 A 레코드로 추가해놓기.

 

오늘 한 일 두번째...부터는 거의 nginx와 친해지기 시간이었다. https를 적용하기 위한 시도였다.

인증서는 let's encrypt의 certbot으로 설치하기로 했다.

어려운 건 없다. 걍 설치하고 실행하면 된다.

근데 이 과정에서 잊고 있었던, 흥미로웠던 부분이 있는데, 예전에는 certbot으로 인증서를 설치하면 TLSv1.1, TLSv1.2, TLSv1.3, 이렇게 세 가지 TLS 버전을 지원하도록 기본 설정이 되어있었던 거 같은데 이번에 설치하면서 보니까 1.1은 사라져있었다. Triple-DES 같은 알고리즘도 알아서 제거되어있었다. 편리하고 좋았다.

 

없애는 김에 TLSv1.2도 날리려고 했는데, 모바일 사파리에서 지원이 된다만다 말이 많아서 고민을 좀 했다.

확인해본 결과 11버전? 하여튼 고릿적 버전부터(는 오바고 몇년 안되긴 했다) TLSv1.3지원하기 시작했다는 사실을 확인했다. 크롬은 완벽하게 지원.

우리는 모바일웹 환경을 메인으로 하는 서비스를 만들고 있기 때문에 과감하게 1.2도 날렸다. 시원~

 

보안(과 보안 평가)을 좀 신경 쓰는 김에 HSTS 헤더도 명시적으로 추가해주었다.

nginx 설정파일의 server{ } 블록 안에서 스크립트로 host가 'http'면 'https'로 리다이렉트 시켜주면 동작자체는 원하는대로(HSTS처럼) 페이지가 움직이지만, 그래도 명시적으로 추가를 해줘야 안전 평가 사이트 같은 곳에서 가산점을 받는다.

걍 location / 같은 곳에서 add_header로 추가하면 된다. 

 

근데 또 하나 새롭게 알게 된 사실은, add_header는 딱 하나만 추가할 수 있다는 점이다! 여러개를 쓰면 맨 마지막 것만 적용이 된다. 만약에 여러개를 사용하고 싶으면 별도의 설정파일로 빼고 include하는 식으로 넣어야지만 여러개가 동작한다.

 

아직도 http/1.1을 쓰나?! http/2로 마이그레이션 하자!

어지간한 웹서버와 웹브라우저는 이제 다 http/2를 지원한다. http/3가 나오는 판인데 당연한 이야기다. 지나간 버전은 레거시 호환성을 지원하고 있는 것이니, 빠르게 다음 버전으로 갈아타보자.

 

계속 진행하려면 nginx 버전을 확인해야 하는데 그냥 가능할 확률이 높다. 지금 설치하면 nginx 버전이 1.20대인데, 1.13버전부터 지원하고 있으니까 어지간히 버전업을 하지 않고서는 지원하지 않기도 어렵다.

적용 방법은 매우 쉬워서 좋았다.

설정파일에서 https의 포트를 적어주는 항목에 '443 ssl;' 과 같은 식으로 써있을 텐데 이것 끝에 http2를 추가해서 '443 ssl http2;'라고 바꿔주면 적용 끝이다.

그럼 이제 크롬 네트워크 탭에서 http/1.1이라는 문구 대신 h2를 확인할 수 있다.

 

보너스 - 와! 서버푸시 아시는구나!

서버푸시란 http/2에서 제공하는 신박한 기술이다. 뭔지 자세하게 설명하자면 나도 잘은 모르고 한 번의 요청에 응답할 여러 파일을 묶어서 한 번에 딜리버리 하는 기술이다. 

예를 들어 index.html을 요청하면 main.css, default.js 와 같은 파일을 묶어서 전달할 수 있다.

적용방법 자체는 쉽기 때문에 대충 구글링 해주시면 되겠고, 난 어쨌든 이 기술을 적용해보고 싶어서 http/2로 버전업을 택한 것이었다.

리액트는 hello world페이지를 띄워도 맨 처음 한 번은 2.6초는 기다려야 했기 때문이다!! 왜케 느려!!!

 

자러갈 시간이 점점 줄어들고 있기 때문에 결론만 말하면 서버푸시에게 뒷통수를 맞았다.

서버푸시로 react의 static resources를 한번에 묶어서 전달하니, 무슨 이유에서인지 모르겠지만, 딜리버리 시간이 2.8~3초로 늘었다. 단순 산술계산 상으로는 7~10%정도의 네트워크 추가 지연이 일어난다.

ㄷㄷㄷ.... 네트워크 딜레이가 복사가 된다고.....

 

추측되는 이유는 딱히 없고... 아마 서버 성능을 타나보다...라고 생각했다. 왜냐면 지금 사용중인 서버는... ec2 프리티어......... 또르륵...

우리 서버푸시가 그런 애가 아니라고요...

캐시는 1도 모르지만 어쨌든 캐싱쪽으로 해결책을 알아봐야 할 것 같다.

 

오전에 이런 것들을 하면서 즐겁게 시간을 보냈는데 오후에는 급 멘탈이 나가서 밍기적밍기적 oauth 로그인을 구현하다가 시간을 날렸다. 이런!

 

내일 또 열심히 하려면 얼른 퇴근해야겠다. 이제 일찍 좀 자야지, 컨디션과 내 체력을 고려해서 12시 전에는 무조건 자야겠다, 라고 생각했는데 지금 시각이 11시 59분인 것이기 때문이다.