Mengakses HTTP 1.1, HTTP 2, dan HTTP 3. - ikbrath/Jaringan-Komputer GitHub Wiki

DOKUMENTASI HASIL PENGERJAAN

berikut adalah cara menginstall, dan mengconfigurasi web server berbasis Docker dengan jenis http yang berbeda

PERSIAPAN

  1. install Docker dan Wireshark di sistem
  2. pastikan browser Google Chrome telah terupdate

Konfigurasi

Menggunakana NGINX sebagai web server untuk mengakses HTTP/1.1, HTTP/2, dan HTTP/3.

  1. File Docker buat direktori baru dengan label docker atau lain sebagainya, kemudian di dalam direktori itu buat file docker-compose.yml, dengan konfigurasi:
version: '3.8'
services:
  web:
    image: nginx:latest
    ports:
      - "80:80"       # HTTP/1.1
      - "443:443"     # HTTP/2 dan HTTP/3
    volumes:
      - ./conf.d:/etc/nginx/conf.d
      - ./certs:/etc/nginx/certs
      - /var/www/project_http:/var/www/project_http
  1. File konfigurasi NGINX

Buat file default.conf di dalam direktori conf.d:

server {
   listen 80; # HTTP/1.1
   listen 443 ssl http2; # HTTP/2
   listen 443 quic reuseport; # HTTP/3
   ssl_certificate /etc/nginx/certs/server.crt;
   ssl_certificate_key /etc/nginx/certs/server.key;
   ssl_protocols TLSv1.3;
   ssl_prefer_server_ciphers off;
   add_header Alt-Svc 'h3-23=":443"; ma=86400';
   add_header X-Content-Type-Options nosniff;
   root /var/www/project_http;
   index index.html;
}
  1. Buat Sertifikasi SSL Buat sertifikat SSL untuk mendukung HTTPS:
mkdir certs
openssl req -x509 -newkey rsa:2048 -keyout certs/server.key -out certs/server.crt -days 365 -nodes
  1. Mengaktifkan firewall
ufw enable
ufw allow 80
ufw allow 443

Buat Web sederhana

Berikut adalah contoh sederhana dari sebuah halaman HTML yang berisi CSS, JavaScript, dan gambar untuk pengujian protokol HTTP/1.0, HTTP/2.0, dan HTTP/3.0. Semua file terkait (HTML, CSS, JavaScript, dan gambar) disusun secara terpisah untuk memastikan pemuatan multi-objek yang bisa diuji.

  1. Buat Folder Project
$ cd /var/www && mkdir project_http
$ cd project_http
  1. Buat index HTML buat index untuk menghubungkan CSS,Javascript, dan image
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTTP Protocol Testing</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Pengujian Protokol HTTP</h1>
        <img src="image.png" alt="Sederhana" class="test-image">
        <p id="description">Halaman ini memuat gambar, menggunakan CSS untuk gaya, dan memiliki interaktivitas JavaScript.</p>
        <button id="testButton">Klik Saya!</button>
    </div>

    <script src="script.js"></script>
</body>
</html>
  1. CSS
body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f9f9f9;
    margin: 0;
    padding: 0;
}

.container {
    padding: 20px;
    margin: 50px auto;
    max-width: 600px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

h1 {
    color: #333333;
    font-size: 24px;
}

.test-image {
    width: 200px;
    margin: 20px 0;
}

#testButton {
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background: #007bff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#testButton:hover {
    background: #0056b3;
}
  1. Script.js
document.getElementById("testButton").addEventListener("click", () => {
    const description = document.getElementById("description");
    description.textContent = "Anda baru saja mengklik tombol ini!";
    alert("Tombol telah diklik!");
});
  1. Image.png

Cara Menjalankan

  1. Tempatkan Semua File di Folder yang Sama: Pastikan index.html, style.css, script.js, dan image.png berada di direktori yang sama. Jalankan Web Server:

  2. Gunakan web server seperti NGINX yang mendukung HTTP/1.0, HTTP/2.0, dan HTTP/3.0.

  3. Pastikan sertifikat SSL sudah diatur untuk mendukung HTTP/2.0 dan HTTP/3.0.

  4. Akses Halaman di Browser: Gunakan Chrome atau browser lain yang mendukung HTTP/2 dan HTTP/3.

  5. Buka halaman melalui URL server Anda (misalnya, http://localhost atau https://localhost).

  6. Amati di Wireshark:

  7. Filter protokol untuk melihat lalu lintas HTTP:

  • HTTP/1.0: http
  • HTTP/2.0: http2
  • HTTP/3.0: udp.port==443

Hasil

http1 http2
⚠️ **GitHub.com Fallback** ⚠️