jskelet 0.2.1 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +368 -261
- package/docs/03-routing.md +4 -0
- package/docs/06-cache.md +340 -12
- package/docs/07-yapilandirma.md +131 -2
- package/docs/en/03-routing.md +4 -0
- package/docs/en/06-caching.md +347 -14
- package/docs/en/07-configuration.md +135 -2
- package/package.json +1 -1
- package/src/client/cache-panel/login.html +71 -0
- package/src/client/cache-panel/panel.css +740 -0
- package/src/client/cache-panel/panel.html +307 -0
- package/src/client/cache-panel/panel.js +808 -0
- package/src/client/devtools/overlay.js +85 -0
- package/src/client/devtools/report.js +13 -0
- package/src/config/defaults.js +98 -2
- package/src/config/index.js +185 -3
- package/src/index.js +21 -1
- package/src/log.mjs +25 -0
- package/src/server/cache-panel.js +738 -0
- package/src/server/cloudflare.js +595 -0
- package/src/server/create-app.js +16 -0
- package/src/server/data-cache.js +92 -2
- package/src/server/dev/report.js +8 -1
- package/src/server/html-cache.js +36 -0
- package/src/server/prewarm.js +94 -15
- package/src/server/redis.js +108 -0
- package/src/server/render.js +74 -2
- package/src/server/upstream-limiter.js +376 -0
- package/src/server/upstream-tracking.js +25 -0
- package/src/version.mjs +9 -0
|
@@ -0,0 +1,307 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
+
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet" />
|
|
7
|
+
<meta name="referrer" content="no-referrer" />
|
|
8
|
+
<title>Cache · JSkelet</title>
|
|
9
|
+
<link rel="icon" href="logo.png" />
|
|
10
|
+
<link rel="stylesheet" href="panel.css" />
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<header>
|
|
14
|
+
<div class="brand">
|
|
15
|
+
<img src="logo.png" alt="" width="30" height="30" />
|
|
16
|
+
<span class="wordmark">JSkelet</span>
|
|
17
|
+
<span class="badge" id="version">—</span>
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
<nav class="crumbs" aria-label="Panel">
|
|
21
|
+
<span aria-current="page">Cache</span>
|
|
22
|
+
</nav>
|
|
23
|
+
|
|
24
|
+
<span class="spacer"></span>
|
|
25
|
+
|
|
26
|
+
<span class="chip" id="env">—</span>
|
|
27
|
+
<span class="chip" id="pid">—</span>
|
|
28
|
+
<span class="chip" id="uptime">—</span>
|
|
29
|
+
<span class="chip" id="memory">—</span>
|
|
30
|
+
|
|
31
|
+
<label class="check">
|
|
32
|
+
<input type="checkbox" id="auto" checked />
|
|
33
|
+
live
|
|
34
|
+
</label>
|
|
35
|
+
<button id="refresh">Refresh</button>
|
|
36
|
+
<button id="logout">Sign out</button>
|
|
37
|
+
</header>
|
|
38
|
+
|
|
39
|
+
<main>
|
|
40
|
+
<div class="cards">
|
|
41
|
+
<div class="card">
|
|
42
|
+
<div class="label">HTML entries</div>
|
|
43
|
+
<div class="value" id="html-size">—</div>
|
|
44
|
+
<div class="sub" id="html-sub">—</div>
|
|
45
|
+
</div>
|
|
46
|
+
<div class="card">
|
|
47
|
+
<div class="label">HTML in memory</div>
|
|
48
|
+
<div class="value" id="html-bytes">—</div>
|
|
49
|
+
<div class="sub" id="html-stale">—</div>
|
|
50
|
+
</div>
|
|
51
|
+
<div class="card">
|
|
52
|
+
<div class="label">Data entries</div>
|
|
53
|
+
<div class="value" id="data-size">—</div>
|
|
54
|
+
<div class="sub" id="data-sub">—</div>
|
|
55
|
+
</div>
|
|
56
|
+
<div class="card">
|
|
57
|
+
<div class="label">Shared tier</div>
|
|
58
|
+
<div class="value" id="redis-state">—</div>
|
|
59
|
+
<div class="sub" id="redis-sub">—</div>
|
|
60
|
+
</div>
|
|
61
|
+
<div class="card">
|
|
62
|
+
<div class="label">Prewarm</div>
|
|
63
|
+
<div class="value" id="prewarm-state">—</div>
|
|
64
|
+
<div class="sub" id="prewarm-sub">—</div>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<section>
|
|
69
|
+
<h2>Shared tier <span class="count" id="redis-heading">—</span></h2>
|
|
70
|
+
<div class="body">
|
|
71
|
+
<dl class="kv" id="redis-kv"></dl>
|
|
72
|
+
|
|
73
|
+
<div class="row" id="redis-actions" hidden>
|
|
74
|
+
<button id="redis-inspect">Count keys in Redis</button>
|
|
75
|
+
<button class="danger" id="redis-html">Drop shared HTML keys</button>
|
|
76
|
+
<button class="danger" id="redis-data">Drop shared data keys</button>
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
<div class="suggest" id="redis-suggest" hidden>
|
|
80
|
+
<p class="m0">
|
|
81
|
+
<strong>No shared tier.</strong> Every entry above lives in this
|
|
82
|
+
process only, so each replica warms up on its own and an
|
|
83
|
+
invalidation reaches whichever replica received the request.
|
|
84
|
+
Adding Redis keeps the in-process cache primary and only does what
|
|
85
|
+
a single process cannot: serve HTML another replica already
|
|
86
|
+
rendered, and broadcast purges to all of them.
|
|
87
|
+
</p>
|
|
88
|
+
<pre><code>npm install ioredis</code></pre>
|
|
89
|
+
<pre><code>// jskelet.config.mjs
|
|
90
|
+
cache() {
|
|
91
|
+
return {
|
|
92
|
+
redis: { enabled: true, url: process.env.REDIS_URL },
|
|
93
|
+
};
|
|
94
|
+
}</code></pre>
|
|
95
|
+
<p class="hint m0">
|
|
96
|
+
Worth it from the second replica onwards. On a single instance the
|
|
97
|
+
gain is close to zero, which is why it is off by default.
|
|
98
|
+
</p>
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
</section>
|
|
102
|
+
|
|
103
|
+
<section>
|
|
104
|
+
<h2>
|
|
105
|
+
Cloudflare <span class="count" id="cf-heading">—</span>
|
|
106
|
+
<span class="tabs">
|
|
107
|
+
<button id="cf-refresh">Refresh</button>
|
|
108
|
+
</span>
|
|
109
|
+
</h2>
|
|
110
|
+
<div class="body">
|
|
111
|
+
<dl class="kv" id="cf-kv"></dl>
|
|
112
|
+
|
|
113
|
+
<div id="cf-tools" hidden>
|
|
114
|
+
<div class="row">
|
|
115
|
+
<button class="danger" id="cf-purge-all">Purge everything</button>
|
|
116
|
+
<button id="cf-purge-cached">Purge URLs cached here</button>
|
|
117
|
+
<label class="check">
|
|
118
|
+
<input type="checkbox" id="cf-dev" />
|
|
119
|
+
development mode (bypass cache for 3h)
|
|
120
|
+
</label>
|
|
121
|
+
</div>
|
|
122
|
+
|
|
123
|
+
<div class="row">
|
|
124
|
+
<select id="cf-kind">
|
|
125
|
+
<option value="prefixes">prefixes</option>
|
|
126
|
+
<option value="hosts">hosts</option>
|
|
127
|
+
<option value="tags">cache tags</option>
|
|
128
|
+
</select>
|
|
129
|
+
<input
|
|
130
|
+
class="grow"
|
|
131
|
+
type="text"
|
|
132
|
+
id="cf-values"
|
|
133
|
+
spellcheck="false"
|
|
134
|
+
placeholder="example.com/news · space or comma separated, 100 per request"
|
|
135
|
+
/>
|
|
136
|
+
<button class="primary" id="cf-purge-keys">Purge</button>
|
|
137
|
+
</div>
|
|
138
|
+
|
|
139
|
+
<div class="row">
|
|
140
|
+
<button id="cf-tiered">Toggle Tiered Cache</button>
|
|
141
|
+
<button id="cf-reserve">Toggle Cache Reserve</button>
|
|
142
|
+
<button class="danger" id="cf-reserve-clear">Clear Cache Reserve</button>
|
|
143
|
+
</div>
|
|
144
|
+
|
|
145
|
+
<div class="row">
|
|
146
|
+
<input
|
|
147
|
+
class="grow"
|
|
148
|
+
type="text"
|
|
149
|
+
id="cf-path"
|
|
150
|
+
spellcheck="false"
|
|
151
|
+
placeholder="/news/some-post — which edges served this path (blank = whole zone)"
|
|
152
|
+
/>
|
|
153
|
+
<button id="cf-analytics">Query analytics</button>
|
|
154
|
+
</div>
|
|
155
|
+
|
|
156
|
+
<div id="cf-report" class="report" hidden></div>
|
|
157
|
+
|
|
158
|
+
<p class="hint">
|
|
159
|
+
Cloudflare has no endpoint that lists which edges currently hold a
|
|
160
|
+
copy of a URL, and no way to warm a chosen edge from the origin —
|
|
161
|
+
an object only enters an edge cache through a real request routed
|
|
162
|
+
there. What you get above is observation: which colos served the
|
|
163
|
+
path from cache and which went to the origin. Warming is our
|
|
164
|
+
prewarm pass plus Tiered Cache or Cache Reserve behind it.
|
|
165
|
+
</p>
|
|
166
|
+
</div>
|
|
167
|
+
|
|
168
|
+
<div class="suggest" id="cf-suggest" hidden>
|
|
169
|
+
<p class="m0">
|
|
170
|
+
<strong>Cloudflare is not connected.</strong> The cache above is
|
|
171
|
+
the origin cache; the copy your visitors actually get is at the
|
|
172
|
+
edge. Connecting a zone lets a purge here reach both, and shows
|
|
173
|
+
the cache hit ratio that decides whether the origin cache is even
|
|
174
|
+
being asked.
|
|
175
|
+
</p>
|
|
176
|
+
<pre><code>JSKELET_CLOUDFLARE_KEY=your_api_token
|
|
177
|
+
JSKELET_CLOUDFLARE_ZONE_ID=your_zone_id</code></pre>
|
|
178
|
+
<p class="hint m0">
|
|
179
|
+
Token permissions: <code>Zone.Cache Purge</code> to purge,
|
|
180
|
+
<code>Zone.Zone Settings</code> to change settings,
|
|
181
|
+
<code>Zone.Analytics</code> (read) for the hit ratio. The token is
|
|
182
|
+
read from the environment and never leaves the server.
|
|
183
|
+
</p>
|
|
184
|
+
</div>
|
|
185
|
+
</div>
|
|
186
|
+
</section>
|
|
187
|
+
|
|
188
|
+
<section>
|
|
189
|
+
<h2>Host <span class="count" id="host-heading">—</span></h2>
|
|
190
|
+
<div class="body">
|
|
191
|
+
<div class="meter">
|
|
192
|
+
<div class="meter-head">
|
|
193
|
+
<span>Memory</span>
|
|
194
|
+
<span class="mono" id="ram-text">—</span>
|
|
195
|
+
</div>
|
|
196
|
+
<div class="bar"><span id="ram-bar"></span></div>
|
|
197
|
+
<p class="hint m0" id="ram-note">—</p>
|
|
198
|
+
</div>
|
|
199
|
+
|
|
200
|
+
<div class="meter">
|
|
201
|
+
<div class="meter-head">
|
|
202
|
+
<span>Disk</span>
|
|
203
|
+
<span class="mono" id="disk-text">—</span>
|
|
204
|
+
</div>
|
|
205
|
+
<div class="bar"><span id="disk-bar"></span></div>
|
|
206
|
+
<p class="hint m0" id="disk-note">—</p>
|
|
207
|
+
</div>
|
|
208
|
+
</div>
|
|
209
|
+
</section>
|
|
210
|
+
|
|
211
|
+
<section>
|
|
212
|
+
<h2>Actions</h2>
|
|
213
|
+
<div class="body">
|
|
214
|
+
<div class="row">
|
|
215
|
+
<input
|
|
216
|
+
class="grow"
|
|
217
|
+
type="text"
|
|
218
|
+
id="target"
|
|
219
|
+
spellcheck="false"
|
|
220
|
+
placeholder="/news/:slug · /news/some-post · invalidation target"
|
|
221
|
+
/>
|
|
222
|
+
<label class="check">
|
|
223
|
+
<input type="checkbox" id="hard" />
|
|
224
|
+
hard (delete instead of marking stale)
|
|
225
|
+
</label>
|
|
226
|
+
<button class="primary" id="invalidate">Invalidate</button>
|
|
227
|
+
</div>
|
|
228
|
+
|
|
229
|
+
<div class="row">
|
|
230
|
+
<input
|
|
231
|
+
class="grow"
|
|
232
|
+
type="text"
|
|
233
|
+
id="prefix"
|
|
234
|
+
spellcheck="false"
|
|
235
|
+
placeholder="data key prefix — empty clears every data entry"
|
|
236
|
+
/>
|
|
237
|
+
<button class="danger" id="clear-data">Clear data cache</button>
|
|
238
|
+
<button class="danger" id="clear-html">Clear HTML cache</button>
|
|
239
|
+
</div>
|
|
240
|
+
|
|
241
|
+
<div class="row">
|
|
242
|
+
<button id="prewarm">Prewarm all paths</button>
|
|
243
|
+
</div>
|
|
244
|
+
|
|
245
|
+
<p class="hint">
|
|
246
|
+
Invalidation marks entries stale by default: visitors keep getting
|
|
247
|
+
the old HTML while a single background refresh runs. Hard mode
|
|
248
|
+
deletes them, so the next visitor waits for a cold render.
|
|
249
|
+
</p>
|
|
250
|
+
</div>
|
|
251
|
+
</section>
|
|
252
|
+
|
|
253
|
+
<section>
|
|
254
|
+
<h2>
|
|
255
|
+
Entries
|
|
256
|
+
<span class="count" id="listed">—</span>
|
|
257
|
+
<span class="tabs" role="tablist">
|
|
258
|
+
<button id="tab-html" role="tab" aria-selected="true">HTML</button>
|
|
259
|
+
<button id="tab-data" role="tab" aria-selected="false">Data</button>
|
|
260
|
+
</span>
|
|
261
|
+
</h2>
|
|
262
|
+
<div class="body">
|
|
263
|
+
<div class="row">
|
|
264
|
+
<input
|
|
265
|
+
class="grow"
|
|
266
|
+
type="search"
|
|
267
|
+
id="search"
|
|
268
|
+
spellcheck="false"
|
|
269
|
+
placeholder="Filter by key"
|
|
270
|
+
/>
|
|
271
|
+
</div>
|
|
272
|
+
</div>
|
|
273
|
+
<div class="scroll">
|
|
274
|
+
<table>
|
|
275
|
+
<thead id="thead"></thead>
|
|
276
|
+
<tbody id="tbody"></tbody>
|
|
277
|
+
</table>
|
|
278
|
+
<div class="empty" id="empty" hidden>No entries.</div>
|
|
279
|
+
</div>
|
|
280
|
+
</section>
|
|
281
|
+
</main>
|
|
282
|
+
|
|
283
|
+
<footer>
|
|
284
|
+
<div class="foot-brand">
|
|
285
|
+
<img src="logo.png" alt="" width="24" height="24" />
|
|
286
|
+
<span class="wordmark">JSkelet</span>
|
|
287
|
+
<span class="mono" id="foot-release">—</span>
|
|
288
|
+
</div>
|
|
289
|
+
|
|
290
|
+
<div class="foot-links">
|
|
291
|
+
<a id="foot-repo" href="https://github.com/ayberkenis/jskelet" rel="noreferrer noopener">
|
|
292
|
+
GitHub
|
|
293
|
+
</a>
|
|
294
|
+
<span class="dot" aria-hidden="true">·</span>
|
|
295
|
+
<span>Cache panel</span>
|
|
296
|
+
<span class="dot" aria-hidden="true">·</span>
|
|
297
|
+
<span class="live">
|
|
298
|
+
<span class="pulse"></span>
|
|
299
|
+
Password rotates on restart
|
|
300
|
+
</span>
|
|
301
|
+
</div>
|
|
302
|
+
</footer>
|
|
303
|
+
|
|
304
|
+
<div id="toast"></div>
|
|
305
|
+
<script type="module" src="panel.js"></script>
|
|
306
|
+
</body>
|
|
307
|
+
</html>
|