[#20] HTTP개선 (1.1 -> 2.0 -> 3.0)

[inhachoi]

🔗 #20

🙋‍ Summary (요약)

• Why?: 네트워킹의 흐름을 학습하며, 현대 웹의 요구사항에 부적합한 HTTP/1.1을 2.0과 3.0의 멀티플렉싱, 헤더 압축, 서버 푸시와 같은 최신 기능을 통해 속도, 보안, 효율성을 향상시키고, 이를 수치로 직접 비교해보기 위해서.
• HTTP/1.1 -> HTTP/2.0
• HTTP/2.0 -> HTTP/3.0
• 자세한 학습 및 개선 과정

😎 Description (변경사항)

nginx.conf 파일에 설정 추가.

• before

server {
    listen 80;
    server_name boolock.site;

    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl;
    
    server_name boolock.site;

    ssl_certificate /etc/nginx/ssl/fullchain.pem;
    ssl_certificate_key /etc/nginx/ssl/privkey.pem;

    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://backend:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_cache_bypass $http_upgrade;
    }

    add_header X-Content-Type-Options nosniff;
    add_header X-Frame-Options SAMEORIGIN;
    add_header X-XSS-Protection "1; mode=block";

    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application;
    gzip_min_length 256;
}

• after

server {
    listen 80;
    server_name boolock.site;

    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl;
    http2 on;
    http3 on;
    quic_retry off;

    server_name boolock.site;

    ssl_certificate /etc/nginx/ssl/fullchain.pem;
    ssl_certificate_key /etc/nginx/ssl/privkey.pem;
    ssl_protocols TLSv1.3;
    ssl_prefer_server_ciphers off;

    add_header Alt-Svc 'h3-23=":443"; ma=86400';

    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://backend:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_cache_bypass $http_upgrade;
    }

    add_header X-Content-Type-Options nosniff;
    add_header X-Frame-Options SAMEORIGIN;
    add_header X-XSS-Protection "1; mode=block";

    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application;
    gzip_min_length 256;
}

• http2 on; → HTTP/2.0 프로토콜을 활성화하는 설정
• http3 on; → HTTP/3.0 프로토콜을 활성화하는 설정
• quic_retry off; → QUIC 연결에서 재시도를 비활성화하는 설정 (QUIC는 초기 핸드셰이크 중 연결 설정을 재시도 할 수 있어서 불필요한 재시도 시간 절약)
• ssl_protocols TLSv1.3; → 서버에서 지원하는 SSL/TLS 프로토콜을 TLS 1.3으로 제한. (TLS 1.3이 1.1, 1.2 버전보다 보안과 성능이 좋다)
• ssl_prefer_server_ciphers off; → 서버가 아니라 클라이언트가 원하는 암호화 방식을 우선적으로 사용하도록 설정.
• add_header Alt-Svc 'h3-23=":443"; ma=86400'; → HTTP 헤더에 Alt-Svc를 추가하여 브라우저가 HTTP/3.0을 사용할 수 있도록 알린다. (ma=86400은 Alt-Svc 정보를 캐시에 저장하는 유효 기간으로 86400초 = 1일 이다)

기존 HTTP/1.1 모습

HTTP/2 적용 모습

HTTP/3 적용 모습

🔥 Trouble Shooting (해결된 문제 및 해결 과정)

처음에는 컨테이너 내부를 직접 수정하는 방식으로 진행했다. 하지만 이 방식은 컨테이너 내부의 설정 파일만 변경되므로, 컨테이너를 재배포하거나 새로 생성하면 변경 사항이 초기화되는 문제가 있어서 프로젝트 설정 파일을 수정하는 방식으로 변경했다.

🤔 Open Problem (미해결된 문제 혹은 고민사항)

[lee0jae330]

학습 정리가 정말 잘 되어 있어서 http 2.0, 3.0로 개선한 이유를 확실하게 알 것 같습니다 ㅎㅎ 저도 네트워크 대해 얼른 공부해야겠네요 ! 고생하셨습니다.♥️

[Honghyeonji]

학습정리 너무 잘 되어있어서 계속 감탄만 했네요ㅎㅎ 수고하셨습니다❤️

[Honghyeonji]

이런 설정이 있었군요..?