Как связан DNS и IP?

Связь DNS и IP адресов

DNS (Domain Name System) и IP адреса - это две связанные технологии. DNS преобразует понятные нам доменные имена в IP адреса, которые используются компьютерами для маршрутизации интернет-трафика.

Что такое IP адрес

// IP адрес (IPv4) - это 32-битное число, обычно записываемое как 4 октета
// Пример: 192.168.1.1
// Каждый октет может быть от 0 до 255

// IPv6 - это 128-битное число (для будущего интернета)
// Пример: 2001:0db8:85a3:0000:0000:8a2e:0370:7334

// Проверка IP в JavaScript
const ipv4Regex = /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/;

const isValidIP = (ip) => ipv4Regex.test(ip);
console.log(isValidIP('192.168.1.1'));  // true
console.log(isValidIP('256.1.1.1'));    // false

Что такое DNS

// DNS (Domain Name System) - это система именования, которая преобразует
// доменные имена (example.com) в IP адреса (93.184.216.34)

// Процесс разрешения DNS:
// 1. Пользователь вводит в браузер: https://example.com
// 2. Браузер отправляет DNS запрос
// 3. DNS сервер отвечает: example.com = 93.184.216.34
// 4. Браузер подключается к серверу по IP адресу

// Типы DNS записей:
// A - преобразует доменное имя в IPv4 адрес
// AAAA - преобразует доменное имя в IPv6 адрес
// CNAME - создает псевдоним для другого доменного имени
// MX - определяет почтовый сервер
// TXT - хранит текстовые данные
// NS - указывает на авторитетный DNS сервер

DNS преобразование в браузере

// Когда вы пишете fetch('https://api.example.com/data')
// браузер делает следующее:

// 1. Извлекает доменное имя
const url = new URL('https://api.example.com/data');
const hostname = url.hostname; // api.example.com

// 2. Проверяет кэш (браузер, ОС, маршрутизатор)
// 3. Если не в кэше, отправляет DNS запрос рекурсивному резолверу
// 4. Рекурсивный резолвер может спросить корневой DNS сервер
// 5. Затем TLD (Top Level Domain) сервер для .com
// 6. Затем авторитетный DNS сервер для example.com
// 7. Получает IP и возвращает браузеру
// 8. Браузер подключается к серверу по IP адресу

DNS запросы в коде

// В браузере нельзя напрямую делать DNS запросы,
// но можно использовать различные техники

// 1. Fetch API (автоматически делает DNS запрос)
fetch('https://example.com/api')
  .then(response => response.json())
  .then(data => console.log(data));

// 2. Image пинг (быстрая проверка DNS)
const checkDNS = (domain) => {
  const img = new Image();
  img.onload = () => console.log(`${domain} доступен`);
  img.onerror = () => console.log(`${domain} недоступен`);
  img.src = `https://${domain}/favicon.ico?t=${Date.now()}`;
};

checkDNS('example.com');

// 3. XMLHttpRequest (старый способ)
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api', true);
xhr.send();

DNS кэширование

// Браузеры кэшируют DNS результаты для ускорения

// 1. Время жизни кэша (TTL) определяет как долго кэшируется запись
// Типичный TTL: 300 сек (5 минут), но может быть и часами

// 2. В HTML можно явно предзагрузить DNS:
// <link rel="dns-prefetch" href="//example.com" />

// 3. Или предпроверить соединение
// <link rel="preconnect" href="//api.example.com" />

// Пример оптимизации в Next.js
export default function Page() {
  return (
    <>
      <link rel="dns-prefetch" href="//cdn.example.com" />
      <link rel="preconnect" href="//api.example.com" />
      <div>Содержимое</div>
    </>
  );
}

Домены и подмены

// Полное доменное имя (FQDN):
// api.example.com
// ├── api (поддомен)
// ├── example (имя домена)
// └── com (TLD - Top Level Domain)

// Разные IP для разных поддоменов:
// example.com -> 93.184.216.34 (основной сервер)
// api.example.com -> 93.184.216.35 (API сервер)
// cdn.example.com -> 93.184.216.36 (CDN сервер)
// mail.example.com -> 93.184.216.37 (почтовый сервер)

// Получение поддомена
const getSubdomain = (hostname) => {
  const parts = hostname.split('.');
  if (parts.length > 2) {
    return parts[0];
  }
  return null;
};

console.log(getSubdomain('api.example.com')); // api
console.log(getSubdomain('example.com')); // null

Проблемы и решения

// 1. CORS и различные домены
// Если API на другом домене, нужен CORS
fetch('https://api.different-domain.com/data')
  .then(r => r.json())
  .catch(e => console.error('CORS ошибка'));

// 2. DNS кэширование может быть проблемой
// Решение: используй query параметры для кэш-бастинга
const timestamp = Date.now();
fetch(`https://api.example.com/data?t=${timestamp}`)
  .then(r => r.json());

// 3. Медленное разрешение DNS
// Решение: dns-prefetch в HTML head
// <link rel="dns-prefetch" href="//slow-cdn.example.com" />

// 4. DNS отказ в обслуживании (DNS amplification attack)
// Сервер должен иметь защиту, клиент не может помочь

DNS в контексте веб-приложений

// При разработке учитывай DNS:

// 1. Количество доменов влияет на производительность
// Слишком много доменов = много DNS запросов
const optimalDomains = 3; // основной + CDN + API

// 2. Используй разные домены для параллельных запросов
// (раньше браузеры ограничивали соединения на домен)
const fetchFromMultipleDomains = () => {
  return Promise.all([
    fetch('https://cdn1.example.com/resource1'),
    fetch('https://cdn2.example.com/resource2')
  ]);
};

// 3. Предзагрузка DNS для критичных сервисов
export function Head() {
  return (
    <>
      <link rel="dns-prefetch" href="//api.example.com" />
      <link rel="preconnect" href="//analytics.example.com" />
    </>
  );
}

Связь DNS и IP критична для понимания как работает интернет. DNS - это phonebook интернета, IP - это его адресная система.