ya-hochu-sozdat-proekt-pro-o/index.html

162 lines
8.5 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Routing Engine (RE) — Juniper</title>
<script src="https://cdn.jsdelivr.net/npm/pptxgenjs@3.12.0/dist/pptxgen.bundle.js"></script>
<style>
* { margin: 0; box-sizing: border-box; }
body { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background: #0f1218; color: #f4f4f5; }
.slide { display: none; min-height: 100vh; padding: 8vh 10vw; flex-direction: column; justify-content: center; }
.slide.on { display: flex; }
.slide h1 { font-size: clamp(34px, 6vw, 64px); margin-bottom: 24px; }
.slide li { font-size: clamp(18px, 2.6vw, 28px); line-height: 1.6; margin-bottom: 10px; list-style: none; padding-left: 28px; position: relative; }
.slide li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 3px; background: #00b8cc; }
.num { position: fixed; bottom: 18px; right: 22px; color: #8a8a92; font-size: 14px; }
.nav { position: fixed; bottom: 14px; left: 22px; display: flex; gap: 8px; }
.nav button { border: 1px solid #333; background: #171719; color: #f4f4f5; border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 14px; }
.nav .pptx { border-color: #00b8cc; color: #9beeff; }
@media print {
.nav, .num { display: none; }
.slide { display: flex; page-break-after: always; min-height: 100vh; }
}
</style>
</head>
<body>
<div id="deck"></div>
<div class="nav">
<button onclick="go(-1)">Назад</button>
<button onclick="go(1)">Вперёд</button>
<button class="pptx" onclick="downloadPptx()">Скачать .pptx</button>
</div>
<div class="num" id="num"></div>
<script>
// ============ ВСЁ СОДЕРЖАНИЕ ПРЕЗЕНТАЦИИ — ТОЛЬКО В ЭТОМ МАССИВЕ ============
var SLIDES = [
{
title: "Routing Engine (RE) — практическое руководство",
bullets: [
"Для начинающих сетевых инженеров",
"Маршрутизаторы Juniper (Junos)",
"Цель: понимать состояние RE, проверять при авариях, читать вывод команд",
"Минимум теории — максимум практики"
]
},
{
title: "Что такое Routing Engine?",
bullets: [
"Простыми словами: это «мозг» маршрутизатора — компьютер внутри коробки",
"Технически: плата с CPU, RAM, SSD/HDD, на которой работает Junos",
"RE управляет: таблицами маршрутизации, протоколами (OSPF, BGP), CLI, логами",
"Пакеты данных RE НЕ обрабатывает — этим занимается Packet Forwarding Engine (PFE)",
"Важно: высокая загрузка CPU на RE ≠ тормозит трафик (трафик идёт через PFE)"
]
},
{
title: "Команда №1: show chassis routing-engine",
bullets: [
"Что показывает: состояние RE (температура, память, CPU, uptime)",
"Где смотреть: Uptime — сколько работает без перезагрузки",
"Memory utilization — норма до 80%, выше 90% — тревога",
"CPU utilization: 5 сек / 1 мин / 15 мин — смотри тренд",
"Проблема: CPU > 90% постоянно или Memory > 95% — искать причину"
]
},
{
title: "Команда №2: show system uptime",
bullets: [
"Что показывает: время работы системы и причину последней перезагрузки",
"Где смотреть: строки «Current time» и «System booted»",
"Важно: причина reboot — «Rebooted by» (кто) и «Reason» (почему)",
"Норма: uptime растёт, причина — «power cycle» или «reboot» от админа",
"Проблема: «Kernel panic», «Watchdog timeout», «Power failure» — расследовать"
]
},
{
title: "Команда №3: show system processes extensive",
bullets: [
"Что показывает: все процессы, их PID, CPU, память",
"Где смотреть: топ-5 по CPU и памяти (команда | match PID | sort)",
"Норма: mgd, rpd, kqueue в топе — это нормально",
"Проблема: неизвестный процесс в топе или rpd > 50% CPU — смотреть логи",
"Дальше: show log messages | match <PID> или show task resource"
]
},
{
title: "Команда №4: show log messages",
bullets: [
"Что показывает: системные логи (аналог /var/log/messages)",
"Где смотреть: ошибки (Error, Warning, Critical), перезагрузки, сбои",
"Фильтры: | match error | match warning | match panic",
"Норма: логи чистые, нет «panic», «timeout», «failed»",
"Проблема: «Kernel panic», «Out of memory», «Process died» — копать глубже",
"Дальше: show log chassisd.log, show log rpd.log"
]
},
{
title: "Команда №5: show chassis hardware",
bullets: [
"Что показывает: всё оборудование (RE, PFE, карты, серийники)",
"Где смотреть: статус каждой платы (Online/Offline, Present/Absent)",
"Норма: все платы Online, статус «Present»",
"Проблема: «Offline», «Absent», «Failed» — переподключить или заменить",
"Дальше: show chassis environment (температура, вентиляторы, питание)"
]
},
{
title: "Авария: RE не отвечает — чек-лист",
bullets: [
"1. show chassis routing-engine — живой ли RE (uptime, CPU, память)",
"2. show system uptime — не было ли перезагрузки",
"3. show log messages | match error — ошибки в логах",
"4. show chassis hardware — все ли платы на месте",
"5. show system processes extensive — нет ли зависшего процесса",
"Если RE мёртв: подключиться через консоль (USB/serial), проверить питание"
]
},
{
title: "Итоги: 5 команд, которые спасают",
bullets: [
"show chassis routing-engine — общее состояние RE",
"show system uptime — время и причина перезагрузки",
"show system processes extensive — процессы и загрузка",
"show log messages — ошибки и события",
"show chassis hardware — оборудование и статусы",
"Правило: смотри вывод целиком, сравнивай с нормой, проверяй тренды"
]
}
];
// ============================================================================
var cur = 0;
function render() {
var deck = document.getElementById("deck");
deck.innerHTML = SLIDES.map(function (s, i) {
return '<section class="slide' + (i === cur ? " on" : "") + '"><h1>' + s.title + '</h1><ul>' +
s.bullets.map(function (b) { return "<li>" + b + "</li>"; }).join("") + "</ul></section>";
}).join("");
document.getElementById("num").textContent = (cur + 1) + " / " + SLIDES.length;
}
function go(d) { cur = Math.min(SLIDES.length - 1, Math.max(0, cur + d)); render(); }
document.addEventListener("keydown", function (e) {
if (e.key === "ArrowRight" || e.key === " ") go(1);
if (e.key === "ArrowLeft") go(-1);
});
function downloadPptx() {
var p = new PptxGenJS();
p.defineLayout({ name: "W", width: 13.33, height: 7.5 });
p.layout = "W";
SLIDES.forEach(function (s) {
var sl = p.addSlide();
sl.background = { color: "0F1218" };
sl.addText(s.title, { x: 0.7, y: 0.5, w: 12, h: 1.2, fontSize: 36, bold: true, color: "F4F4F5" });
sl.addText(s.bullets.map(function (b) { return { text: b, options: { bullet: true, breakLine: true } }; }),
{ x: 0.9, y: 2.0, w: 11.5, h: 4.8, fontSize: 20, color: "E4E4E7", lineSpacingMultiple: 1.4 });
});
p.writeFile({ fileName: "Juniper_RE_Routing_Engine.pptx" });
}
render();
</script>
</body>
</html>