jskelet 0.2.5 → 0.3.0
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/AGENTS.md +132 -132
- package/CHANGELOG.md +403 -383
- package/LICENSE +21 -21
- package/bin/jskelet.mjs +103 -103
- package/docs/01-baslangic.md +285 -285
- package/docs/02-mimari.md +293 -287
- package/docs/03-routing.md +486 -480
- package/docs/04-render-ve-sablonlar.md +490 -490
- package/docs/05-islands.md +482 -482
- package/docs/06-cache.md +1231 -1209
- package/docs/07-yapilandirma.md +44 -21
- package/docs/08-build.md +366 -366
- package/docs/09-dev-araclari.md +335 -335
- package/docs/10-dagitim.md +329 -329
- package/docs/11-tasima.md +1 -0
- package/docs/12-panel-ve-oturum.md +384 -384
- package/docs/README.md +105 -105
- package/docs/en/01-getting-started.md +292 -292
- package/docs/en/02-architecture.md +311 -305
- package/docs/en/03-routing.md +503 -497
- package/docs/en/04-rendering.md +504 -504
- package/docs/en/05-islands.md +492 -492
- package/docs/en/06-caching.md +1197 -1198
- package/docs/en/07-configuration.md +1009 -986
- package/docs/en/08-build.md +383 -383
- package/docs/en/09-dev-tools.md +342 -342
- package/docs/en/10-deployment.md +332 -332
- package/docs/en/11-migration.md +360 -359
- package/docs/en/12-dashboards-and-sessions.md +392 -392
- package/docs/en/README.md +112 -112
- package/package.json +102 -102
- package/src/build/ensure-build.mjs +15 -15
- package/src/build/paths.mjs +143 -143
- package/src/build/resolve-peer.mjs +36 -36
- package/src/build/tasks/client.mjs +268 -268
- package/src/build/tasks/css.mjs +124 -124
- package/src/build/tasks/fonts.mjs +146 -146
- package/src/build/tasks/icons.mjs +224 -224
- package/src/build/tasks/images.mjs +244 -244
- package/src/build/tasks/precompress.mjs +78 -78
- package/src/client/{cache-panel → admin}/i18n.js +756 -670
- package/src/client/{cache-panel → admin}/login.html +74 -74
- package/src/client/{cache-panel → admin}/panel.css +804 -756
- package/src/client/admin/panel.html +486 -0
- package/src/client/{cache-panel → admin}/panel.js +1242 -915
- package/src/client/devtools/report.html +185 -185
- package/src/client/devtools/report.js +725 -725
- package/src/client/dom.js +95 -95
- package/src/client/form.js +192 -192
- package/src/client/index.js +35 -35
- package/src/client/registry.js +297 -297
- package/src/client/safe-image.js +91 -91
- package/src/client/store.js +36 -36
- package/src/client/swap.js +188 -188
- package/src/config/defaults.js +16 -7
- package/src/config/index.js +38 -22
- package/src/config/pattern.js +107 -107
- package/src/http/control-flow.js +71 -71
- package/src/http/cookies.js +257 -257
- package/src/http/request-cache.js +46 -46
- package/src/http/request-context.js +162 -162
- package/src/index.js +83 -83
- package/src/init.mjs +221 -221
- package/src/log.mjs +58 -0
- package/src/runtime/alias-hooks.mjs +119 -119
- package/src/runtime/register.mjs +4 -4
- package/src/server/admin/actions.js +229 -0
- package/src/server/admin/auth.js +125 -0
- package/src/server/admin/event-log.js +151 -0
- package/src/server/admin/gate.js +209 -0
- package/src/server/admin/inventory.js +188 -0
- package/src/server/admin/mount.js +56 -0
- package/src/server/admin/router.js +216 -0
- package/src/server/admin/snapshot.js +126 -0
- package/src/server/assets.js +147 -147
- package/src/server/cache-deps.js +42 -42
- package/src/server/cloudflare.js +607 -607
- package/src/server/create-app.js +295 -291
- package/src/server/data-cache.js +462 -462
- package/src/server/dev/report.js +369 -369
- package/src/server/dev/socket.js +170 -170
- package/src/server/dev/version-check.mjs +139 -139
- package/src/server/html-cache.js +817 -817
- package/src/server/metadata.js +102 -102
- package/src/server/middleware/compression.js +205 -205
- package/src/server/middleware/csrf.js +134 -134
- package/src/server/middleware/dev-gate.js +62 -62
- package/src/server/middleware/headers.js +37 -37
- package/src/server/middleware/redirects.js +32 -32
- package/src/server/middleware/static-precompressed.js +100 -100
- package/src/server/middleware/trailing-slash.js +53 -0
- package/src/server/middleware/upstream-proxy.js +141 -141
- package/src/server/prewarm.js +601 -601
- package/src/server/redis.js +569 -569
- package/src/server/router.js +128 -128
- package/src/server/status-page.js +164 -164
- package/src/server/upstream-limiter.js +376 -376
- package/src/server/upstream-tracking.js +166 -166
- package/src/start.mjs +7 -7
- package/src/templates/layout.ejs +44 -44
- package/src/version.mjs +31 -31
- package/src/views/components/loader.js +85 -85
- package/src/views/helpers/html.js +102 -102
- package/src/views/helpers/tags.js +245 -245
- package/src/client/cache-panel/panel.html +0 -308
- package/src/server/cache-panel.js +0 -759
package/docs/en/10-deployment.md
CHANGED
|
@@ -1,332 +1,332 @@
|
|
|
1
|
-
# 10 — Deployment
|
|
2
|
-
|
|
3
|
-
This document explains how to put a JSkelet application into production: the
|
|
4
|
-
prod build and start flow, the environment variables you should set, a working
|
|
5
|
-
Docker setup, reverse proxy and `trust proxy` notes, how a health check endpoint
|
|
6
|
-
is added, and how the cache behaves when you scale out. What the build steps do
|
|
7
|
-
is in [08-build.md](./08-build.md), cache behavior in
|
|
8
|
-
[06-caching.md](./06-caching.md).
|
|
9
|
-
|
|
10
|
-
## The prod flow
|
|
11
|
-
|
|
12
|
-
```bash
|
|
13
|
-
npm ci
|
|
14
|
-
npm run build # jskelet build
|
|
15
|
-
npm start # jskelet start
|
|
16
|
-
```
|
|
17
|
-
|
|
18
|
-
If `NODE_ENV` is not given, `jskelet build` sets it to `production` and runs all
|
|
19
|
-
steps: fonts, icon sprite, CSS, client JS, images, manifest, precompress.
|
|
20
|
-
|
|
21
|
-
`jskelet start` first looks for `.jskelet/manifest.json`; if it is missing, it
|
|
22
|
-
runs the build itself. In a Docker image the build has already happened, so this
|
|
23
|
-
is a no-op; the point is that someone running `npm start` directly does not end
|
|
24
|
-
up with an unstyled page.
|
|
25
|
-
|
|
26
|
-
When the server is ready it prints a single line:
|
|
27
|
-
|
|
28
|
-
```
|
|
29
|
-
jskelet → http://localhost:3000 (production)
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
The process is protected by two safety nets: `unhandledRejection` and
|
|
33
|
-
`uncaughtException` are logged and the process stays up. On a news site, an
|
|
34
|
-
error on a single page should not take the whole site down. If you want to hook
|
|
35
|
-
this up to your own error tracking tool (Sentry etc.), you can add your own
|
|
36
|
-
listener to the same events.
|
|
37
|
-
|
|
38
|
-
## Environment variables
|
|
39
|
-
|
|
40
|
-
No variable is required; all of them have a sensible default. The ones worth
|
|
41
|
-
considering in production:
|
|
42
|
-
|
|
43
|
-
| Variable | Recommendation | Why |
|
|
44
|
-
| --- | --- | --- |
|
|
45
|
-
| `NODE_ENV` | `production` | Template cache, reading the manifest once, throwing on a broken route module |
|
|
46
|
-
| `PORT` | `3000` | The port your orchestrator expects |
|
|
47
|
-
| `HOST` | `0.0.0.0` | Only if you need to listen on IPv4 alone; the `::` default already listens dual-stack |
|
|
48
|
-
| `PREWARM_MAX` | Depends on site size | Number of pages warmed at startup |
|
|
49
|
-
| `PREWARM_INTERVAL_SECONDS` | `0` or a long value | If you want to keep never-visited pages warm |
|
|
50
|
-
| `DEV_TOKEN` | Staging only | Hides an environment that is not public yet |
|
|
51
|
-
|
|
52
|
-
The full list and the precedence order of the prewarm settings:
|
|
53
|
-
[07-configuration.md](./07-configuration.md).
|
|
54
|
-
|
|
55
|
-
Since the CLI runs with `--env-file-if-exists=.env`, a `.env` file is loaded
|
|
56
|
-
automatically if it exists; if not, no error is raised. In a container,
|
|
57
|
-
environment variables are usually injected directly instead of using this file.
|
|
58
|
-
Using both sources together blurs which value actually applies; not shipping a
|
|
59
|
-
`.env` in the prod image is the cleanest option.
|
|
60
|
-
|
|
61
|
-
**Secret keys must not go into the `clientEnv` list:** those values are embedded
|
|
62
|
-
into the client bundle as plain text ([08-build.md](./08-build.md)).
|
|
63
|
-
|
|
64
|
-
## Docker
|
|
65
|
-
|
|
66
|
-
A multi-stage image: the build stage compiles with dev dependencies, the runtime
|
|
67
|
-
stage carries only production dependencies and the build output.
|
|
68
|
-
|
|
69
|
-
```dockerfile
|
|
70
|
-
# syntax=docker/dockerfile:1
|
|
71
|
-
|
|
72
|
-
# ---------- build ----------
|
|
73
|
-
FROM node:22-bookworm-slim AS build
|
|
74
|
-
WORKDIR /app
|
|
75
|
-
|
|
76
|
-
# Dependencies in a separate layer: don't reinstall when sources change.
|
|
77
|
-
COPY package.json package-lock.json ./
|
|
78
|
-
RUN npm ci
|
|
79
|
-
|
|
80
|
-
# `public/fonts/` must be committed: the build should not need network access.
|
|
81
|
-
COPY . .
|
|
82
|
-
|
|
83
|
-
ENV NODE_ENV=production
|
|
84
|
-
RUN npx jskelet build
|
|
85
|
-
|
|
86
|
-
# ---------- runtime ----------
|
|
87
|
-
FROM node:22-bookworm-slim AS runtime
|
|
88
|
-
WORKDIR /app
|
|
89
|
-
|
|
90
|
-
ENV NODE_ENV=production
|
|
91
|
-
ENV PORT=3000
|
|
92
|
-
ENV HOST=0.0.0.0
|
|
93
|
-
|
|
94
|
-
COPY package.json package-lock.json ./
|
|
95
|
-
# sharp and tailwind are only needed at build time; keep them out of the runtime image.
|
|
96
|
-
RUN npm ci --omit=dev && npm cache clean --force
|
|
97
|
-
|
|
98
|
-
COPY --from=build /app/jskelet.config.mjs ./jskelet.config.mjs
|
|
99
|
-
COPY --from=build /app/jsconfig.json ./jsconfig.json
|
|
100
|
-
COPY --from=build /app/routes ./routes
|
|
101
|
-
COPY --from=build /app/views ./views
|
|
102
|
-
COPY --from=build /app/lib ./lib
|
|
103
|
-
COPY --from=build /app/public ./public
|
|
104
|
-
COPY --from=build /app/.jskelet ./.jskelet
|
|
105
|
-
|
|
106
|
-
# Non-root user.
|
|
107
|
-
USER node
|
|
108
|
-
|
|
109
|
-
EXPOSE 3000
|
|
110
|
-
|
|
111
|
-
# Health check: assumes you added the route below.
|
|
112
|
-
HEALTHCHECK --interval=30s --timeout=3s --start-period=20s --retries=3 \
|
|
113
|
-
CMD node -e "fetch('http://127.0.0.1:'+(process.env.PORT||3000)+'/api/healthcheck').then(r=>process.exit(r.ok?0:1)).catch(()=>process.exit(1))"
|
|
114
|
-
|
|
115
|
-
CMD ["npx", "jskelet", "start"]
|
|
116
|
-
```
|
|
117
|
-
|
|
118
|
-
Notes:
|
|
119
|
-
|
|
120
|
-
- **`client/` and `styles/` are not needed in the runtime image:** their output
|
|
121
|
-
is under `public/assets/`. `views/` and `routes/` are needed, because
|
|
122
|
-
rendering happens at runtime. Copy `lib/` only if your project has one.
|
|
123
|
-
- **`.jskelet/` is needed:** without `manifest.json`, `asset()` cannot find the
|
|
124
|
-
hashed URLs and `jskelet start` will try to run the build from scratch.
|
|
125
|
-
- **`sharp` is not needed in the runtime image:** it is only for build-time image
|
|
126
|
-
optimization. `--omit=dev` leaves it out (if it was installed as a
|
|
127
|
-
devDependency).
|
|
128
|
-
- If you would rather call `jskelet start` without `npx`,
|
|
129
|
-
`CMD ["node", "node_modules/jskelet/bin/jskelet.mjs", "start"]` works too.
|
|
130
|
-
|
|
131
|
-
`.dockerignore`:
|
|
132
|
-
|
|
133
|
-
```
|
|
134
|
-
node_modules
|
|
135
|
-
.git
|
|
136
|
-
.jskelet
|
|
137
|
-
public/assets
|
|
138
|
-
.env
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
The build stage produces these itself with `npx jskelet build`.
|
|
142
|
-
|
|
143
|
-
### Deploying from a subdirectory of the repo
|
|
144
|
-
|
|
145
|
-
The examples in this repo pull jskelet with `"jskelet": "file:../.."` rather
|
|
146
|
-
than from npm. In tools like Coolify, Railway or Render, if you set the "base
|
|
147
|
-
directory" to `examples/marketing`, the build context becomes only that
|
|
148
|
-
directory, `../..` falls outside the context, and installation fails at
|
|
149
|
-
`npm ci`. The correct setting: **base directory `/`**, Dockerfile location
|
|
150
|
-
`/examples/marketing/Dockerfile`. The working example is in
|
|
151
|
-
`examples/marketing/Dockerfile` and assumes the repo root as its context:
|
|
152
|
-
|
|
153
|
-
```bash
|
|
154
|
-
docker build -f examples/marketing/Dockerfile -t jskelet-marketing .
|
|
155
|
-
docker run --rm -p 3000:3000 -e SITE_URL=https://example.com jskelet-marketing
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
In your own application jskelet will be an ordinary dependency, so this
|
|
159
|
-
constraint does not apply; the multi-stage image above is enough.
|
|
160
|
-
|
|
161
|
-
## Health check
|
|
162
|
-
|
|
163
|
-
The framework does **not** add a ready-made health check endpoint; you have to
|
|
164
|
-
put it in your own route. Since the default `devGateBypass` list contains
|
|
165
|
-
`/api/healthcheck`, using that name is the least surprising option: it stays
|
|
166
|
-
reachable even in an environment with `DEV_TOKEN` set.
|
|
167
|
-
|
|
168
|
-
```js
|
|
169
|
-
// routes/00-health.mjs
|
|
170
|
-
import { getHtmlCacheSize } from "jskelet";
|
|
171
|
-
|
|
172
|
-
export default function register(app) {
|
|
173
|
-
app.get("/api/healthcheck", (req, res) => {
|
|
174
|
-
res.setHeader("Cache-Control", "no-store");
|
|
175
|
-
res.json({
|
|
176
|
-
ok: true,
|
|
177
|
-
uptime: process.uptime(),
|
|
178
|
-
cache: getHtmlCacheSize(),
|
|
179
|
-
});
|
|
180
|
-
});
|
|
181
|
-
}
|
|
182
|
-
```
|
|
183
|
-
|
|
184
|
-
The `00-` prefix in the file name makes sure this route is registered before any
|
|
185
|
-
catch-all ([03-routing.md](./03-routing.md)).
|
|
186
|
-
|
|
187
|
-
If you are going to use a different path, update the `devGateBypass` list,
|
|
188
|
-
otherwise your orchestrator will see a 404 on staging:
|
|
189
|
-
|
|
190
|
-
```js
|
|
191
|
-
devGateBypass: ["/healthz", "/robots.txt", "/sitemap.xml", "/favicon.ico"]
|
|
192
|
-
```
|
|
193
|
-
|
|
194
|
-
The warming round does not affect the health check: even if prewarm fails, the
|
|
195
|
-
process stays up and pages are served (cold, but served).
|
|
196
|
-
|
|
197
|
-
If you need to separate readiness from liveness, you can report the warming
|
|
198
|
-
status too:
|
|
199
|
-
|
|
200
|
-
```js
|
|
201
|
-
import { prewarmProgress } from "jskelet";
|
|
202
|
-
|
|
203
|
-
app.get("/api/ready", (req, res) => {
|
|
204
|
-
const warmedUp = !prewarmProgress.active && prewarmProgress.finishedAt !== null;
|
|
205
|
-
res.status(warmedUp ? 200 : 503).json({ warmedUp, ...prewarmProgress });
|
|
206
|
-
});
|
|
207
|
-
```
|
|
208
|
-
|
|
209
|
-
Remember to exclude this endpoint's path from warming with `prewarmSkip` (the
|
|
210
|
-
default `/api/` prefix already covers it).
|
|
211
|
-
|
|
212
|
-
## Reverse proxy
|
|
213
|
-
|
|
214
|
-
The Express application sets `trust proxy` to **on**
|
|
215
|
-
(`app.set("trust proxy", true)`). The consequences:
|
|
216
|
-
|
|
217
|
-
- `req.protocol` is read from the `X-Forwarded-Proto` header, so if the proxy
|
|
218
|
-
terminates TLS, `https` is returned correctly.
|
|
219
|
-
- `req.ip` is resolved from the `X-Forwarded-For` chain.
|
|
220
|
-
- Absolute URLs produced by `res.redirect()` carry the correct scheme.
|
|
221
|
-
|
|
222
|
-
This setting **assumes the proxy writes these headers reliably.** If you are
|
|
223
|
-
going to expose the application directly to the internet, remember that a client
|
|
224
|
-
can fabricate `X-Forwarded-*` headers; always run behind a proxy or load
|
|
225
|
-
balancer and make sure the proxy overwrites the incoming `X-Forwarded-For`
|
|
226
|
-
header.
|
|
227
|
-
|
|
228
|
-
An example nginx configuration:
|
|
229
|
-
|
|
230
|
-
```nginx
|
|
231
|
-
upstream jskelet {
|
|
232
|
-
server 127.0.0.1:3000;
|
|
233
|
-
keepalive 32;
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
server {
|
|
237
|
-
listen 443 ssl http2;
|
|
238
|
-
server_name example.com;
|
|
239
|
-
|
|
240
|
-
# Response bodies already arrive compressed; don't compress a second time.
|
|
241
|
-
gzip off;
|
|
242
|
-
|
|
243
|
-
location / {
|
|
244
|
-
proxy_pass http://jskelet;
|
|
245
|
-
proxy_http_version 1.1;
|
|
246
|
-
|
|
247
|
-
proxy_set_header Host $host;
|
|
248
|
-
proxy_set_header X-Real-IP $remote_addr;
|
|
249
|
-
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
|
250
|
-
proxy_set_header X-Forwarded-Proto $scheme;
|
|
251
|
-
proxy_set_header Connection "";
|
|
252
|
-
|
|
253
|
-
# Forward it to the upstream so we can get a compressed response.
|
|
254
|
-
proxy_set_header Accept-Encoding $http_accept_encoding;
|
|
255
|
-
}
|
|
256
|
-
}
|
|
257
|
-
```
|
|
258
|
-
|
|
259
|
-
Key points:
|
|
260
|
-
|
|
261
|
-
- **Do not compress twice.** JSkelet does the brotli/gzip negotiation itself and
|
|
262
|
-
stores the compressed body for cached pages. Leaving nginx's own `gzip` on can
|
|
263
|
-
lead to decompressing brotli and re-gzipping it.
|
|
264
|
-
- **Forward `Accept-Encoding`**, otherwise the application will not compress and
|
|
265
|
-
the ready-made compressed bodies in the cache go unused.
|
|
266
|
-
- `Vary: Accept-Encoding` is written by the application; proxy caches take it
|
|
267
|
-
into account.
|
|
268
|
-
|
|
269
|
-
### Together with a CDN
|
|
270
|
-
|
|
271
|
-
The header written on cacheable pages:
|
|
272
|
-
|
|
273
|
-
```
|
|
274
|
-
Cache-Control: public, max-age=0, s-maxage=<revalidate>, stale-while-revalidate=60
|
|
275
|
-
```
|
|
276
|
-
|
|
277
|
-
`max-age=0` disables browser storage, `s-maxage` tells the CDN the duration. So
|
|
278
|
-
the same freshness model works across two layers together: the CDN serves its
|
|
279
|
-
own copy for the duration of `s-maxage`, asks the origin when it expires, and
|
|
280
|
-
the origin answers instantly from its own cache.
|
|
281
|
-
|
|
282
|
-
The `X-JSkelet-Cache` header makes it easier to diagnose which layer answered;
|
|
283
|
-
read it together with the CDN's own cache header
|
|
284
|
-
([06-caching.md](./06-caching.md)).
|
|
285
|
-
|
|
286
|
-
Static assets (`/assets/`, `/fonts/`) are marked `immutable`, so they can be
|
|
287
|
-
held indefinitely on the CDN; when the hash changes, so does the URL.
|
|
288
|
-
|
|
289
|
-
## Scaling
|
|
290
|
-
|
|
291
|
-
The HTML cache lives **in process memory**. When you run more than one replica:
|
|
292
|
-
|
|
293
|
-
- Each replica has its own cache; memory usage is multiplied by the replica
|
|
294
|
-
count (at most 500 entries plus their compressed copies).
|
|
295
|
-
- Each replica runs its own warming round at startup. Set `PREWARM_MAX` and
|
|
296
|
-
`PREWARM_CONCURRENCY` so that your upstream API can handle the load
|
|
297
|
-
multiplied by the replica count.
|
|
298
|
-
- `clearHtmlCache()` only affects the process it is called in. If you need to
|
|
299
|
-
clear all replicas, you have to solve it at the orchestrator level (a restart)
|
|
300
|
-
or with a broadcast mechanism you write yourself.
|
|
301
|
-
- If there is a CDN in front, most requests never reach the origin and the
|
|
302
|
-
per-replica cache difference becomes invisible.
|
|
303
|
-
|
|
304
|
-
To increase the capacity of a single replica, raising the `revalidate`
|
|
305
|
-
durations is usually more effective than adding replicas: as the cache hit rate
|
|
306
|
-
goes up, the work per request drops to almost zero.
|
|
307
|
-
|
|
308
|
-
## Pre-release checklist
|
|
309
|
-
|
|
310
|
-
- [ ] `NODE_ENV=production`
|
|
311
|
-
- [ ] `npm run build` ran and produced `.jskelet/manifest.json`
|
|
312
|
-
- [ ] The woff2 files under `public/fonts/` are committed
|
|
313
|
-
([08-build.md](./08-build.md))
|
|
314
|
-
- [ ] The `@source` directives in `styles/globals.css` cover all template
|
|
315
|
-
directories
|
|
316
|
-
- [ ] `hooks.notFound()` is defined and there is a 404 template
|
|
317
|
-
- [ ] `hooks.metadata()` contains `siteUrl` (so relative `canonical`s become
|
|
318
|
-
absolute)
|
|
319
|
-
- [ ] The `cache().html` patterns match the site's freshness profile
|
|
320
|
-
- [ ] `hooks.prewarmPaths()` puts the most important pages first
|
|
321
|
-
- [ ] CSP and security headers are defined in `headers()`
|
|
322
|
-
- [ ] A health check endpoint exists and is in the `devGateBypass` list
|
|
323
|
-
- [ ] `DEV_TOKEN` is set on staging and **not set** in production
|
|
324
|
-
- [ ] The reverse proxy forwards `Accept-Encoding` and does not do its own
|
|
325
|
-
compression
|
|
326
|
-
- [ ] There are no secret keys in the `clientEnv` list
|
|
327
|
-
|
|
328
|
-
## What's next
|
|
329
|
-
|
|
330
|
-
- Cache settings and prewarm: [06-caching.md](./06-caching.md)
|
|
331
|
-
- All environment variables: [07-configuration.md](./07-configuration.md)
|
|
332
|
-
- Migrating from Next.js: [11-migration.md](./11-migration.md)
|
|
1
|
+
# 10 — Deployment
|
|
2
|
+
|
|
3
|
+
This document explains how to put a JSkelet application into production: the
|
|
4
|
+
prod build and start flow, the environment variables you should set, a working
|
|
5
|
+
Docker setup, reverse proxy and `trust proxy` notes, how a health check endpoint
|
|
6
|
+
is added, and how the cache behaves when you scale out. What the build steps do
|
|
7
|
+
is in [08-build.md](./08-build.md), cache behavior in
|
|
8
|
+
[06-caching.md](./06-caching.md).
|
|
9
|
+
|
|
10
|
+
## The prod flow
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm ci
|
|
14
|
+
npm run build # jskelet build
|
|
15
|
+
npm start # jskelet start
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
If `NODE_ENV` is not given, `jskelet build` sets it to `production` and runs all
|
|
19
|
+
steps: fonts, icon sprite, CSS, client JS, images, manifest, precompress.
|
|
20
|
+
|
|
21
|
+
`jskelet start` first looks for `.jskelet/manifest.json`; if it is missing, it
|
|
22
|
+
runs the build itself. In a Docker image the build has already happened, so this
|
|
23
|
+
is a no-op; the point is that someone running `npm start` directly does not end
|
|
24
|
+
up with an unstyled page.
|
|
25
|
+
|
|
26
|
+
When the server is ready it prints a single line:
|
|
27
|
+
|
|
28
|
+
```
|
|
29
|
+
jskelet → http://localhost:3000 (production)
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
The process is protected by two safety nets: `unhandledRejection` and
|
|
33
|
+
`uncaughtException` are logged and the process stays up. On a news site, an
|
|
34
|
+
error on a single page should not take the whole site down. If you want to hook
|
|
35
|
+
this up to your own error tracking tool (Sentry etc.), you can add your own
|
|
36
|
+
listener to the same events.
|
|
37
|
+
|
|
38
|
+
## Environment variables
|
|
39
|
+
|
|
40
|
+
No variable is required; all of them have a sensible default. The ones worth
|
|
41
|
+
considering in production:
|
|
42
|
+
|
|
43
|
+
| Variable | Recommendation | Why |
|
|
44
|
+
| --- | --- | --- |
|
|
45
|
+
| `NODE_ENV` | `production` | Template cache, reading the manifest once, throwing on a broken route module |
|
|
46
|
+
| `PORT` | `3000` | The port your orchestrator expects |
|
|
47
|
+
| `HOST` | `0.0.0.0` | Only if you need to listen on IPv4 alone; the `::` default already listens dual-stack |
|
|
48
|
+
| `PREWARM_MAX` | Depends on site size | Number of pages warmed at startup |
|
|
49
|
+
| `PREWARM_INTERVAL_SECONDS` | `0` or a long value | If you want to keep never-visited pages warm |
|
|
50
|
+
| `DEV_TOKEN` | Staging only | Hides an environment that is not public yet |
|
|
51
|
+
|
|
52
|
+
The full list and the precedence order of the prewarm settings:
|
|
53
|
+
[07-configuration.md](./07-configuration.md).
|
|
54
|
+
|
|
55
|
+
Since the CLI runs with `--env-file-if-exists=.env`, a `.env` file is loaded
|
|
56
|
+
automatically if it exists; if not, no error is raised. In a container,
|
|
57
|
+
environment variables are usually injected directly instead of using this file.
|
|
58
|
+
Using both sources together blurs which value actually applies; not shipping a
|
|
59
|
+
`.env` in the prod image is the cleanest option.
|
|
60
|
+
|
|
61
|
+
**Secret keys must not go into the `clientEnv` list:** those values are embedded
|
|
62
|
+
into the client bundle as plain text ([08-build.md](./08-build.md)).
|
|
63
|
+
|
|
64
|
+
## Docker
|
|
65
|
+
|
|
66
|
+
A multi-stage image: the build stage compiles with dev dependencies, the runtime
|
|
67
|
+
stage carries only production dependencies and the build output.
|
|
68
|
+
|
|
69
|
+
```dockerfile
|
|
70
|
+
# syntax=docker/dockerfile:1
|
|
71
|
+
|
|
72
|
+
# ---------- build ----------
|
|
73
|
+
FROM node:22-bookworm-slim AS build
|
|
74
|
+
WORKDIR /app
|
|
75
|
+
|
|
76
|
+
# Dependencies in a separate layer: don't reinstall when sources change.
|
|
77
|
+
COPY package.json package-lock.json ./
|
|
78
|
+
RUN npm ci
|
|
79
|
+
|
|
80
|
+
# `public/fonts/` must be committed: the build should not need network access.
|
|
81
|
+
COPY . .
|
|
82
|
+
|
|
83
|
+
ENV NODE_ENV=production
|
|
84
|
+
RUN npx jskelet build
|
|
85
|
+
|
|
86
|
+
# ---------- runtime ----------
|
|
87
|
+
FROM node:22-bookworm-slim AS runtime
|
|
88
|
+
WORKDIR /app
|
|
89
|
+
|
|
90
|
+
ENV NODE_ENV=production
|
|
91
|
+
ENV PORT=3000
|
|
92
|
+
ENV HOST=0.0.0.0
|
|
93
|
+
|
|
94
|
+
COPY package.json package-lock.json ./
|
|
95
|
+
# sharp and tailwind are only needed at build time; keep them out of the runtime image.
|
|
96
|
+
RUN npm ci --omit=dev && npm cache clean --force
|
|
97
|
+
|
|
98
|
+
COPY --from=build /app/jskelet.config.mjs ./jskelet.config.mjs
|
|
99
|
+
COPY --from=build /app/jsconfig.json ./jsconfig.json
|
|
100
|
+
COPY --from=build /app/routes ./routes
|
|
101
|
+
COPY --from=build /app/views ./views
|
|
102
|
+
COPY --from=build /app/lib ./lib
|
|
103
|
+
COPY --from=build /app/public ./public
|
|
104
|
+
COPY --from=build /app/.jskelet ./.jskelet
|
|
105
|
+
|
|
106
|
+
# Non-root user.
|
|
107
|
+
USER node
|
|
108
|
+
|
|
109
|
+
EXPOSE 3000
|
|
110
|
+
|
|
111
|
+
# Health check: assumes you added the route below.
|
|
112
|
+
HEALTHCHECK --interval=30s --timeout=3s --start-period=20s --retries=3 \
|
|
113
|
+
CMD node -e "fetch('http://127.0.0.1:'+(process.env.PORT||3000)+'/api/healthcheck').then(r=>process.exit(r.ok?0:1)).catch(()=>process.exit(1))"
|
|
114
|
+
|
|
115
|
+
CMD ["npx", "jskelet", "start"]
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
Notes:
|
|
119
|
+
|
|
120
|
+
- **`client/` and `styles/` are not needed in the runtime image:** their output
|
|
121
|
+
is under `public/assets/`. `views/` and `routes/` are needed, because
|
|
122
|
+
rendering happens at runtime. Copy `lib/` only if your project has one.
|
|
123
|
+
- **`.jskelet/` is needed:** without `manifest.json`, `asset()` cannot find the
|
|
124
|
+
hashed URLs and `jskelet start` will try to run the build from scratch.
|
|
125
|
+
- **`sharp` is not needed in the runtime image:** it is only for build-time image
|
|
126
|
+
optimization. `--omit=dev` leaves it out (if it was installed as a
|
|
127
|
+
devDependency).
|
|
128
|
+
- If you would rather call `jskelet start` without `npx`,
|
|
129
|
+
`CMD ["node", "node_modules/jskelet/bin/jskelet.mjs", "start"]` works too.
|
|
130
|
+
|
|
131
|
+
`.dockerignore`:
|
|
132
|
+
|
|
133
|
+
```
|
|
134
|
+
node_modules
|
|
135
|
+
.git
|
|
136
|
+
.jskelet
|
|
137
|
+
public/assets
|
|
138
|
+
.env
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
The build stage produces these itself with `npx jskelet build`.
|
|
142
|
+
|
|
143
|
+
### Deploying from a subdirectory of the repo
|
|
144
|
+
|
|
145
|
+
The examples in this repo pull jskelet with `"jskelet": "file:../.."` rather
|
|
146
|
+
than from npm. In tools like Coolify, Railway or Render, if you set the "base
|
|
147
|
+
directory" to `examples/marketing`, the build context becomes only that
|
|
148
|
+
directory, `../..` falls outside the context, and installation fails at
|
|
149
|
+
`npm ci`. The correct setting: **base directory `/`**, Dockerfile location
|
|
150
|
+
`/examples/marketing/Dockerfile`. The working example is in
|
|
151
|
+
`examples/marketing/Dockerfile` and assumes the repo root as its context:
|
|
152
|
+
|
|
153
|
+
```bash
|
|
154
|
+
docker build -f examples/marketing/Dockerfile -t jskelet-marketing .
|
|
155
|
+
docker run --rm -p 3000:3000 -e SITE_URL=https://example.com jskelet-marketing
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
In your own application jskelet will be an ordinary dependency, so this
|
|
159
|
+
constraint does not apply; the multi-stage image above is enough.
|
|
160
|
+
|
|
161
|
+
## Health check
|
|
162
|
+
|
|
163
|
+
The framework does **not** add a ready-made health check endpoint; you have to
|
|
164
|
+
put it in your own route. Since the default `devGateBypass` list contains
|
|
165
|
+
`/api/healthcheck`, using that name is the least surprising option: it stays
|
|
166
|
+
reachable even in an environment with `DEV_TOKEN` set.
|
|
167
|
+
|
|
168
|
+
```js
|
|
169
|
+
// routes/00-health.mjs
|
|
170
|
+
import { getHtmlCacheSize } from "jskelet";
|
|
171
|
+
|
|
172
|
+
export default function register(app) {
|
|
173
|
+
app.get("/api/healthcheck", (req, res) => {
|
|
174
|
+
res.setHeader("Cache-Control", "no-store");
|
|
175
|
+
res.json({
|
|
176
|
+
ok: true,
|
|
177
|
+
uptime: process.uptime(),
|
|
178
|
+
cache: getHtmlCacheSize(),
|
|
179
|
+
});
|
|
180
|
+
});
|
|
181
|
+
}
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
The `00-` prefix in the file name makes sure this route is registered before any
|
|
185
|
+
catch-all ([03-routing.md](./03-routing.md)).
|
|
186
|
+
|
|
187
|
+
If you are going to use a different path, update the `devGateBypass` list,
|
|
188
|
+
otherwise your orchestrator will see a 404 on staging:
|
|
189
|
+
|
|
190
|
+
```js
|
|
191
|
+
devGateBypass: ["/healthz", "/robots.txt", "/sitemap.xml", "/favicon.ico"]
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
The warming round does not affect the health check: even if prewarm fails, the
|
|
195
|
+
process stays up and pages are served (cold, but served).
|
|
196
|
+
|
|
197
|
+
If you need to separate readiness from liveness, you can report the warming
|
|
198
|
+
status too:
|
|
199
|
+
|
|
200
|
+
```js
|
|
201
|
+
import { prewarmProgress } from "jskelet";
|
|
202
|
+
|
|
203
|
+
app.get("/api/ready", (req, res) => {
|
|
204
|
+
const warmedUp = !prewarmProgress.active && prewarmProgress.finishedAt !== null;
|
|
205
|
+
res.status(warmedUp ? 200 : 503).json({ warmedUp, ...prewarmProgress });
|
|
206
|
+
});
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
Remember to exclude this endpoint's path from warming with `prewarmSkip` (the
|
|
210
|
+
default `/api/` prefix already covers it).
|
|
211
|
+
|
|
212
|
+
## Reverse proxy
|
|
213
|
+
|
|
214
|
+
The Express application sets `trust proxy` to **on**
|
|
215
|
+
(`app.set("trust proxy", true)`). The consequences:
|
|
216
|
+
|
|
217
|
+
- `req.protocol` is read from the `X-Forwarded-Proto` header, so if the proxy
|
|
218
|
+
terminates TLS, `https` is returned correctly.
|
|
219
|
+
- `req.ip` is resolved from the `X-Forwarded-For` chain.
|
|
220
|
+
- Absolute URLs produced by `res.redirect()` carry the correct scheme.
|
|
221
|
+
|
|
222
|
+
This setting **assumes the proxy writes these headers reliably.** If you are
|
|
223
|
+
going to expose the application directly to the internet, remember that a client
|
|
224
|
+
can fabricate `X-Forwarded-*` headers; always run behind a proxy or load
|
|
225
|
+
balancer and make sure the proxy overwrites the incoming `X-Forwarded-For`
|
|
226
|
+
header.
|
|
227
|
+
|
|
228
|
+
An example nginx configuration:
|
|
229
|
+
|
|
230
|
+
```nginx
|
|
231
|
+
upstream jskelet {
|
|
232
|
+
server 127.0.0.1:3000;
|
|
233
|
+
keepalive 32;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
server {
|
|
237
|
+
listen 443 ssl http2;
|
|
238
|
+
server_name example.com;
|
|
239
|
+
|
|
240
|
+
# Response bodies already arrive compressed; don't compress a second time.
|
|
241
|
+
gzip off;
|
|
242
|
+
|
|
243
|
+
location / {
|
|
244
|
+
proxy_pass http://jskelet;
|
|
245
|
+
proxy_http_version 1.1;
|
|
246
|
+
|
|
247
|
+
proxy_set_header Host $host;
|
|
248
|
+
proxy_set_header X-Real-IP $remote_addr;
|
|
249
|
+
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
|
250
|
+
proxy_set_header X-Forwarded-Proto $scheme;
|
|
251
|
+
proxy_set_header Connection "";
|
|
252
|
+
|
|
253
|
+
# Forward it to the upstream so we can get a compressed response.
|
|
254
|
+
proxy_set_header Accept-Encoding $http_accept_encoding;
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
```
|
|
258
|
+
|
|
259
|
+
Key points:
|
|
260
|
+
|
|
261
|
+
- **Do not compress twice.** JSkelet does the brotli/gzip negotiation itself and
|
|
262
|
+
stores the compressed body for cached pages. Leaving nginx's own `gzip` on can
|
|
263
|
+
lead to decompressing brotli and re-gzipping it.
|
|
264
|
+
- **Forward `Accept-Encoding`**, otherwise the application will not compress and
|
|
265
|
+
the ready-made compressed bodies in the cache go unused.
|
|
266
|
+
- `Vary: Accept-Encoding` is written by the application; proxy caches take it
|
|
267
|
+
into account.
|
|
268
|
+
|
|
269
|
+
### Together with a CDN
|
|
270
|
+
|
|
271
|
+
The header written on cacheable pages:
|
|
272
|
+
|
|
273
|
+
```
|
|
274
|
+
Cache-Control: public, max-age=0, s-maxage=<revalidate>, stale-while-revalidate=60
|
|
275
|
+
```
|
|
276
|
+
|
|
277
|
+
`max-age=0` disables browser storage, `s-maxage` tells the CDN the duration. So
|
|
278
|
+
the same freshness model works across two layers together: the CDN serves its
|
|
279
|
+
own copy for the duration of `s-maxage`, asks the origin when it expires, and
|
|
280
|
+
the origin answers instantly from its own cache.
|
|
281
|
+
|
|
282
|
+
The `X-JSkelet-Cache` header makes it easier to diagnose which layer answered;
|
|
283
|
+
read it together with the CDN's own cache header
|
|
284
|
+
([06-caching.md](./06-caching.md)).
|
|
285
|
+
|
|
286
|
+
Static assets (`/assets/`, `/fonts/`) are marked `immutable`, so they can be
|
|
287
|
+
held indefinitely on the CDN; when the hash changes, so does the URL.
|
|
288
|
+
|
|
289
|
+
## Scaling
|
|
290
|
+
|
|
291
|
+
The HTML cache lives **in process memory**. When you run more than one replica:
|
|
292
|
+
|
|
293
|
+
- Each replica has its own cache; memory usage is multiplied by the replica
|
|
294
|
+
count (at most 500 entries plus their compressed copies).
|
|
295
|
+
- Each replica runs its own warming round at startup. Set `PREWARM_MAX` and
|
|
296
|
+
`PREWARM_CONCURRENCY` so that your upstream API can handle the load
|
|
297
|
+
multiplied by the replica count.
|
|
298
|
+
- `clearHtmlCache()` only affects the process it is called in. If you need to
|
|
299
|
+
clear all replicas, you have to solve it at the orchestrator level (a restart)
|
|
300
|
+
or with a broadcast mechanism you write yourself.
|
|
301
|
+
- If there is a CDN in front, most requests never reach the origin and the
|
|
302
|
+
per-replica cache difference becomes invisible.
|
|
303
|
+
|
|
304
|
+
To increase the capacity of a single replica, raising the `revalidate`
|
|
305
|
+
durations is usually more effective than adding replicas: as the cache hit rate
|
|
306
|
+
goes up, the work per request drops to almost zero.
|
|
307
|
+
|
|
308
|
+
## Pre-release checklist
|
|
309
|
+
|
|
310
|
+
- [ ] `NODE_ENV=production`
|
|
311
|
+
- [ ] `npm run build` ran and produced `.jskelet/manifest.json`
|
|
312
|
+
- [ ] The woff2 files under `public/fonts/` are committed
|
|
313
|
+
([08-build.md](./08-build.md))
|
|
314
|
+
- [ ] The `@source` directives in `styles/globals.css` cover all template
|
|
315
|
+
directories
|
|
316
|
+
- [ ] `hooks.notFound()` is defined and there is a 404 template
|
|
317
|
+
- [ ] `hooks.metadata()` contains `siteUrl` (so relative `canonical`s become
|
|
318
|
+
absolute)
|
|
319
|
+
- [ ] The `cache().html` patterns match the site's freshness profile
|
|
320
|
+
- [ ] `hooks.prewarmPaths()` puts the most important pages first
|
|
321
|
+
- [ ] CSP and security headers are defined in `headers()`
|
|
322
|
+
- [ ] A health check endpoint exists and is in the `devGateBypass` list
|
|
323
|
+
- [ ] `DEV_TOKEN` is set on staging and **not set** in production
|
|
324
|
+
- [ ] The reverse proxy forwards `Accept-Encoding` and does not do its own
|
|
325
|
+
compression
|
|
326
|
+
- [ ] There are no secret keys in the `clientEnv` list
|
|
327
|
+
|
|
328
|
+
## What's next
|
|
329
|
+
|
|
330
|
+
- Cache settings and prewarm: [06-caching.md](./06-caching.md)
|
|
331
|
+
- All environment variables: [07-configuration.md](./07-configuration.md)
|
|
332
|
+
- Migrating from Next.js: [11-migration.md](./11-migration.md)
|