v0.1.32: главная — пошаговый старт; примеры команд — на /examples крупным шрифтом; консоль сразу в аккаунт
This commit is contained in:
@@ -0,0 +1,228 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- app/ui/examples.html — примеры команд SQS API (отдельная страница, крупный шрифт) -->
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Примеры команд — shared-sqs</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
|
||||
<style>
|
||||
:root {
|
||||
--brand-primary: #2563eb;
|
||||
--brand-primary-dark: #1d4ed8;
|
||||
--brand-gray: #d1d5db;
|
||||
--brand-grey-light: #f3f4f6;
|
||||
--text-primary: #1a1a1a;
|
||||
--text-muted: #6b7280;
|
||||
--success: #16a34a;
|
||||
--warning: #d97706;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: system-ui, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 15px;
|
||||
color: var(--text-primary);
|
||||
background: #fafafa;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.topbar {
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 16px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid var(--brand-gray);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
.topbar .brand { font-weight: 600; }
|
||||
.topbar .muted { color: var(--text-muted); }
|
||||
.topbar .spacer { flex: 1; }
|
||||
.chip {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 12px;
|
||||
color: var(--brand-primary);
|
||||
background: #eff6ff;
|
||||
border: 1px solid #bfdbfe;
|
||||
border-radius: 999px;
|
||||
padding: 2px 10px;
|
||||
}
|
||||
a { color: var(--brand-primary); text-decoration: none; }
|
||||
a:hover { color: var(--brand-primary-dark); text-decoration: underline; }
|
||||
.container { max-width: 960px; margin: 0 auto; padding: 24px 16px 48px; }
|
||||
.hero { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
|
||||
.hero h1 { font-size: 26px; margin: 0; }
|
||||
.hero .sub { color: var(--text-muted); margin: 4px 0 0; }
|
||||
.card {
|
||||
background: #fff;
|
||||
border: 1px solid var(--brand-gray);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-header { background: var(--brand-grey-light); padding: 12px 16px; font-weight: 600; font-size: 16px; }
|
||||
.card-body { padding: 16px; }
|
||||
.card-body p { margin: 8px 0; color: #374151; }
|
||||
.step-num {
|
||||
display: inline-flex;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 999px;
|
||||
background: var(--brand-primary);
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 8px;
|
||||
}
|
||||
pre {
|
||||
background: var(--brand-grey-light);
|
||||
border: 1px solid var(--brand-gray);
|
||||
border-radius: 8px;
|
||||
padding: 14px 16px;
|
||||
overflow-x: auto;
|
||||
font-family: ui-monospace, Menlo, Consolas, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
margin: 10px 0 16px;
|
||||
}
|
||||
pre code { background: none; border: none; padding: 0; }
|
||||
.note {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
margin: -8px 0 14px;
|
||||
}
|
||||
.tbl-wrap { border: 1px solid var(--brand-gray); border-radius: 8px; overflow-x: auto; }
|
||||
table { width: 100%; border-collapse: collapse; font-size: 14px; }
|
||||
th {
|
||||
background: var(--brand-grey-light);
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.3px;
|
||||
padding: 8px 12px;
|
||||
border-right: 1px solid var(--brand-gray);
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
td { padding: 8px 12px; border-right: 1px solid var(--brand-gray); border-bottom: 1px solid var(--brand-gray); }
|
||||
tr:last-child td { border-bottom: none; }
|
||||
td:last-child, th:last-child { border-right: none; }
|
||||
tr:hover td { background: rgba(243,244,246,0.5); }
|
||||
td code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
|
||||
.footer { color: var(--text-muted); font-size: 13px; text-align: center; margin-top: 32px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="topbar">
|
||||
<img src="/static/logo.svg" height="18" alt="nubes">
|
||||
<span class="brand">Nubes</span>
|
||||
<span class="muted">· очередь</span>
|
||||
<span class="spacer"></span>
|
||||
<a href="/">← На главную</a>
|
||||
<span class="chip">{{VERSION}}</span>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="hero">
|
||||
<div>
|
||||
<h1>Примеры команд</h1>
|
||||
<p class="sub">Пошаговое подключение к SQS API через AWS CLI. Ключи бери в консоли: <a href="/ui">/ui</a> → кнопка Credentials.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">Шаг 1. Укажи ключи доступа</div>
|
||||
<div class="card-body">
|
||||
<p><span class="step-num">A</span><strong>Переменные окружения</strong> (действуют в текущей сессии терминала):</p>
|
||||
<pre><code>export AWS_ACCESS_KEY_ID=<Access Key>
|
||||
export AWS_SECRET_ACCESS_KEY=<Secret Key></code></pre>
|
||||
<p><span class="step-num">B</span><strong>Файл ~/.aws/credentials</strong> (постоянно, для всех команд):</p>
|
||||
<pre><code>[sqs]
|
||||
aws_access_key_id = <Access Key>
|
||||
aws_secret_access_key = <Secret Key></code></pre>
|
||||
<p class="note">Для способа B добавляй <code>--profile sqs</code> к каждой команде.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">Шаг 2. Создай очередь</div>
|
||||
<div class="card-body">
|
||||
<pre><code>aws sqs create-queue --queue-name demo \
|
||||
--endpoint-url https://sqs.containerk8s.dev.nubes.ru \
|
||||
--region us-east-1 --profile sqs</code></pre>
|
||||
<p>В ответе будет <code>QueueUrl</code> — используй его в следующих командах.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">Шаг 3. Отправь сообщение</div>
|
||||
<div class="card-body">
|
||||
<pre><code>aws sqs send-message \
|
||||
--queue-url <QueueUrl> \
|
||||
--message-body "hello nubes" \
|
||||
--endpoint-url https://sqs.containerk8s.dev.nubes.ru \
|
||||
--region us-east-1 --profile sqs</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">Шаг 4. Получи и удали сообщение</div>
|
||||
<div class="card-body">
|
||||
<pre><code>aws sqs receive-message \
|
||||
--queue-url <QueueUrl> \
|
||||
--endpoint-url https://sqs.containerk8s.dev.nubes.ru \
|
||||
--region us-east-1 --profile sqs
|
||||
|
||||
aws sqs delete-message \
|
||||
--queue-url <QueueUrl> \
|
||||
--receipt-handle <ReceiptHandle из ответа receive-message> \
|
||||
--endpoint-url https://sqs.containerk8s.dev.nubes.ru \
|
||||
--region us-east-1 --profile sqs</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">Все команды SQS API</div>
|
||||
<div class="card-body">
|
||||
<p>Все команды отправляются на <code>POST https://sqs.containerk8s.dev.nubes.ru/</code> с параметром <code>Action</code> (AWS CLI делает это сам).</p>
|
||||
<div class="tbl-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Action</th><th>Описание</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>CreateQueue</code></td><td>Создать очередь</td></tr>
|
||||
<tr><td><code>ListQueues</code></td><td>Список очередей</td></tr>
|
||||
<tr><td><code>GetQueueUrl</code></td><td>URL очереди по имени</td></tr>
|
||||
<tr><td><code>GetQueueAttributes</code></td><td>Атрибуты очереди</td></tr>
|
||||
<tr><td><code>SetQueueAttributes</code></td><td>Изменить атрибуты очереди</td></tr>
|
||||
<tr><td><code>SendMessage</code></td><td>Отправить сообщение</td></tr>
|
||||
<tr><td><code>SendMessageBatch</code></td><td>Отправить до 10 сообщений разом</td></tr>
|
||||
<tr><td><code>ReceiveMessage</code></td><td>Получить сообщения (long polling до 20с)</td></tr>
|
||||
<tr><td><code>DeleteMessage</code></td><td>Удалить сообщение</td></tr>
|
||||
<tr><td><code>DeleteMessageBatch</code></td><td>Удалить до 10 сообщений разом</td></tr>
|
||||
<tr><td><code>ChangeMessageVisibility</code></td><td>Изменить таймаут видимости сообщения</td></tr>
|
||||
<tr><td><code>ChangeMessageVisibilityBatch</code></td><td>Пакетно изменить таймаут видимости</td></tr>
|
||||
<tr><td><code>PurgeQueue</code></td><td>Очистить очередь</td></tr>
|
||||
<tr><td><code>DeleteQueue</code></td><td>Удалить очередь</td></tr>
|
||||
<tr><td><code>TagQueue</code></td><td>Назначить теги очереди</td></tr>
|
||||
<tr><td><code>UntagQueue</code></td><td>Снять теги с очереди</td></tr>
|
||||
<tr><td><code>ListQueueTags</code></td><td>Список тегов очереди</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">shared-sqs · версия {{VERSION}} · <a href="/">на главную</a> · <a href="/ui">консоль</a> · <a href="/health">health</a></div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user