<div id="readability-page-1" class="page"><div id="review_text">

 얼마 전에 네트워크 관련해서 이런저런 공부를 하다가 알게 된 사실인데요. 
맙소사.. HTTP/2 버전을 적용한 게 엊그제 같은데, 이제 모던 웹 브라우저들이 HTTP/3 버전을 기본적으로 지원한다고 하더라고요.


 그래서 조금 알아보니까 웹 서버도 Apache는 아직 지원하지 않지만, Ubuntu v22.04에서 NGINX는 v1.25.1 메인 라인 버전부터 지원한다고 하더라고요.


절대 안해볼 수 없죠?!


 때마침 얼마전에 ubuntu도 22.04버전으로 업데이트 했었는데, 간단하게 NGINX만 업데이트하고 설정 해주면 될 거 같아요! (아마도..)


[참조] 
 <a href="https://www.f5.com/company/blog/nginx/binary-packages-for-preview-nginx-quic-http3-implementation" target="_blank">https://www.f5.com/company/blog/nginx/binary-packages-for-preview-nginx-quic-http3-implementation</a>

<h3>1. HTTP/3</h3>

 HTTP/3 버전에 대한 설명을 이야기하려고 했던 것은 아니지만, 간단하게 큰 특징만 알아보자면!


 우선, 가장 큰 특징으로 보이는 건, HTTP/3는 이전까지의 TCP 기반이 아닌 UDP 기반의 QUIC 프로토콜을 사용한다고 해요. (QUIC는 구글에서 개발하였다고 해요. 생각해보면 HTTP/2 버전도 구글의 SPDY 구조를 기반으로 표준이 된 걸 생각하면 뭔가 구글이 새삼 더 대단하게 느껴지네요.)


 위 이야기와 이어서 TCP를 사용하지 않기 때문에 TCP의 커낵션 과정(3-Way Handshake)가 생략되고, 뿐만 아니라 TCP에서는 HTTPS 통신에서 TCP 커낵션 후에 TLS Hadnshake 과정이 추가로 진행이 되는데 QUIC는 TLS도 v1.3을 기본으로 QUIC Handshake와 TLS Handshake가 동시에 진행을 해서 더 빠르게 진행이 된다고 합니다!


 점점 이야기가 새는 느낌인데..


 [TLS v1.2 Handshake] 
 클라이언트(브라우저)가 서버로부터 인증서와 공개 키를 받은 후, 인증서가 신뢰할 수 있는 인증 기관에서 발급한 것인지 검증합니다. 이후 클라이언트는 공개 키를 사용해 세션 키를 암호화하여 서버에 전달하고, 서버는 자신의 개인 키로 세션 키를 복호화합니다. 이후 통신은 이 세션 키를 사용하여 데이터를 암호화하여 주고 받습니다.


 [TLS v1.3 Handshake] 
 클라이언트와 서버는 디피-헬만 키 교환(Diffie–Hellman key exchange)을 사용해 각각 비밀 키와 공개 키를 생성한 후, 서로의 공개 키를 교환합니다. 양측은 전달받은 공개 키와 자신의 비밀 키를 사용하여 세션 키를 생성하고, 이후 통신에서는 이 세션 키를 사용하여 데이터를 암호화하여 주고 받습니다.


 요약하면, v1.3 버전은 조금 더 안전하고 절차가 간소화되어 조금이지만 성능이 향상되었습니다.


 다시 돌아와서, HTTP/2는 멀티플렉싱으로 여러개의 요청을 동시에 처리할 수 있지만, 기본적으로 TCP 기반이기 때문에 패킷 전송에 손실이 생겼을때 모든 동작을 멈추고 기다려야하는 문제가 있는데(Head of Line Blocking), HTTP/3는 모든 스트림이 독립적으로 동작하기 때문에 다른 스트림에 영향을 주지 않고 빠르게 로딩할 수 있다고 합니다!


 HTTP/3 에 대한 이야기는 여기까지만 하고,

<h3>2. NGINX 업데이트하기</h3>

 저는 얼마전에 Ubuntu를 업데이트해서 v22.04를 사용하고 있기 때문에 NGINX를 업데이트 해줄거에요. 
 우선 기본 패키지 목록에서는 NGINX를 1.25.1 버전 이상으로 설치할 수 없어서 NGINX의 공식 저장소를 추가해줘야합니다.



		<div id="crayon-66f5b39771bfb267879489" data-settings=" touchscreen minimize scroll-mouseover">
				<table>
					<tbody><tr>
				<td data-settings="hide">
					
				</td>
						<td><div>&nbsp;&nbsp;$ vi /etc/apt/sources.list.d/nginx.list</div></td>
					</tr>
				</tbody></table>
			</div>



 “/etc/apt/sources.list.d” 디렉토리 안에 “nginx.list” 파일을 만들고 공식 리포지토리 내용을 추가합니다.



		<div id="crayon-66f5b39771c01600360814" data-settings=" touchscreen minimize scroll-mouseover">
				<table>
					<tbody><tr>
				<td data-settings="hide">
					
				</td>
						<td><div>deb http://nginx.org/packages/ubuntu/ jammy nginxdeb-src http://nginx.org/packages/ubuntu/ jammy nginx</div></td>
					</tr>
				</tbody></table>
			</div>



 다음 아래 커맨드를 입력해서, NGINX 패키지 인증을 위해 GPG 키를 추가합니다.



		<div id="crayon-66f5b39771c03863963518" data-settings=" touchscreen minimize scroll-mouseover">
				<table>
					<tbody><tr>
				<td data-settings="hide">
					
				</td>
						<td><div>curl -fsSL https://nginx.org/keys/nginx_signing.key | sudo tee /etc/apt/trusted.gpg.d/nginx_signing.asc</div></td>
					</tr>
				</tbody></table>
			</div>



 이제 패키지 목록을 업데이트하고 NGINX를 설치해주면 최신 버전으로 NGINX가 설치됩니다!



		<div id="crayon-66f5b39771c05837966988" data-settings=" touchscreen minimize scroll-mouseover">
				<table>
					<tbody><tr>
				<td data-settings="hide">
					
				</td>
						<td><div>&nbsp;&nbsp;$ sudo apt update&nbsp;&nbsp;$ sudo apt install nginx&nbsp;&nbsp;$ nginx -v&nbsp;&nbsp;# nginx version: nginx/1.26.2</div></td>
					</tr>
				</tbody></table>
			</div>



 사실 어느정도 예상은 하고 있었지만, 역시나… 
nginx를 실행 했지만 가상 호스트로 등록한 사이트가 하나도 들어기지지 않았습니다.. 
그렇게 한참을 해맨 후..


 NGINX를 업데이트 하면서 기본 설정에 “include /etc/nginx/sites-enabled/*;”가 사라져서 안된다는 사실을 알았답니다..



		<div id="crayon-66f5b39771c06278612103" data-settings=" touchscreen minimize scroll-mouseover">
				<table>
					<tbody><tr>
				<td data-settings="hide">
					
				</td>
						<td><div>&nbsp;&nbsp;$ vi /etc/nginx/nginx.conf</div></td>
					</tr>
				</tbody></table>
			</div>




		<div id="crayon-66f5b39771c08420160889" data-settings=" touchscreen minimize scroll-mouseover">
				<table>
					<tbody><tr>
				<td data-settings="hide">
					
				</td>
						<td><div>&nbsp;&nbsp;...&nbsp;&nbsp;access_log&nbsp;&nbsp;/var/log/nginx/access.log&nbsp;&nbsp;main;&nbsp;&nbsp;sendfile&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;on;&nbsp;&nbsp;#tcp_nopush&nbsp;&nbsp;&nbsp;&nbsp; on;&nbsp;&nbsp;keepalive_timeout&nbsp;&nbsp;65;&nbsp;&nbsp;#gzip&nbsp;&nbsp;on;&nbsp;&nbsp;include /etc/nginx/conf.d/*.conf;&nbsp;&nbsp;include /etc/nginx/sites-enabled/*; #추가한 내용}</div></td>
					</tr>
				</tbody></table>
			</div>



 NGINX를 정말 너무 오랜만에 설치하긴 했지만.. 
 “include /etc/nginx/sites-enabled/*;” 이 구문이 기본값이 아니였다니…


 그리고 추가로 이 블로그는 php 기반이기 때문에 “PHP-FPM”를 사용하는데요. 그러면 NGINX의 user 값을 www-data로 바꿔주어야 합니다.



		<div id="crayon-66f5b39771c09845518416" data-settings=" touchscreen minimize scroll-mouseover">
				<table>
					<tbody><tr>
				<td data-settings="hide">
					
				</td>
						<td><div>&nbsp;&nbsp;$ vi /etc/nginx/nginx.conf</div></td>
					</tr>
				</tbody></table>
			</div>




		<div id="crayon-66f5b39771c0a011367666" data-settings=" touchscreen minimize scroll-mouseover">
				<table>
					<tbody><tr>
				<td data-settings="hide">
					
				</td>
						<td><div>&nbsp;&nbsp;user www-data; # 초기값은 nginx 였습니다.&nbsp;&nbsp;...</div></td>
					</tr>
				</tbody></table>
			</div>



 이렇게 무사히 첫번째 고비를 넘기고..

<h3>3. HTTP/3 설정하기</h3>

 생각보다 HTTP/3 설정은 간단했어요. 
 가상 호스트 설정으로 가서



		<div id="crayon-66f5b39771c0c611601875" data-settings=" touchscreen minimize scroll-mouseover">
				<table>
					<tbody><tr>
				<td data-settings="hide">
					
				</td>
						<td><div>&nbsp;&nbsp;$ vi /etc/nginx/sites-available/falsy</div></td>
					</tr>
				</tbody></table>
			</div>



 가상 호스트에 대한 설명이나 싱크 내용은 생략합니다! 
 <a href="https://falsy.me/ubuntu-%ED%99%98%EA%B2%BD%EC%97%90-nginxphp7mysql-%EC%84%A4%EC%B9%98%ED%95%98%EA%B3%A0-wordpress-%EC%9D%B4%EC%82%AC%ED%95%98%EA%B8%B0/" target="_blank">https://falsy.me/ubuntu-환경에-nginxphp7mysql-설치하고-wordpress-이사하기/</a> 
 위 문서에서 “6. nginx 가상호스트 설정” 부분을 참고해주세요.



		<div id="crayon-66f5b39771c0e052728571" data-settings=" touchscreen minimize scroll-mouseover">
				<table>
					<tbody><tr>
				<td data-settings="hide">
					<div>123456789101112131415161718192021</div>
				</td>
						<td><div>&nbsp;&nbsp;server {&nbsp;&nbsp;&nbsp;&nbsp;server_name falsy.me;&nbsp;&nbsp;&nbsp;&nbsp;...&nbsp;&nbsp;&nbsp;&nbsp;listen 443 ssl http2;&nbsp;&nbsp;&nbsp;&nbsp;# 여기부터 아래로 새로 추가된 내용입니다.&nbsp;&nbsp;&nbsp;&nbsp;listen 443 quic reuseport;&nbsp;&nbsp;&nbsp;&nbsp;# HTTP/3 settings&nbsp;&nbsp;&nbsp;&nbsp;add_header Alt-Svc 'h3-23=":443"; ma=86400'; # HTTP/3-23 (Draft)&nbsp;&nbsp;&nbsp;&nbsp;add_header Alt-Svc 'h3-29=":443"; ma=86400'; # HTTP/3-29 (Latest Draft)&nbsp;&nbsp;&nbsp;&nbsp;add_header Alt-Svc 'h3="443"; ma=86400';&nbsp;&nbsp;&nbsp;&nbsp;# signal whether we are using QUIC+HTTP/3&nbsp;&nbsp;&nbsp;&nbsp;add_header X-protocol $server_protocol always;&nbsp;&nbsp;&nbsp;&nbsp;# QUIC and HTTP/3 configuration&nbsp;&nbsp;&nbsp;&nbsp;ssl_protocols TLSv1.3;&nbsp;&nbsp;}</div></td>
					</tr>
				</tbody></table>
			</div>



 끝이에요 간단하죠?! 
 이제 nginx를 재시작해주고 브라우저로 가서 개발자 도구를 통해 확인을 해보면!



		<div id="crayon-66f5b39771c0f283835153" data-settings=" touchscreen minimize scroll-mouseover">
				<table>
					<tbody><tr>
				<td data-settings="hide">
					
				</td>
						<td><div>&nbsp;&nbsp;$ sudo systemctl restart nginx</div></td>
					</tr>
				</tbody></table>
			</div>


<img decoding="async" src="https://falsy.me/wp-content/uploads/2024/09/http.png" alt="">

 역시, 세상엔 쉬운일이 없습니다.. (아래에 h3은 구글 폰트의 통신입니다.) 
이렇게, 저렇게, 많은 삽질 후..


 <a href="https://log.somni.one/working-with-nginx-http3/" target="_blank">https://log.somni.one/working-with-nginx-http3/</a>


 문제의 해답을 찾았습니다. 
 바보처럼 지금까지 그렇게 HTTP/3 버전은 UDP 기반의 QUIC 프로토콜을 사용하는 것이 가장 큰 특징이라고 말해 놓고 방화벽을 TCP만 열어놔서 안됐던 거 였어요..


 저는 AWS를 사용하기 때문에 보안 그룹에 가서 UDP의 443포트를 열어줬어요.

<figure>
<img decoding="async" src="https://falsy.me/wp-content/uploads/2024/09/http2.png" alt=""> 
</figure>

 다시 브라우저의 개발자 도구로 확인해보면!!

<img decoding="async" src="https://falsy.me/wp-content/uploads/2024/09/http3.png" alt="">

 짠! 
이제 이 블로그는 채신기술 HTTP/3를 사용합니다.

<h3>끝</h3>
</div></div>

폴시랩

Ubuntu를 사용하는 NGINX 웹 서버에 HTTP/3 설정하기
Ubuntu를 사용하는 NGINX 웹 서버에 HTTP/3 설정하기 first appeared on 폴시랩.

Ubuntu를 사용하는 NGINX 웹 서버에 HTTP/3 설정하기

댓글