Compare commits
108
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
6ee8277205 | ||
|
|
14d910b267 | ||
|
|
1f68655314 | ||
|
|
0450a78478 | ||
|
|
991b0c356e | ||
|
|
be4b79026b | ||
|
|
2fa42ad3aa | ||
|
|
67d593cb73 | ||
|
|
eff68287f2 | ||
|
|
a4c386e438 | ||
|
|
328aa31600 | ||
|
|
fbc33a5ff4 | ||
|
|
a470377d4f | ||
|
|
6447916039 | ||
|
|
1ee2f3a8ac | ||
|
|
d1f3f4ff88 | ||
|
|
81c54c9afc | ||
|
|
5548287c65 | ||
|
|
485c5d5578 | ||
|
|
9af6ba21b9 | ||
|
|
2b67ba4461 | ||
|
|
f9d95448db | ||
|
|
6a27518be1 | ||
|
|
3c85fec634 | ||
|
|
1860f90785 | ||
|
|
28fe0b7e04 | ||
|
|
802244762e | ||
|
|
521487ab10 | ||
|
|
00ee256107 | ||
|
|
9efa1552ee | ||
|
|
b0b9a0d815 | ||
|
|
77f72ec8af | ||
|
|
688a36e6d5 | ||
|
|
f7df74c574 | ||
|
|
0c08a7467f | ||
|
|
046ef92149 | ||
|
|
96b2054ecd | ||
|
|
e1d8cd833d | ||
|
|
95d6341fa7 | ||
|
|
7425a484c2 | ||
|
|
9b5dcdfce5 | ||
|
|
bf97cac2e9 | ||
|
|
9a354ee62a | ||
|
|
2e041bcfb0 | ||
|
|
1894ac7ead | ||
|
|
86f04ed794 | ||
|
|
c884432594 | ||
|
|
bc87e7b7e3 | ||
|
|
34e4beb0d7 | ||
|
|
142788d740 | ||
|
|
11d6c275c8 | ||
|
|
ebf65c247c | ||
|
|
90eb205e85 | ||
|
|
942f87dcac | ||
|
|
9c5a693281 | ||
|
|
f2cfa49150 | ||
|
|
e82dbafd4a | ||
|
|
fd830796e8 | ||
|
|
1a8cf21c88 | ||
|
|
b401a678cb | ||
|
|
1337fae991 | ||
|
|
a7b3880088 | ||
|
|
cd75fd2288 | ||
|
|
a7b85af45a | ||
|
|
eeeaa706a2 | ||
|
|
b8fbab8a18 | ||
|
|
a8b9f8f5db | ||
|
|
8b5e61de66 | ||
|
|
f4dc53d3cf | ||
|
|
5b4d8732e0 | ||
|
|
5114e8ae87 | ||
|
|
c70f26bb0e | ||
|
|
8b2073474d | ||
|
|
8ca6bec943 | ||
|
|
de2861fa78 | ||
|
|
54edbae731 | ||
|
|
940096b2b1 | ||
|
|
0b429f5465 | ||
|
|
2e70319d99 | ||
|
|
dd95694492 | ||
|
|
bb8581a535 | ||
|
|
1117ff1827 | ||
|
|
b9580e2e5f | ||
|
|
59f9d5dbc7 | ||
|
|
b864251f48 | ||
|
|
11c5432955 | ||
|
|
60712f5499 | ||
|
|
9abee89478 | ||
|
|
4090203dc4 | ||
|
|
91ea3f9a70 | ||
|
|
81df3351f5 | ||
|
|
6696ed9b23 | ||
|
|
baf3590186 | ||
|
|
61f4b0447b | ||
|
|
b18c218b4e | ||
|
|
e32fe6ccf3 | ||
|
|
4c76897cac | ||
|
|
5497a5cdc4 | ||
|
|
8caa19b132 | ||
|
|
588139bfa7 | ||
|
|
21a5eb670e | ||
|
|
022a9d96bd | ||
|
|
bb1a482a8d | ||
|
|
2608bf64eb | ||
|
|
04268535a6 | ||
|
|
630e8b9c84 | ||
|
|
ab8671e0fb | ||
|
|
c51fcd5df6 |
@@ -1,14 +0,0 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
extends: ['@nuxt/eslint-config'],
|
||||
ignorePatterns: [
|
||||
'dist',
|
||||
'node_modules',
|
||||
'.output',
|
||||
'.nuxt'
|
||||
],
|
||||
rules: {
|
||||
'vue/max-attributes-per-line': 'off',
|
||||
'vue/multi-word-component-names': 'off'
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
name: Trigger container build
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
paths:
|
||||
- 'content/**'
|
||||
- 'app/**'
|
||||
- 'public/**'
|
||||
- 'server/**'
|
||||
- 'nuxt.config.ts'
|
||||
- 'content.config.ts'
|
||||
- 'tsconfig.json'
|
||||
- 'package.json'
|
||||
- 'package-lock.json'
|
||||
|
||||
jobs:
|
||||
trigger:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Dispatch docudjeex-build
|
||||
run: |
|
||||
curl -sf -X POST \
|
||||
-H "Authorization: token ${{ secrets.BUILD_REPO_TOKEN }}" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d "{\"ref\":\"main\",\"inputs\":{\"source_sha\":\"${{ github.sha }}\"}}" \
|
||||
"https://git.djeex.fr/api/v1/repos/Djeex/docudjeex-build/actions/workflows/build.yml/dispatches"
|
||||
Executable → Regular
+43
-11
@@ -1,12 +1,44 @@
|
||||
node_modules
|
||||
*.iml
|
||||
.idea
|
||||
*.log*
|
||||
.nuxt
|
||||
.vscode
|
||||
.DS_Store
|
||||
coverage
|
||||
dist
|
||||
sw.*
|
||||
.env
|
||||
# Nuxt dev/build outputs
|
||||
.output
|
||||
.data
|
||||
.nuxt
|
||||
.nitro
|
||||
.cache
|
||||
dist
|
||||
|
||||
# Node dependencies
|
||||
node_modules
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Misc
|
||||
.DS_Store
|
||||
.fleet
|
||||
.idea
|
||||
.eslintcache
|
||||
|
||||
# Local env files
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# npm pack
|
||||
*.tgz
|
||||
|
||||
# Temp files
|
||||
.tmp
|
||||
.profile
|
||||
*.0x
|
||||
|
||||
#VSC
|
||||
.history
|
||||
.wrangler
|
||||
|
||||
# Python
|
||||
__pycache__
|
||||
*.pyc
|
||||
|
||||
# Scratch/demo files (not part of the site)
|
||||
scratch
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
# Customizations over base Docus
|
||||
|
||||
This project starts from the `docus` i18n starter template (`extends: ['docus']` in `nuxt.config.ts`, Docus v5.x on Nuxt ^4.4.8). This file tracks everything added or changed on top of that base, and *why*, so a future contributor doesn't have to diff `node_modules/docus` to find out.
|
||||
|
||||
## Packages
|
||||
|
||||
- **`better-sqlite3`** — Nuxt Content v3 stores all parsed markdown content in a local SQLite database (`.data/content/contents.sqlite`) using its own DB layer (`db0`) rather than reading files at request time. `db0` needs an actual SQLite driver to talk to that file, and lists `better-sqlite3` as a *peer* dependency (alongside alternatives like `sqlite3` or `@libsql/client`) — peer dependencies aren't auto-installed by npm, so without declaring it explicitly, `@nuxt/content` has no driver to write to and the local content database silently fails to build.
|
||||
- **`@nuxtjs/i18n`** module added explicitly in `nuxt.config.ts`. The starter ships an i18n-*shaped* content structure (`content/en/`, `content/fr/`) out of the box, but that's just a folder convention — nothing routes `/fr/...` URLs, switches locales, or auto-detects the browser's language unless the module itself is registered.
|
||||
|
||||
## `nuxt.config.ts`
|
||||
|
||||
- **Git-based page contributors.** `getContributors()` runs `git log --format=%an --follow -- <file>` for each markdown file and dedupes the author list, injected into the page's content via the `content:file:afterParse` hook. This was chosen over the Gitea/GitHub API because it needs no access token, no network call, and no rate limiting — the info is already in the checkout. The trade-off: CI must do a **full** (non-shallow) `git checkout`, otherwise `git log` only sees one commit per file and every page shows just its most recent author instead of everyone who ever touched it.
|
||||
- **`@nuxt/image` dir is always an absolute path.** An earlier revision branched this on `nuxi dev` vs a production build, passing the plain relative string `'public/'` in production on the theory that an absolute path there broke the `/_ipx` route's SVG `Content-Type`. In production that relative path doesn't reliably resolve to the project root at the moment the prerender crawler actually requests an `/_ipx/*` URL. The real-world result was every single image on the site 404ing (`IPX_FILE_NOT_FOUND`) in a from-scratch production build, not a content-type quirk on some of them. Always resolving the absolute path (`fileURLToPath(new URL('./public', import.meta.url))`) fixed it in both modes; since the whole site is prerendered to static files anyway, each image's correct extension is what actually decides its serving content-type, not this setting.
|
||||
- **`icon.serverBundle.collections`.** Every icon collection referenced dynamically (built from a variable/string at runtime rather than written as a literal `i-xxx` somewhere) has to be listed here explicitly, or Nuxt Icon's static usage scanner never finds it and falls back to a live `api.iconify.design` request at prerender time, which times out (`[Icon] loading icon X timed out`) wherever outbound network access is restricted, exactly as it was on the actual deployment host. Two places build icon names this way: `app/app.config.ts`'s `ui.prose.codeIcon` map (`simple-icons`, `lucide`) and `app/components/content/FileTreeNode.vue`'s per-extension file-type icons (`vscode-icons`). Add any new collection here the moment a new dynamic icon source is introduced. Check it's actually installed first with `ls node_modules/@iconify-json/`.
|
||||
- **`components:` array: keep `'~/components'` as the first entry.** Passing a `components` array to Nuxt *replaces* its default `~/components` auto-scan instead of adding to it. Every local override in `app/components/` (`AppHeaderCenter`, `DocsAsideLeftTop`, etc., all documented below) was silently shadowed by the docus layer's originals the moment a custom array was added without also re-listing the default scan. The override files were still there, just never picked up. The second entry, `{ path: '~/components/prose', pathPrefix: false, global: true }`, exists because `ProseNote`/`ProseTip`/`ProseWarning`/`ProseCaution` are *only* ever resolved dynamically by name from Nuxt Content's MDC tag map (`note` → `ProseNote`, etc.), and nothing statically writes `<ProseNote>` in a template, so Vite's production build tree-shook all four out of both the client and server bundles entirely, and every admonition on the live site rendered as a raw, unstyled `<ProseNote icon to="...">` tag instead of the actual callout. `nuxt dev` never surfaces either of these: it doesn't tree-shake, and it resolves components on demand regardless of the scan config.
|
||||
- **Custom icon collection.** `icon.customCollections` registers a `brand` prefix pointing at `app/assets/brand-icons/`, so logos for the user's other projects (Instameex, Lumeex) can be referenced from content as `i-brand-instameex` etc., exactly like any Iconify icon — without needing to publish them to an actual Iconify icon set first.
|
||||
- **Markdown highlight.** Forces the `github-dark` Shiki theme for *both* the light and dark slots, because the site never actually offers a light mode (see `docus.colorMode: 'dark'` below) — maintaining two highlight themes for a mode nobody sees would just be dead config. The extra languages (`nginx, properties, php, toml, console, sh, yaml`) were added because the tutorial content includes config-file snippets and terminal output in all of these syntaxes, and none of them are in Shiki's minimal default bundle for Nuxt Content.
|
||||
- **`darkreader-lock` meta tag.** The Dark Reader browser extension rewrites elements' inline `style` attributes on the client, after Nuxt has already server-rendered them — so any component using an inline `style` (like the cyan "·" separator spans) ends up with mismatched HTML between server and client, and Vue logs a hydration-mismatch warning on every page load for any visitor running that extension. This meta tag is Dark Reader's own opt-out signal, telling the extension to leave the page alone instead of trying to work around the mismatch after the fact.
|
||||
- **301 redirects (`routeRules`).** The old site (pre-rewrite, on the separate `docudjeex` repo's `main`/`french` branches) served English at the site root with no locale prefix (`/serveex/introduction/`) and French under `/fr/` with French-language slugs (`/fr/serveex/coeur/installation/`). This rewrite moved every URL under an explicit `/en/`/`/fr/` prefix with English-based slugs on both, which would otherwise break every external link, bookmark, and search-engine ranking built up on the old URLs. All 72 mappings use `statusCode: 301` explicitly, since Nitro's default redirect status is 307 (temporary), which search engines don't treat as "please re-index this at the new URL" the way a 301 (permanent) does. French pages whose old slug already matches the new one (`dozzle`, `immich`, and similar words that are spelled the same in both languages) are deliberately absent, since a rule there would redirect the page to itself. See the warning callout above this section: none of these 72 rules produce a real 301 on the actual production host, only a `location =` block in that host's nginx config does.
|
||||
- **`site.trailingSlash: true`.** The site builds as a static export (`nuxt build`, deployed as static files on a web server) and the production host 301-redirects a bare `path` request to `path/` (verified against `docu.djeex.fr`), so canonical/og:url/sitemap URLs need to already carry the trailing slash — otherwise the canonical tag points at the very URL the server redirects away from, a loop that keeps the page out of search results. This is documented, official behavior for the wider Nuxt SEO ecosystem (`nuxtseo.com`'s "Trailing Slashes" guide), but Docus doesn't depend on `nuxt-seo-utils` for its canonical/og:url logic — it hand-rolls its own in `useSeo.ts` via a plain `joinURL(site.url, route.path)` that never checks this setting. That gap is why the items below exist alongside it.
|
||||
- **`nitro.prerender.autoSubfolderIndex: true`.** Docus sets this to `false` in its own `nuxt.config.ts`, which writes every route as `path.html` instead of `path/index.html` — the exact opposite of what the trailing-slash setup above needs, since the host would then redirect `/path` to `/path/` and find no directory there. Restoring the Nitro default puts the files back where the advertised URLs actually point.
|
||||
- **`nitro.prerender.routes: ['/', '/robots.txt']`.** Docus's `nitro:config` hook seeds one prerender route per locale (`/en`, `/fr`) and `/sitemap.xml`, but never `/robots.txt`. It exists as a server route yet was never written to the static output, so it 404s on a static host and loses the `Sitemap:` line that points crawlers at the sitemap. `/` is listed too, though it turns out this doesn't actually matter: Nitro's crawler always visits `/` on its own regardless (it's the crawl's entry point), confirmed by removing it from this array and finding it prerendered anyway. `@nuxtjs/i18n`'s `detectBrowserLanguage` never actually runs on this static host: `/` is baked as a static `<meta http-equiv="refresh">` stub whose target is a fixed string decided once at build time (`defaultLocale: 'en'`), not read per visitor, and Nitro bakes *any* route carrying a `redirect` routeRule the same way, with no real HTTP status. The real 301 for `/` lives in the production host's nginx config instead, see the warning callout above.
|
||||
- **`experimental.defaults.nuxtLink.trailingSlash: 'append'`.** The native Nuxt-core (not `@nuxtjs/i18n`'s own, separate `trailingSlash` option — that one only affects `switchLocalePath()` and double-appends the slash on hreflang alternate links) way to make every `<NuxtLink>` href, including the ones i18n's `switchLocalePath` builds for hreflang tags, resolve with a trailing slash already, matching both `site.trailingSlash` and the directory-style files on disk.
|
||||
|
||||
> **Do not add a global trailing-slash redirect middleware here.** An earlier revision had `app/middleware/trailing-slash.global.ts` 301-redirecting bare paths to their slash form. It broke the production build outright: Nitro's prerender crawler seeds on `/en` and `/fr`, the middleware turned both into redirect responses, and since Nitro extracts no links from a redirect the crawl stopped immediately — 31 routes and 22 HTML files instead of 557 and 146, with every content page missing. The host already performs that redirect server-side, so the middleware bought nothing.
|
||||
|
||||
> **A `routeRules` redirect can't produce a real HTTP redirect on this deployment.** The production host serves this site as plain static files (nginx `root` + `try_files`, no `proxy_pass` to a running Nuxt/Nitro process at all). Any route with a `redirect` rule still gets crawled and prerendered like any other page, but since a static file can't carry a custom HTTP status, Nitro bakes it as a client-side `<meta http-equiv="refresh">` stub instead. That's invisible to anything that doesn't execute the page (search-engine link-equity, most link-preview tools, `curl`). This was tried for `/` (redirecting to `/en/`) and reverted after confirming the real 301 only appears when running `node .output/server/index.mjs` directly, never through the actual production nginx config. The 72 legacy-URL redirects in `routeRules` below have the exact same limitation: they were made real 301s by adding matching `location = /path { return 301 ...; }` blocks directly in the site's nginx config, outside this repo entirely, not by anything in `nuxt.config.ts`. If this project ever moves to a host that runs the Nitro server itself instead of serving `.output/public` as static files, all of this becomes unnecessary and `routeRules` redirects will work as real 301s on their own.
|
||||
|
||||
## `server/routes/sitemap.xml.ts`
|
||||
|
||||
Overrides Docus's own `sitemap.xml` route (`node_modules/docus/server/routes/sitemap.xml.ts`), for two reasons:
|
||||
|
||||
- Docus's version resolves the site URL via `inferSiteURL()`, which only reads deployment-platform env vars (Vercel/Netlify/Cloudflare Pages, or `NUXT_PUBLIC_SITE_URL`/`NUXT_SITE_URL`) — never the `site.url` set in this project's `nuxt.config.ts`. In `nuxt dev` none of those env vars exist, so every `<loc>` came out as a bare relative path instead of an absolute URL, which is invalid per the sitemap spec.
|
||||
- Even where that env var happens to be set, Docus's version builds each `<loc>` with plain string concatenation and has no concept of `site.trailingSlash` at all, so it could never match the trailing-slash canonical/og:url above.
|
||||
|
||||
This override is otherwise a straight copy of Docus's route, with the URL-building swapped for `createSitePathResolver()` (from `nuxt-site-config`), which resolves from the same `site` config as canonical/og:url and honors `trailingSlash` correctly.
|
||||
|
||||
## `content.config.ts`
|
||||
|
||||
Nuxt Content validates every page's frontmatter against a Zod schema per collection, and **silently drops any key that isn't declared in that schema** — it doesn't error, the field just isn't there at render time. This file reimplements docus's own `createDocsSchema()` (not something the `docus` package actually exports, so it has to be copied rather than imported) and extends it with the custom frontmatter toggles the page template relies on:
|
||||
|
||||
- `hideHeader` — skip the title/description block on a page (used for pages that want a custom hero instead of the standard header).
|
||||
- `hideCopyPage` — hide the "Copy page" button group (for pages where "copy as markdown for an LLM" doesn't make sense).
|
||||
- `hideToc` — hide the right-hand table of contents (for short pages where a TOC would be mostly empty space).
|
||||
- `contributors` — the array populated by the `getContributors()` hook above; without this line in the schema, the hook's output would be computed and then thrown away.
|
||||
|
||||
This was a real bug during development: `hideHeader`/`hideCopyPage` did nothing at all until this schema was extended, because the fields were being stripped before the page component ever saw them.
|
||||
|
||||
## `app/app.config.ts`
|
||||
|
||||
The old production site (`docu.djeex.fr`) has an established visual identity that a "generic Nuxt UI theme" migration would have lost. These overrides were measured directly against the live old site (colors picked from its actual computed styles, not eyeballed) so the new stack keeps the same look rather than just being *a* documentation theme:
|
||||
|
||||
- `docus.colorMode: 'dark'` — the old site never had a light mode either; hard-locking it here removes the need for the toggle UI and light-theme variants entirely, rather than half-supporting a mode nobody uses.
|
||||
- `ui.colors`: primary `cyan`, neutral `zinc` — the site's brand accent color and its neutral gray scale.
|
||||
- `ui.prose.card` / `ui.prose.pre` / `ui.header` / `ui.contentSearchButton` / `ui.contentSurround` / `ui.kbd`: exact background/border hex values (a shared `rgba(12,13,12,0.8)` translucent-dark family, e.g. `#121110` borders) matching the old site's card, code-block, header, search button, and prev/next-link chrome, since Nuxt UI's defaults use a different neutral scale that didn't match.
|
||||
- `ui.prose.callout.compoundVariants`: exact colors for all four admonition severities (info/success/warning/error), overriding Nuxt UI's default callout palette so `::note`, `::tip`, `::warning`, `::caution` render in the same colors the old site's `::alert` boxes used, rather than Nuxt UI's stock blue/green/amber/red.
|
||||
- `toc.bottom.links` / `toc.bottom.title` — no component override needed for this one: Docus's own `DocsAsideRightBottom.vue` already reads `appConfig.toc?.bottom?.links` and renders them via `UPageLinks` under the right-hand table of contents, it's just never set by default. This surfaces the same "other projects" links (git.djeex.fr, Lumeex, Instameex) shown on the landing page's "Other dumb things" section, at the bottom of every doc page's TOC too, instead of only being visible from the homepage.
|
||||
|
||||
## Custom / overridden components (`app/components/`)
|
||||
|
||||
Nuxt's convention is that a file at `app/components/<any-subfolder>/<ExactComponentName>.vue` overrides a layer's (here, docus's) auto-registered component of the same name — no explicit registration needed, just matching the filename. Each one below was diffed against the actual stock file in `node_modules/docus` to confirm it's a real, deliberate change and not an accidental untouched copy:
|
||||
|
||||
- **`app/AppHeader.vue`** — added a Gitea social icon link alongside the stock GitHub link. The project's canonical repository lives on the user's self-hosted Gitea instance; GitHub is only a mirror, so a GitHub-only link would point visitors to the secondary copy.
|
||||
- **`app/AppHeaderCenter.vue`** — the most heavily rewritten component. Stock Docus sizes the header's nav menu to the header's own container width, but this site's actual docs pages use a narrower, off-center content column (a two-level 10-column grid: an outer sidebar column plus an inner article/TOC split) — so the stock menu didn't visually line up under the content it was supposed to sit above. This override renders the nav as an absolutely-positioned overlay that replicates that exact two-level grid, so it lines up with the real article column instead of the header's own slot. Also fixes a real bug found during development: `pointer-events-auto` was originally applied to the full-width wrapper div, which silently blocked clicks on the logo and the right-side icons (search, color mode, socials) everywhere *except* the homepage (a different code path with an empty nav). It's now scoped to only the innermost column div that actually contains clickable content.
|
||||
- **`app/AppHeaderBottom.vue`** — emptied to a no-op `<div />`. Once navigation moved into `AppHeaderCenter` above, the stock second nav row would have shown the same links twice and wasted vertical space in the header.
|
||||
- **`docs/DocsAsideLeftBody.vue`** — the left doc-tree sidebar is now collapsible and closed by default (stock: always fully expanded, not collapsible). With this site's number of nested sections, a fully-expanded tree was one very long scrollable list on every page load; collapsed-by-default lets a visitor see the top-level structure first and open only the section they need.
|
||||
- **`docs/DocsAsideLeftTop.vue`** — added a full-width search button above the sidebar for the header-based subnav mode (stock rendered nothing there in that mode, only in the "aside" subnav mode). Without it, visitors on pages using header-mode subnav had no visible way to open search from the sidebar area at all.
|
||||
- **`docs/DocsPageHeaderLinks.vue`** — gave the "Copy page" button group the same translucent-dark card styling used everywhere else on the site. Purely cosmetic: the stock Nuxt UI button styling didn't match the rest of the page chrome and stood out as an unstyled default.
|
||||
- **`prose/ProseNote.vue`, `ProseTip.vue`, `ProseWarning.vue`, `ProseCaution.vue`** (new files, no stock equivalent to override against — these are thin wrappers around Nuxt UI's own `Callout.vue`). Nuxt UI's admonition icon is normally set once, globally, per icon slot — there's no built-in way to omit it on just one specific admonition without changing it for every admonition of that type site-wide. These wrappers read an optional `icon` prop so a single instance can hide its icon (`::note{icon=""}`) when the emoji or leading text already conveys the same meaning, while every other `::note` on the site keeps its default icon.
|
||||
- **`content/Ellipsis.vue`** (new; no Docus or Nuxt UI equivalent exists at all). The old site had a decorative blurred gradient glow behind section headers, and reproducing the content 1:1 meant this cosmetic effect needed *some* markdown-usable component to exist, since neither Docus nor Nuxt UI ships anything similar. Registered as the inline MDC component `:ellipsis{left= width= top= blur= zIndex=}`, used across content wherever the old site had that effect.
|
||||
- **`OgImage/Docs.takumi.vue`** — overrides Docus's default `og:image` template used for every doc page's social-preview image. Stock Docus renders it on a generic `bg-neutral-950` with a plain white corner flare, in whatever font the takumi renderer defaults to; this swaps in the site's actual near-black background (`#0B0A0A`, matching `app.css`), a blurred oval reproducing the exact colors and diagonal gradient of the site's own `:ellipsis` component instead of the white flare, **Roboto** as the font (the site itself renders in the browser's own `system-ui`, which can't be embedded server-side since it resolves to a different, non-redistributable font per OS — Roboto was picked as Android's system font, the single most common one), and the site's own logo (bottom-left) in place of the plain site-name text. Two non-obvious takumi rendering gotchas found in the process: an injected SVG's XML prolog and comments render as literal visible text instead of being silently ignored like a browser's `innerHTML` would, and a `<style>` block's CSS class rules aren't resolved at all (paths fell back to default black fill) — both needed stripping/inlining by hand in `fetchLogoSvg()` before the SVG string reaches `v-html`. `content/en/index.md` and `content/fr/index.md` skip this template entirely via the `seo.ogImage` frontmatter key (Docus's `landing.vue` checks for it and falls back to a fixed `/img/social.png` instead of generating one), since the homepage's own hero doesn't fit this per-doc-page layout.
|
||||
- **`content/FileTree.vue` + `content/FileTreeNode.vue`** (new; no Docus or Nuxt UI equivalent exists at all). Every install guide used to show its folder layout as a plain ASCII-art code fence (`└──`/`├──`); this renders the same information as an actual tree with per-entry folder/file icons instead, reusing the exact filename/extension icon lookup `CodeIcon.vue` already does for labeled code fences, so a `.env` or `.conf` gets the same icon here as in a fence header. Registered as the container component `::file-tree`, fed through a YAML props block (`remark-mdc`'s `---\n...\n---` syntax) rather than a nested markdown list, since the data (name, whether it's a folder, its children) doesn't map cleanly onto list semantics otherwise. A trailing `/` on a plain string marks an otherwise-childless folder (a mapping key is unambiguously a folder already); a trailing `" # comment"` on either form renders as a dimmed, italic aside, matching a real code comment without being one (an actual unquoted YAML `#` would just be stripped by the parser before the component ever saw it). The header doubles as a collapse toggle (`collapsed` prop sets the initial state only), and clicking any row copies that entry's full path to the clipboard.
|
||||
|
||||
## Page-level features (`app/pages/[[lang]]/[...slug].vue`)
|
||||
|
||||
This catch-all page isn't a docus override (docus doesn't ship one to override — this project defines its own), but it layers frontmatter-driven behavior on top of stock Nuxt Content rendering:
|
||||
|
||||
- `hideHeader` / `hideCopyPage` / `hideToc` — read the three frontmatter toggles declared in `content.config.ts` above and conditionally skip rendering each block.
|
||||
- **Contributors + history block.** Below the "Edit this page" / "Report an issue" links, renders "Contributor(s): <names>" from the `contributors` frontmatter field (populated by the git-log hook), with the names linking to that specific file's Gitea commit history. The goal is to give credit to everyone who's worked on a page — not just whoever last edited it — and let a reader jump straight to the full history of a page without leaving the site or knowing the underlying file path.
|
||||
|
||||
## License
|
||||
|
||||
MIT (see `LICENSE`), same as the Docus theme this project is built on.
|
||||
@@ -0,0 +1,71 @@
|
||||
# Functional changelog: site redesign (September 2026)
|
||||
|
||||
This document lists every change a visitor would actually notice between the old version of docu.djeex.fr and the new one. It does not cover technical implementation details, only what changed in the content and in using the site.
|
||||
|
||||
## New articles
|
||||
|
||||
- **"Linux tips for dummies" section** (under General): three new beginner-friendly articles on the Linux terminal.
|
||||
- *CLI basics*: how a Linux command is built, with worked examples, plus a cheat-sheet table explaining where each common command's name comes from (`cd` for *change directory*, `ls` for *list*, and so on).
|
||||
- *Filesystem*: Debian's folder and partition layout, and good practices around it.
|
||||
- *Handy tools*: installing and using `btop`, `duf`, `ncdu`, `tldr`, `lazydocker`, and `ufw` (firewall).
|
||||
- **Jellyfin**: new media server article, now the default recommendation in place of Plex (Plex is still documented, see below).
|
||||
- **TinyAuth**: new article on this lightweight forward-auth proxy, for putting a login page in front of an app.
|
||||
- **Pocket ID**: new article on this self-hosted OIDC provider, letting you log in with a passkey instead of a password.
|
||||
- **File Browser Quantum**: new article on this modernized fork of File Browser, replacing the original as the recommended choice (see below).
|
||||
- **Forgejo**: new article on this self-hosted Git platform, now the default recommendation in place of Gitea (Gitea is still documented, see below).
|
||||
- **Arcane**: new article on this more advanced Docker management UI than Dockge, with support for multiple remote hosts and OIDC login.
|
||||
- **"Confirm before deleting" tip**: new article documenting a Bash function that asks for confirmation before any `sudo`-run `rm`, to help avoid accidental deletions.
|
||||
- **Section summary pages**: the General, Nonsense, and Recycled sections each now have a landing page listing their contents.
|
||||
|
||||
## Replaced or archived articles
|
||||
|
||||
Some apps are no longer the top recommendation, but their article stays available for anyone already using them or who prefers that alternative:
|
||||
|
||||
- **Plex** has been replaced by **Jellyfin** as the recommended choice. The Plex article is kept under a new "Alternatives" section, along with its related qBittorrent and Servarr variants.
|
||||
- **Gitea** has been replaced by **Forgejo** as the recommended choice, following Gitea's governance change to a for-profit company. The Gitea article remains available under "Alternatives."
|
||||
- **File Browser** has been replaced by **File Browser Quantum**. Unlike the two cases above, this one comes with an active warning rather than just being an alternative: the original project accumulated several serious security vulnerabilities (including one allowing full admin account takeover) and was officially abandoned by its maintainers in September 2026. The article is now marked deprecated with an explicit warning not to install it.
|
||||
- **Overseerr** has been replaced by its successor **Seerr** in the automation (Servarr) article, following the merger of the Overseerr and Jellyseerr projects.
|
||||
|
||||
## Navigation reorganization
|
||||
|
||||
- **WireGuard** moved from the "Security" section to "Core": it's now treated as a basic infrastructure building block rather than an optional security tool.
|
||||
- **Authentik** moved to a new **"Advanced"** section, alongside Arcane, for more complex setups aimed at users already comfortable with self-hosting.
|
||||
- The "Security" section now only contains Cloudflare, TinyAuth, and Pocket ID.
|
||||
- Deprecated or replaced articles (Plex, the old File Browser, Gitea, the old WireGuard setup) are now grouped under a new **"Recycled"** section, itself split into "Deprecated" (to avoid) and "Alternatives" (valid choices, just not the default recommendation).
|
||||
|
||||
## Content rewritten or substantially expanded
|
||||
|
||||
- **Debian installation**: heavily expanded article.
|
||||
- Explains how to enable Wake-on-LAN and automatic restart after a power outage, directly in the BIOS.
|
||||
- SSH connection instructions now split by operating system (macOS, Windows, Linux), with the exact commands for each.
|
||||
- A note on temporarily re-enabling SSH password login when connecting a new machine to the server.
|
||||
- A brand new section on waking the server up remotely (Wake-on-LAN from outside the local network), with a concrete port-forwarding example.
|
||||
- A new section on keeping the system up to date, laid out step by step, plus a one-line command tip for fully automatic updates.
|
||||
- A clear prerequisite added at the top: being comfortable with basic terminal commands, linking to the new "CLI basics" article.
|
||||
- **Docker**: the introduction has been fully rewritten to explain what a container actually is and why this approach helps, instead of jumping straight into installation. The list of compatible apps is now presented as a set of examples (not exhaustive), each one linked.
|
||||
- **Single sign-on**: several existing articles (Immich, Nextcloud, Forgejo, Pingvin, Vaultwarden) gained a new section explaining how to log in directly with Pocket ID, alongside the already-documented TinyAuth method.
|
||||
- **TinyAuth protection**: added as a new section to many articles that didn't have it yet (monitoring, media, files, development), for putting these apps behind a login page.
|
||||
|
||||
## User experience (UX) changes
|
||||
|
||||
- **New look and feel**: the site was rebuilt from the ground up on a new component library, while keeping the old site's visual identity (colors, dark by default).
|
||||
- **Navigation menu** repositioned to properly line up with the article content column (previously misaligned at some screen widths).
|
||||
- **Collapsible sidebar**: the article tree on the left can now be collapsed, and starts collapsed by default instead of showing everything at once, easier to scan given how many sections there are.
|
||||
- **Search button** added above the sidebar, visible on every page.
|
||||
- **Step-by-step instructions**: nearly every install and configuration procedure is now visually numbered, instead of running paragraphs of text, much easier to follow.
|
||||
- **Interactive folder trees**: folder structures shown in install guides are now real visual trees with folder/file icons, instead of ASCII-art text. Clicking a row copies that path to the clipboard.
|
||||
- **Named, illustrated code blocks**: every code block now shows the real file name it belongs to, with a matching icon (for example, a YAML icon for a `compose.yaml`).
|
||||
- **Callout boxes (notes, tips, warnings)**: colors matched to the old site's palette; some callouts can now be clicked entirely when they only contain a link to another article, instead of a plain inline text link.
|
||||
- **Contributors shown at the bottom of every article**: lists everyone who has worked on a page (not just the last editor), linking to the full edit history.
|
||||
- **"Other projects" links** (Gitea, Lumeex, Instameex) now also shown at the bottom of every article's table of contents, not just on the homepage.
|
||||
- **Improved mobile layout**: homepage buttons, image, and spacing reorganized for small screens; "edit"/"report an issue" links now stack properly instead of overflowing on mobile.
|
||||
|
||||
## URL changes
|
||||
|
||||
- Every page now lives under an explicit language prefix, `/en/...` or `/fr/...`. Previously only French had a prefix (`/fr/...`), while English sat at the site root with no prefix at all.
|
||||
- French URLs now use the same wording as their English counterparts (for example `/fr/general/networking/nat/` instead of the old `/fr/generalites/reseau/nat/`), so both languages share the exact same structure.
|
||||
- **Every old link still works**: a bookmark, a link shared elsewhere, or a search-engine result pointing at an old address automatically redirects the visitor to its new equivalent.
|
||||
|
||||
## English/French parity
|
||||
|
||||
The French version is now a complete, faithful mirror of the English one: same articles, same organization, same formatting (same callouts, same numbered steps), with only the text translated. That wasn't the case before, where the two versions had drifted apart over time (articles present in one language but missing from the other, different organization).
|
||||
@@ -1,5 +1,6 @@
|
||||
MIT License
|
||||
Copyright (c) 2025 > Djeex
|
||||
|
||||
Copyright (c) 2026 Djeex
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
@@ -17,4 +18,10 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
SOFTWARE.
|
||||
|
||||
---
|
||||
|
||||
This project is built on the Docus theme (https://docus.dev), also MIT
|
||||
licensed (Copyright (c) the Docus authors), which is compatible with and
|
||||
distributed under the same terms above.
|
||||
|
||||
@@ -1,43 +1,69 @@
|
||||
<p align="center">
|
||||
<img src="https://git.djeex.fr/Djeex/DjeexLab/raw/branch/main/docs/files/img/global/lab.svg" align="center" width="700">
|
||||
|
||||
|
||||
[](https://docu.djeex.fr/) [](https://docu.djeex.fr/)
|
||||
<img src="public/img/global/docudjeex-home.svg" align="center" width="700">
|
||||
|
||||
[](https://docu.djeex.fr/)
|
||||
[](https://docu.djeex.fr/)
|
||||
</p>
|
||||
|
||||
# 🔧 De la doc, encore de la doc
|
||||
# 🔧 Homelab docs & other dumb things
|
||||
|
||||
**Docu·djeex** c'est avant tout un projet personnel visant à héberger chez soi le plus de services possibles du quotidien sans passer par des plateformes propriétaires (Google, Apple, Netflix...). Cette doc utilise [Nuxt.js](https://nuxt.com/)
|
||||
**Docu·djeex** is first and foremost a personal project aimed at self-hosting as many everyday services as possible, without relying on proprietary platforms (Google, Apple, Netflix, etc.).
|
||||
This documentation site is built using [Nuxt.js](https://nuxt.com/), on the [Docus](https://docus.dev) theme (Nuxt UI + Nuxt Content).
|
||||
|
||||
Ce repo contient de quoi modifier les pages, ajouter vos changements, et redéployer le site.
|
||||
This repository contains everything you need to edit pages, apply your changes, and redeploy the site. See [CUSTOMIZATIONS.md](CUSTOMIZATIONS.md) for everything added on top of the base Docus theme.
|
||||
|
||||
## Setup
|
||||
## Requirements
|
||||
|
||||
Installer les dépendances
|
||||
- Node.js 20 or later
|
||||
- npm
|
||||
|
||||
```sh
|
||||
## Getting started
|
||||
|
||||
Install dependencies:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
## Environnement de dévelopment (port 3000)
|
||||
Start the dev server:
|
||||
|
||||
```sh
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## Génération des pages statiques
|
||||
The site will be available at `http://localhost:3000`.
|
||||
|
||||
```sh
|
||||
npm run generate
|
||||
## Build
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
Les fichiers HTML seront générés dans le dossier .output/public et prêts à être déployés sur n'importe quel hébergement compatible avec un site statique.
|
||||
This builds the production site (pointed at `https://docu.djeex.fr` via `NUXT_SITE_URL`) into `.output`. Run it with:
|
||||
|
||||
## Preview build
|
||||
```bash
|
||||
node .output/server/index.mjs
|
||||
```
|
||||
|
||||
Si vous voulez voir immédiatement le résultat de la génération du site vous pouvez lancer un serveur de preview :
|
||||
## Project structure
|
||||
|
||||
```sh
|
||||
npm run preview
|
||||
```
|
||||
```
|
||||
content/
|
||||
├── en/ # English content, served at /en/...
|
||||
└── fr/ # French content, served at /fr/...
|
||||
|
||||
app/
|
||||
├── components/ # Custom components and overrides of Docus's own components
|
||||
└── pages/ # The catch-all docs page
|
||||
|
||||
content.config.ts # Content collections and frontmatter schema
|
||||
nuxt.config.ts # Nuxt/Docus/i18n configuration
|
||||
app/app.config.ts # Theme, colors, branding
|
||||
```
|
||||
|
||||
## Languages
|
||||
|
||||
- English (`en`) — default locale, served under `/en`
|
||||
- French (`fr`) — served under `/fr`
|
||||
|
||||
Visiting `/` redirects to `/en` or `/fr` based on the visitor's browser language (or a previous choice, remembered via cookie).
|
||||
|
||||
@@ -1,81 +0,0 @@
|
||||
// https://github.com/nuxt-themes/docus/blob/main/nuxt.schema.ts
|
||||
export default defineAppConfig({
|
||||
css: ['~/assets/css/extra.css'],
|
||||
colorMode: {
|
||||
preference: 'dark',
|
||||
fallback:'dark',
|
||||
},
|
||||
content: {
|
||||
highlight: {
|
||||
langs: [
|
||||
'console',
|
||||
'nginx',
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
mdc: {
|
||||
highlight: {
|
||||
theme: 'github-dark',
|
||||
langs: ['ts','console','nginx'],
|
||||
wrapperStyle: true
|
||||
}
|
||||
},
|
||||
|
||||
docus: {
|
||||
title: 'Docudjeex',
|
||||
description: 'La doc de mes expériences',
|
||||
url: 'https://docu.djeex.fr/fr',
|
||||
image: '/img/social.png',
|
||||
socials: {
|
||||
github:'',
|
||||
Language: {
|
||||
label: 'En',
|
||||
icon: 'ri:english-input',
|
||||
href: 'https://docu.djeex.fr'
|
||||
},
|
||||
Gitea: {
|
||||
label: 'Gitea',
|
||||
icon: 'cib:gitea',
|
||||
href: 'https://git.djeex.fr/Djeex/docudjeex',
|
||||
},
|
||||
Github: {
|
||||
label: 'Github',
|
||||
icon:'cib:github',
|
||||
href: 'https://github.com/Djeex',
|
||||
}
|
||||
},
|
||||
github: {
|
||||
baseUrl:'https://git.djeex.fr',
|
||||
dir: 'content',
|
||||
branch: 'src/branch/master',
|
||||
repo: 'docudjeex',
|
||||
owner: 'Djeex',
|
||||
edit: false
|
||||
},
|
||||
aside: {
|
||||
level: 0,
|
||||
collapsed: false,
|
||||
exclude: []
|
||||
},
|
||||
main: {
|
||||
padded: true,
|
||||
fluid: true
|
||||
},
|
||||
header: {
|
||||
logo: true,
|
||||
showLinkIcon: true,
|
||||
exclude: [],
|
||||
fluid: false
|
||||
},
|
||||
|
||||
footer: {
|
||||
credits: {
|
||||
icon: '',
|
||||
text: '',
|
||||
href: '',
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,140 @@
|
||||
export default defineAppConfig({
|
||||
docus: {
|
||||
locale: 'en',
|
||||
colorMode: 'dark',
|
||||
},
|
||||
navigation: {
|
||||
sub: 'header',
|
||||
},
|
||||
header: {
|
||||
title: 'Docudjeex',
|
||||
logo: {
|
||||
light: '/img/logo.svg',
|
||||
dark: '/img/logo.svg',
|
||||
alt: 'Docudjeex',
|
||||
},
|
||||
},
|
||||
socials: {
|
||||
gitea: 'https://git.djeex.fr/Djeex/docudjeex',
|
||||
},
|
||||
github: {
|
||||
url: 'https://github.com/Djeex/docudjeex',
|
||||
},
|
||||
toc: {
|
||||
bottom: {
|
||||
title: 'Other dumb things',
|
||||
links: [
|
||||
{
|
||||
icon: 'i-cib-gitea',
|
||||
label: 'git.djeex.fr',
|
||||
to: 'https://git.djeex.fr',
|
||||
target: '_blank',
|
||||
},
|
||||
{
|
||||
icon: 'i-brand-lumeex',
|
||||
label: 'Lumeex',
|
||||
to: 'https://lumeex.djeex.fr',
|
||||
target: '_blank',
|
||||
},
|
||||
{
|
||||
icon: 'i-brand-instameex',
|
||||
label: 'Instameex',
|
||||
to: 'https://instameex.djeex.fr',
|
||||
target: '_blank',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
ui: {
|
||||
colors: {
|
||||
primary: 'cyan',
|
||||
neutral: 'zinc',
|
||||
},
|
||||
prose: {
|
||||
card: {
|
||||
slots: {
|
||||
base: 'bg-[rgba(12,13,12,0.8)] border-[#121110]',
|
||||
},
|
||||
},
|
||||
// Custom code-block header icons. Full labels (```text [Arborescence])
|
||||
// match by exact lowercase filename; bare extensions (no filename
|
||||
// match) fall back to matching any ```lang [*.ext] label.
|
||||
codeIcon: {
|
||||
'arborescence': 'i-lucide-folder-tree',
|
||||
'directory tree': 'i-lucide-folder-tree',
|
||||
'ini': 'i-lucide-settings',
|
||||
'conf': 'i-lucide-settings',
|
||||
'service': 'i-lucide-settings',
|
||||
// Used as ::code-group tab labels when a command differs per OS.
|
||||
'macos': 'i-simple-icons-apple',
|
||||
'linux': 'i-simple-icons-linux',
|
||||
'windows': 'i-simple-icons-windows',
|
||||
},
|
||||
pre: {
|
||||
slots: {
|
||||
base: 'bg-[#121110] border-[#201e1b] rounded-lg',
|
||||
header: 'bg-[#121110] border-[#201e1b]',
|
||||
},
|
||||
},
|
||||
// Exact colors measured on the old site's ::alert boxes (note=info,
|
||||
// tip=success, warning=warning, caution=danger/error).
|
||||
callout: {
|
||||
compoundVariants: [
|
||||
{
|
||||
color: 'info',
|
||||
class: {
|
||||
base: 'border-[#002235] bg-[#00131D] text-[#64C7FF]',
|
||||
icon: 'text-[#64C7FF]',
|
||||
},
|
||||
},
|
||||
{
|
||||
color: 'success',
|
||||
class: {
|
||||
base: 'border-[#002817] bg-[#00190F] text-[#3CEEA5]',
|
||||
icon: 'text-[#3CEEA5]',
|
||||
},
|
||||
},
|
||||
{
|
||||
color: 'warning',
|
||||
class: {
|
||||
base: 'border-[#292100] bg-[#1B1500] text-[#FFDC4E]',
|
||||
icon: 'text-[#FFDC4E]',
|
||||
},
|
||||
},
|
||||
{
|
||||
color: 'error',
|
||||
class: {
|
||||
base: 'border-[#340A01] bg-[#1C0301] text-[#FFA692]',
|
||||
icon: 'text-[#FFA692]',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
header: {
|
||||
slots: {
|
||||
root: 'bg-[rgba(12,13,12,0.8)] backdrop-blur-[20px] backdrop-saturate-200 border-b border-default h-(--ui-header-height) sticky top-0 z-50',
|
||||
},
|
||||
},
|
||||
contentSearchButton: {
|
||||
slots: {
|
||||
base: 'bg-[rgba(12,13,12,0.8)] hover:bg-[rgba(18,17,16,0.9)] border border-[#121110]',
|
||||
},
|
||||
},
|
||||
contentSurround: {
|
||||
slots: {
|
||||
link: 'bg-[rgba(12,13,12,0.8)] border-[#121110] hover:bg-primary/10 hover:border-primary',
|
||||
linkLeading: 'bg-[rgba(12,13,12,0.8)] ring-1 ring-[var(--ui-text-highlighted)]/50 group-hover:bg-primary/10 group-hover:ring-primary/50',
|
||||
},
|
||||
},
|
||||
kbd: {
|
||||
compoundVariants: [
|
||||
{
|
||||
color: 'neutral',
|
||||
variant: 'subtle',
|
||||
class: 'ring-[#121110] bg-[rgba(12,13,12,0.8)] text-default',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
})
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
/* Restore the old site's near-black dark background (#0B0A0A) instead of
|
||||
Nuxt UI's default zinc-900 */
|
||||
.dark {
|
||||
--ui-bg: #0B0A0A;
|
||||
/* Same border color used on cards, applied sitewide (header, separators,
|
||||
the horizontal nav menu row, etc.) for a consistent look */
|
||||
--ui-border: #121110;
|
||||
}
|
||||
|
||||
/* Old site's container was 1280px with 24px padding each side (1232px of
|
||||
actual content). Nuxt UI's container uses a bigger lg:px-8 (32px) padding,
|
||||
so the max-width is bumped to 81rem (1296px) to land on the same 1232px
|
||||
content width rather than reproducing the outer 1280px figure verbatim. */
|
||||
:root {
|
||||
--ui-container: 81rem;
|
||||
}
|
||||
|
||||
/* Docus hardcodes --ui-header-height to 112px (64px header + 48px sub-nav
|
||||
bar) whenever navigation.sub is 'header', regardless of what's actually
|
||||
in that bar. Our horizontal menu now lives in the main header row itself
|
||||
(AppHeaderCenter.vue) and the sub-nav bar (AppHeaderBottom.vue) is empty,
|
||||
so the header is back to a single 64px row. */
|
||||
@media (min-width: 1024px) {
|
||||
.docus-sub-header {
|
||||
--ui-header-height: 4rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* A screenshot inside a list item (the step-by-step install guides) is
|
||||
rendered as a bare <img> child of the <li> and gets no margin at all, so it
|
||||
ends up glued to the text above and below it. The same image in a paragraph
|
||||
is wrapped in a <p> that carries the prose spacing. Give it that spacing
|
||||
back so illustrated steps stay readable. */
|
||||
li > img {
|
||||
margin-block: 1.25rem;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,141 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1000 1000">
|
||||
<!-- Generator: Adobe Illustrator 30.7.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 114) -->
|
||||
<defs>
|
||||
<style>
|
||||
.st0 {
|
||||
fill: url(#Dégradé_sans_nom_5);
|
||||
}
|
||||
|
||||
.st1 {
|
||||
fill: url(#Dégradé_sans_nom_264);
|
||||
stroke: url(#Dégradé_sans_nom_334);
|
||||
}
|
||||
|
||||
.st1, .st2, .st3, .st4, .st5, .st6, .st7, .st8, .st9, .st10, .st11, .st12 {
|
||||
stroke-miterlimit: 10;
|
||||
}
|
||||
|
||||
.st2 {
|
||||
fill: url(#Dégradé_sans_nom_262);
|
||||
stroke: url(#Dégradé_sans_nom_332);
|
||||
}
|
||||
|
||||
.st3 {
|
||||
fill: url(#Dégradé_sans_nom_269);
|
||||
stroke: url(#Dégradé_sans_nom_339);
|
||||
}
|
||||
|
||||
.st4 {
|
||||
fill: url(#Dégradé_sans_nom_263);
|
||||
stroke: url(#Dégradé_sans_nom_333);
|
||||
}
|
||||
|
||||
.st5 {
|
||||
fill: url(#Dégradé_sans_nom_265);
|
||||
stroke: url(#Dégradé_sans_nom_335);
|
||||
}
|
||||
|
||||
.st6 {
|
||||
fill: url(#Dégradé_sans_nom_268);
|
||||
stroke: url(#Dégradé_sans_nom_338);
|
||||
}
|
||||
|
||||
.st7 {
|
||||
fill: url(#Dégradé_sans_nom_261);
|
||||
stroke: url(#Dégradé_sans_nom_331);
|
||||
}
|
||||
|
||||
.st8 {
|
||||
fill: url(#Dégradé_sans_nom_266);
|
||||
stroke: url(#Dégradé_sans_nom_336);
|
||||
}
|
||||
|
||||
.st9 {
|
||||
fill: url(#Dégradé_sans_nom_267);
|
||||
stroke: url(#Dégradé_sans_nom_337);
|
||||
}
|
||||
|
||||
.st10 {
|
||||
fill: url(#Dégradé_sans_nom_26);
|
||||
stroke: url(#Dégradé_sans_nom_33);
|
||||
}
|
||||
|
||||
.st11 {
|
||||
fill: url(#Dégradé_sans_nom_2610);
|
||||
stroke: url(#Dégradé_sans_nom_3310);
|
||||
}
|
||||
|
||||
.st12 {
|
||||
fill: url(#Dégradé_sans_nom_2611);
|
||||
stroke: url(#Dégradé_sans_nom_3311);
|
||||
}
|
||||
|
||||
.st13 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.st14 {
|
||||
fill: url(#Dégradé_sans_nom_51);
|
||||
}
|
||||
</style>
|
||||
<linearGradient id="Dégradé_sans_nom_5" data-name="Dégradé sans nom 5" x1="245" y1="503" x2="747" y2="503" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#55c3ec"/>
|
||||
<stop offset="1" stop-color="#1d71b8" stop-opacity=".8"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="Dégradé_sans_nom_51" data-name="Dégradé sans nom 5" x1="399.4" y1="504.3" x2="595.1" y2="504.3" xlink:href="#Dégradé_sans_nom_5"/>
|
||||
<linearGradient id="Dégradé_sans_nom_26" data-name="Dégradé sans nom 26" x1="74.5" y1="560.2" x2="106.2" y2="591.8" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#55c3ec"/>
|
||||
<stop offset="1" stop-color="#1d71b8" stop-opacity=".8"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="Dégradé_sans_nom_33" data-name="Dégradé sans nom 33" x1="74.2" y1="559.9" x2="106.5" y2="592.2" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#55c3ec"/>
|
||||
<stop offset="1" stop-color="#1d71b8" stop-opacity=".5"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="Dégradé_sans_nom_261" data-name="Dégradé sans nom 26" x1="158.2" y1="648.8" x2="176.7" y2="667.3" gradientTransform="translate(661.8 133.9) rotate(60)" xlink:href="#Dégradé_sans_nom_26"/>
|
||||
<linearGradient id="Dégradé_sans_nom_331" data-name="Dégradé sans nom 33" x1="157.8" y1="648.4" x2="177.1" y2="667.7" gradientTransform="translate(661.8 133.9) rotate(60)" xlink:href="#Dégradé_sans_nom_33"/>
|
||||
<linearGradient id="Dégradé_sans_nom_262" data-name="Dégradé sans nom 26" x1="210.2" y1="714.7" x2="249.8" y2="754.3" gradientTransform="translate(909.8 659.5) rotate(105)" xlink:href="#Dégradé_sans_nom_26"/>
|
||||
<linearGradient id="Dégradé_sans_nom_332" data-name="Dégradé sans nom 33" x1="209.9" y1="714.3" x2="250.2" y2="754.6" gradientTransform="translate(909.8 659.5) rotate(105)" xlink:href="#Dégradé_sans_nom_33"/>
|
||||
<linearGradient id="Dégradé_sans_nom_263" data-name="Dégradé sans nom 26" x1="-54" y1="72.2" x2="-14.4" y2="111.8" gradientTransform="translate(909.8 659.5) rotate(105)" xlink:href="#Dégradé_sans_nom_26"/>
|
||||
<linearGradient id="Dégradé_sans_nom_333" data-name="Dégradé sans nom 33" x1="-54.4" y1="71.9" x2="-14.1" y2="112.2" gradientTransform="translate(909.8 659.5) rotate(105)" xlink:href="#Dégradé_sans_nom_33"/>
|
||||
<linearGradient id="Dégradé_sans_nom_264" data-name="Dégradé sans nom 26" x1="485.1" y1="-9.2" x2="503.7" y2="9.4" gradientTransform="translate(661.8 133.9) rotate(60)" xlink:href="#Dégradé_sans_nom_26"/>
|
||||
<linearGradient id="Dégradé_sans_nom_334" data-name="Dégradé sans nom 33" x1="484.8" y1="-9.6" x2="504" y2="9.7" gradientTransform="translate(661.8 133.9) rotate(60)" xlink:href="#Dégradé_sans_nom_33"/>
|
||||
<linearGradient id="Dégradé_sans_nom_265" data-name="Dégradé sans nom 26" x1="825.1" y1="682.3" x2="856.8" y2="713.9" xlink:href="#Dégradé_sans_nom_26"/>
|
||||
<linearGradient id="Dégradé_sans_nom_335" data-name="Dégradé sans nom 33" x1="824.8" y1="681.9" x2="857.1" y2="714.3" xlink:href="#Dégradé_sans_nom_33"/>
|
||||
<linearGradient id="Dégradé_sans_nom_266" data-name="Dégradé sans nom 26" x1="308.5" y1="356.5" x2="340.3" y2="388.3" gradientTransform="translate(909.8 659.5) rotate(105)" xlink:href="#Dégradé_sans_nom_26"/>
|
||||
<linearGradient id="Dégradé_sans_nom_336" data-name="Dégradé sans nom 33" x1="308.1" y1="356.2" x2="340.7" y2="388.7" gradientTransform="translate(909.8 659.5) rotate(105)" xlink:href="#Dégradé_sans_nom_33"/>
|
||||
<linearGradient id="Dégradé_sans_nom_267" data-name="Dégradé sans nom 26" x1="540.4" y1="450.4" x2="559" y2="469" gradientTransform="translate(661.8 133.9) rotate(60)" xlink:href="#Dégradé_sans_nom_26"/>
|
||||
<linearGradient id="Dégradé_sans_nom_337" data-name="Dégradé sans nom 33" x1="540.1" y1="450" x2="559.4" y2="469.3" gradientTransform="translate(661.8 133.9) rotate(60)" xlink:href="#Dégradé_sans_nom_33"/>
|
||||
<linearGradient id="Dégradé_sans_nom_268" data-name="Dégradé sans nom 26" x1="-336.4" y1="326.9" x2="-296.8" y2="366.5" gradientTransform="translate(342.9 490.5) rotate(-175.4)" xlink:href="#Dégradé_sans_nom_26"/>
|
||||
<linearGradient id="Dégradé_sans_nom_338" data-name="Dégradé sans nom 33" x1="-336.7" y1="326.5" x2="-296.4" y2="366.8" gradientTransform="translate(342.9 490.5) rotate(-175.4)" xlink:href="#Dégradé_sans_nom_33"/>
|
||||
<linearGradient id="Dégradé_sans_nom_269" data-name="Dégradé sans nom 26" x1="115" y1="-29.9" x2="133.6" y2="-11.3" gradientTransform="translate(814.9 151.4) rotate(139.6)" xlink:href="#Dégradé_sans_nom_26"/>
|
||||
<linearGradient id="Dégradé_sans_nom_339" data-name="Dégradé sans nom 33" x1="114.7" y1="-30.2" x2="134" y2="-11" gradientTransform="translate(814.9 151.4) rotate(139.6)" xlink:href="#Dégradé_sans_nom_33"/>
|
||||
<linearGradient id="Dégradé_sans_nom_2610" data-name="Dégradé sans nom 26" x1="94.5" y1="304.2" x2="124.4" y2="334" gradientTransform="translate(568 142) rotate(97.9)" xlink:href="#Dégradé_sans_nom_26"/>
|
||||
<linearGradient id="Dégradé_sans_nom_3310" data-name="Dégradé sans nom 33" x1="94.2" y1="303.8" x2="124.7" y2="334.4" gradientTransform="translate(568 142) rotate(97.9)" xlink:href="#Dégradé_sans_nom_33"/>
|
||||
<linearGradient id="Dégradé_sans_nom_2611" data-name="Dégradé sans nom 26" x1="435.8" y1="254.1" x2="454.4" y2="272.7" gradientTransform="translate(257.1 -349) rotate(52.9)" xlink:href="#Dégradé_sans_nom_26"/>
|
||||
<linearGradient id="Dégradé_sans_nom_3311" data-name="Dégradé sans nom 33" x1="435.5" y1="253.8" x2="454.8" y2="273.1" gradientTransform="translate(257.1 -349) rotate(52.9)" xlink:href="#Dégradé_sans_nom_33"/>
|
||||
</defs>
|
||||
<g id="Calque_1">
|
||||
<circle class="st13" cx="499.5" cy="499.5" r="499.5"/>
|
||||
<g>
|
||||
<path class="st0" d="M618.3,252h-244.6c-72.1,0-128.7,59.2-128.7,128.7v244.6c0,72.1,59.2,128.7,128.7,128.7h244.6c72.1,0,128.7-59.2,128.7-128.7v-244.6c0-72.1-59.2-128.7-128.7-128.7ZM497.3,656.2c-82.4,0-151.9-69.5-151.9-151.9s66.9-151.9,151.9-151.9,151.9,69.5,151.9,151.9-69.5,151.9-151.9,151.9ZM659.5,378.2c-20.6,0-36-15.4-36-36s15.4-36,36-36,36,15.4,36,36c0,20.6-15.4,36-36,36Z"/>
|
||||
<path class="st14" d="M497.3,406.5c-54.1,0-97.8,43.8-97.8,97.8s43.8,97.8,97.8,97.8,97.8-43.8,97.8-97.8-43.8-97.8-97.8-97.8Z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Calque_2">
|
||||
<g id="Calque_3">
|
||||
<circle class="st10" cx="90.4" cy="576" r="22.4"/>
|
||||
<circle class="st7" cx="175.6" cy="607.9" r="13.1"/>
|
||||
<circle class="st2" cx="140.8" cy="691.6" r="28"/>
|
||||
<circle class="st4" cx="829.7" cy="602.6" r="28"/>
|
||||
<circle class="st1" cx="908.9" cy="562.1" r="13.1"/>
|
||||
<circle class="st5" cx="840.9" cy="698.1" r="22.4"/>
|
||||
<circle class="st8" cx="466.1" cy="876.5" r="22.5"/>
|
||||
<circle class="st9" cx="538.6" cy="839.8" r="13.1"/>
|
||||
<circle class="st6" cx="686.1" cy="170.1" r="28"/>
|
||||
<circle class="st3" cx="733.7" cy="247.7" r="13.1"/>
|
||||
<circle class="st11" cx="236.9" cy="206.5" r="21.1"/>
|
||||
<circle class="st12" cx="315.4" cy="164.9" r="13.1"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.8 KiB |
@@ -0,0 +1,154 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1000 1000">
|
||||
<!-- Generator: Adobe Illustrator 29.7.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 8) -->
|
||||
<defs>
|
||||
<style>
|
||||
.st0 {
|
||||
fill: url(#Dégradé_sans_nom_265);
|
||||
stroke: url(#Dégradé_sans_nom_33);
|
||||
}
|
||||
|
||||
.st0, .st1, .st2, .st3, .st4, .st5, .st6, .st7, .st8, .st9, .st10, .st11 {
|
||||
stroke-miterlimit: 10;
|
||||
}
|
||||
|
||||
.st1 {
|
||||
fill: url(#Dégradé_sans_nom_269);
|
||||
stroke: url(#Dégradé_sans_nom_334);
|
||||
}
|
||||
|
||||
.st2 {
|
||||
fill: url(#Dégradé_sans_nom_268);
|
||||
stroke: url(#Dégradé_sans_nom_333);
|
||||
}
|
||||
|
||||
.st3 {
|
||||
fill: url(#Dégradé_sans_nom_266);
|
||||
stroke: url(#Dégradé_sans_nom_331);
|
||||
}
|
||||
|
||||
.st4 {
|
||||
fill: url(#Dégradé_sans_nom_267);
|
||||
stroke: url(#Dégradé_sans_nom_332);
|
||||
}
|
||||
|
||||
.st12 {
|
||||
fill: url(#Dégradé_sans_nom_261);
|
||||
}
|
||||
|
||||
.st13 {
|
||||
fill: url(#Dégradé_sans_nom_262);
|
||||
}
|
||||
|
||||
.st14 {
|
||||
fill: url(#Dégradé_sans_nom_264);
|
||||
}
|
||||
|
||||
.st15 {
|
||||
fill: url(#Dégradé_sans_nom_263);
|
||||
}
|
||||
|
||||
.st5 {
|
||||
fill: url(#Dégradé_sans_nom_2616);
|
||||
stroke: url(#Dégradé_sans_nom_3311);
|
||||
}
|
||||
|
||||
.st6 {
|
||||
fill: url(#Dégradé_sans_nom_2615);
|
||||
stroke: url(#Dégradé_sans_nom_3310);
|
||||
}
|
||||
|
||||
.st16 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.st17 {
|
||||
fill: url(#Dégradé_sans_nom_26);
|
||||
}
|
||||
|
||||
.st7 {
|
||||
fill: url(#Dégradé_sans_nom_2610);
|
||||
stroke: url(#Dégradé_sans_nom_335);
|
||||
}
|
||||
|
||||
.st8 {
|
||||
fill: url(#Dégradé_sans_nom_2613);
|
||||
stroke: url(#Dégradé_sans_nom_338);
|
||||
}
|
||||
|
||||
.st9 {
|
||||
fill: url(#Dégradé_sans_nom_2614);
|
||||
stroke: url(#Dégradé_sans_nom_339);
|
||||
}
|
||||
|
||||
.st10 {
|
||||
fill: url(#Dégradé_sans_nom_2611);
|
||||
stroke: url(#Dégradé_sans_nom_336);
|
||||
}
|
||||
|
||||
.st11 {
|
||||
fill: url(#Dégradé_sans_nom_2612);
|
||||
stroke: url(#Dégradé_sans_nom_337);
|
||||
}
|
||||
</style>
|
||||
<linearGradient id="Dégradé_sans_nom_26" data-name="Dégradé sans nom 26" x1="373.2" y1="159.5" x2="625.1" y2="411.5" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#55c3ec"/>
|
||||
<stop offset="1" stop-color="#1d71b8" stop-opacity=".8"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="Dégradé_sans_nom_261" data-name="Dégradé sans nom 26" x1="143.1" y1="200.5" x2="395" y2="452.4" gradientTransform="translate(30.8 109.3)" xlink:href="#Dégradé_sans_nom_26"/>
|
||||
<linearGradient id="Dégradé_sans_nom_262" data-name="Dégradé sans nom 26" x1="81.3" y1="60.6" x2="333.2" y2="312.5" gradientTransform="translate(187.1 873.6) rotate(-90)" xlink:href="#Dégradé_sans_nom_26"/>
|
||||
<linearGradient id="Dégradé_sans_nom_263" data-name="Dégradé sans nom 26" x1="-44.4" y1="16.5" x2="207.5" y2="268.4" gradientTransform="translate(705.4 808.2) rotate(-180)" xlink:href="#Dégradé_sans_nom_26"/>
|
||||
<linearGradient id="Dégradé_sans_nom_264" data-name="Dégradé sans nom 26" x1="-67.9" y1="-58.9" x2="184" y2="193" gradientTransform="translate(770.9 385.1) rotate(90)" xlink:href="#Dégradé_sans_nom_26"/>
|
||||
<linearGradient id="Dégradé_sans_nom_265" data-name="Dégradé sans nom 26" x1="74.5" y1="560.2" x2="106.2" y2="591.8" xlink:href="#Dégradé_sans_nom_26"/>
|
||||
<linearGradient id="Dégradé_sans_nom_33" data-name="Dégradé sans nom 33" x1="74.2" y1="559.9" x2="106.5" y2="592.2" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#55c3ec"/>
|
||||
<stop offset="1" stop-color="#1d71b8" stop-opacity=".5"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="Dégradé_sans_nom_266" data-name="Dégradé sans nom 26" x1="158.2" y1="648.8" x2="176.7" y2="667.3" gradientTransform="translate(661.8 133.9) rotate(60)" xlink:href="#Dégradé_sans_nom_26"/>
|
||||
<linearGradient id="Dégradé_sans_nom_331" data-name="Dégradé sans nom 33" x1="157.8" y1="648.4" x2="177.1" y2="667.7" gradientTransform="translate(661.8 133.9) rotate(60)" xlink:href="#Dégradé_sans_nom_33"/>
|
||||
<linearGradient id="Dégradé_sans_nom_267" data-name="Dégradé sans nom 26" x1="210.2" y1="714.7" x2="249.8" y2="754.3" gradientTransform="translate(909.8 659.5) rotate(105)" xlink:href="#Dégradé_sans_nom_26"/>
|
||||
<linearGradient id="Dégradé_sans_nom_332" data-name="Dégradé sans nom 33" x1="209.9" y1="714.3" x2="250.2" y2="754.6" gradientTransform="translate(909.8 659.5) rotate(105)" xlink:href="#Dégradé_sans_nom_33"/>
|
||||
<linearGradient id="Dégradé_sans_nom_268" data-name="Dégradé sans nom 26" x1="-54" y1="72.2" x2="-14.4" y2="111.8" gradientTransform="translate(909.8 659.5) rotate(105)" xlink:href="#Dégradé_sans_nom_26"/>
|
||||
<linearGradient id="Dégradé_sans_nom_333" data-name="Dégradé sans nom 33" x1="-54.4" y1="71.9" x2="-14.1" y2="112.2" gradientTransform="translate(909.8 659.5) rotate(105)" xlink:href="#Dégradé_sans_nom_33"/>
|
||||
<linearGradient id="Dégradé_sans_nom_269" data-name="Dégradé sans nom 26" x1="485.1" y1="-9.2" x2="503.7" y2="9.4" gradientTransform="translate(661.8 133.9) rotate(60)" xlink:href="#Dégradé_sans_nom_26"/>
|
||||
<linearGradient id="Dégradé_sans_nom_334" data-name="Dégradé sans nom 33" x1="484.8" y1="-9.6" x2="504" y2="9.7" gradientTransform="translate(661.8 133.9) rotate(60)" xlink:href="#Dégradé_sans_nom_33"/>
|
||||
<linearGradient id="Dégradé_sans_nom_2610" data-name="Dégradé sans nom 26" x1="825.1" y1="682.3" x2="856.8" y2="713.9" xlink:href="#Dégradé_sans_nom_26"/>
|
||||
<linearGradient id="Dégradé_sans_nom_335" data-name="Dégradé sans nom 33" x1="824.8" y1="681.9" x2="857.1" y2="714.3" xlink:href="#Dégradé_sans_nom_33"/>
|
||||
<linearGradient id="Dégradé_sans_nom_2611" data-name="Dégradé sans nom 26" x1="308.5" y1="356.5" x2="340.3" y2="388.3" gradientTransform="translate(909.8 659.5) rotate(105)" xlink:href="#Dégradé_sans_nom_26"/>
|
||||
<linearGradient id="Dégradé_sans_nom_336" data-name="Dégradé sans nom 33" x1="308.1" y1="356.2" x2="340.7" y2="388.7" gradientTransform="translate(909.8 659.5) rotate(105)" xlink:href="#Dégradé_sans_nom_33"/>
|
||||
<linearGradient id="Dégradé_sans_nom_2612" data-name="Dégradé sans nom 26" x1="540.4" y1="450.4" x2="559" y2="469" gradientTransform="translate(661.8 133.9) rotate(60)" xlink:href="#Dégradé_sans_nom_26"/>
|
||||
<linearGradient id="Dégradé_sans_nom_337" data-name="Dégradé sans nom 33" x1="540.1" y1="450" x2="559.4" y2="469.3" gradientTransform="translate(661.8 133.9) rotate(60)" xlink:href="#Dégradé_sans_nom_33"/>
|
||||
<linearGradient id="Dégradé_sans_nom_2613" data-name="Dégradé sans nom 26" x1="-336.4" y1="326.9" x2="-296.8" y2="366.5" gradientTransform="translate(342.9 490.5) rotate(-175.4)" xlink:href="#Dégradé_sans_nom_26"/>
|
||||
<linearGradient id="Dégradé_sans_nom_338" data-name="Dégradé sans nom 33" x1="-336.7" y1="326.5" x2="-296.4" y2="366.8" gradientTransform="translate(342.9 490.5) rotate(-175.4)" xlink:href="#Dégradé_sans_nom_33"/>
|
||||
<linearGradient id="Dégradé_sans_nom_2614" data-name="Dégradé sans nom 26" x1="115" y1="-29.9" x2="133.6" y2="-11.3" gradientTransform="translate(814.9 151.4) rotate(139.6)" xlink:href="#Dégradé_sans_nom_26"/>
|
||||
<linearGradient id="Dégradé_sans_nom_339" data-name="Dégradé sans nom 33" x1="114.7" y1="-30.2" x2="134" y2="-11" gradientTransform="translate(814.9 151.4) rotate(139.6)" xlink:href="#Dégradé_sans_nom_33"/>
|
||||
<linearGradient id="Dégradé_sans_nom_2615" data-name="Dégradé sans nom 26" x1="94.5" y1="304.2" x2="124.4" y2="334" gradientTransform="translate(568 142) rotate(97.9)" xlink:href="#Dégradé_sans_nom_26"/>
|
||||
<linearGradient id="Dégradé_sans_nom_3310" data-name="Dégradé sans nom 33" x1="94.2" y1="303.8" x2="124.7" y2="334.4" gradientTransform="translate(568 142) rotate(97.9)" xlink:href="#Dégradé_sans_nom_33"/>
|
||||
<linearGradient id="Dégradé_sans_nom_2616" data-name="Dégradé sans nom 26" x1="435.8" y1="254.1" x2="454.4" y2="272.7" gradientTransform="translate(257.1 -349) rotate(52.9)" xlink:href="#Dégradé_sans_nom_26"/>
|
||||
<linearGradient id="Dégradé_sans_nom_3311" data-name="Dégradé sans nom 33" x1="435.5" y1="253.8" x2="454.8" y2="273.1" gradientTransform="translate(257.1 -349) rotate(52.9)" xlink:href="#Dégradé_sans_nom_33"/>
|
||||
</defs>
|
||||
<g id="Calque_1">
|
||||
<circle class="st16" cx="499.5" cy="499.5" r="499.5"/>
|
||||
</g>
|
||||
<g id="Calque_2">
|
||||
<g id="Calque_3">
|
||||
<ellipse class="st17" cx="499.2" cy="285.5" rx="139.8" ry="209.5"/>
|
||||
<ellipse class="st12" cx="299.9" cy="435.8" rx="139.8" ry="209.5" transform="translate(-207.3 586.3) rotate(-72)"/>
|
||||
<ellipse class="st13" cx="373.6" cy="666.3" rx="209.5" ry="139.8" transform="translate(-385.1 576.9) rotate(-54)"/>
|
||||
<ellipse class="st15" cx="623.9" cy="665.8" rx="139.8" ry="209.5" transform="translate(-272.2 493.9) rotate(-36)"/>
|
||||
<ellipse class="st14" cx="703.9" cy="443.1" rx="209.5" ry="139.8" transform="translate(-94.9 211.2) rotate(-16)"/>
|
||||
<circle class="st0" cx="90.4" cy="576" r="22.4"/>
|
||||
<circle class="st3" cx="175.6" cy="607.9" r="13.1"/>
|
||||
<circle class="st4" cx="140.8" cy="691.6" r="28"/>
|
||||
<circle class="st2" cx="829.7" cy="602.6" r="28"/>
|
||||
<circle class="st1" cx="908.9" cy="562.1" r="13.1"/>
|
||||
<circle class="st7" cx="840.9" cy="698.1" r="22.4"/>
|
||||
<circle class="st10" cx="466.1" cy="876.5" r="22.5"/>
|
||||
<circle class="st11" cx="538.6" cy="839.8" r="13.1"/>
|
||||
<circle class="st8" cx="686.1" cy="170.1" r="28"/>
|
||||
<circle class="st9" cx="733.7" cy="247.7" r="13.1"/>
|
||||
<circle class="st6" cx="236.9" cy="206.5" r="21.1"/>
|
||||
<circle class="st5" cx="315.4" cy="164.9" r="13.1"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.6 KiB |
@@ -0,0 +1,84 @@
|
||||
<script lang="ts" setup>
|
||||
const { title, description, headline } = defineProps<{ title?: string, description?: string, headline?: string }>()
|
||||
|
||||
const appConfig = useAppConfig()
|
||||
const { name: siteName } = useSiteConfig()
|
||||
const primaryColor = appConfig.ui?.colors?.primary ?? 'emerald'
|
||||
const logoPath = appConfig.header?.logo?.dark || appConfig.header?.logo?.light
|
||||
const logoHeight = 40
|
||||
|
||||
const logoSvg = await fetchLogoSvg(logoPath)
|
||||
|
||||
async function fetchLogoSvg(path?: string): Promise<string> {
|
||||
if (!path) return ''
|
||||
try {
|
||||
const { url: siteUrl } = useSiteConfig()
|
||||
const url = path.startsWith('http') ? path : `${siteUrl}${path}`
|
||||
let svg = await $fetch<string>(url, { responseType: 'text' })
|
||||
|
||||
// Strip the XML prolog and comments: takumi renders them as literal text
|
||||
// instead of ignoring them like a browser's innerHTML would.
|
||||
svg = svg.replace(/<\?xml[^>]*\?>/, '').replace(/<!--[\s\S]*?-->/g, '').trim()
|
||||
|
||||
// takumi doesn't resolve the SVG's own <style> class rules either (paths
|
||||
// rendered black), so inline each class's fill directly, then drop <defs>.
|
||||
const classFills = new Map(
|
||||
[...svg.matchAll(/\.(\w+)\s*\{\s*fill:\s*([^;}\s]+)/g)].map(([, className, fill]) => [className, fill]),
|
||||
)
|
||||
for (const [className, fill] of classFills) {
|
||||
svg = svg.replaceAll(`class="${className}"`, `fill="${fill}"`)
|
||||
}
|
||||
svg = svg.replace(/<defs>[\s\S]*?<\/defs>/, '').trim()
|
||||
|
||||
// This logo is a wide wordmark (viewBox ~3360x576), not a square icon,
|
||||
// so width must scale from its own aspect ratio instead of a fixed value.
|
||||
const viewBox = svg.match(/viewBox="[\d.]+ [\d.]+ ([\d.]+) ([\d.]+)"/)
|
||||
const width = viewBox ? Math.round(logoHeight * (Number(viewBox[1]) / Number(viewBox[2]))) : logoHeight
|
||||
|
||||
return svg.replace('<svg', `<svg width="${width}" height="${logoHeight}"`)
|
||||
}
|
||||
catch {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full h-full flex flex-col justify-between bg-[#0B0A0A] px-[80px] py-[60px] font-[Roboto]">
|
||||
<!-- Same shape, colors and blur as the site's own :ellipsis component: a wide
|
||||
flat oval filled with its diagonal blue/cyan gradient, then blurred. -->
|
||||
<div class="absolute blur-3xl top-[80px] right-[50px] w-[900px] h-[360px] rounded-full bg-[linear-gradient(97.62deg,rgba(0,71,225,0.18)_2.27%,rgba(26,214,255,0.12)_65%,rgba(0,71,225,0.12)_98.48%)]" />
|
||||
|
||||
<div class="flex-1 flex flex-col justify-center">
|
||||
<p
|
||||
v-if="headline"
|
||||
:class="`uppercase text-[22px] font-bold m-0 mb-5 tracking-[0.05em] text-${primaryColor}-500`"
|
||||
>
|
||||
{{ headline }}
|
||||
</p>
|
||||
<h1
|
||||
v-if="title"
|
||||
class="m-0 mb-6 text-[50px] font-bold text-white leading-[1.1] w-full max-w-[900px] wrap-break-word"
|
||||
>
|
||||
{{ title?.slice(0, 60) }}
|
||||
</h1>
|
||||
<p
|
||||
v-if="description"
|
||||
class="m-0 text-[28px] text-neutral-400 leading-[1.4] w-full max-w-[900px] wrap-break-word"
|
||||
>
|
||||
{{ description?.slice(0, 200) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<div
|
||||
v-if="logoSvg"
|
||||
class="h-[40px]"
|
||||
v-html="logoSvg"
|
||||
/>
|
||||
<div v-else class="text-white text-[18px] font-normal rounded-lg px-5 py-2">
|
||||
{{ siteName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,102 @@
|
||||
<script setup lang="ts">
|
||||
const appConfig = useAppConfig()
|
||||
const { forced: forcedColorMode } = useDocusColorMode()
|
||||
|
||||
const { isEnabled: isAssistantEnabled } = useAssistant()
|
||||
const { isEnabled, locales } = useDocusI18n()
|
||||
const { subNavigationMode } = useSubNavigation()
|
||||
|
||||
const links = computed(() => {
|
||||
const list = []
|
||||
if (appConfig.socials?.gitea) {
|
||||
list.push({
|
||||
'icon': 'i-simple-icons-gitea',
|
||||
'to': appConfig.socials.gitea,
|
||||
'target': '_blank',
|
||||
'aria-label': 'Gitea',
|
||||
})
|
||||
}
|
||||
if (appConfig.github?.url) {
|
||||
list.push({
|
||||
'icon': 'i-simple-icons-github',
|
||||
'to': appConfig.github.url,
|
||||
'target': '_blank',
|
||||
'aria-label': 'GitHub',
|
||||
})
|
||||
}
|
||||
return list
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UHeader
|
||||
:ui="{ center: 'flex-1' }"
|
||||
:class="{ 'flex flex-col': subNavigationMode === 'header' }"
|
||||
>
|
||||
<AppHeaderCenter />
|
||||
|
||||
<template #left>
|
||||
<AppHeaderLeft />
|
||||
</template>
|
||||
|
||||
<template #right>
|
||||
<AppHeaderCTA />
|
||||
|
||||
<template v-if="isAssistantEnabled">
|
||||
<AssistantChat />
|
||||
</template>
|
||||
|
||||
<template v-if="isEnabled && locales.length > 1">
|
||||
<ClientOnly>
|
||||
<LanguageSelect />
|
||||
|
||||
<template #fallback>
|
||||
<div class="h-8 w-8 animate-pulse bg-neutral-200 dark:bg-neutral-800 rounded-md" />
|
||||
</template>
|
||||
</ClientOnly>
|
||||
|
||||
<USeparator
|
||||
orientation="vertical"
|
||||
class="h-8"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<UContentSearchButton class="lg:hidden" />
|
||||
|
||||
<ClientOnly v-if="!forcedColorMode">
|
||||
<UColorModeButton />
|
||||
|
||||
<template #fallback>
|
||||
<div class="h-8 w-8 animate-pulse bg-neutral-200 dark:bg-neutral-800 rounded-md" />
|
||||
</template>
|
||||
</ClientOnly>
|
||||
|
||||
<template v-if="links?.length">
|
||||
<UButton
|
||||
v-for="(link, index) of links"
|
||||
:key="index"
|
||||
v-bind="{ color: 'neutral', variant: 'ghost', ...link }"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template #toggle="{ open, toggle }">
|
||||
<IconMenuToggle
|
||||
:open="open"
|
||||
class="lg:hidden"
|
||||
@click="toggle"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #body>
|
||||
<AppHeaderBody />
|
||||
</template>
|
||||
|
||||
<template
|
||||
v-if="subNavigationMode === 'header'"
|
||||
#bottom
|
||||
>
|
||||
<AppHeaderBottom />
|
||||
</template>
|
||||
</UHeader>
|
||||
</template>
|
||||
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<div />
|
||||
</template>
|
||||
@@ -0,0 +1,47 @@
|
||||
<script setup lang="ts">
|
||||
const { sections } = useSubNavigation()
|
||||
|
||||
const navMenuVariants = useUIConfig('navigationMenu')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="sections.length">
|
||||
<!-- Empty spacer: keeps the header's flex-1 center slot from collapsing
|
||||
while the real menu below is absolutely positioned so it can match
|
||||
the article's content-column width instead of this slot's width. -->
|
||||
<div class="hidden lg:block w-full" />
|
||||
|
||||
<UContainer class="absolute inset-x-0 inset-y-0 hidden lg:flex items-center pointer-events-none">
|
||||
<!-- Mirrors the docs page's actual layout: an outer 10-col grid (left
|
||||
doc-tree sidebar = col-span-2) containing a second, nested 10-col
|
||||
grid for the article body (right TOC sidebar = col-span-2 of that
|
||||
inner grid). Matching both levels is what lines this menu up with
|
||||
the real content column instead of a naive single-level fraction. -->
|
||||
<div class="grid grid-cols-10 gap-10 w-full">
|
||||
<div class="col-span-8 col-start-3 grid grid-cols-10 gap-10">
|
||||
<div class="col-span-8 col-start-1 pointer-events-auto">
|
||||
<UNavigationMenu
|
||||
:items="sections"
|
||||
:highlight="navMenuVariants.highlight ?? true"
|
||||
:highlight-color="navMenuVariants.highlightColor"
|
||||
:variant="navMenuVariants.variant ?? 'pill'"
|
||||
:color="navMenuVariants.color"
|
||||
class="-mx-[10px] w-[calc(100%+20px)] [&>div]:w-full"
|
||||
:ui="{ list: 'w-full justify-between', item: 'py-0' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UContainer>
|
||||
</template>
|
||||
|
||||
<UContentSearchButton
|
||||
v-else
|
||||
:collapsed="false"
|
||||
class="w-full"
|
||||
variant="soft"
|
||||
:ui="{
|
||||
leadingIcon: 'size-4 mx-0.5',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,43 @@
|
||||
<script setup lang="ts">
|
||||
withDefaults(defineProps<{
|
||||
width?: string
|
||||
height?: string
|
||||
zIndex?: string
|
||||
top?: string
|
||||
left?: string
|
||||
right?: string
|
||||
blur?: string
|
||||
colors?: string[]
|
||||
}>(), {
|
||||
width: '10rem',
|
||||
height: '10rem',
|
||||
zIndex: '10',
|
||||
top: '0',
|
||||
left: 'auto',
|
||||
right: 'auto',
|
||||
blur: '50px',
|
||||
colors: () => ['rgba(0, 71, 225, 0.34)', 'rgba(26, 214, 255, 0.22)', 'rgba(0, 71, 225, 0.22)'],
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="pointer-events-none absolute w-full"
|
||||
:style="{
|
||||
top,
|
||||
insetInlineStart: left,
|
||||
insetInlineEnd: right,
|
||||
zIndex,
|
||||
maxWidth: width,
|
||||
height,
|
||||
filter: `blur(${blur})`,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="w-full h-full"
|
||||
:style="{
|
||||
background: `linear-gradient(97.62deg, ${colors[0]} 2.27%, ${colors[1]} 65%, ${colors[2]} 98.48%)`,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,37 @@
|
||||
<script setup lang="ts">
|
||||
export type FileTreeEntry = string | Record<string, FileTreeEntry[]>
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
tree: FileTreeEntry
|
||||
label?: string
|
||||
collapsed?: boolean
|
||||
}>(), {
|
||||
label: 'Folder structure',
|
||||
collapsed: false,
|
||||
})
|
||||
|
||||
// `collapsed` only sets the initial state; the header click below then
|
||||
// toggles this independently of the prop.
|
||||
const isOpen = ref(!props.collapsed)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="not-prose my-5 rounded-lg overflow-hidden bg-elevated/50 ring ring-default divide-y divide-default">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center gap-1.5 w-full px-4 py-3 text-muted hover:text-default hover:bg-elevated/50 transition-colors cursor-pointer"
|
||||
@click="isOpen = !isOpen"
|
||||
>
|
||||
<UIcon name="i-lucide-folder-tree" class="size-4 shrink-0" />
|
||||
<span class="text-sm/6">{{ label }}</span>
|
||||
<UIcon
|
||||
name="i-lucide-chevron-down"
|
||||
class="size-4 shrink-0 ms-auto transition-transform"
|
||||
:class="isOpen ? '' : '-rotate-90'"
|
||||
/>
|
||||
</button>
|
||||
<ul v-show="isOpen" class="text-sm leading-relaxed px-2 py-2 list-none">
|
||||
<FileTreeNode :entry="tree" root />
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,138 @@
|
||||
<script setup lang="ts">
|
||||
import { useClipboard } from '@vueuse/core'
|
||||
import codeIconTheme from '#build/ui/prose/code-icon'
|
||||
import type { FileTreeEntry } from './FileTree.vue'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
entry: FileTreeEntry
|
||||
root?: boolean
|
||||
parentPath?: string
|
||||
isLast?: boolean
|
||||
}>(), {
|
||||
root: false,
|
||||
parentPath: '',
|
||||
isLast: false,
|
||||
})
|
||||
|
||||
function splitComment(raw: string) {
|
||||
const index = raw.indexOf(' #')
|
||||
if (index === -1) return { text: raw, comment: undefined as string | undefined }
|
||||
return { text: raw.slice(0, index).trimEnd(), comment: raw.slice(index + 2).trim() }
|
||||
}
|
||||
|
||||
const rawEntry = computed(() => typeof props.entry === 'object' ? Object.keys(props.entry)[0] : props.entry as string)
|
||||
const parsed = computed(() => splitComment(rawEntry.value))
|
||||
|
||||
const isFolder = computed(() => typeof props.entry === 'object' || parsed.value.text.endsWith('/'))
|
||||
|
||||
// Strip a trailing "/" marker, except when it's the whole name: that's the
|
||||
// filesystem root itself, written as a bare "/".
|
||||
const name = computed(() => {
|
||||
const text = parsed.value.text
|
||||
return text.length > 1 && text.endsWith('/') ? text.slice(0, -1) : text
|
||||
})
|
||||
const comment = computed(() => parsed.value.comment)
|
||||
|
||||
const children = computed<FileTreeEntry[]>(() => {
|
||||
if (typeof props.entry !== 'object') return []
|
||||
return Object.values(props.entry)[0] || []
|
||||
})
|
||||
|
||||
// The root's own name is "/" already; every other node just appends its
|
||||
// name to its parent's path, without doubling that leading slash.
|
||||
const fullPath = computed(() => {
|
||||
if (props.root) return name.value
|
||||
return props.parentPath === '/' ? `/${name.value}` : `${props.parentPath}/${name.value}`
|
||||
})
|
||||
|
||||
const { copy, copied } = useClipboard({ source: fullPath })
|
||||
|
||||
function onClick() {
|
||||
copy()
|
||||
}
|
||||
|
||||
const appConfig = useAppConfig()
|
||||
|
||||
// Same lookup order as Nuxt UI's own CodeIcon.vue (exact filename match,
|
||||
// then extension, then the vscode-icons fallback), so a file gets the same
|
||||
// icon here as it would in a labeled code fence.
|
||||
const icon = computed(() => {
|
||||
if (isFolder.value) return 'i-lucide-folder'
|
||||
|
||||
const filename = name.value
|
||||
const icons = { ...codeIconTheme, ...(appConfig.ui?.prose?.codeIcon || {}) } as Record<string, string>
|
||||
const extension = filename.includes('.') ? filename.split('.').pop() : undefined
|
||||
|
||||
return icons[filename.toLowerCase()]
|
||||
?? (extension && icons[extension])
|
||||
?? (extension && `i-vscode-icons-file-type-${extension}`)
|
||||
?? 'i-lucide-file'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li class="relative" :class="root ? '' : 'ps-3'">
|
||||
<!-- Not the last child: a plain full-height guide line, since it needs
|
||||
to keep going for the next sibling below it anyway. This is a direct
|
||||
child of the LI (not the row span below, like the other guides),
|
||||
so its own "start-0" lines up with the row span's "-start-1.5":
|
||||
the row span sits 1.5 further in (its "-mx-1.5), so its own offset
|
||||
needs those same 1.5 taken back out to land on the same column. -->
|
||||
<span v-if="!root && !isLast" class="absolute start-0 top-0 bottom-0 w-px bg-white/20" />
|
||||
<span
|
||||
class="group flex items-center gap-1.5 py-1 px-1.5 -mx-1.5 rounded-md relative hover:bg-elevated/50 transition-colors cursor-pointer"
|
||||
title="Copy path"
|
||||
@click="onClick"
|
||||
>
|
||||
<!-- Last child: one rounded corner (border-inline-start + border-block-end
|
||||
on a single box) instead of a separate vertical + horizontal stroke,
|
||||
so the join is one clean curve rather than two translucent strokes
|
||||
stacking into a visibly brighter square where they cross. Sized off
|
||||
this row's own box (top to its vertical center) instead of a guessed
|
||||
pixel height, so it stays in sync if the row's height ever changes. -->
|
||||
<span
|
||||
v-if="!root && isLast"
|
||||
class="absolute -start-1.5 top-0 bottom-1/2 w-3 border-s border-b border-white/20 rounded-es-md"
|
||||
/>
|
||||
<!-- Not the last child: just the branch into the icon — the vertical
|
||||
guide itself is the LI-level line above, offset a hair to the
|
||||
right of it so the two strokes sit side by side instead of
|
||||
overlapping. -->
|
||||
<span
|
||||
v-if="!root && !isLast"
|
||||
class="absolute -start-[5px] top-1/2 -translate-y-1/2 w-3 h-px bg-white/20"
|
||||
/>
|
||||
<!-- Bridges the gap between this icon's own bottom edge and where its
|
||||
children's guide lines start (right at this row's bottom edge,
|
||||
which is exactly where the child <ul> begins), so the line reads
|
||||
as coming out of the folder icon rather than piercing through it
|
||||
or starting in mid-air. Starts at the row's center plus half the
|
||||
icon's own height (size-4 = 16px), so it clears the icon glyph
|
||||
regardless of the row's actual height. -->
|
||||
<span
|
||||
v-if="isFolder && children.length"
|
||||
class="absolute start-3.5 top-[calc(50%+8px)] bottom-0 w-px bg-white/20"
|
||||
/>
|
||||
<UIcon
|
||||
:name="icon"
|
||||
class="shrink-0 size-4"
|
||||
:class="isFolder ? 'text-[var(--ui-primary)]' : 'text-[var(--ui-text-dimmed)]'"
|
||||
/>
|
||||
<span>{{ name }}</span>
|
||||
<span v-if="comment" class="text-xs text-muted italic">{{ comment }}</span>
|
||||
<UIcon
|
||||
:name="copied ? 'i-lucide-check' : 'i-lucide-copy'"
|
||||
class="size-3.5 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity text-muted"
|
||||
/>
|
||||
</span>
|
||||
<ul v-if="children.length" class="ms-2 ps-0 list-none">
|
||||
<FileTreeNode
|
||||
v-for="(child, i) in children"
|
||||
:key="i"
|
||||
:entry="child"
|
||||
:parent-path="fullPath"
|
||||
:is-last="i === children.length - 1"
|
||||
/>
|
||||
</ul>
|
||||
</li>
|
||||
</template>
|
||||
@@ -0,0 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
const { sidebarNavigation } = useSubNavigation()
|
||||
|
||||
const contentNavVariants = useUIConfig('contentNavigation')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UContentNavigation
|
||||
:collapsible="true"
|
||||
:default-open="false"
|
||||
:highlight="contentNavVariants.highlight ?? true"
|
||||
:highlight-color="contentNavVariants.highlightColor"
|
||||
:variant="contentNavVariants.variant ?? 'link'"
|
||||
:color="contentNavVariants.color"
|
||||
:navigation="sidebarNavigation"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,30 @@
|
||||
<script setup lang="ts">
|
||||
const { subNavigationMode, sections } = useSubNavigation()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="subNavigationMode === 'aside'"
|
||||
class="mb-2"
|
||||
>
|
||||
<UPageAnchors :links="sections" />
|
||||
<USeparator
|
||||
type="dashed"
|
||||
class="my-4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="mb-4"
|
||||
>
|
||||
<UContentSearchButton
|
||||
:collapsed="false"
|
||||
class="w-full"
|
||||
variant="soft"
|
||||
:ui="{
|
||||
leadingIcon: 'size-4 mx-0.5',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,102 @@
|
||||
<script setup lang="ts">
|
||||
import { useClipboard } from '@vueuse/core'
|
||||
import { joinURL, withTrailingSlash } from 'ufo'
|
||||
import { useRuntimeConfig } from '#imports'
|
||||
|
||||
const route = useRoute()
|
||||
const toast = useToast()
|
||||
const runtimeConfig = useRuntimeConfig()
|
||||
const appBaseURL = runtimeConfig.app?.baseURL || '/'
|
||||
const mcpRoute = (runtimeConfig.public.mcp as { route?: string } | undefined)?.route || '/mcp'
|
||||
|
||||
const { copy, copied } = useClipboard()
|
||||
const { t } = useDocusI18n()
|
||||
|
||||
const markdownLink = computed(() => `${window?.location?.origin}${withTrailingSlash(appBaseURL)}raw${route.path}.md`)
|
||||
const mcpServerUrl = computed(() => `${window?.location?.origin}${joinURL(appBaseURL, mcpRoute)}`)
|
||||
const mcpDeeplink = computed(() => `${window?.location?.origin}${joinURL(appBaseURL, mcpRoute, 'deeplink')}`)
|
||||
const items = computed(() => [
|
||||
[{
|
||||
label: t('docs.copy.link'),
|
||||
icon: 'i-lucide-link',
|
||||
onSelect() {
|
||||
copy(markdownLink.value)
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('docs.copy.view'),
|
||||
icon: 'i-simple-icons:markdown',
|
||||
target: '_blank',
|
||||
to: markdownLink.value,
|
||||
},
|
||||
{
|
||||
label: t('docs.copy.gpt'),
|
||||
icon: 'i-simple-icons:openai',
|
||||
target: '_blank',
|
||||
to: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(`Read ${markdownLink.value} so I can ask questions about it.`)}`,
|
||||
},
|
||||
{
|
||||
label: t('docs.copy.claude'),
|
||||
icon: 'i-simple-icons:anthropic',
|
||||
target: '_blank',
|
||||
to: `https://claude.ai/new?q=${encodeURIComponent(`Read ${markdownLink.value} so I can ask questions about it.`)}`,
|
||||
}],
|
||||
[
|
||||
{
|
||||
label: 'Copy MCP Server URL',
|
||||
icon: 'i-lucide-link',
|
||||
onSelect() {
|
||||
copy(mcpServerUrl.value)
|
||||
toast.add({
|
||||
title: 'Copied to clipboard',
|
||||
icon: 'i-lucide-check-circle',
|
||||
})
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Add MCP Server',
|
||||
icon: 'i-simple-icons:cursor',
|
||||
target: '_blank',
|
||||
to: mcpDeeplink.value,
|
||||
},
|
||||
],
|
||||
])
|
||||
|
||||
async function copyPage() {
|
||||
const page = await $fetch<string>(`/raw${route.path}.md`)
|
||||
copy(page)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UFieldGroup size="sm">
|
||||
<UButton
|
||||
:label="t('docs.copy.page')"
|
||||
:icon="copied ? 'i-lucide-check' : 'i-lucide-copy'"
|
||||
color="neutral"
|
||||
variant="soft"
|
||||
class="bg-[rgba(12,13,12,0.8)] hover:bg-[rgba(18,17,16,0.9)] border border-[#121110]"
|
||||
:ui="{
|
||||
leadingIcon: 'text-neutral size-3.5',
|
||||
}"
|
||||
@click="copyPage"
|
||||
/>
|
||||
|
||||
<UDropdownMenu
|
||||
size="sm"
|
||||
:items="items"
|
||||
:content="{
|
||||
align: 'end',
|
||||
side: 'bottom',
|
||||
sideOffset: 8,
|
||||
}"
|
||||
>
|
||||
<UButton
|
||||
icon="i-lucide-chevron-down"
|
||||
color="neutral"
|
||||
variant="soft"
|
||||
class="bg-[rgba(12,13,12,0.8)] hover:bg-[rgba(18,17,16,0.9)] border border-[#121110] border-l-[#121110]"
|
||||
/>
|
||||
</UDropdownMenu>
|
||||
</UFieldGroup>
|
||||
</template>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import { useAppConfig } from '#imports'
|
||||
import Callout from '#ui/components/prose/Callout.vue'
|
||||
|
||||
// Set `::caution{icon=""}` in the markdown to hide the default icon for
|
||||
// that one instance (useful when the body already starts with its own
|
||||
// emoji).
|
||||
const props = withDefaults(defineProps<{ icon?: string }>(), {
|
||||
icon: undefined,
|
||||
})
|
||||
const appConfig = useAppConfig()
|
||||
const icon = computed(() => props.icon !== undefined ? props.icon : appConfig.ui.icons.caution)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Callout
|
||||
color="error"
|
||||
:icon="icon"
|
||||
>
|
||||
<slot mdc-unwrap="p" />
|
||||
</Callout>
|
||||
</template>
|
||||
@@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import { useAppConfig } from '#imports'
|
||||
import Callout from '#ui/components/prose/Callout.vue'
|
||||
|
||||
// Set `::note{icon=""}` in the markdown to hide the default icon for that
|
||||
// one instance (useful when the body already starts with its own emoji).
|
||||
const props = withDefaults(defineProps<{ icon?: string }>(), {
|
||||
icon: undefined,
|
||||
})
|
||||
const appConfig = useAppConfig()
|
||||
const icon = computed(() => props.icon !== undefined ? props.icon : appConfig.ui.icons.info)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Callout
|
||||
color="info"
|
||||
:icon="icon"
|
||||
>
|
||||
<slot mdc-unwrap="p" />
|
||||
</Callout>
|
||||
</template>
|
||||
@@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import { useAppConfig } from '#imports'
|
||||
import Callout from '#ui/components/prose/Callout.vue'
|
||||
|
||||
// Set `::tip{icon=""}` in the markdown to hide the default icon for that
|
||||
// one instance (useful when the body already starts with its own emoji).
|
||||
const props = withDefaults(defineProps<{ icon?: string }>(), {
|
||||
icon: undefined,
|
||||
})
|
||||
const appConfig = useAppConfig()
|
||||
const icon = computed(() => props.icon !== undefined ? props.icon : appConfig.ui.icons.tip)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Callout
|
||||
color="success"
|
||||
:icon="icon"
|
||||
>
|
||||
<slot mdc-unwrap="p" />
|
||||
</Callout>
|
||||
</template>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import { useAppConfig } from '#imports'
|
||||
import Callout from '#ui/components/prose/Callout.vue'
|
||||
|
||||
// Set `::warning{icon=""}` in the markdown to hide the default icon for
|
||||
// that one instance (useful when the body already starts with its own
|
||||
// emoji).
|
||||
const props = withDefaults(defineProps<{ icon?: string }>(), {
|
||||
icon: undefined,
|
||||
})
|
||||
const appConfig = useAppConfig()
|
||||
const icon = computed(() => props.icon !== undefined ? props.icon : appConfig.ui.icons.warning)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Callout
|
||||
color="warning"
|
||||
:icon="icon"
|
||||
>
|
||||
<slot mdc-unwrap="p" />
|
||||
</Callout>
|
||||
</template>
|
||||
@@ -0,0 +1,200 @@
|
||||
<script setup lang="ts">
|
||||
import { kebabCase } from 'scule'
|
||||
import type { ContentNavigationItem, Collections, DocsCollectionItem } from '@nuxt/content'
|
||||
import { findPageHeadline } from '@nuxt/content/utils'
|
||||
|
||||
definePageMeta({
|
||||
layout: 'docs',
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const { locale, isEnabled, t } = useDocusI18n()
|
||||
const { isOpen } = useAssistant()
|
||||
const appConfig = useAppConfig()
|
||||
const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
|
||||
const collectionName = computed(() => isEnabled.value ? `docs_${locale.value}` : 'docs')
|
||||
|
||||
const [{ data: page }, { data: surround }] = await Promise.all([
|
||||
useAsyncData(kebabCase(route.path), () => queryCollection(collectionName.value as keyof Collections).path(route.path).first() as Promise<DocsCollectionItem>),
|
||||
useAsyncData(`${kebabCase(route.path)}-surround`, () => {
|
||||
return queryCollectionItemSurroundings(collectionName.value as keyof Collections, route.path, {
|
||||
fields: ['description'],
|
||||
})
|
||||
}),
|
||||
])
|
||||
|
||||
if (!page.value) {
|
||||
throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
|
||||
}
|
||||
|
||||
const title = page.value.seo?.title || page.value.title
|
||||
const description = page.value.seo?.description || page.value.description
|
||||
|
||||
const headline = ref(findPageHeadline(navigation?.value, page.value?.path))
|
||||
const breadcrumbs = computed(() => findPageBreadcrumbs(navigation?.value, page.value?.path || ''))
|
||||
|
||||
// Set `hideHeader: true` in a page's frontmatter to skip the title/description
|
||||
// block entirely (e.g. for a page that builds its own custom layout).
|
||||
const hideHeader = computed(() => !!(page.value as unknown as Record<string, unknown>)?.hideHeader)
|
||||
|
||||
// Set `hideCopyPage: true` in a page's frontmatter to hide the "Copy page"
|
||||
// dropdown (copy link / view as markdown / open in ChatGPT / Claude).
|
||||
const hideCopyPage = computed(() => !!(page.value as unknown as Record<string, unknown>)?.hideCopyPage)
|
||||
|
||||
// Set `hideToc: true` in a page's frontmatter to hide the right-hand
|
||||
// "On this page" table-of-contents sidebar.
|
||||
const hideToc = computed(() => !!(page.value as unknown as Record<string, unknown>)?.hideToc)
|
||||
|
||||
useSeo({
|
||||
title,
|
||||
description,
|
||||
type: 'article',
|
||||
modifiedAt: (page.value as unknown as Record<string, unknown>).modifiedAt as string | undefined,
|
||||
breadcrumbs,
|
||||
})
|
||||
watch(() => navigation?.value, () => {
|
||||
headline.value = findPageHeadline(navigation?.value, page.value?.path) || headline.value
|
||||
})
|
||||
|
||||
defineOgImage('Docs', {
|
||||
headline: headline.value,
|
||||
title: title?.slice(0, 60),
|
||||
description: formatOgDescription(title, description),
|
||||
})
|
||||
|
||||
const github = computed(() => appConfig.github ? appConfig.github : null)
|
||||
const giteaUrl = computed(() => appConfig.socials?.gitea as string | undefined)
|
||||
|
||||
// "Edit this page" points at Gitea (git.djeex.fr), not the GitHub mirror.
|
||||
// Gitea's edit route is `/{owner}/{repo}/_edit/{branch}/{path}` (note the
|
||||
// leading underscore — different from GitHub's `/edit/{branch}/{path}`).
|
||||
const editLink = computed(() => {
|
||||
if (!giteaUrl.value) {
|
||||
return
|
||||
}
|
||||
|
||||
return [
|
||||
giteaUrl.value,
|
||||
'_edit',
|
||||
'main',
|
||||
'content',
|
||||
`${page.value?.stem}.${page.value?.extension}`,
|
||||
].filter(Boolean).join('/')
|
||||
})
|
||||
|
||||
const contributors = computed(() => (page.value as unknown as Record<string, unknown>)?.contributors as string[] | undefined)
|
||||
|
||||
const historyLink = computed(() => {
|
||||
if (!giteaUrl.value) {
|
||||
return
|
||||
}
|
||||
|
||||
return [
|
||||
giteaUrl.value,
|
||||
'commits',
|
||||
'branch',
|
||||
'main',
|
||||
'content',
|
||||
`${page.value?.stem}.${page.value?.extension}`,
|
||||
].filter(Boolean).join('/')
|
||||
})
|
||||
|
||||
// Add the page path to the prerender list
|
||||
addPrerenderPath(`/raw${route.path}.md`)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UPage
|
||||
v-if="page"
|
||||
class="relative"
|
||||
:ui="isOpen ? { center: 'lg:col-span-10' } : undefined"
|
||||
>
|
||||
<UPageHeader
|
||||
v-if="!hideHeader"
|
||||
:title="page.title"
|
||||
:description="page.description"
|
||||
:headline="headline"
|
||||
:ui="{
|
||||
wrapper: 'flex-row items-center flex-wrap justify-between',
|
||||
}"
|
||||
>
|
||||
<template #links>
|
||||
<UButton
|
||||
v-for="(link, index) in (page as DocsCollectionItem).links"
|
||||
:key="index"
|
||||
size="sm"
|
||||
v-bind="link"
|
||||
/>
|
||||
|
||||
<DocsPageHeaderLinks v-if="!hideCopyPage" />
|
||||
</template>
|
||||
</UPageHeader>
|
||||
|
||||
<UPageBody>
|
||||
<ContentRenderer
|
||||
v-if="page"
|
||||
:value="page"
|
||||
/>
|
||||
|
||||
<USeparator v-if="giteaUrl || github">
|
||||
<div
|
||||
class="flex items-center gap-2 text-sm text-muted max-[420px]:flex-col"
|
||||
>
|
||||
<UButton
|
||||
v-if="editLink"
|
||||
variant="link"
|
||||
color="neutral"
|
||||
:to="editLink"
|
||||
target="_blank"
|
||||
icon="i-lucide-pen"
|
||||
:ui="{ leadingIcon: 'size-4' }"
|
||||
>
|
||||
{{ t('docs.edit') }}
|
||||
</UButton>
|
||||
<template v-if="giteaUrl">
|
||||
<span>{{ t('common.or') }}</span>
|
||||
<UButton
|
||||
variant="link"
|
||||
color="neutral"
|
||||
:to="`${giteaUrl}/issues/new`"
|
||||
target="_blank"
|
||||
icon="i-lucide-alert-circle"
|
||||
:ui="{ leadingIcon: 'size-4' }"
|
||||
>
|
||||
{{ t('docs.report') }}
|
||||
</UButton>
|
||||
</template>
|
||||
</div>
|
||||
</USeparator>
|
||||
<div
|
||||
v-if="contributors?.length"
|
||||
class="flex items-center gap-2 text-sm text-muted"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-users"
|
||||
class="size-4 shrink-0"
|
||||
/>
|
||||
<span>{{ locale === 'fr' ? (contributors.length > 1 ? 'Contributeurs' : 'Contributeur') : (contributors.length > 1 ? 'Contributors' : 'Contributor') }}:</span>
|
||||
<ULink
|
||||
v-if="historyLink"
|
||||
:to="historyLink"
|
||||
target="_blank"
|
||||
class="text-highlighted hover:underline"
|
||||
>
|
||||
{{ contributors.join(', ') }}
|
||||
</ULink>
|
||||
<span v-else>{{ contributors.join(', ') }}</span>
|
||||
</div>
|
||||
<UContentSurround :surround="surround" />
|
||||
</UPageBody>
|
||||
|
||||
<template
|
||||
v-if="!isOpen && !hideToc"
|
||||
#right
|
||||
>
|
||||
<DocsAsideRight
|
||||
:page="page"
|
||||
/>
|
||||
</template>
|
||||
</UPage>
|
||||
</template>
|
||||
@@ -1,87 +0,0 @@
|
||||
@media (min-width: 1024px) {
|
||||
.card-grid .layout {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.alert .shiki {
|
||||
--shiki-dark: #00000000 !important;
|
||||
--shiki-default: #00000000 !important;
|
||||
--shiki-dark-bg: #00000000 !important;
|
||||
--shiki-default-bg: #00000000 !important;
|
||||
}
|
||||
.dark .shiki {
|
||||
background-color: #00000000 !important;
|
||||
}
|
||||
*html .dark .shiki span, html.dark .shiki span {
|
||||
background-color: var(--prose-code-block-backgroundColor) !important;
|
||||
}
|
||||
|
||||
/*html .dark .shiki span, html.dark .shiki span {
|
||||
background-color: #00000000 !important;
|
||||
}*/
|
||||
|
||||
.alert.success .prose-code, .alert.success .shiki span {
|
||||
background-color: var(--elements-state-success-backgroundColor-secondary) !important;
|
||||
border-color: #00361f !important;
|
||||
}
|
||||
|
||||
.alert.info .prose-code, .alert.info .shiki span {
|
||||
background-color: var(--elements-state-info-backgroundColor-secondary) !important;
|
||||
border-color: #00304a !important;
|
||||
}
|
||||
|
||||
.alert.warning .prose-code, .alert.warning .shiki span {
|
||||
background-color: var(--elements-state-warning-backgroundColor-secondary) !important;
|
||||
border-color: #382d00 !important;
|
||||
}
|
||||
|
||||
.alert.danger .prose-code, .alert.danger .shiki span {
|
||||
background-color: var(--elements-danger-info-backgroundColor-secondary) !important;
|
||||
border-color: #00304a !important;
|
||||
}
|
||||
|
||||
.section.right > :nth-child(2) {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: var(--elements-container-maxWidth);
|
||||
}
|
||||
|
||||
.has-parent-icon .icon {
|
||||
color: #ADA9A4;
|
||||
}
|
||||
|
||||
.has-parent-icon.active .icon {
|
||||
color: var(--color-primary-500) !important;
|
||||
}
|
||||
|
||||
.card:hover{
|
||||
color:#00304a;
|
||||
}
|
||||
|
||||
p img {
|
||||
border-radius:7px;
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.card-grid {
|
||||
padding-bottom: 80px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.prose-code.highlight-sh code .line {
|
||||
padding-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
.prose-code.highlight-sh code .line:before {
|
||||
display:none !important;
|
||||
}
|
||||
|
||||
.prose-code.highlight-bash code .line {
|
||||
padding-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
.prose-code.highlight-bash code .line:before {
|
||||
display:none !important;
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
<template>
|
||||
<img width="120" src="/img/logo.svg"/>
|
||||
</template>
|
||||
@@ -0,0 +1,96 @@
|
||||
import type { DefinedCollection } from '@nuxt/content'
|
||||
import { defineContentConfig, defineCollection, z } from '@nuxt/content'
|
||||
import { useNuxt } from '@nuxt/kit'
|
||||
import { joinURL } from 'ufo'
|
||||
import { existsSync } from 'node:fs'
|
||||
|
||||
const { options } = useNuxt()
|
||||
const cwd = joinURL(options.rootDir, 'content')
|
||||
const locales = options.i18n?.locales
|
||||
|
||||
// Same checks as docus's own content.config.ts (node_modules/docus/utils/pages.ts,
|
||||
// not a published package export, so reimplemented here rather than imported).
|
||||
function landingPageExists(rootDir: string): boolean {
|
||||
return existsSync(joinURL(rootDir, 'app', 'pages', 'index.vue'))
|
||||
}
|
||||
function docsFolderExists(rootDir: string, locale?: string): boolean {
|
||||
return existsSync(locale ? joinURL(rootDir, 'content', locale, 'docs') : joinURL(rootDir, 'content', 'docs'))
|
||||
}
|
||||
|
||||
const hasLandingPage = landingPageExists(options.rootDir)
|
||||
const hasDocsFolder = docsFolderExists(options.rootDir)
|
||||
|
||||
// Same as docus's own createDocsSchema(), plus the two custom per-page
|
||||
// frontmatter toggles used by app/pages/[[lang]]/[...slug].vue. Nuxt
|
||||
// Content's Zod schema silently strips any frontmatter key that isn't
|
||||
// declared here, which is why hideHeader/hideCopyPage did nothing until
|
||||
// this schema was extended.
|
||||
const createDocsSchema = () => z.object({
|
||||
links: z.array(z.object({
|
||||
label: z.string(),
|
||||
icon: z.string(),
|
||||
to: z.string(),
|
||||
target: z.string().optional(),
|
||||
})).optional(),
|
||||
hideHeader: z.boolean().optional(),
|
||||
hideCopyPage: z.boolean().optional(),
|
||||
hideToc: z.boolean().optional(),
|
||||
contributors: z.array(z.string()).optional(),
|
||||
})
|
||||
|
||||
let collections: Record<string, DefinedCollection>
|
||||
|
||||
if (locales && Array.isArray(locales)) {
|
||||
collections = {}
|
||||
for (const locale of locales) {
|
||||
const code = (typeof locale === 'string' ? locale : locale.code).replace('-', '_')
|
||||
const hasLocaleDocs = docsFolderExists(options.rootDir, code)
|
||||
|
||||
if (!hasLandingPage) {
|
||||
collections[`landing_${code}`] = defineCollection({
|
||||
type: 'page',
|
||||
source: {
|
||||
cwd,
|
||||
include: `${code}/index.md`,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
collections[`docs_${code}`] = defineCollection({
|
||||
type: 'page',
|
||||
source: {
|
||||
cwd,
|
||||
include: hasLocaleDocs ? `${code}/docs/**` : `${code}/**/*`,
|
||||
prefix: hasLocaleDocs ? `/${code}/docs` : `/${code}`,
|
||||
exclude: [`${code}/index.md`],
|
||||
},
|
||||
schema: createDocsSchema(),
|
||||
})
|
||||
}
|
||||
}
|
||||
else {
|
||||
collections = {
|
||||
docs: defineCollection({
|
||||
type: 'page',
|
||||
source: {
|
||||
cwd,
|
||||
include: hasDocsFolder ? 'docs/**' : '**',
|
||||
prefix: hasDocsFolder ? '/docs' : '/',
|
||||
exclude: ['index.md'],
|
||||
},
|
||||
schema: createDocsSchema(),
|
||||
}),
|
||||
}
|
||||
|
||||
if (!hasLandingPage) {
|
||||
collections.landing = defineCollection({
|
||||
type: 'page',
|
||||
source: {
|
||||
cwd,
|
||||
include: 'index.md',
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default defineContentConfig({ collections })
|
||||
@@ -1,36 +0,0 @@
|
||||
---
|
||||
title: Accueil
|
||||
description: Documentation homelab par Djeex — guides d'auto-hébergement pour Debian, Docker, réseau, stockage et bien plus.
|
||||
navigation: false
|
||||
layout: page
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
|
||||
:ellipsis{right=0px width=75% blur=150px}
|
||||
|
||||
::block-hero
|
||||
---
|
||||
cta:
|
||||
- Accéder à la doc
|
||||
- /apropos/bienvenue
|
||||
secondary:
|
||||
- En →
|
||||
- https://docu.djeex.fr
|
||||
---
|
||||
|
||||
#title
|
||||
Bienvenue sur docu[·]{style="color: #1ad6ff"}djeex
|
||||
|
||||
#description
|
||||
De la doc, encore de la doc. Des astuces et des expériences. Construisez votre homelab et votre propre NAS.
|
||||
|
||||
#extra
|
||||

|
||||
#support
|
||||
::card{icon=cib:gitea style="color:#1ad6ff;"}
|
||||
#title
|
||||
__git.djeex.fr__
|
||||
#description
|
||||
[Consultez mes bêtises](https://git.djeex.fr)
|
||||
::
|
||||
@@ -1,42 +0,0 @@
|
||||
---
|
||||
icon: lucide:home
|
||||
title: Bienvenue
|
||||
description: Introduction à Docudjeex — un site de documentation personnelle sur les services auto-hébergés, Debian et l'infrastructure Docker.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{right=0px width=75% blur=150px}
|
||||
|
||||
# docu[·]{style="color: #1ad6ff"}quoi ?
|
||||
|
||||
__Docu[·]{style="color: #1ad6ff"}djeex__ est le site regroupant la documentation de mes serveurs, pensé à l'origine pour retrouver facilement mes configurations et commandes. Mon infrastructure est construite autour du duo Debian 13 et docker, pour plus de simplicité à l'export et au déploiement. On remerciera principalement __Nipah__ et __Xenio__ (et d'autres) pour leur patience et écoute. La majeur partie de ce contenu vient de leurs têtes.
|
||||
|
||||
## A propos de la documentation
|
||||
|
||||
La documentation fournie ici est distribuée à titre expérimentale, dans un esprit de partage d'expérience. Elle n'est en aucun cas faite pour construire une architecture de production ou pour de l'industrialisation. Il est possible qu'elle contienne des erreurs et/ou des approximations.
|
||||
|
||||
Evidemment l'usage de cette documentation doit strictement se limiter au cadre légal.
|
||||
|
||||
::card-grid
|
||||
#title
|
||||
Documentation disponible ou en cours
|
||||
|
||||
#root
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
|
||||
#default
|
||||
::card{icon=noto:microscope}
|
||||
#title
|
||||
Serveex
|
||||
#description
|
||||
[Votre homelab à déployer pas à pas](/serveex/introduction)
|
||||
::
|
||||
|
||||
::card{icon=noto:computer-disk}
|
||||
#title
|
||||
Stockeex
|
||||
#description
|
||||
*(à venir)* Votre NAS maison à créer chez vous pour stocker vos données et media
|
||||
::
|
||||
::
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
icon: noto:star
|
||||
navigation.title: Bienvenue
|
||||
navigation.redirect: /apropos/bienvenue
|
||||
@@ -1,67 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: NAT & DHCP
|
||||
description: Comprendre le NAT, la redirection de ports et le DHCP sur un routeur domestique. Configurer des baux IP fixes et exposer des services locaux.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# Routeur et NAT
|
||||
::alert{type="info"}
|
||||
🎯 __Objectifs :__
|
||||
- Comprendre le principe de la redirection de port
|
||||
- Savoir configurer le NAT de son routeur
|
||||
- Savoir émettre des baux DHCP (IP fixes)
|
||||
::
|
||||
|
||||

|
||||
|
||||
## Qu'est-ce qu'un "port" ?
|
||||
---
|
||||
Les ports sont différents canaux par lesquels votre routeur envoie et reçoit des données, ce qui permet d'utiliser plusieurs services en meme temps. Lorsqu'il reçoit une donnée via un port, otre routeur transmet ensuite les données à la machine qui :
|
||||
- soit a émis la requête de départ
|
||||
- soit est configurée pour recevoir les données reçues par un port spécifique du routeur
|
||||
|
||||
Votre routeur dispose de plus de 65 000 ports à utiliser.
|
||||
|
||||
Certains programmes et applications sont conçus pour utiliser des ports spécifiques. Par exemple, lorsque votre réseau envoie des données à partir d'une page HTML, le routeur les recevra via le port numéro 80 (non sécurisé) ou `443` (sécurisé via SSL).
|
||||
|
||||
Le routeur sert donc de plateforme d'aiguillage des données entre internet et votre machine.
|
||||
|
||||
## La redirection de port
|
||||
---
|
||||
Rediriger un `port`, c'est émettre une règle qui spécifie que telle `source` peut envoyer des données à tel `port` de votre routeur, qui redirigera les données sur tel `port` de telle `machine`. Les `sources` et la `machine de destination` sont identifiées par leur `adresse IP`.
|
||||
|
||||
| Variable | Description | exemple |
|
||||
|--------------------------|----------------------------------------------------------|-------------------------|
|
||||
| `machine source` | IP de la machine source (sur internet) | `All`<br>`123.45.67.89` |
|
||||
| `port source` | Port d'arrivée sur le routeur | `443` |
|
||||
| `port de destination` | Port d'arrivée sur la machine de destination | `3000` |
|
||||
| `machine de destination` | IP de la machine de destination (sur votre réseau local) | `192.168.1.50` |
|
||||
|
||||
Selon ce tableau, si on enlève le `All` et que l'on garde l'ip `123.45.67.89` en provenance d'internet, tout le traffic envoyé depuis cette IP sur le port `443` du routeur sera redirigé vers le port `3000` de l'IP locale `192.168.1.50`.
|
||||
|
||||
Si on enlève l'IP de l'exemple et qu'on laisse le `All`, tout le traffic d'internet envoyé au port `443` du routeur sera redirigé vers le port `3000` de l'IP locale `192.168.1.50`.
|
||||
|
||||
C'est utile si par exemple vous avez un serveur qui a un service qui nécessite d'etre accessible par internet. Par exemple, un site web. Le web utilise le port `80` (non sécurisé) et le port 443 (sécurisé par certificat SSL) pour communiquer. Ainsi, si je veux que mon site internet soit accessible, je vais faire en sorte que lorsqu'on tape le nom de domaine de mon site, le routeur redirige bien vers mon serveur local (avec l'exemple de l'IP locale du tableau). Par exemple, imaginons que mon service est sur le port `3000` de mon routeur (accessible en local via `http://192.168.1.50:3000`), je vais donc rediriger comme dans l'exemple toutes les sources (All) qui passent par le port `443` du routeur vers le port `3000` de mon serveur local.
|
||||
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- __Attention :__ Si vous avez plusieurs services à rendre accessible, avec par exemple `sousdomaine1.mondomaine.fr` et `sousdomaine2.mondomaine.fr`, votre routeur ne peut pas rediriger vers plusieurs port selon la requête. Vous devrez utiliser un [Reverse Proxy](../../serveex/coeur/swag) qui selon la requete redirigera vers le bon service de votre serveur.
|
||||
:::
|
||||
::
|
||||
|
||||
## Le DHCP
|
||||
---
|
||||
A chaque fois que vous connectez un appareil sur votre réseau local, votre routeur lui attribue une adresse IP via les règles DHCP. Celle-ci est aléatoire selon des règles prédéfinies. A chaque redémarrage de l'appareil, l'IP peut changer. C'est embetant si vous exposez un service et que vous avez une redirection de port dans votre routeur car si l'IP change, la redirection enverra les données dans le vide. Le serveur DHCP de votre box permet d'attribuer une IP fixe à un appareil.
|
||||
|
||||
Chaque appareil a une adresse physique dite "adressse MAC". Pour fixer l'IP, vous devez connaitre l'adresse physique de votre appareil (visible dans votre routeur si votre machine est connectée au réseau), et lui attribuer une adresse IP fixe, ce qu'on appel un "bail DHCP fixe".
|
||||
|
||||
Ainsi, l'IP de votre machine ne changera jamais et la redirection de port sera toujours effective.
|
||||
|
||||
| Variable | Description | Exemple |
|
||||
|---------------|--------------------------------|---------------------|
|
||||
| `IP` | IP locale fixe à attribuer | `192.168.1.50` |
|
||||
| `Adresse Mac` | Adresse physique de la machine | `5E:FF:56:A2:AF:15` |
|
||||
|
||||
Pour plus d'information sur ces sujets, consultez la documentation de votre routeur.
|
||||
@@ -1,229 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: Samba
|
||||
description: Configurer Samba sur Debian pour partager des dossiers sur votre réseau local et y accéder depuis Windows, macOS ou Linux.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# Samba
|
||||
|
||||
Samba est un protocole permettant d'accèder à un dossier situé sur un disque réseau. Il peut être configuré sous Mac, Windows ou Linux.
|
||||
|
||||
De nombreux tutorials existent pour configurer Samba sous windows ou sur un NAS type Synology, ici nous nous concentrons sur Debian.
|
||||
|
||||
::alert{type="info"}
|
||||
🎯 __Objectifs :__
|
||||
- Créer un dossier réseau sur une machine distante
|
||||
- Accéder au dossier réseau sur notre serveur
|
||||
::
|
||||
|
||||

|
||||
|
||||
## Partager un dossier réseau
|
||||
---
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Ici, nous allons partager le dossier `/video` d'une machine distant que nous appelerons `machine-distante`. Nous accéderons à ce dossier par la machine nommée `machine-locale`. L'utilisateur de connexion au disque réseau sera `sambauser`.
|
||||
:::
|
||||
::
|
||||
|
||||
|
||||
### Installer le serveur samba
|
||||
|
||||
```sh
|
||||
sudo apt update && sudo apt upgrade
|
||||
sudo apt install samba smbclient cifs-utils
|
||||
```
|
||||
|
||||
### Créer le dossier `/video`
|
||||
|
||||
```sh
|
||||
sudo mkdir /video
|
||||
```
|
||||
|
||||
### Configuration du partage
|
||||
|
||||
Ensuite nous allons éditer le fichier `/etc/samba/smb.conf`
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ vous pouvez utiliser [File Browser](/serveex/files/file-browser) pour naviguer dans vos fichier et éditer vos documents au lieu d'utiliser les commandes du terminal.
|
||||
::
|
||||
|
||||
```sh
|
||||
sudo vim /etc/samba/smb.conf
|
||||
```
|
||||
|
||||
Localisez la variable `workgroup` puis passez en mode modification en appuyant sur `i` et nommez votre worgroup, par exemple `::::properties workgroup = WORKGROUP`
|
||||
|
||||
Puis allez à la fin du fichier et collez la configuration suivante
|
||||
|
||||
```properties
|
||||
[video]
|
||||
comment = Dossier video
|
||||
path = /video
|
||||
writable = yes
|
||||
guest ok = no
|
||||
valid users = @smbshare
|
||||
force create mode = 770
|
||||
force directory mode = 770
|
||||
inherit permissions = yes
|
||||
```
|
||||
Appuyez sur `Echap` pour quitter le mode notification puis tapez `:x` et appuyez sur `Entrée` pour sauvegarder et quitter.
|
||||
|
||||
### Créer un utilisateur et un groupe pour Samba
|
||||
|
||||
Comme nous avons configfuré un partage sécurisé, nous allons devoir créer un utilisateur et un groupe pour pouvoir y accéder à distance.
|
||||
|
||||
Creez le groupe.
|
||||
```sh
|
||||
sudo groupadd smbshare
|
||||
```
|
||||
|
||||
Nous allons maintenant permettre au groupe d'avoir le controle sur le dossier `/video`.
|
||||
|
||||
```sh
|
||||
sudo chgrp -R smbshare /video
|
||||
```
|
||||
|
||||
Et maintenant nous allons donner les permissions nécessaires aux dossiers et fichier hérités.
|
||||
|
||||
```sh
|
||||
sudo chmod 2775 /video
|
||||
```
|
||||
|
||||
A présent nous allons ajouter un utilisateur nologin c'est à dire que cet utilisateur ne pourra pas se connecter sur le serveur pour faire des opérations, mais pourra tout de meme se connecter au service samba.
|
||||
|
||||
```sh
|
||||
sudo useradd -M -s /sbin/nologin sambauser
|
||||
```
|
||||
|
||||
Puis nous ajoutons l'utilisateur au groupe `sambashare` que nous avons créé précédemment.
|
||||
|
||||
|
||||
```sh
|
||||
sudo usermod -aG smbshare sambauser
|
||||
```
|
||||
Et nous allons configurer un mot de passe.
|
||||
|
||||
```sh
|
||||
sudo smbpasswd -a sambauser
|
||||
```
|
||||
Et enfin nous allons activer le compte que nous venons de créer.
|
||||
|
||||
```sh
|
||||
sudo smbpasswd -e sambauser
|
||||
```
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- __Attention :__ Si vous utilisez un pare-feu, comme ufw, n'oubliez pas d'autoriser les IP des machines qui accéderont à votre dossier partagé :
|
||||
:::
|
||||
```sh
|
||||
sudo ufw allow from ipdelamachine to any app Samba
|
||||
::
|
||||
|
||||
|
||||
## Accéder à un dossier partagé
|
||||
---
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- A présent, nous sommes sur votre `machine-locale` qui nécessite d'accéder au dossier partagé `/video` présent sur la `machine-distante`.
|
||||
:::
|
||||
::
|
||||
|
||||
### Installer les package nécessaires
|
||||
|
||||
```sh
|
||||
sudo apt update && sudo apt upgrade
|
||||
sudo apt install cifs-utils
|
||||
```
|
||||
### Créer le dossier de destination
|
||||
|
||||
Nous allons créer un dossier sur notre serveur sur lequel sera monté le dossier partagé de notre `machine-distante. C'est à dire que dans ce dossier nous retrouverons le contenu du dossier partagé de notre `machine-distante`. Ici nous appellerons ce dossier `/mnt/video`.
|
||||
|
||||
```sh
|
||||
sudo mkdir /mnt/video
|
||||
```
|
||||
|
||||
### Préparer le fichier .credentials
|
||||
|
||||
Afin de ne pas avoir systématiquement à rentrer notre utilisateur et mot de passe, nous allons créer un fichier .credentials` stockant ces informations.
|
||||
|
||||
Nous allons le créer dans le dossier `/smb`.
|
||||
|
||||
```sh
|
||||
sudo mkdir /smb
|
||||
sudo vi /smb/.credentials
|
||||
```
|
||||
Passez en mode modification en appuyant sur `i` et configurez comme suit :
|
||||
|
||||
```properties
|
||||
username=smbuser
|
||||
password=motdepasse
|
||||
```
|
||||
|
||||
- `smbuser` : L'utilisateur que nous avons configuré sur la `machine-distante`
|
||||
- `motdepasse` : Le mot de passe que nous avons configuré sur la `machine-distante`
|
||||
|
||||
Appuyez sur `Echap` afin de quitter le mode modification, puis tapez `:x` et appuyez sur `Entrée` pour sauvegarder et quitter.
|
||||
|
||||
Nous allons modifier les permissions du dossier afin que seul le propriétaire puis lire et écrire dans ce fichier.
|
||||
|
||||
```sh
|
||||
sudo chmod 600 /smb/.credentials
|
||||
```
|
||||
|
||||
### Monter le dossier partager
|
||||
|
||||
A présent nous allons monter le dossier.
|
||||
|
||||
```sh
|
||||
sudo mount -t cifs -o credentials=/smb/.credentials //ip-machine-distante/video /mnt/video
|
||||
```
|
||||
|
||||
Remplacez `ip-machine-distante` par l'adresse IP de votre `machine-distante`
|
||||
|
||||
Vérifiez que cela a fonctionné en tapant :
|
||||
|
||||
```sh
|
||||
sudo mount -t cifs
|
||||
```
|
||||
Vous verrez différentes informations qui confirmerons le succès du montage.
|
||||
|
||||
Et voilà, à présent vous accédez au dossier /video de `votre machine-distante`, depuis votre `machine-locale` !
|
||||
|
||||
### Automatiser le montage au boot
|
||||
|
||||
Par défaut, les dossiers pattagés ne sont pas connectés automatiquement au redémarrage. Pour autoamtiser cet aspect, nous allons modifier le fichier `/etc/fstab`.
|
||||
|
||||
D'abord, sauvegardons notre fichier `fstab`.
|
||||
|
||||
```sh
|
||||
sudo cp /etc/fstab /etc/fstab.bak
|
||||
```
|
||||
|
||||
Puis nous allons ajouter une ligne à la fin du fichier comportant les informations de montages dans le fichier `fstab`.
|
||||
|
||||
```sh
|
||||
sudo echo //ip-machine-distante/video /mnt/video cifs _netdev,nofail,credentials=/smb/.credentials,x-systemd.automount,x-systemd.device-timeout=15 0 0 >> /etc/fstab
|
||||
```
|
||||
|
||||
Redémarrez.
|
||||
|
||||
```sh
|
||||
sudo reboot
|
||||
```
|
||||
|
||||
Une fois redémarré, vérifiez que le montage est correct
|
||||
|
||||
```sh
|
||||
sudo mount -t cifs
|
||||
```
|
||||
|
||||
Et voilà !
|
||||
|
||||
### Démonter le dossier partagé
|
||||
|
||||
```sh
|
||||
sudo umount -t cifs /mnt/video
|
||||
```
|
||||
@@ -1,2 +0,0 @@
|
||||
navigation.title: Réseau
|
||||
icon: lucide:network
|
||||
@@ -1,2 +0,0 @@
|
||||
navigation.title: Stockage
|
||||
icon: lucide:hard-drive
|
||||
@@ -1,152 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: Les bases
|
||||
description: Les fondamentaux du matériel serveur — CPU, RAM, stockage et facteurs de forme pour bien démarrer votre homelab.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# Les bases d'un serveur
|
||||
|
||||
::alert{type="info"}
|
||||
🎯 __Objectifs :__
|
||||
- Comprendre les bases du hardware d'un serveur
|
||||
::
|
||||
|
||||

|
||||
|
||||
Un __serveur__ n'est rien d'autre qu'un ordinateur dédié à des taches particulières, ayant vocation à rester accessible en permanence. En soi, sa structure ne diffère pas d'un ordinateur classique, si ce n'est que selon l'usage cible, on fera évoluer certains composants dans un sens ou dans un autre. Dans cet article, vous trouverez un aide mémoire pour comprendre quels sont les composants essentiels d'un serveur et comprendre leur fonction selon vos usages.
|
||||
|
||||
## La carte mère
|
||||
---
|
||||
La __carte mère__ est le socle de votre machine. C'est le composant qui relie tous les autres composants. Elle sert à les faire communiquer et à interagir avec vos périphériques (clavier, souris, etc...). Il faut donc la choisir en fonction de vos besoins en terme d'entrées/sorties (I/O) comme le nombre de ports USB, de ports réseau, leur vitesse, etc... Mais il faut également veiller à sa compatibilité avec les autres composants que vous allez brancher dessus.
|
||||
|
||||
Les composants importants à brancher dessus sont :
|
||||
- le CPU
|
||||
- la RAM
|
||||
- le stockage (HDD et/ou SSD)
|
||||
- l'eventuel GPU dédié
|
||||
|
||||
Il existe plusieurs formats de carte mère grand public :
|
||||
- E-ATX : les plus grosses
|
||||
- ATX : le standard
|
||||
- Micro-ATX : plus petit
|
||||
- Mini-ITX : le plus petit
|
||||
|
||||
Bien sûr, selon la taille, le nombre de ports et de fonctionnalité diffère. D'autre part, les constructeurs de machines déjà assemblées peuvent aussi profiter de formats plus personnalisés.
|
||||
|
||||
## Le CPU
|
||||
---
|
||||
|
||||
<div style="display: flex; align-items: center;">
|
||||
<img src="/img/global/cpu.svg" alt="Image" style="max-width: 25%; max-height:230px; margin-right: 20px;">
|
||||
<p>
|
||||
Le <strong>CPU</strong> (Central processor Unit) est la supercalculette de l’ordinateur. Il traite la plupart des tâches logicielles. Aujourd’hui les processeurs comportent plusieurs cœurs, parfois eux même divisé en deux de façon logicielle, afin de mieux répartir la charge de travail et optimiser son fonctionnement. Il nécessite d'etre refroidit avec un dissipateur actif (avec ventilateur) ou passif (sans ventilateur) selon la chaleur qu'iil dégage, et donc selon la puissance en Watt qu'il requiert. Dans le cadre d'un serveur, on veillera donc à le choisir selon les usages que l'on aura. </p>
|
||||
</div>
|
||||
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- __Attention :__ N'oubliez pas que pour installer un dissipateur tiers, vous devez vous assurer qu'il soit compatible avec le socket de votre processeur, c'est à dire le socle sur lequel il est installé sur la carte mère, et que vous devez également appliquer de la pate thermique sur le CPU avant d'installer le dissipateur.
|
||||
:::
|
||||
::
|
||||
|
||||
|
||||
Il faut les juger selon :
|
||||
- Leur nombre de coeurs (plus ils en ont, plus il peuvent paralléliser les tâches)
|
||||
- La fréquence de ces coeurs en Giga Hertz _Ghz_
|
||||
- Leur consommation en Watt _W_
|
||||
|
||||
Dans le cadre d'un homelab/NAS sans calcul intensif, aujourd'hui on se dirigera facilement vers les Intel N100/150 (4 coeurs) et N305/N355 (8 coeurs) qui sont des processeurs performants à très faible consommation (rappelez vous que ces machines sont censées tourner H24).
|
||||
|
||||
## La RAM
|
||||
---
|
||||
|
||||
<p align="center">
|
||||
<img src="/img/global/ram.svg" alt="Image" style="max-width: 65%; margin-right: 20px;">
|
||||
</p>
|
||||
|
||||
La __RAM__ (Random Access Memory), est une zone de stockage éphémère ultra rapide utilisée par le CPU (et l'iGPU le cas échéant) pour stocker des informations et calculs le temps de les éxecuter. Elle se vide régulièrement selon les sollicitation et se vide également à chaque extinction de la machine. Plus elle est performante, plus les calculs du processeur sont efficaces.
|
||||
|
||||
Elle prend généralement la forme de barettes, à brancher sur la carte mère. Il en existe plusieurs format selon le type de carte mère, et de plusieurs générations (DDR5 de nos jours).
|
||||
|
||||
## Le GPU
|
||||
---
|
||||
|
||||
Le __GPU__ (Graphical Processor Unit) est un processeur dédié aux calculs graphiques, vidéo, et parfois d'intelligence artificielle. Dans le cadre d'un serveur, il aura son utilité pour tout ce qui touche au media center (Streaming de video comme [Plex](/serveex/media/plex) par exemple), mais aussi en terme d'accélération matérielle pour les calculs d'IA comme la reconnaissance faciale ou la recherche sur des photos (comme via [Immich](/serveex/cloud/immich) par exemple).
|
||||
|
||||
Selon la puissance requise, on choisira un GPU dédié avec sa propre VRAM (une carte graphique à brancher sur un port PCIe de la carte mère), ou un iGPU, c'est à dire un GPU compris dans le CPU (comme les N100/N150 et N305/N355), qui utilisera la RAM globale de la machine
|
||||
|
||||
|
||||
### Le ou les HDD
|
||||
---
|
||||
|
||||
<p align="center">
|
||||
<img src="/img/global/hdd.svg" alt="Image" style="max-width: 50%; margin-right: 20px;">
|
||||
</p>
|
||||
|
||||
Un __HDD__ (Hard Disk Drive) ou disque dur, est un composant servant à stocker des données. Autrefois, c'etait le stockage standard des machines informatiques. Ils sont constitués d'un ou plusieurs disques superposés en plateau, et de têtes de lecture, presque comme une platine vinyle. Si aujourd'hui on arrive à stocker des quantités extraordinaire de données dans un HDD (jusqu'à 30To soit 30 000 Giga-octet de nos jours pour le grand public), ils sont limités dans leur vitesse de lecture et d'écriture par leur caractère mécaniques. Ils sont également volumineux et très lourds.
|
||||
|
||||
De manière générale, on les privilégiera pour stocker des données qui ne servent pas à des calculs et ne nécessitent pas d'ecriture rapide, comme les media (videos, photos...) ou les cloud drive, stockage d'archives, etc. Ils sont performants dans ces scenario et surtout coutent beaucoup moins cher que des SSD à espace de stockage égal.
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ Vous pouvez combiner plusieurs HDD ensemble en [RAID](/generalites/stockage/raid) afin d'accroitre les performances de votre machine.
|
||||
::
|
||||
|
||||
Il existe plusieurs formats de HDD : 3.5" et 2.5". De manière générale dans un serveur on privilégiera les 3.5, plus fiables.
|
||||
|
||||
|
||||
### Le ou les SSD
|
||||
---
|
||||
|
||||
<p align="center">
|
||||
<img src="/img/global/nvme.svg" alt="Image" style="max-width: 50%; margin-right: 20px;">
|
||||
</p>
|
||||
|
||||
Un __SSD__ (Solid State Drive) est une petite carte sur laquelle sont soudées des puces de mémoires servant à stocker de l'information. Contrairement à la RAM, ces puces conservent les informations même lorsqu'elles ne sont pas alimentées et donc les conservent après un redémarrage. C'est ce qui sert globalement de stockage pour votre serveur. Contrairement aux HDD, ils ne disposent pas de parties mécaniques, sont très miniaturisés et surtout sont extrêmement rapides, de l'ordre de plusieurs Giga-octets par seconde pour les plus performants.
|
||||
|
||||
On les trouve dans plusieurs formats, aujourd'hui on priviligiera les versions M.2 NVMe, car ce sont les plus petits et plus rapides, et sont devenu un standard sur les cartes mères.
|
||||
|
||||
Ils sont en revanche beaucoup plus chers que les disque durs à capacité de stockage égale. Généralement, on y stockera au moins le système d'exploitation de la machine (Operating System ou OS) pour garantir une certaine rapidité d'execution. Dans le cadre d'un serveur, on y stockera aussi si possible les conteneurs type [docker](/serveex/coeur/docker) et les bases de données. De manière générale, toute données dont un a besoin régulièrement et rapidement pour des calculs (site web, applications, etc...).
|
||||
|
||||
### La carte réseau
|
||||
---
|
||||
|
||||
Une __carte réseau__ sert à faire communiquer votre machine avec votre réseau (dont internet). Elle est composée d'une puce de controle et d'un ou plusieurs port réseau. Ces ports peuvent dits _ports ethernet_ peuvent être dans plusieurs formats physique et dans plusieurs normes de débit :
|
||||
- RJ45 Gigabit ethernet 10/100/1000 : le format standard de prise RJ45 permettant de dialoguer à des débit allant de 10Mbps (soit 0,125Mo/s) à 1000Mbps (soit 125Mo/s)
|
||||
- RJ45 2.5G : Même prise, pouvant dialoguer jusqu'à 2,5Gpbs soit 2 500Mbps (donc 312,5Mo/s)
|
||||
- RJ45 5G : Même prise, pouvant dialoguer jusqu'à 5Gpbs (donc 625Mo/s)
|
||||
- RJ45 10G Base T : Même prise pouvant dialoguer jusqu'à 10Gbs (soit 1,25Go/s)
|
||||
- SFP 1G : Prise SFP, généralement utilisée pour la fibre optique, pouvant dialoguer jusqu'à 1Gpbs
|
||||
- SFP+ 10G : Prise SFP amélioriée, aussi utilisée pour la fibre optique, pouvant dialoguer jusqu'à 10Gbps.
|
||||
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- __Attention :__ Pensez bien à dimensionner vos appareils réseaux (routeurs, switch, cables...) en fonction du débit que vous souhaitez entre vos appareils. D'autre part, il existe plusieurs normes de cables RJ45 selon la vitesse permise. On privilegiera dans la plupart des cas des cables RJ45 CAT5E, et au delà de 10Gbps, on privilégiera du CAT6A, bien que le CAT5E soit utilisable à ces vitesses à courte distance. Quant à la fibre, c'est tout un sujet (simplex, duplex, transceiver...).
|
||||
:::
|
||||
::
|
||||
|
||||
La carte réseau est généralement directement intégrée à la carte mère, mais vous pouvez utiliser des cartes réseau dédiées comme par USB par exemple ou via un port d'extension PCIe. De manière générale, sur un serveur, on appréciera d'avoir au moins deux ports ethernet afin d'avoir de la redondance en cas de panne.
|
||||
|
||||
### Entrées et sorties
|
||||
---
|
||||
|
||||
Les __ports d'entrées et sorties__ (Input/Outpout) sont l'ensemble des ports de la machine permettant d'échanger de l'information avec des appareils externes (écrans, clavier, souris, réseau...). Généralement, sur une carte mère on retrouve le ou les ports réseaux, des ports USB de plusieurs formats et vitesse différentes, un ou plusieurs port vidéo, et des ports audio.
|
||||
|
||||
Selon vos usages, vous devrez choisir votre carte mere et ses éventuelles cartes d'extension en fonction de vos besoin à ce niveau.
|
||||
|
||||
### L'alimentation
|
||||
---
|
||||
|
||||
__L'alimentation__ est le composant qui permet d'alimenter électriquement les composants de votre machine. Elle se compose d'un cable secteur en entrée, et de plusieurs types de cables en sorties. Ces cables se branchent sur la carte mère et différents périphériques le nécessitant, comme les disques dur, ou certaines cartes graphiques dédiées. L'alimentation se caractérise par sa puissance, en Watt, sa modularité (cables attachés ou détachables), et son rendement, en pourcentage. Comprendre qu'une alimentation de 500W avec un rendement de 80% consommera en fait 625W pour fournir ces 500W.
|
||||
|
||||
Une autre caractéristiques des alimentations sont leur format. Il en existe plusieurs standard, comme ATX L pour les plus grandes jusqu'à SFX pour les plus petites. Il en existe aussi des spécifiques aux serveurs rackables, par définition assez plats.
|
||||
|
||||
Pour choisir votre alimentation, la convention est d'estimer la puissance electrique demandée par votre machine à usage et de multiplier par deux cette puissance. En effet, le rendement des alimentations se situe environ à 50% de sa charge totale.
|
||||
|
||||
### Le boitier
|
||||
---
|
||||
|
||||
<div style="display: flex; align-items: center;">
|
||||
<img src="/img/global/case.svg" alt="Image" style="max-width: 25%; max-height:230px; margin-right: 20px;">
|
||||
<p>Le <strong>boitier</strong> est également un composant essentiel pour votre machine. Il conditionne le refroidissement de cette dernière, avec ses ventilateurs et sa conception gérant les flux d'air, mais aussi le format de votre carte mere, de votre alimentation et de votre éventuel GPU dédié. D'autre part, il conditionne également le nombre de HDD et leur format. Certains boitiers sont dit rackables, c'est à dire qu'ils peuvent etre fixés dans des racks pour des armoires informatiques (baies serveurs). Choisissez consciencieusement votre boitier en fonction de vos besoins.</p>
|
||||
</div>
|
||||
@@ -1,116 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: Réseau
|
||||
description: Aperçu du matériel réseau pour homelab — switches, cartes réseau, câbles et comment connecter efficacement vos serveurs.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# Réseau
|
||||
|
||||
::alert{type="info"}
|
||||
🎯 __Objectifs :__
|
||||
- Comprendre les bases du matériel réseau
|
||||
::
|
||||
|
||||

|
||||
|
||||
Un réseau informatique est indissociable du matériel nécessaire à le mettre en place. Le matériel va conditionner les dimension du réseau, les vitesses de communication et les performances du réseau. Dans cet article, nous nous limiterons au réseau les plus simples, composant généralement ceux que l'on peut retrouver chez soi.
|
||||
|
||||
## Le routeur
|
||||
---
|
||||
Le __routeur__ est le point central de votre réseau. C'est lui qui dirige les __paquets__, c'est à dire les blocs d'informations qui transitent sur votre réseau, de l'émetteur vers le bon destinataire. Il permet à la fois de conditionner le routage de l'information au sein de votre réseau mais aussi vers ou depuis l'exterieur. Globalement, il fait communiquer les appareils entre eux et avec internet.
|
||||
|
||||
Vous avez tous un routeur chez vous, c'est la __box__ de votre _FAI_ (Fournisseur d'Accès à Internet).
|
||||
|
||||
Plus généralement, un routeur est composé :
|
||||
- d'un port WAN (Wide Area Network) recevant les informations depuis l'internet (ou un réseau de hiérarchie supérieure). Par exemple un port recevant la fibre optique de votre opérateur, ou un port SFP+/RJ45 pour un routeur tiers.
|
||||
- d'un switch, c'est à dire d'un hub composé de plusieurs ports __LAN__ (Local Area Network) permettant de connecter plusieurs lignes et appareils à votre routeur. Ils peuvent etre RJ45 ou SFP/SFP+.
|
||||
- parfois d'un emetteur/recepteur WiFi
|
||||
|
||||
Le routeur peut posséder des capacité de _firewall_, c'est à dire de limiter le traffic d'appareils en particulier, et de _[NAT (Network Adress Translation)](/generalites/reseau/nat)_, c'est à dire de redirection de port. Il possède aussi généralement un _[DHCP (Dynamic Host Configuration Protocol)](/generalites/reseau/nat#le-dhcp)_, servant à attribuer dynamiquement des _adresses IP_ à votre matériel branché au réseau.
|
||||
|
||||
Le routeur conditionne directement la vitesse de communication entre vos appareils. En effet, le port WAN conditionne le débit qu'il peut recevoir de la part de votre FAI. Si vous avez un abonnement de 5 Gb/s, il vous faudra un port WAN d'au moins 5 Gb/s. Mais il conditionne également la vitesse de communication entre vos équipements. Si vous avez des appareils qui communiquent à 5 Gb/s, il faudra que la partie _switch_ du routeur disposent de ports 5 Gb/s. Enfin, si vous avez du matériel WiFi 7 et que vous souhaitez profiter de ces débits, il faudra également que votre routeur le supporte. Et dans le cas d'une borne Wifi tierce, n'oubliez pas que son port réseau doit disposer d'un débit au moins égale au WiFi qu'il diffuse, et le routeur également.
|
||||
|
||||
Débit internet, nombre d'équipements à brancher, débit WiFi, débit réseau, ce sont quatre points à regarder avec attention lorsque vous souscrivez à une offre avec une box internet ou lorsque vous achetez votre propre routeur.
|
||||
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__
|
||||
Vous pouvez utiliser sans difficulté un routeur tiers pour votre réseau qui remplacera la gestion de votre box internet si celle-ci surpporte le mode _Bridge_. En France seul l'opérateur Free le permet. C'est également possible avec les opérateurs ne disposant pas de ce mode, mais avec de grandes difficultés et sans toutes les fonctionnalités qu'un routeur tiers pourrait vous apporter.
|
||||
::
|
||||
|
||||
## Le Switch
|
||||
---
|
||||
|
||||
Le __switch__ ou commutateur, est un appareil qui permet de brancher plusieurs appareils au réseau. C'est littéralement un hub, qui se connecte directement au routeur ou à un autre switch, jusqu'au routeur. Il permet d'éviter de saturer toutes les prises switch du routeur, ou de délocaliser le matériel dans une autre pièce, sans tirer un cable par appareil vers le routeur. Un autre cas d'usage est de pouvoir séparer plusieurs réseaux gérés par un meme routeur.
|
||||
|
||||
Il en existe globalement de deux types :
|
||||
- Les switch non managés, les plus courants. Ils sont plug-n-play, c'est à dire que vous les branchez et tout est réglé tout seul.
|
||||
- Les switchs managés. Ils disposent d'une interface de configuration (en ligne de commande ou via une interface web), servant à affiner les règles de routages asservies au routeur. C'est très efficace pour séparer des réseaux virtuels entre vos appareils, mais généralement nécessite beaucoup de temps de configuration et sont moins pratiques à utiliser qu'un simple switch non managé.
|
||||
|
||||
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- __Attention :__ Veillez à bien utiliser un switch avec des ports disposant des débits cohérents avec le matériel de votre réseau
|
||||
:::
|
||||
::
|
||||
|
||||
## Les cables
|
||||
---
|
||||
|
||||
Les cables sont des composants essentiels de votre réseau. Selon leur type et catégorie, ils limiteront le débit entre vos appareils et nécessitent donc d'etre dimensionnés de manière cohérente avec votre réseau. Ils doivent être compatibles avec les ports de vos apapreils. Pour rappel, voici les normes de ports les plus utilisées:
|
||||
- RJ45 Gigabit ethernet 10/100/1000 : le format standard de prise RJ45 permettant de dialoguer à des débit allant de 10Mbps (soit 0,125Mo/s) à 1000Mbps (soit 125Mo/s)
|
||||
- RJ45 2.5G : Même prise, pouvant dialoguer jusqu'à 2,5Gpbs soit 2 500Mbps (donc 312,5Mo/s)
|
||||
- RJ45 5G : Même prise, pouvant dialoguer jusqu'à 5Gpbs (donc 625Mo/s)
|
||||
- RJ45 10G Base T : Même prise pouvant dialoguer jusqu'à 10Gb/s (soit 1,25Go/s)
|
||||
- SFP 1G : Prise SFP, généralement utilisée pour la fibre optique, pouvant dialoguer jusqu'à 1Gpbs
|
||||
- SFP+ 10G : Prise SFP amélioriée, aussi utilisée pour la fibre optique, pouvant dialoguer jusqu'à 10Gb/s.
|
||||
|
||||
|
||||
### Les cables Ethernet
|
||||
|
||||
Ces cables en cuivre disposent généralement d'une prise dite `RJ45`. C'est la prise la plus standard du matériel réseau, que vous retrouvez sur vos routeurs et vos switch.
|
||||
|
||||
Ils sont définis en plusieurs catégorie, définissant le débit maximal selon la distance :
|
||||
|
||||
| Débit | Type de câble | Distance max |
|
||||
|----------|----------------|--------------|
|
||||
| 10 Gb/s | CAT 6A | 100 m |
|
||||
| | CAT 6 | 55 m |
|
||||
| | CAT 5e | 30 m |
|
||||
| 5 Gb/s | CAT 6 | 100 m |
|
||||
| | CAT 5e | 30 m |
|
||||
| 2.5 Gb/s | CAT 5e | 100 m |
|
||||
| 1 Gb/s | CAT 5e | 100 m |
|
||||
| 100 Mbs | CAT 5 | 100 m |
|
||||
|
||||
Certains de ces cables sont plats, ronds, blindés (à relier à la terre), etc. Choisissez en fonction de votre installation. ce qu'il faut comprendre, c'est que pour relier un appareil qui dispose d'une prise RJ45 ethernet 2.5 Gb/s sur un routeur 2.5G b/s, il faut au moins un cable `CAT 5e`.
|
||||
En revanche, si votre appareil est limité à 100 Mb/s, vous n'avez besoin que d'un cable `CAT 5`.
|
||||
|
||||
Aujourd'hui, dans les nouvelles construction, la norme est d'installer des cables `CAT 6A` dans les murs. Ainsi, les prises murales sont prêtes à accepter du 10 Gb/s sur 100 m
|
||||
|
||||
### Les cables optiques
|
||||
Très fins mais très fragile, on commence à les voir de plus en plus dans les installations chez soi. A commencer par le cable opérateur qui est relié entre votre prise fibre et votre box/routeur. Ils ont l'avantage de prendre peu de place, de ne rien consommer comparé à un cable en cuivre qui subit des déperdition d'energie liée à la chauffe, de n'emettre aucun rayonnement (pas besoin de blindage, pas de perturbation du signal) et d'accepter des débits très élevés sur de longue distance.
|
||||
|
||||
Pour du réseau local, il faut comprendre qu'il existe plusieurs types de cables fibres, conditionnant le débit selon la distance, et conditionnant le type de `transceiver` à utiliser. En effet, les cables fibres se branchent sur les ports SFP+ de vos appareils, via un petit objet qui traduit le signal lumineux en information électrique, et qui, dans le sens inverse, traduit les informations électrique en signal lumineux.
|
||||
|
||||
Globalement, pour du réseau local, on évitera de choisir autre chose qu'un cable multimode OM3 avec prise LC, avec un transceiver LC SFP+ 10G. Cela permet de relier des appareils en 10 Gb/s et est compatible avec la plupart des appareils disposant d'un port SFP+.
|
||||
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- __Attention :__ Veillez à bien utiliser des `transceiver` compatibles avec vos materiels (routeur, switch ou appareil). Il n'existe pas encore de standard absolu, les constructeurs précisent généralement les marques compatibles.
|
||||
:::
|
||||
::
|
||||
|
||||
### Les cables DAC
|
||||
Ce sont des cables en cuivre fichés dans des `transceiver`. Ils permettent à deux ports SFP/SFP+ de dialoguer, à courte distance, sans utiliser une fibre plus fragile ou d'adapteteur RJ45. Cependant, ils demandent plus d'énergie, la deperdition dans le cuivre etant non négligeable.
|
||||
|
||||
### Les transceiver SFP+
|
||||
Il permettent de connecter différents typle de cable à vos ports SFP/SFP+. Il en existe pour fibre optique, pour DAC et pour RJ45.
|
||||
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- Un transceiver RJ45 consommera beaucoup d'energie due à la deperdition naturelle dans le cuivre, et donc génerera beaucoup de chaleur. Il existe des transceiver basse consommation, consommant moins de 2W. De manière peu intuitive, ils sont généralement indiqués pour des cables plus long (80m au lieu de 30m). Ils sont conseillés plutot que ceux indiqués pour les cables plus court car ces derniers dégagent plus de chaleur et demandent plus d'energie, ce qui peut poser des problemes de compatibilité avec votre matériel, et dégrader votre réseau, voir le couper.
|
||||
:::
|
||||
::
|
||||
@@ -1,77 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: Le ProloNAS
|
||||
description: Construire un serveur domestique performant avec un mini PC Intel N100 — guide pratique pour démarrer l'auto-hébergement pour moins de 130 €.
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# Le ProloNAS
|
||||
|
||||
Lorsque l'on se lance dans l'aventure de son serveur chez soi, on se pose souvent la question _« Avec quoi dois-je commencer ? »_, _« Cela coûte cher non ? »_, et on finit soit par ne pas le faire, soit par acheter un NAS propriétaire qu'on jettera à la poubelle au bout d'un an quand on aura compris que cela n'apporte rien à part des problèmes et de l'argent jeté par la fenêtre.
|
||||
|
||||
Un serveur, ce n'est pas une armoire. C'est n'importe quel ordinateur capable de faire tourner linux. C'est pour cela que les mini PC à base de processeurs N100 sont populaires. Pour 100-130€ sur des plateformes chinoises on a une machine sous linux capable de tourner H24 des années durant, et d'executer tout ce qu'on attend d'un serveur/cloud chez soi sans perdre en performances.
|
||||
|
||||
Ce n'est objectivement pas cher et n'importe qui s'intéressant au sujet peut se lancer dans l'aventure.
|
||||
|
||||
Un Mini PC à 100 balles + un dock USB à 50 balles accueillant des disques durs cela donne une plateforme à 150 balles versus entre 350 et 1200€ chez les constructeurs.
|
||||
|
||||
C'est tout simplement ça le **ProloNAS, un NAS accessible pour les prolo**. Charge à vous ensuite de calibrer votre besoin en Disques Durs.
|
||||
|
||||
En exemple :
|
||||
|
||||
- Mini PC - **Attention : prendre 16GB - 512GB** : [Aliexpress](https://fr.aliexpress.com/item/1005008477986765.html)
|
||||
- DAS (Direct Attached Storage) - **Attention : prendre "EU plug"** : [Aliexpress](https://fr.aliexpress.com/item/1005007933987260.html)
|
||||
|
||||
- Alternatives avec ventilateur et plus soigné : [Amazon](https://www.amazon.fr/Boîtier-Disque-Ventilateur-Supportant-Capacité/dp/B0DD3GSSCX)
|
||||
|
||||
Je précise que cela ne sont pas des liens affiliés, prenez ce que vous voulez.
|
||||
|
||||

|
||||
|
||||
## Pourquoi un NAS ?
|
||||
|
||||
Un NAS (Network Attached Storage), c'est une machine conçue autour d'un espace de stockage ayant vocation a être partagé sur un réseau. L'idée du NAS, c'est d'avoir un stockage fiable et sécurisé sur lequel s'appuie nos usages et nos applicatifs comme des données cloud par exemple (un drive comme [Nextcloud](/serveex/cloud/nextcloud), une synchro photo comme [Immich](/serveex/cloud/immich). Mais aussi vos media comme vos films (par exemple avec [Plex](/serveex/media/plex)) ou les videos de vos caméra de surveillance.
|
||||
|
||||
**Mais pourquoi un Mini PC sans DAS ne suffirait il pas ?** Bien sûr, un simple mini PC avec ses 1 à 2To de stockage devraient suffire pour la plupart des gens. Et les films pourraient tenir dans un disque dur externe de quelques TB supplémentaire. En revanche ce n'est pas une solution fiable ni extensible de faire tourner ses applications et usages sur du stockage qui au moindre choc, au moindre probleme, fait perdre vos données définitivement.
|
||||
|
||||
Le vrai NAS est construit autour de la fiabilité du support qui contient vos données. Il nécessite de mettre en place des stratégies de stockages type [RAID](/generalites/stockage/raid) afin de préserver vos données en cas de panne et de la sauvegarde en cas de corruption (comme les snapshot [ZFS](/generalites/stockage/zfs)).
|
||||
|
||||
Vous l'aurez compris, l'idée du NAS c'est de déporter chez vous tout ce que vous confiez actuellement à des tiers, tout en assurant la fiabilité du support et la sauvegarde des données stockées.
|
||||
|
||||
## Le problème des NAS grands publics
|
||||
|
||||
De nombreuses marques proposent des plateformes prêtes à accueillir vos disques, avec une palanquée de logiciels en Web UI reluisants. Synology, QNAP, Ugreen, j'en passe et des meilleurs. Cela semble plus facile, pourquoi ne pas se laisser tenter ?
|
||||
|
||||
### Beh le prix déjà !
|
||||
|
||||
350€, c'est le prix de départ d'un NAS 2 baies (sans les disques) chez Syno, avec un processeur qui date de 2019, pas de logement pour un SSD pour l'OS, et 2 pauvres giga-octets de RAM.
|
||||
|
||||
Rappelez vous le **ProloNAS** : un N100 4 coeurs, 16Go de RAM, un SSD de 512Go, pour 100-130€ et un DAS 4 baies à 55€. Soit deux fois moins que le Syno 2 baies, 4 fois moins que le Syno 4 baies.
|
||||
|
||||
### OS limités
|
||||
|
||||
« Oui mais ok l'argument du prix, mais au moins tu lances le truc et c'est bon, t'as de jolies applications qui tournent toute seule sans maintenance ».
|
||||
|
||||
Une année. Une année c'est le temps qu'il m'a fallu pour jeter à la poubelle mon Syno en me disant que j'aurais du dès le départ partir sur mon **ProloNAS** (devenu un vrai serveur, depuis).
|
||||
|
||||
Les constructeurs vous mettent à disposition des OS linux customisés à leur sauce, ne partageant pas les catalogues d'applications linux des distributions majeures, avec des noyaux linux datant souvent de l'antiquité, et surtout des OS tres fermés ne vous permettant pas de développer votre NAS exactement selon vos besoins.
|
||||
|
||||
En gros, soit vous utilisez leurs applications, soit vous rentrer dans un monde de souffrance. Pour donner un exemple, de nombreux conteneurs docker ne fonctionnent pas sur ces NAS constructeurs car le kernel est tellement vieux qu'il ne peut supporter les versions pourtant pas toujours récentes de docker.
|
||||
|
||||
|
||||
### Dépendance des mises à jours propriétaires
|
||||
|
||||
« Oui mais moi j'ai pas d'autre usages que ce que leurs applicatifs natifs proposent ». Oui oui, moi aussi j'ai cru ça. Mais 1 an après mon Syno, mes usages ont explosés. Media center, gestion de mot de passe, plateforme git, plateforme de développement, Authentification forte et SSO hébergement web... Pourquoi etre bloqués par les solutions constructeurs jamais excellentes, souvent baclées et compatibles avec rien ?
|
||||
|
||||
D'autre part, ces applicatifs, vous devenez dépendant de la bonne volonté du constructeur, en terme de sécurité, de mises à jour, et de disponibilités. Je préfère confier cette dépendance à des projets open-source, mis à jour plus régulièrement et ne dépendant pas de la bonne volonté d'un board commercial.
|
||||
|
||||
Et cela ne s'arrête pas là, qui vous dit que les disques dur que vous avez inséré dans ces NAS proproietaires vont etre supportés ? Synology a rendu incompatible son matériel avec les marques n'ayant pas un partenariat avec eux, afin de booster la vente de leurs propres disques.
|
||||
|
||||
Qui vous dit que votre media center pourra profiter des performances de l'iGPU de votre processeur pour streamer vos media vers vos appareils ? [Synology a désactivé le transcodage matériel de ses NAS](https://www.cachem.fr/synology-desactive-transcodage-materiel-nas/).
|
||||
|
||||
Bref, vous n'avez aucun pouvoir sur un produit qui n'est pas réellement ni ouvert ni à vous.
|
||||
|
||||
## OK mais omment je passe de mon Mini PC Serveex à un ProloNAS ?
|
||||
|
||||
Comme dit plus haut, avec un DAS (hub disque) + de quoi faire du [RAID](/generalites/stockage/raid) avec [ZFS](/generalites/stockage/zfs) par exemple.
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
navigation.title: Hardware
|
||||
icon: lucide:server
|
||||
@@ -1,3 +0,0 @@
|
||||
icon: noto:open-book
|
||||
navigation.title: Généralités
|
||||
navigation.redirect: /generalites/reseau/nat
|
||||
@@ -1,280 +0,0 @@
|
||||
---
|
||||
icon: lucide:bookmark
|
||||
navigation: true
|
||||
title: Introduction
|
||||
description: Introduction à Serveex — un projet homelab pour auto-héberger ses services du quotidien avec Debian et Docker, sans dépendre de Google, Apple ou Netflix.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
## Un home lab par un débutant pour les débutants
|
||||
|
||||

|
||||
|
||||
**Serveex** c'est avant tout un projet personnel visant à héberger chez soi le plus de services possibles du quotidien sans passer par des plateformes propriétaires (Google, Apple, Netflix...). L'idée était d'expérimenter, d'apprendre, et de documenter chaque étape. C'est un projet purement pour la science, et n'a pas vocation à être utilisé en production.
|
||||
|
||||
Un grand merci à **Nipah**, pour le partage de ses connaissances infinies, et surtout pour sa patience.
|
||||
|
||||
::alert{type="info"}
|
||||
**Pré-requis :**
|
||||
:::list{type="primary"}
|
||||
- Posséder [un VPS en ligne](https://www.it-connect.fr/les-serveurs-prives-virtuels-vps-pour-les-debutants/) ou une machine locale : idéalement un mini PC (on trouve des N100 pour 100€), mais fonctionne aussi sur laptop ou [une machine virtuelle](https://openclassrooms.com/fr/courses/2035806-virtualisez-votre-architecture-et-vos-environnements-de-travail/6313946-installez-virtualbox). Les [Freebox Delta/Ultra proposent des machines virtuelles](https://next.ink/3493/machines-virtuelles-et-freebox-delta-comment-heberger-votre-premiere-page-web/).
|
||||
- Savoir configurer les [règles NAT d'un routeur et attribuer des baux DHCP](/generalites/reseau/nat)
|
||||
- Savoir configurer la [zone DNS d'un nom de domaine](/generalites/reseau/dns)
|
||||
:::
|
||||
::
|
||||
|
||||
<p align="center">
|
||||
<img src="/img/serveex/serveex.svg" align="center" width="700">
|
||||
|
||||
L'objectif étant d'etre facilement déployable et facile à migrer, voici sa structure :
|
||||
|
||||
::card-grid{grid-template-columns="repeat(2, minmax(0, 1fr));"}
|
||||
#title
|
||||
Le coeur du serveur
|
||||
|
||||
#root
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
|
||||
#default
|
||||
|
||||
::card{icon=logos:debian}
|
||||
#title
|
||||
__Système d'exploitation__
|
||||
#description
|
||||
[Installer et configurer Debian 13](/serveex/coeur/installation)
|
||||
::
|
||||
|
||||
::card{icon=logos:docker-icon}
|
||||
#title
|
||||
__Moteur de conteneur__
|
||||
#description
|
||||
[Installer Docker](/serveex/coeur/docker)
|
||||
::
|
||||
|
||||
::card{icon=carbon:container-registry style="color: rgb(41, 194, 243);" }
|
||||
#title
|
||||
__Docker GUI__
|
||||
#description
|
||||
[Installer et déployer Dockge](/serveex/coeur/docker#installer-dockge-pour-gérer-et-déployer-les-conteneurs)
|
||||
::
|
||||
|
||||
::card{icon=noto:globe-showing-americas}
|
||||
#title
|
||||
__Reverse Proxy__
|
||||
#description
|
||||
[Exposez vos services avec SWAG](/serveex/coeur/swag)
|
||||
::
|
||||
::
|
||||
|
||||
::card-grid
|
||||
#title
|
||||
La sécurité
|
||||
|
||||
#root
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
|
||||
#default
|
||||
|
||||
::card{icon=simple-icons:wireguard style="color: #88171a;"}
|
||||
#title
|
||||
__VPN__
|
||||
#description
|
||||
[Installer et déployer Wireguard](/serveex/securite/wireguard)
|
||||
::
|
||||
|
||||
::card{icon=noto:key}
|
||||
#title
|
||||
__SSO & MFA__
|
||||
#description
|
||||
[Installer et déployer Authentik](/serveex/securite/authentik)
|
||||
::
|
||||
|
||||
::card{icon=logos:cloudflare-icon}
|
||||
#title
|
||||
__Zero Trust__
|
||||
#description
|
||||
[Installer et déployer Cloudflared](/serveex/securite/cloudflare)
|
||||
::
|
||||
::
|
||||
|
||||
::card-grid
|
||||
#title
|
||||
Monitoring
|
||||
|
||||
#root
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
|
||||
#default
|
||||
|
||||
::card{icon=solar:pulse-linear style="color: rgb(99, 222, 144);"}
|
||||
#title
|
||||
__Etat des services__
|
||||
#description
|
||||
[Installer et déployer Uptime-Kuma](/serveex/monitoring/uptime-kuma)
|
||||
::
|
||||
|
||||
::card{icon=lucide:logs style="color: #1AD6FF;"}
|
||||
#title
|
||||
__Gestion des logs__
|
||||
#description
|
||||
[Installer et déployer Dozzle](/serveex/monitoring/dozzle)
|
||||
::
|
||||
|
||||
::card{icon=noto:rabbit style="color: #1AD6FF;"}
|
||||
#title
|
||||
__Gestion de la connexion__
|
||||
#description
|
||||
[Installer et déployer Speedtest Tracker](/serveex/monitoring/speedtest-tracker)
|
||||
::
|
||||
|
||||
::card{icon=lucide:chart-column-decreasing style="color:rgb(26, 255, 213);"}
|
||||
#title
|
||||
__Etat des ressources__
|
||||
#description
|
||||
[Installer et déployer Beszel](/serveex/monitoring/beszel)
|
||||
::
|
||||
|
||||
::card{icon=lucide:circle-power style="color:rgb(228, 117, 117);"}
|
||||
#title
|
||||
__Wake on Lan__
|
||||
#description
|
||||
[Installer et déployer UpSnap](/serveex/monitoring/upsnap)
|
||||
::
|
||||
::
|
||||
|
||||
::card-grid
|
||||
#title
|
||||
Media
|
||||
|
||||
#root
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
|
||||
#default
|
||||
|
||||
::card{icon=cbi:plex-alt style="color: rgb(229, 160, 13);"}
|
||||
#title
|
||||
__Media__
|
||||
#description
|
||||
[Installer et déployer Plex](/serveex/media/plex)
|
||||
::
|
||||
|
||||
::card{icon=cbi:qbittorrent style="color: rgb(#2f67ba);"}
|
||||
#title
|
||||
__Seedbox__
|
||||
#description
|
||||
[Installer et déployer Qbittorrent](/serveex/media/qbittorrent)
|
||||
::
|
||||
::
|
||||
|
||||
::card-grid
|
||||
#title
|
||||
Cloud Drive & Photos
|
||||
|
||||
#root
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
|
||||
#default
|
||||
|
||||
::card{icon=cib:nextcloud style="color: rgb(0, 104, 161);"}
|
||||
#title
|
||||
__Drive__
|
||||
#description
|
||||
[Installer et déployer Nextcloud](/serveex/cloud/nextcloud)
|
||||
::
|
||||
|
||||
::card{icon=simple-icons:immich style="color: #ed79b5;"}
|
||||
#title
|
||||
__Photos__
|
||||
#description
|
||||
[Installer et déployer Immich](/serveex/cloud/immich)
|
||||
::
|
||||
::
|
||||
|
||||
::card-grid
|
||||
#title
|
||||
Fichiers & partage
|
||||
|
||||
#root
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
|
||||
#default
|
||||
|
||||
::card{icon=noto:open-file-folder }
|
||||
#title
|
||||
__Explorateur de fichier__
|
||||
#description
|
||||
[Installer et déployer file-browser](/serveex/files/file-browser)
|
||||
::
|
||||
|
||||
::card{icon=carbon:share style="color: #47428e;" }
|
||||
#title
|
||||
__Partage__
|
||||
#description
|
||||
[Installer et déployer Pingvin](/serveex/files/pingvin)
|
||||
::
|
||||
|
||||
::
|
||||
|
||||
|
||||
::card-grid
|
||||
#title
|
||||
Outils de développement
|
||||
|
||||
#root
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
|
||||
#default
|
||||
|
||||
::card{icon=logos:visual-studio-code}
|
||||
#title
|
||||
__Visual Studio Code__
|
||||
#description
|
||||
[Installer et déployer code-server](/serveex/development/code-server)
|
||||
::
|
||||
|
||||
::card{icon=simple-icons:gitea style="color: #9ee773;"}
|
||||
#title
|
||||
__Git Repository__
|
||||
#description
|
||||
[Installer et déployer Gitea](/serveex/development/gitea)
|
||||
::
|
||||
|
||||
::card{icon=noto:hammer-and-wrench }
|
||||
#title
|
||||
__Outils__
|
||||
#description
|
||||
[Installer et déployer IT Tools](/serveex/development/it-tools)
|
||||
::
|
||||
::
|
||||
|
||||
::card-grid
|
||||
#title
|
||||
Applications utiles
|
||||
|
||||
#root
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
|
||||
#default
|
||||
|
||||
::card{icon=cbi:adguard style="color: #67b279;"}
|
||||
#title
|
||||
__DNS anti-pub et filtres__
|
||||
#description
|
||||
[Installer et déployer Adguard Home](/serveex/apps/adguard)
|
||||
::
|
||||
|
||||
::card{icon=cbi:bitwarden style="color: rgb(25 128 255);"}
|
||||
#title
|
||||
__Gestionnaire de mots de passe__
|
||||
#description
|
||||
[Installer et déployer Vaultwarden](/serveex/apps/vaultwarden)
|
||||
::
|
||||
::
|
||||
|
||||
## A venir
|
||||
---
|
||||
- Homepage, pour avoir tout vos services en un coup d'oeil et y accéder facilement
|
||||
- Mkdocs pour votre documentation
|
||||
- Docus, alternative à Mkdocs
|
||||
- UpSnap pour réveiller vos machines à distance
|
||||
@@ -1,77 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: Debian 13
|
||||
description: Guide pas à pas pour installer Debian 13 sur un serveur et configurer l'accès SSH, les paquets essentiels et un système de base prêt à l'emploi.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# Debian 13
|
||||
::alert{type="info"}
|
||||
🎯 __Objectif :__ Installer Debian 13 et les dépendances principales pour avoir un OS pret à l'emploi, joignable en SSH.
|
||||
::
|
||||
|
||||

|
||||
|
||||
## Installation
|
||||
---
|
||||
1. [Paramètrage BIOS](https://www.debian.org/releases/stable/amd64/ch03s06.fr.html#bios-setup)
|
||||
2. [Téléchargement de l'image Debian 13](https://www.debian.org/download.fr.html)
|
||||
3. [USB bootable (Rufus)](https://dev.to/devops2808/how-to-create-bootable-usb-installer-for-debian-12-4f66)
|
||||
4. [Installer Debian et configurer SSH](https://www.howtoforge.com/tutorial/debian-minimal-server/)
|
||||
5. Installer sudo et ajouter un utilisateur au groupe sudo, pour les privilèges administrateurs
|
||||
Se connecter en root :
|
||||
```sh
|
||||
su -
|
||||
```
|
||||
mettre son mot de passe puis taper :
|
||||
```sh
|
||||
apt install sudo
|
||||
```
|
||||
Ajouter l'utilisateur au groupe sudo :
|
||||
```sh
|
||||
adduser <nomdutilisateur> sudo
|
||||
```
|
||||
|
||||
La prochaine fois que l'utilisateur se connectera, il pourra utiliser la commande `sudo` et ainsi executer des commandes avec les privilèges administrateurs.
|
||||
|
||||
|
||||
6. [Tout savoir sur la connexion à distance à la console (SSH)](https://www.digitalocean.com/community/tutorials/ssh-essentials-working-with-ssh-servers-clients-and-keys)
|
||||
7. Optionnel - [UPS client en cas de coupure](https://www.sindastra.de/p/2078/how-to-connect-linux-server-to-synology-ups-server) / [et aussi](https://www.reddit.com/r/synology/comments/gtkjam/use_synology_nas_as_ups_server_to_safely_power/)
|
||||
8. Optionnel - Réveil en cas de coupure de courant -> régler le BIOS S0 state
|
||||
9. Optionnel - [Réveiller le serveur à distance (WoW - WoL)](https://dev.to/zakery1369/enable-wake-on-lan-on-debian-4ljd)
|
||||
|
||||
## CLI apps à avoir près de soi
|
||||
---
|
||||
Quelques app que vous utiliserez forcément à un moment donné, autant les installer dès le départ
|
||||
```sh
|
||||
sudo apt update
|
||||
sudo apt upgrade
|
||||
sudo apt install vim btop ranger git duf neofetch samba cifs-utils tree unzip
|
||||
```
|
||||
|
||||
En plus :
|
||||
|
||||
- [gping](https://www.linode.com/docs/guides/how-to-use-gping-on-linux/) - Outil graphique de ping
|
||||
- [lazydocker](https://github.com/jesseduffield/lazydocker) - Gestion de conteneurs docker en CLI
|
||||
|
||||
## Fonctions utiles
|
||||
---
|
||||
### Pare-feu
|
||||
- [ufw](https://www.zenarmor.com/docs/network-security-tutorials/how-to-set-up-a-firewall-with-ufw-on-debian)
|
||||
- [Firewalld](https://linuxcapable.com/how-to-install-firewalld-on-debian-linux/)
|
||||
|
||||
### Partage Samba (accès à un disque réseau distant)
|
||||
- [Créer et accéder à un partage Samba](/generalites/reseau/samba)
|
||||
|
||||
|
||||
### Transfert de fichier via rsync
|
||||
|
||||
```sh
|
||||
sudo rsync -avhHSP /source /destination
|
||||
```
|
||||
::alert{type="info" icon="exclamation-circle"}
|
||||
:::list{type="info"}
|
||||
- Ajoutez ` --exclude @eaDir`{lang=shell} si la source est un NAS Synology
|
||||
:::
|
||||
::
|
||||
@@ -1,177 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: Docker
|
||||
description: Installer Docker et Dockge sur Debian pour déployer et gérer des services auto-hébergés avec de simples stacks de conteneurs.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# Docker
|
||||
|
||||
Docker, pour installer des services déployables en quelques secondes, et les manager en quelques commandes/clics.
|
||||
|
||||
::alert{type="info"}
|
||||
🎯 __Objectifs :__
|
||||
- Installer [Docker](https://www.docker.com/)
|
||||
- Installer [Dockge](https://github.com/louislam/dockge) pour manager les stacks
|
||||
- Installer [Watchtower](https://github.com/containrrr/watchtower) pour mettre à jour les conteneurs
|
||||
::
|
||||
|
||||

|
||||
|
||||
## Installer docker
|
||||
---
|
||||
Installez les repo Docker et la clé GPG
|
||||
|
||||
```sh
|
||||
# Add Docker's official GPG key:
|
||||
sudo apt-get update
|
||||
sudo apt-get install ca-certificates curl
|
||||
sudo install -m 0755 -d /etc/apt/keyrings
|
||||
sudo curl -fsSL https://download.docker.com/linux/debian/gpg -o /etc/apt/keyrings/docker.asc
|
||||
sudo chmod a+r /etc/apt/keyrings/docker.asc
|
||||
|
||||
# Add the repository to Apt sources:
|
||||
echo \
|
||||
"deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/debian \
|
||||
$(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
|
||||
sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
|
||||
sudo apt-get update
|
||||
```
|
||||
Installez les package
|
||||
|
||||
```sh
|
||||
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
|
||||
```
|
||||
Et voilà !
|
||||
|
||||
**Plus d'options** [Installer docker pour Debian 12](https://docs.docker.com/engine/install/debian/)
|
||||
|
||||
::alert{type="info" icon="exclamation-circle"}
|
||||
:::list{type="info"}
|
||||
- Dans toute la suite, on part du principe que les stacks sont installées dans le dossier `/docker`, créé grace à la commande :
|
||||
:::
|
||||
```sh
|
||||
sudo mkdir /docker
|
||||
::
|
||||
|
||||
## Installer [dockge](https://github.com/louislam/dockge) pour gérer et déployer les conteneurs
|
||||
---
|
||||
[Dockge](https://github.com/louislam/dockge) est un outil web permettant de créer, configurer, lancer et gérer des conteneurs pour Docker. C'est une interface simple, intuitive, qui est plus légère et plus facile pour les débutants que d'utiliser docker en CLI ou Portainer.
|
||||
|
||||

|
||||
|
||||
### Configuration
|
||||
|
||||
Plan des fichiers que nous allons modifier :
|
||||
|
||||
```sh
|
||||
root
|
||||
└── docker
|
||||
└── dockge
|
||||
└── compose.yml
|
||||
```
|
||||
|
||||
Créez le dossier de la stack :
|
||||
|
||||
```sh
|
||||
cd /docker
|
||||
sudo mkdir dockge
|
||||
```
|
||||
|
||||
Puis créez le fichier `compose.yml` dans ce dossier avec l'outil vim que vous avez installé préalablement (dans les outils CLI)
|
||||
|
||||
```sh
|
||||
cd /docker/dockge
|
||||
sudo vi compose.yml
|
||||
```
|
||||
Appuyer sur `i` pour rentrer en modif et copiez-collez ceci.
|
||||
|
||||
```yaml
|
||||
---
|
||||
services:
|
||||
dockge:
|
||||
image: louislam/dockge:1
|
||||
restart: unless-stopped
|
||||
container_name: dockge
|
||||
ports:
|
||||
- 3555:5001 # Le port joignable depuis le LAN sera 3555
|
||||
|
||||
volumes:
|
||||
- /var/run/docker.sock:/var/run/docker.sock
|
||||
- /docker/dockge/data:/app/data
|
||||
- /docker:/docker
|
||||
environment:
|
||||
- DOCKGE_STACKS_DIR=/docker
|
||||
```
|
||||
|
||||
Appuyez sur `Echap` pour quitter le mode modif et tapez `:x` pour enregistrer et quitter
|
||||
|
||||
|
||||
Pour lancer le conteneur, tapez :
|
||||
|
||||
```sh
|
||||
cd /docker/dockge
|
||||
sudo docker compose up -d
|
||||
```
|
||||
Une fois lancé, tapez dans votre navigateur `http://ipduserveur:3555` et vous tomberez sur la page de login.
|
||||
|
||||
Plus d'info sur [dockge et comment l'utiliser](https://github.com/louislam/dockge)
|
||||
|
||||
Et voilà, vous avez installé docker et un outil facile pour manager vos conteneurs !
|
||||
|
||||
## [Watchtower](https://watchtower.nickfedor.com/), pour mettre à jour automatiquement les conteneurs
|
||||
---
|
||||
Watchtower est un conteneur qui permet de vérifier les mise à jour et d'installer les nouvelles images sans effort, en ajoutant un simple label dans les fichiers `compose.yml` de vos conteneurs.
|
||||
|
||||
### Configuration
|
||||
|
||||
- Ouvrez Dockge dans votre navigateur
|
||||
- Cliquez sur `compose`
|
||||
- Nommez la stack `watchtower`
|
||||
- Copiez collez la configuration ci-dessous à la place de la configuration par défaut dans Dockge
|
||||
|
||||
```yaml
|
||||
---
|
||||
services:
|
||||
watchtower:
|
||||
container_name: watchtower
|
||||
image: ghcr.io/nicholas-fedor/watchtower:latest
|
||||
restart: unless-stopped
|
||||
env_file:
|
||||
- .env
|
||||
environment:
|
||||
- TZ=Europe/Paris
|
||||
- WATCHTOWER_SCHEDULE=${SCHEDULE}
|
||||
- WATCHTOWER_LABEL_ENABLE=true # watchtower scan tous les conteneurs qui ont le label com.centurylinklabs.watchtower.enable=true
|
||||
- WATCHTOWER_CLEANUP=true
|
||||
- WATCHTOWER_REMOVE_VOLUMES=true
|
||||
#Notifications Discord - décommenter si utilisé
|
||||
#- WATCHTOWER_NOTIFICATIONS=slack
|
||||
#- WATCHTOWER_NOTIFICATION_SLACK_IDENTIFIER=Watchtower
|
||||
#- WATCHTOWER_NOTIFICATION_SLACK_HOOK_URL=${WH_URL}
|
||||
volumes:
|
||||
- /var/run/docker.sock:/var/run/docker.sock
|
||||
```
|
||||
|
||||
Puis remplissez les données ci-dessous dans l'encart ".env" de Dockge
|
||||
|
||||
```properties
|
||||
SCHEDULE=
|
||||
WH_URL=
|
||||
```
|
||||
|
||||
| Propriété | Valeur | Exemples |
|
||||
|-------------------------|---------------------------------------------------------------------|----------------------------------------------|
|
||||
| `SCHEDULE`{lang=properties} | Format cron | `0 0 6 * * *` (tous les jours à 6h du matin) |
|
||||
| `WH_URL`{lang=properties} | URL du webhook de votre serveur Discord - ajouter `/slack` à la fin | `https://serveurdiscord/valeur/slack` |
|
||||
|
||||
|
||||
Pour que Watchtower surveille vos autres conteneurs, ajoutez ceci à vos conteneurs dans leur compose.yml :
|
||||
|
||||
```yaml
|
||||
labels:
|
||||
- com.centurylinklabs.watchtower.enable=true
|
||||
```
|
||||
|
||||
Puis relancez les stacks modifiés. Et voilà, vous avez une bonne carcasse pour commencer à installer les services qui vous plaisent !
|
||||
@@ -1,399 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: SWAG
|
||||
description: Configurer SWAG comme reverse proxy avec SSL automatique, exposer vos services en toute sécurité et activer le blocage géographique sur votre homelab.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# SWAG
|
||||
|
||||
::alert{type="info"}
|
||||
🎯 __Objectifs :__
|
||||
- Installer Swag
|
||||
- Activer le SSL
|
||||
- Accéder au tableau de bord
|
||||
- Configurer le blocage régional
|
||||
- Exposer Dockge
|
||||
::
|
||||
|
||||
[Swag](https://docs.linuxserver.io/general/swag/) est le noyau de ce homelab. C'est un reverse proxy puissant qui permet d'exposer des services sur le net via un ou des noms de domaines, en se chargeant de l'émission des certificats SSL (pour garder des connexions chiffrées), du routage des requêtes et de la sécurisation des accès (par authent HTTP ou par SSO comme Authelia ou Authentik). Toute la doc nécessaire se [situe ici](https://docs.linuxserver.io/general/swag).
|
||||
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- SWAG n'a pour utilité que l'exposition de vos services sur internet. C'est à dire, y accéder via une url publique du type `https://service.mondomaine.fr`. Si vous ne souhaitez pas exposer vos services et plutôt utiliser systématiquement un VPN pour vous connecter à vos services à distance, vous pouvez directement aller [par ici](/serveex/securite/wireguard).
|
||||
:::
|
||||
::
|
||||
|
||||
Ci-dessous, vous trouverez un exemple, exposant Dockge. Nous installerons SWAG, ainsi que le mod dbip servant à bloquer les connexions en fonction de la géoloc, ainsi que le mod dashboard qui permet de piloter le fonctionnement de swag, fail2ban et la géoloc.
|
||||
|
||||
**Principe d'un reverse proxy et application dans notre cas :**
|
||||
|
||||

|
||||
|
||||
## Installation
|
||||
---
|
||||
|
||||
::alert{type="info" icon="exclamation-circle"}
|
||||
:::list{type="info"}
|
||||
- Ce tutoriel part du principe que vous avez un nom de domaine qui pointe vers votre serveur, et que votre box a une règle NAT qui redirige le port `443` vers l'adresse IP et le port `443` de votre serveur. Le nom de domaine d'exemple sera `mondomaine.fr`.
|
||||
:::
|
||||
::
|
||||
|
||||
Plan des fichiers que nous allons modifier :
|
||||
|
||||
```sh
|
||||
root
|
||||
└── docker
|
||||
└── swag
|
||||
├── config
|
||||
│ ├── dns-conf
|
||||
│ │ └── ovh.ini
|
||||
│ └── nginx
|
||||
│ ├── dbip.conf
|
||||
│ ├── nginx.conf
|
||||
│ └── proxy-confs
|
||||
│ └── dockge.subdomain.conf
|
||||
├── compose.yml
|
||||
└── .env
|
||||
```
|
||||
|
||||
Ouvrez Dockge dans votre navigateur, cliquez sur `compose`, nommez la stack `swag` et copiez la conf ci-dessous
|
||||
|
||||
``` yaml
|
||||
---
|
||||
services:
|
||||
swag:
|
||||
image: lscr.io/linuxserver/swag:latest
|
||||
container_name: swag
|
||||
cap_add:
|
||||
- NET_ADMIN
|
||||
env_file:
|
||||
- .env
|
||||
environment:
|
||||
- TZ=Europe/Paris
|
||||
- URL=${DOMAIN}
|
||||
- EXTRA_DOMAINS=${DOMAINS}
|
||||
- SUBDOMAINS=wildcard # couvre les sous-domaines
|
||||
- VALIDATION=dns
|
||||
- DNSPLUGIN=${PLUGIN}
|
||||
- EMAIL=${EMAIL}
|
||||
- DOCKER_MODS=linuxserver/mods:swag-dbip|linuxserver/mods:swag-dashboard|linuxserver/mods:swag-auto-reload
|
||||
volumes:
|
||||
- /docker/swag/config:/config
|
||||
ports:
|
||||
- 80:80
|
||||
- 443:443
|
||||
- 81:81 # Nécessaire pour le dashboard
|
||||
restart: unless-stopped
|
||||
networks:
|
||||
- swag
|
||||
|
||||
networks:
|
||||
swag:
|
||||
name: swag_default
|
||||
|
||||
```
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__
|
||||
ajoutez le label de watchtower dans chaque conteneur afin d'automatiser les mises à jour
|
||||
|
||||
```yaml
|
||||
services:
|
||||
swag:
|
||||
#...
|
||||
labels:
|
||||
- com.centurylinklabs.watchtower.enable=true
|
||||
::
|
||||
|
||||
Puis dans le `.env` :
|
||||
|
||||
```properties
|
||||
DOMAIN=
|
||||
DOMAINS=
|
||||
EMAIL=
|
||||
PLUGIN=
|
||||
```
|
||||
|
||||
Remplissez comme suit
|
||||
|
||||
| Propriété | Valeur | Exemples |
|
||||
|--------------------------|---------------------------------------------------------------------------|-----------------------|
|
||||
| ` DOMAIN`{lang=properties} | Votre domaine (cela couvre aussi tous les sous-domaines) | `mondomaine.fr` |
|
||||
| ` DOMAINS`{lang=properties} | Vos éventuels autres domaines | `monsecondomaine.fr` |
|
||||
| ` EMAIL`{lang=properties} | Votre email, pour générer le certificat | `votre@email.fr` |
|
||||
| ` PLUGIN`{lang=properties} | Le plugin pour générer le certificat, lié à votre [fournisseur de zone DNS](https://docs.linuxserver.io/general/swag/) | `ovh`<br>`cloudflare` |
|
||||
|
||||
Ici nous partons du principe que votre zone DNS est chez OVH. Déployez la stack une premiere fois. Dans les logs vous verrez qu'il n'arrivera pas à créer de certificat SSL car le fichier ovh.ini renvoi une erreur. Arretez la stack.
|
||||
|
||||
En CLI, allez dans le dossier dns-conf et éditez le fichier `ovh.ini` :
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce pour les allergiques au terminal :__
|
||||
vous pouvez utiliser [File Browser](/serveex/files/file-browser) pour naviguer dans vos fichier et éditer vos documents au lieu d'utiliser les commandes du terminal.
|
||||
::
|
||||
|
||||
|
||||
```sh
|
||||
sudo vi /docker/swag/config/dns-conf/ovh.ini
|
||||
```
|
||||
|
||||
Voici ce qui s'affiche :
|
||||
|
||||
```properties
|
||||
# Instructions: https://github.com/certbot/certbot/blob/master/certbot-dns-ovh/certbot_dns_ovh/__init__.py#L20
|
||||
# Replace with your values
|
||||
dns_ovh_endpoint = ovh-eu
|
||||
dns_ovh_application_key =
|
||||
dns_ovh_application_secret =
|
||||
dns_ovh_consumer_key =
|
||||
```
|
||||
Authentifiez vous et créez [votre token ici](https://www.ovh.com/auth/?onsuccess=https%3A%2F%2Fwww.ovh.com%2Fauth%2Fapi%2FcreateToken).
|
||||
|
||||
Les permissions à configurer sont les suivantes :
|
||||
|
||||
* ``GET /domain/zone/*``
|
||||
* ``PUT /domain/zone/*``
|
||||
* ``POST /domain/zone/*``
|
||||
* ``DELETE /domain/zone/*``
|
||||
|
||||
Notez les 3 clés temporairement et renseignez le fichier `ovh.ini`. (avec vim, `i` pour passer en modif, `Echap` quand c'est fini, `:x` pour sauvegarder et quitter)
|
||||
|
||||
Sauvegardez et quittez le fichier.
|
||||
|
||||
Configurez aussi swag pour qu'il accède à DBIP, le module de gestion des accès par géolocalisation /Ouvrez le fichier nginx.conf
|
||||
|
||||
```sh
|
||||
sudo vi /docker/swag/config/nginx/nginx.conf
|
||||
```
|
||||
|
||||
Et ajoutez la ligne suivante en dessous de la section `http` :
|
||||
|
||||
```nginx
|
||||
include /config/nginx/dbip.conf
|
||||
```
|
||||
|
||||
Relancez la stack dans Dockge, cette fois le certificat SSL est bien émis ! Vérifiez dans les logs que le serveur est bien ready.
|
||||
|
||||
## Dashboard
|
||||
---
|
||||
Accedez au dashboard via votre réseau local en tapant `http//ipdevotreserveur:81`
|
||||
A gauche, vous trouverez la liste des services actuellement "proxied" (aucun pour le moment). A droite, les IP bannies. En-dessous, une liste d'indicateurs. pour le détail, [c'est par ici](https://www.linuxserver.io/blog/introducing-swag-dashboard).
|
||||
|
||||

|
||||
|
||||
## DBIP
|
||||
---
|
||||
DBIP permet de bloquer les connexions en fonction des pays. Il s'appuie sur le fichier de config nommé `dbip.conf` dans `/docker/swag/config/nginx`. [Plus d'info ici](https://virtualize.link/secure/).
|
||||
|
||||
Dans cet exemple, nous allons le configurer pour bloquer une liste de pays connus pour etre à l'origine de la plupart des connexions malveillantes. Nous allons également configurer une variable au cas où nous souhaiterions permettre au réseau interne du serveur, au réseau local de votre box ainsi qu'à un éventuel vpn en 10.x.x.x de pouvoir accéder à vos services, mais pas directement à internet.
|
||||
|
||||
La configuration est activable ou désactivable pour chaque service qui sera proxied (voir exemple de Dockge plus bas).
|
||||
|
||||
Ouvrez `dbip.conf` :
|
||||
|
||||
```sh
|
||||
sudo vi /docker/swag/config/nginx/dbip.conf
|
||||
```
|
||||
|
||||
Faites vos modifications ([voir documentation](https://github.com/linuxserver/docker-mods/tree/swag-dbip)), ou prenez l'exemple suivant:
|
||||
|
||||
```nginx
|
||||
geoip2 /config/geoip2db/dbip-country-lite.mmdb {
|
||||
auto_reload 1w;
|
||||
$geoip2_data_continent_code continent code;
|
||||
$geoip2_data_country_iso_code country iso_code;
|
||||
}
|
||||
|
||||
# Country Codes: https://en.wikipedia.org/wiki/ISO_3166-2
|
||||
|
||||
map $geoip2_data_country_iso_code $geo-whitelist {
|
||||
# default yes;
|
||||
# Example for whitelisting a country, comment out 'default yes;' above and uncomment 'default no;' and the whitelisted country below
|
||||
default no;
|
||||
FR yes;
|
||||
}
|
||||
|
||||
map $geoip2_data_country_iso_code $geo-blacklist {
|
||||
default yes;
|
||||
# Example for blacklisting a country, uncomment the blacklisted country below
|
||||
CN no; #China
|
||||
RU no; #Russia
|
||||
HK no; #Hong Kong
|
||||
IN no; #India
|
||||
IR no; #Iran
|
||||
VN no; #Vietnam
|
||||
TR no; #Turkey
|
||||
EG no; #Egypt
|
||||
MX no; #Mexico
|
||||
JP no; #Japan
|
||||
KR no; #South Korea
|
||||
KP no; #North Korea
|
||||
PE no; #Peru
|
||||
BR no; #Brazil
|
||||
UA no; #Ukraine
|
||||
ID no; #Indonesia
|
||||
TH no; #Thailand
|
||||
}
|
||||
|
||||
geo $lan-ip {
|
||||
default no;
|
||||
10.0.0.0/8 yes;
|
||||
172.16.0.0/12 yes;
|
||||
192.168.0.0/16 yes;
|
||||
127.0.0.1 yes;
|
||||
}
|
||||
```
|
||||
|
||||
Sauvegardez et quittez. Redémarrez la stack.
|
||||
|
||||
Dans les fichiers de conf des domaines (section suivante), vous pourrez activer ou désactiver la whitelist ou la blacklist ([voir documentation ici](https://www.forum-nas.fr/threads/tuto-installer-swag-en-docker-reverse-proxy.15057/)). Dans notre cas, la whitelist laisse uniquement passer les requêtes françaises. La blacklist laisse passer tout le monde sauf la liste de pays mentionnée. On utilisera donc la blacklist, sur ce modèle :
|
||||
|
||||
```nginx
|
||||
server {
|
||||
listen 443 ssl;
|
||||
listen [::]:443 ssl;
|
||||
|
||||
server_name some-app.*;
|
||||
include /config/nginx/ssl.conf;
|
||||
client_max_body_size 0;
|
||||
|
||||
if ($geo-blacklist = no) { return 404; }
|
||||
|
||||
location / {
|
||||
```
|
||||
|
||||
|
||||
## Exposer Dockge
|
||||
---
|
||||
::alert{type="info"}
|
||||
📋 __Prérequis :__ <br/></br>
|
||||
Nous partons du principe que vous avez créé dans votre [zone DNS](/generalites/reseau/dns) un sous domaine du type `dockge.mondomaine.fr` avec pour `CNAME` `mondomaine.fr` et [à moins que vous utilisiez Cloudflare Zero Trust](/serveex/securite/cloudflare), que vous avez déjà redirigé le port `443` de votre box vers le `443` de votre serveur dans [les règles NAT](/generalites/reseau/nat).
|
||||
::
|
||||
|
||||
Il s'agit maintenant d'exposer Dockge sur internet, afin de pouvoir y accéder et gérer vos conteneurs sans que vous soyez chez vous. Pour cela, nous partons du principe que vous avez configuré un sous domaine `dockge.mondomaine.fr` dans votre zone DNS dont le `CNAME` pointe sur `mondomaine.fr`.
|
||||
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- Dockge n'utilise pas d'authentification multifacteur. Exposer Dockge sur internet pourrait compromettre les machines auxquelles il est relié. Ne le faite que si vous utilisez un systeme d'authentification multifacteur comme [Authentik](/serveex/securite/authentik/). Sinon, n'exposez pas avec SWAG et utilisez plutôt un VPN comme [Wireguard](/serveex/securite/wireguard).
|
||||
:::
|
||||
::
|
||||
|
||||
Ouvrez le fichier dockge.subdomain.conf :
|
||||
|
||||
```sh
|
||||
sudo vi /docker/swag/config/nginx/proxy-confs/dockge.subdomain.conf
|
||||
```
|
||||
|
||||
Paramétrez le comme tel :
|
||||
|
||||
```nginx
|
||||
## Version 2023/12/19
|
||||
|
||||
server {
|
||||
listen 443 ssl;
|
||||
listen [::]:443 ssl;
|
||||
|
||||
# indique que le sous-domaine doit être dirigé
|
||||
server_name dockge.*;
|
||||
|
||||
include /config/nginx/ssl.conf;
|
||||
|
||||
client_max_body_size 0;
|
||||
|
||||
#if ($lan-ip = yes) { set $geo-whitelist yes; }
|
||||
#if ($geo-whitelist = no) { return 404; }
|
||||
# indique que les pays dans la blacklist sont intedits
|
||||
if ($geo-blacklist = no) { return 404; }
|
||||
|
||||
# enable for ldap auth (requires ldap-location.conf in the location block)
|
||||
#include /config/nginx/ldap-server.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-location.conf in the location block)
|
||||
#include /config/nginx/authelia-server.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-location.conf in the location block)
|
||||
#include /config/nginx/authentik-server.conf;
|
||||
|
||||
location / {
|
||||
# enable the next two lines for http auth
|
||||
#auth_basic "Restricted";
|
||||
#auth_basic_user_file /config/nginx/.htpasswd;
|
||||
|
||||
# enable for ldap auth (requires ldap-server.conf in the server block)
|
||||
#include /config/nginx/ldap-location.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-server.conf in the server block)
|
||||
#include /config/nginx/authelia-location.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-server.conf in the server block)
|
||||
#include /config/nginx/authentik-location.conf;
|
||||
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
|
||||
set $upstream_app dockge; # Nom du conteneur
|
||||
set $upstream_port 5001; # Port interne conteneur
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
Sauvegardez et quittez. La configuration va se mettre à jour en quelques secondes.
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Par défaut, SWAG ne connait pas le nom "dockge". Pour qu'il puisse y accéder, vous devez rajouter le réseau de dockge dans le `compose.yml` de SWAG.
|
||||
:::
|
||||
::
|
||||
|
||||
Rendez-vous sur la stack de SWAG, puis cliquez sur `éditer`, et ajouter le réseau de dockge dans le fichier de conf sur ce modele (les champs `networks`) :
|
||||
|
||||
|
||||
```yaml
|
||||
services:
|
||||
swag:
|
||||
container_name: #...
|
||||
# ...
|
||||
networks: # Relie le conteneur au réseau custom
|
||||
- dockge # Nom du réseau déclaré dans la stack
|
||||
|
||||
networks: # Définit le réseau custom
|
||||
#...
|
||||
dockge: # Nom du réseau déclaré dans la stack
|
||||
name: dockge_default # Nom véritable du réseau externe
|
||||
external: true # Précise que c'est un réseau à rechercher en externe
|
||||
```
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Ici nous partons du principe que le nom du réseau de dockge est `dockge_default`. Vous pouvez vérifier que la connexion est opérationnelle en visitant le dashboard de SWAG en tapant `http://ipduserveur:81`.
|
||||
:::
|
||||
::
|
||||
|
||||
Déployez à nouveau la stack de SWAG.
|
||||
|
||||
Patientez puis tapez `https://dockge.mondomaine.fr` dans votre navigateur, vous devriez être redirigé vers dockge. Vous pouvez vérifier le statut du service via le dashboard (depuis votre réseau local, http://ipdevotreserveur:81)
|
||||
|
||||
|
||||
## Exposer un autre service avec SWAG
|
||||
---
|
||||
Swag dispose de modeles pour la plupart des services connus, nommés `nomduservice.subdomain.conf.sample`. Il vous suffit de créer le sous-domaine dans votre zone DNS chez votre registrar (comme OVH par exemple), de le faire pointer sur votre domaine principale (via un enregistrement CNAME) et de copier en renommant `nomduservice.subdomain.conf.sample` en `nomduservice.subdomain.conf`.
|
||||
|
||||
```sh
|
||||
cd /docker/swag/config/proxy-confs
|
||||
sudo cp nomduservice.subdomain.conf.sample nomduservice.subdomain.conf
|
||||
```
|
||||
::alert{type="danger"}
|
||||
:::list{type="danger"}
|
||||
- __Si le sous domaine n'est pas redirigé correctement__
|
||||
:::
|
||||
- éditez le fichier et vérifiez notamment le nom du conteneur dans `set $upstream_app nomduconteneur;`{lang=nginx}
|
||||
|
||||
- vérifiez que vous avez bien ajouté le réseau du conteneur dans le `compose.yml` de SWAG.
|
||||
::
|
||||
|
||||
Vous pouvez aussi choisir le sous-domaine en changeant la variable `server_name votresousdomaine.*;`{lang=nginx} et en renommant le fichier `votresousdomaine.subdomain.conf`.
|
||||
@@ -1,2 +0,0 @@
|
||||
navigation.title: Le coeur du serveur
|
||||
icon: lucide:server-cog
|
||||
@@ -1,260 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: Wireguard
|
||||
description: Installer et configurer WireGuard VPN pour accéder à votre homelab de n'importe où et connecter tous vos appareils à votre réseau privé.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# Wireguard
|
||||
|
||||
::alert{type="info"}
|
||||
🎯 __Objectifs :__
|
||||
- Installer Wireguard
|
||||
- Configurer les clients
|
||||
- Accéder au réseau sécurisé
|
||||
::
|
||||
|
||||
## Introduction
|
||||
---
|
||||
L'utilisation d'un VPN permet d'accéder à distance aux ressources locales du serveur sans les exposer sur internet. C'est notamment une manière propre de sécuriser l'accès à la console SSH, plutot que d'exposer le port sur internet. C'est pouvoir se connecter à son réseau où que l'on soit, de maniere sécurisée, et de faire dialoguer des machines qui sont sur des réseaux différents.
|
||||
|
||||
Ici nous utiliserons [Wireguard](https://www.wireguard.com/), un serveur VPN sécurisé et très performant, à l'aide des conteneurs :
|
||||
|
||||
- [wg-easy](https://github.com/wg-easy/wg-easy) pour le serveur, qui propose une interface web très simple pour controler les connexions et télécharger les fichiers de conf (notamment par QR code pour les téléphones)
|
||||
- [Wireguard](https://docs.linuxserver.io/images/docker-wireguard/?h=wireguard) pour les clients linux
|
||||
|
||||
Il existe aussi des clients Windows, MacOS, iOS et Android.
|
||||
|
||||
Le principe est le suivant :
|
||||
|
||||
- Sur internet, n'importe qui peut contacter n'importe quel box internet et donc essayer de contacter n'importe quel serveur exposé.
|
||||
- Votre serveur est sur votre réseau local. Il est accessible depuis le réseau local mais pas depuis internet, mis à part les services exposés (comme nous l'avons fait avec Dockge). Pour accéder aux ressources non exposées, vous devez être connecté sur le meme réseau que votre serveur et donc etre chez vous. De plus, vous devez laisser ouvert les ports utilisés par vos services à travers le pare feu de votre serveur.
|
||||
- Nous souhaitons ici au contraire, depuis n'importe où, pouvoir accéder de maniere securisée aux services non exposés sur internet du serveur, comme la console SSH qui permet de se connecter à la machine par exemple.
|
||||
- Nous souhaitons aussi accéder aux services d'autres serveurs, et par exemple relier de maniere sécurisée deux instances de Dockge pour tout controler depuis la meme interface.
|
||||
|
||||
Pour cela nous allons créer un **réseau privé virtuel**, ou VPN, c'est à dire un tunnel sécurisé auquel personne n'a accès à part les machines que vous relierez entre elles. Elles feront partie d'un nouveau réseau et pourront dialoguer entre elle comme dans un réseau local.
|
||||
|
||||
D'autre part, vous pourrez ajouter votre téléphone, un ordinateur portable ou n'importe quel appareil au réseau pour pouvoir utiliser vos ressources depuis vos appareils quotidiens, où que vous soyiez.
|
||||
|
||||

|
||||
|
||||
Dans cette illustration, la machine 1 est sur deux réseaux :
|
||||
|
||||
- son réseau local (tous les appareils liés à la box, avec une adresse IP du type `192.168.x.x ` donc ici la machine 1 et la machine 2)
|
||||
- le réseau du VPN (tous les appareils reliés au VPN, avec une seconde adresse IP du type `10.8.x.x` donc ici la machine 1 et 4)
|
||||
|
||||
On peut aussi faire en sorte que les machines reliées au réseau virtuel partagent les acces à leur réseau local. Ici nous ne le ferons pas, pour des raisons de sécurité, et de complexité en terme de sous-réseau (si les deux machines distantes ont des machines locales qui utilisent la meme adresse IP locale, par exemple `192.168.1.1`, cela posera des conflits).
|
||||
|
||||
Ainsi, sur le réseau virtuel, seules les machines directement reliées pourront dialoguer entre elle depuis ce réseau. Elles ne pourront pas dialoguer avec une machine situées sur un autre réseau local et non reliée au VPN.
|
||||
|
||||
## Côté serveur
|
||||
---
|
||||
::alert{type="info"}
|
||||
📋 __A vérifier au préalable :__
|
||||
- Vérifiez si le port `51820 UDP` estlibre sur votre serveur, et bien routé dans le NAT de la box `Source 51820 UDP -> Destination 51820 UDP -> Serveur`. En effet, votre serveur étant derrière votre box, le port de votre box doit etre joignable et rediriger vers le port de votre serveur connecté à votre VPN.
|
||||
- Vérifiez aussi que le port `51821 TCP` est libre sur le serveur pour accéder à la web ui.
|
||||
::
|
||||
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- __Attention__: Si votre IP n'est pas fixe, vous devez avoir un nom de domaine redirigeant vers l'IP à jour à l'aide d'un [DynDNS](https://en.wikipedia.org/wiki/Dynamic_DNS). Si votre opérateur internet utilise un [CGNAT](https://en.wikipedia.org/wiki/Carrier-grade_NAT), vous êtes cuit. Vous devrez utiliser un VPS externe pour ce tuto, et y connecter votre serveur comme client.
|
||||
:::
|
||||
::
|
||||
|
||||
Structure des dossiers
|
||||
|
||||
```sh
|
||||
root
|
||||
└── docker
|
||||
└── wg-easy
|
||||
├── config
|
||||
│ └── etc_wireguard
|
||||
├── compose.yaml
|
||||
└── .env
|
||||
```
|
||||
|
||||
Ouvrez Dockge, cliquez sur `compose` et nommez la stack `wg_easy`.
|
||||
|
||||
Copiez la configuration suivante :
|
||||
|
||||
```yaml
|
||||
---
|
||||
services:
|
||||
wg-easy:
|
||||
environment:
|
||||
- INSECURE=true
|
||||
image: ghcr.io/wg-easy/wg-easy:15
|
||||
container_name: wg-easy
|
||||
networks:
|
||||
wg:
|
||||
ipv4_address: 10.42.42.42
|
||||
ipv6_address: fdcc:ad94:bacf:61a3::2a
|
||||
volumes:
|
||||
- ./etc_wireguard:/etc/wireguard
|
||||
- /lib/modules:/lib/modules:ro
|
||||
ports:
|
||||
- "51820:51820/udp"
|
||||
- "51821:51821/tcp"
|
||||
restart: unless-stopped
|
||||
cap_add:
|
||||
- NET_ADMIN
|
||||
- SYS_MODULE
|
||||
sysctls:
|
||||
- net.ipv4.ip_forward=1
|
||||
- net.ipv4.conf.all.src_valid_mark=1
|
||||
- net.ipv6.conf.all.disable_ipv6=0
|
||||
- net.ipv6.conf.all.forwarding=1
|
||||
- net.ipv6.conf.default.forwarding=1
|
||||
|
||||
networks:
|
||||
wg:
|
||||
driver: bridge
|
||||
enable_ipv6: true
|
||||
ipam:
|
||||
driver: default
|
||||
config:
|
||||
- subnet: 10.42.42.0/24
|
||||
- subnet: fdcc:ad94:bacf:61a3::/64
|
||||
|
||||
```
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__
|
||||
- Vous pouvez personnaliser le port de wireguard et de la webui au lieu des ports par défaut.
|
||||
- Ajoutez le label de watchtower afin d'automatiser les mises à jour
|
||||
|
||||
```yaml
|
||||
services
|
||||
wg-easy:
|
||||
#...
|
||||
labels:
|
||||
- com.centurylinklabs.watchtower.enable=true
|
||||
::
|
||||
|
||||
Puis déployez la stack et connectez vous via le web en local sur `http://ipduserveur:51821`
|
||||
|
||||
::alert{type="danger"}
|
||||
:::list{type="danger"}
|
||||
- En cas d'échec, vérifiez les règles du pare-feu.
|
||||
:::
|
||||
::
|
||||
|
||||
Une fois connecté, la webui vous guidera :
|
||||
- Pour créer votre compte et mot de passe d'accès
|
||||
- Pour configurer l'host à utiliser dans les fichiers de conf : utilisez l'IP publique de votre box internet (ou de votre VPS), ou le nom de domaine redirigeant vers l'IP de votre box, le cas écheant.
|
||||
|
||||
Une fois fait:
|
||||
- Cliquez sur *« Administrator »* > *« Admin Panel »* > *« Config »*
|
||||
- Modifiez `Allowed IPs` en remplaçant `0.0.0.0/24` par `10.8.0.0/24`. Cela signifie que seules les requêtes IP de `10.8.0.1` à `10.8.0.255` seront redirigées dans le tunnel (split tunneling), laissant ainsi à l'appareil la possibilité d'etre connecté à d'autres tunnels, et à accéder à internet par lui meme. Si vous voulez tout rediriger dans le tunnel, y compris l'acces à internet, laissez `0.0.0.0/24`.
|
||||
- Supprimez l'IPv6, cela n'apportera que des problèmes.
|
||||
|
||||
### Recuperation des fichiers de conf
|
||||
|
||||
Afin de configurer les clients, vous devez télécharger les fichiers de conf générés par l'host :
|
||||
|
||||
- Connectez vous via le web en local sur `http://ipduserveur:51821`
|
||||
- Créez un client
|
||||
- Modifiez le client en cliquant sur l'icone d'édition
|
||||
- Modifiez `Server Allowed IPs` en ajoutant `10.8.0.0/24`. Cela signifie que le serveur laissera vos clients accéder à toutes les IP `10.8.0.1` à `10.8.0.255` connectées à lui, et donc laissera les clients dialoguer entre eux si nécessaire. Si vous voulez laisser vos clients accéder à tous les appareils réseau connectés autour de votre serveur en local, mettez `0.0.0.0`, à condition de l'avoir fait précédemment dans la configuration générale.
|
||||
- (facultatif) Si votre client est un serveur qui doit être connecté en permanence, modifiez `Advanced` > `Persistent Keep Alive` en mettant `25`.
|
||||
- Sauvegardez
|
||||
- Téléchargez le fichier de conf
|
||||
- Renommez le en `wg0.conf`. (Si ce n'est pas le premier, incrémentez: `wg1.conf`, etc...)
|
||||
|
||||
|
||||
## Sur le serveur client
|
||||
---
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Nous partons du principe que le serveur client est un serveur linux avec Docker installé
|
||||
:::
|
||||
::
|
||||
|
||||
Structure des dossiers
|
||||
|
||||
```sh
|
||||
root
|
||||
└── docker
|
||||
└── wireguard
|
||||
└── config
|
||||
│ └── wg_confs
|
||||
└── compose.yaml
|
||||
```
|
||||
|
||||
Creez le dossier `/docker/wireguard/config/wg_confs`.
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce pour les allergiques au terminal :__
|
||||
vous pouvez utiliser [File Browser](/serveex/files/file-browser) pour naviguer dans vos fichier et éditer vos documents au lieu d'utiliser les commandes du terminal.
|
||||
::
|
||||
|
||||
```sh
|
||||
sudo mkdir -p /docker/wireguard/config/wg_confs
|
||||
```
|
||||
|
||||
Créez le fichier `wg0.conf`
|
||||
|
||||
```sh
|
||||
sudo vi /docker/wireguard/config/wg_confs/wg0.conf
|
||||
```
|
||||
|
||||
Rentrez en édition en appuyant sur `i` puis Copiez collez le contenu du `wg0.conf` que vous avez téléchargé. Puis sortez du mode édition en appuyant sur `Echap` puis tapez `:x`.
|
||||
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ Un autre moyen est de transférer le fichier par sftp dans le dossier `/home/nomdutilisateur` puis de le copier dans le bon dossier :
|
||||
|
||||
```sh
|
||||
sudo cp ~/wg0.conf /docker/wireguard/config/wg_confs
|
||||
|
||||
::
|
||||
|
||||
Creez le `compose.yaml` dans `/docker/wireguard `:
|
||||
```sh
|
||||
sudo vi /docker/wireguard/compose.yaml
|
||||
```
|
||||
Appuyez sur `i` pour rentrer en modification et copiez la configuration ci-dessous
|
||||
```yaml
|
||||
services:
|
||||
wireguard:
|
||||
image: lscr.io/linuxserver/wireguard:latest
|
||||
container_name: wireguard
|
||||
network_mode: host
|
||||
cap_add:
|
||||
- NET_ADMIN
|
||||
- SYS_MODULE #optional
|
||||
environment:
|
||||
- TZ=Europe/Paris
|
||||
volumes:
|
||||
- /docker/wireguard/config:/config
|
||||
- /lib/modules:/lib/modules #optional
|
||||
restart: unless-stopped
|
||||
```
|
||||
|
||||
Appuyez sur `Echap` puis tapez `:x` pour quitter et sauvegarder.
|
||||
|
||||
Lancez le conteneur :
|
||||
```sh
|
||||
cd /docker/wireguard
|
||||
sudo docker compose up -d
|
||||
```
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- A répéter pour chaque client
|
||||
:::
|
||||
::
|
||||
|
||||
## Autres appareils
|
||||
---
|
||||
- **Téléphone :** installer wireguard et scanner le QR code via le webui (http://ipduserveur:51821)
|
||||
- **PC :** Installer wireguard client et mettre directement le fichier de conf téléchargé via le webui
|
||||
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- __Attention :__ Si des machines clientes sont sur le meme réseau local que le serveur (derriere la box), éditez le fichier `wg0.conf` uploadé sur cette machine en changeant avec l'adresse locale du serveur : `Endpoint = ipduserveur:51820`{lang=properties}
|
||||
:::
|
||||
::
|
||||
|
||||
Et voilà ce que cela peut donner !
|
||||
|
||||

|
||||
@@ -1,587 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: Authentik
|
||||
description: Installer Authentik comme fournisseur d'identité auto-hébergé — configurer le MFA et protéger vos services avec du SSO et l'authentification via reverse proxy.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# Authentik
|
||||
|
||||
::alert{type="info"}
|
||||
🎯 __Objectifs :__
|
||||
- Installer et exposer Authentik
|
||||
- Paramétrer le Multi-Facteur
|
||||
- Protéger une app native ou via reverse proxy
|
||||
::
|
||||
|
||||
[Authentik](https://goauthentik.io) est un outil d'authentification unique permettant de vous logger une seule fois sur les plateformes compatibles OpenID. Il permet également de sécuriser l'accès aux services que vous exposez, en s'injectant via SWAG aux requetes vers vos services.
|
||||
|
||||
Ainsi, si vous exposez Dockge sur internet via `dockge.mondomaine.fr`, au moment de l'accès à cette page, vous tomberez sur une page de login d'authentik. Si vous avez déjà été identifié sur un autre service sécurisé par authentik auparavant, alors vous serez déjà identifié. cela permet d'avoir à vous identifiez qu'une seule fois par jour sur l'ensemble des services protégés par authentik.
|
||||
|
||||
Authentik permet aussi d'utiliser le multi-facteur, notamment par TOTP (code généré par une application d'authentification de votre choix. Enfin, authentik permet aussi de se connecter directement via un compte Microsoft ou Google, si vous avez configuré une application d'un de ces services.
|
||||
|
||||
C'est une bonne manière de se passer de VPN pour exposer vos services, et d'exposer des services qui ne sont pas protégés par du MFA voir pas protégés par des login (comme le dashboard de swag).
|
||||
|
||||
Authentik dipose d'[une doc très fournie](https://docs.goauthentik.io/docs/installation/docker-compose) et des [fabuleux tuto de Cooptonian](https://www.youtube.com/@cooptonian). Ici, nous montrerons juste les bases, avec l'exemple de l'exposition de Dockge.
|
||||
|
||||
Deux modes principaux sont à connaitre:
|
||||
|
||||
- Le premier permet à une application qui dispose nativement d'une intégration avec du SSO compatible OpenID de se connecter directement à Authentik. C'est la solution à privilégier car elle permet de laisser l'application décider de ce qui est public et de ce qui est protégé.
|
||||
|
||||

|
||||
|
||||
- Le second permet d'injecter une authentification via authentik grace à SWAG avant d'arriver sur le service désiré.
|
||||
|
||||

|
||||
|
||||
Les deux modes son configurables application par application.
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
---
|
||||
Structure des dossiers :
|
||||
```sh
|
||||
root
|
||||
└── docker
|
||||
└── authentik
|
||||
├── .env
|
||||
├── compose.yml
|
||||
├── media
|
||||
├── certs
|
||||
├── custom-template
|
||||
└── ssh
|
||||
```
|
||||
|
||||
Créez les dossiers :
|
||||
|
||||
```sh
|
||||
sudo mkdir -p /docker/authentik/media /docker/authentik/certs /docker/authentik/custom-template /docker/authentik/ssh
|
||||
```
|
||||
|
||||
Positionnez vous dans le dossier `authentik` via `cd /docker/authentik` et générez un mot de passe et une clé secrete que l'on va intégrer dans le .env :
|
||||
|
||||
```sh
|
||||
sudo echo "PG_PASS=$(openssl rand 36 | base64)" >> .env
|
||||
sudo echo "AUTHENTIK_SECRET_KEY=$(openssl rand 60 | base64)" >> .env
|
||||
```
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Afin de générer la clé, nous avons créé les dossiers en amont du déploiement via Dockge. Dockge vous empechera de créer une stack du meme nom dans ces dossiers s'il n'existe pas de `compose.yml`. Il faut donc créer un `compose.yml` vide afin que ce dernier la reconnaisse comme existante dans les stacks inactives :
|
||||
:::
|
||||
```sh
|
||||
sudo vi /docker/authentik/compose.yml
|
||||
::
|
||||
|
||||
Ouvrez dockge, et cherchez "authentik" dans les stack inactives.
|
||||
Nommez la stack authentik et collez la configuration suivante, en changeant les chiffres de `{AUTHENTIK_TAG:-2026.2}`{lang=properties} par [la dernière version de Authentik](https://goauthentik.io/docs/releases).
|
||||
|
||||
```yaml
|
||||
---
|
||||
services:
|
||||
|
||||
postgresql:
|
||||
image: docker.io/library/postgres:16-alpine
|
||||
container_name: authentik-postgresql
|
||||
restart: unless-stopped
|
||||
healthcheck:
|
||||
test:
|
||||
- CMD-SHELL
|
||||
- pg_isready -d $${POSTGRES_DB} -U $${POSTGRES_USER}
|
||||
start_period: 20s
|
||||
interval: 30s
|
||||
retries: 5
|
||||
timeout: 5s
|
||||
volumes:
|
||||
- database:/var/lib/postgresql/data
|
||||
environment:
|
||||
POSTGRES_PASSWORD: ${PG_PASS:?database password required}
|
||||
POSTGRES_USER: ${PG_USER:-authentik}
|
||||
POSTGRES_DB: ${PG_DB:-authentik}
|
||||
env_file:
|
||||
- .env
|
||||
|
||||
redis:
|
||||
image: docker.io/library/redis:alpine
|
||||
container_name: authentik-redis
|
||||
command: --save 60 1 --loglevel warning
|
||||
restart: unless-stopped
|
||||
healthcheck:
|
||||
test:
|
||||
- CMD-SHELL
|
||||
- redis-cli ping | grep PONG
|
||||
start_period: 20s
|
||||
interval: 30s
|
||||
retries: 5
|
||||
timeout: 3s
|
||||
volumes:
|
||||
- redis:/data
|
||||
|
||||
server:
|
||||
image: ${AUTHENTIK_IMAGE:-ghcr.io/goauthentik/server}:${AUTHENTIK_TAG:-2026.2}
|
||||
container_name: authentik-server
|
||||
restart: unless-stopped
|
||||
command: server
|
||||
environment:
|
||||
AUTHENTIK_REDIS__HOST: redis
|
||||
AUTHENTIK_POSTGRESQL__HOST: postgresql
|
||||
AUTHENTIK_POSTGRESQL__USER: ${PG_USER:-authentik}
|
||||
AUTHENTIK_POSTGRESQL__NAME: ${PG_DB:-authentik}
|
||||
AUTHENTIK_POSTGRESQL__PASSWORD: ${PG_PASS}
|
||||
volumes:
|
||||
- ./media:/media
|
||||
- ./custom-templates:/templates
|
||||
- ./ssh:/authentik/.ssh
|
||||
env_file:
|
||||
- .env
|
||||
ports:
|
||||
- ${COMPOSE_PORT_HTTP:-9000}:9000
|
||||
- ${COMPOSE_PORT_HTTPS:-9443}:9443
|
||||
depends_on:
|
||||
- postgresql
|
||||
- redis
|
||||
|
||||
worker:
|
||||
image: ${AUTHENTIK_IMAGE:-ghcr.io/goauthentik/server}:${AUTHENTIK_TAG:-2026.2}
|
||||
container_name: authentik-worker
|
||||
restart: unless-stopped
|
||||
command: worker
|
||||
environment:
|
||||
AUTHENTIK_REDIS__HOST: redis
|
||||
AUTHENTIK_POSTGRESQL__HOST: postgresql
|
||||
AUTHENTIK_POSTGRESQL__USER: ${PG_USER:-authentik}
|
||||
AUTHENTIK_POSTGRESQL__NAME: ${PG_DB:-authentik}
|
||||
AUTHENTIK_POSTGRESQL__PASSWORD: ${PG_PASS}
|
||||
# `user: root` and the docker socket volume are optional.
|
||||
# See more for the docker socket integration here:
|
||||
# https://goauthentik.io/docs/outposts/integrations/docker
|
||||
# Removing `user: root` also prevents the worker from fixing the permissions
|
||||
# on the mounted folders, so when removing this make sure the folders have the correct UID/GID
|
||||
# (1000:1000 by default)
|
||||
user: root
|
||||
volumes:
|
||||
- /var/run/docker.sock:/var/run/docker.sock
|
||||
- ./media:/media
|
||||
- ./certs:/certs
|
||||
- ./custom-templates:/templates
|
||||
- ./ssh:/authentik/.ssh
|
||||
env_file:
|
||||
- .env
|
||||
depends_on:
|
||||
- postgresql
|
||||
- redis
|
||||
|
||||
volumes:
|
||||
database:
|
||||
driver: local
|
||||
redis:
|
||||
driver: local
|
||||
```
|
||||
|
||||
Dans le point `.env`, les variables `PG_PASS` et `AUTHENTIK_SECRET_KEY` sont déjà remplies.
|
||||
Déployez la stack.
|
||||
|
||||
Vous pouvez alors commencer le set-up d'authentik en tappant `http://ipduserveur:9000/if/flow/initial-setup/`.
|
||||
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- __Attention :__ il est conseillé de créer un nouveau compte admin, et de **désactiver** le compte admin de base `akadmin`.
|
||||
:::
|
||||
::
|
||||
|
||||
## Exposer authentik
|
||||
---
|
||||
Pour être utilisable hors de chez vous, vous devez exposer authentik.
|
||||
|
||||
::alert{type="info"}
|
||||
📋 __Au préalable :__ <br/><br/>
|
||||
Nous partons du principe quer vous avez créé dans votre [zone DNS](/generalites/reseau/dns) un sous domaine du type `auth.mondomaine.fr` avec pour CNAME `mondomaine.fr` et, [à moins que vous utilisiez Cloudflare Zero Trust](/serveex/securite/cloudflare), vous avez déjà redirigé le port `443` de votre box vers le `443` de votre serveur dans [les règles NAT](/generalites/reseau/nat).
|
||||
::
|
||||
|
||||
Ouvrez le fichier `authentik-server.conf`.
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce pour les allergiques au terminal :__
|
||||
vous pouvez utiliser [File Browser](/serveex/files/file-browser) pour naviguer dans vos fichier et éditer vos documents au lieu d'utiliser les commandes du terminal.
|
||||
::
|
||||
|
||||
```sh
|
||||
sudo vi /docker/swag/config/nginx/authentik-server.conf
|
||||
```
|
||||
|
||||
Vérifiez que dans chaque cas les variables ci-dessous sont correctes :
|
||||
|
||||
```nginx
|
||||
set $upstream_authentik authentik-server;
|
||||
proxy_pass http://$upstream_authentik:9000;
|
||||
```
|
||||
|
||||
Si ce n'est pas le cas, passez en mode modification en tapant `i` et éditez les. Sauvegardez et quittez en tapant sur `Echap` puis `:x`.
|
||||
|
||||
Créez le fichier `auth.subdomain.conf`
|
||||
|
||||
```sh
|
||||
sudo vi /docker/swag/config/nginx/proxy-confs/auth.subdomain.conf
|
||||
|
||||
```
|
||||
|
||||
Appuyez sur `i` pour rentrer en mode modification puis collez la configuration suivante :
|
||||
|
||||
```nginx
|
||||
## Version 2023/05/31
|
||||
# make sure that your authentik container is named authentik-server
|
||||
# make sure that your dns has a cname set for authentik
|
||||
|
||||
server {
|
||||
listen 443 ssl;
|
||||
listen [::]:443 ssl;
|
||||
|
||||
server_name auth.*;
|
||||
|
||||
include /config/nginx/ssl.conf;
|
||||
|
||||
client_max_body_size 0;
|
||||
|
||||
location / {
|
||||
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app authentik-server;
|
||||
set $upstream_port 9000;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
|
||||
location ~ (/authentik)?/api {
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app authentik-server;
|
||||
set $upstream_port 9000;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Sauvegardez et quittez en appuyant sur `Echap` puis en tapant `:x`.
|
||||
|
||||
Rendez-vous dans dockge, et éditez le compose de SWAG en ajoutant le réseau d'Authentik :
|
||||
|
||||
```yaml
|
||||
services:
|
||||
swag:
|
||||
container_name: # ...
|
||||
# ...
|
||||
networks: # Relie le conteneur au réseau custom
|
||||
# ...
|
||||
- authentik # Nom du réseau déclaré dans la stack
|
||||
|
||||
networks: # Définit le réseau custom
|
||||
# ...
|
||||
authentik: # Nom du réseau déclaré dans la stack
|
||||
name: authentik_default # Nom véritable du réseau externe
|
||||
external: true # Précise que c'est un réseau à rechercher en externe
|
||||
```
|
||||
|
||||
Relancez la stack et patientez le temps que SWAG soit complètement opérationnel.
|
||||
|
||||
Et voilà ! Vous pouvez accéder à authentik via `https://auth.mondomaine.fr`
|
||||
|
||||
## Activer le multifacteur
|
||||
---
|
||||
Tout l'intérêt de authentik c'est de disposer du multifacteur pour toutes les apps que l'on protègera.
|
||||
|
||||
- Rendez vous sur `https://auth.mondomaine.fr`
|
||||
- Identifiez-vous
|
||||
- Rendez-vous dans _paramètres_
|
||||
- Cliquez sur la section _MFA_
|
||||
- Cliquez sur _s'inscrire_
|
||||
- Choisissez une méthode comme _TOTP device_ ( dans ce cas vous devrez utilisez une app d'authentification telle que Google Authenticator par exemple)
|
||||
- Suivez les étapes
|
||||
|
||||
Et voilà, vous serez invité à saisir un code à usage unique à chaque connexion.
|
||||
|
||||
## Protéger une app native
|
||||
---
|
||||
Authentik est compatible nativement avec un certain nombre d'application, vous retrouverez la liste et [le support ici](https://docs.goauthentik.io/integrations/services/)
|
||||
|
||||
## Protéger une app par reverse proxy
|
||||
---
|
||||
Swag permet d'intercaler la page d'authentik entre la requête et l'accès à votre service. Pour cela il va falloir :
|
||||
|
||||
- Configurer le service d'authentification dans authentik.
|
||||
- Configurer le fichier proxy du domaine pour que swag puisse intercaler la page.
|
||||
|
||||
Pourquoi le faire alors que Dockge a déjà une page d'authentification ? Tout simplement parce que l'authentification HTTP utilisée par Dockge est faible. Avec Authentik, vous aurez directement une authentification forte par MFA, et vous serez loggé automatiquement à toutes vos apps déjà protégées par authentik. Cela permet de sécuriser l'accès à Dockge et aux autres apps que vous protégerez, sans avoir à passer par un VPN.
|
||||
|
||||
### Configuration de Authentik
|
||||
|
||||
- Rendez vous dans Authentik
|
||||
- Allez dans le panneau d'administration
|
||||
- Sélectionnez _application_ puis _créer avec l'assistant_
|
||||
- Renseignez les champs comme suit :
|
||||
|
||||

|
||||
|
||||
- Puis à l'étape suivante choisissez "Transférer l'authentification (application unique)" et éditez comme suit (attention aux flow, c'est important) :
|
||||
|
||||

|
||||
|
||||
- Ensuite, allez dans le menu à gauche dans _Avant-poste_ et éditez _authentik Embedded Outpost_
|
||||
|
||||

|
||||
|
||||
- Ajoutez l'application `dockge` en la faisant passer à droite et validez.
|
||||
|
||||
### Configuration de SWAG
|
||||
|
||||
Ensuite rendez-vous dans le fichier `dockge.mondomaine.fr`.
|
||||
|
||||
```sh
|
||||
sudo vi /docker/swag/config/nginx/proxy-confs/dockge.subdomain.conf
|
||||
```
|
||||
|
||||
Puis entrez en modification en appuyant sur `i` et enlevez les `#` des deux lignes `#include /config/nginx/authentik-server.conf;`{lang=nginx}.
|
||||
|
||||
Appuyez sur `Echap` puis tapez `:x` et appuyez sur `Entrée` pour sauvegarder et quitter.
|
||||
|
||||
Et voilà ! En tapant `https://dockge.mondomaine.fr`, vous tomberez à présent sur la mire d'authentification de authentik.
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ dans Dockge, dans les paramètres, vous pouvez désactiver l'authentification de Dockge afin de ne pas avoir à vous identifier deux fois. **Attention**, cela voudra dire que si vous avez exposé un port sur votre réseau local, il n'y aura plus aucune authentification.
|
||||
::
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Vous pouvez répétez l'opération pour chaque application que vous souhaitez protéger (si elle ne dipose pas d'intégration directe avec Authentik).
|
||||
:::
|
||||
::
|
||||
|
||||
Voilà votre nouvelle architecture :
|
||||
|
||||

|
||||
|
||||
## Protéger un service sur un serveur distant
|
||||
---
|
||||
Dans le cas d'une application [native](/serveex/securite/authentik#protéger-une-app-native) (via OAuth 2.0 ou autre), rien ne change.
|
||||
|
||||
Dans le cas d'une application non native à protéger derrière un reverse proxy, vous devrez déployer un __avant-poste__. Un avant-poste est un conteneur qui jouera le rôle de proxy local, c'est à dire que c'est vers ce conteneur que les requêtes d'authentification de vos applications seront redirigées. C'est le seul qui est autorisé à dialoguer avec l'API de votre instance authentik.
|
||||
|
||||
|
||||
::alert{type="info"}
|
||||
Pré-requis :
|
||||
- Avoir installé [docker](/serveex/coeur/docker) sur votre machine distante hébergeant le service à protéger.
|
||||
- Si l'application n'a pas d'intégration native, avoir un reverse proxy compatible. Comme partout ici, nous utiliserons [SWAG](/serveex/coeur/swag).
|
||||
::
|
||||
|
||||
Ce conteneur redirigera ensuite les requetes vers votre instance [Authentik](/serveex/securite/authentik#authentik) principale, à travers le web (ou votre réseau local). Le serveur executera les controle et renverra la réponse à l'_avant-poste_, qui bloquera ou non la connexion à l'app protégée.
|
||||
|
||||

|
||||
|
||||
### Configuration d'Authentik
|
||||
|
||||
Créez vos [fournisseurs et applications](/serveex/securite/authentik#protéger-une-app-native) comme nous l'avons vu plus haut.
|
||||
|
||||
Puis, dans votre panneau admin, allez dans la rubrique _Applications > Avant-postes_, puis créez un nouvel avant-poste.
|
||||
|
||||
Remplissez comme suit :
|
||||
|
||||
|
||||
| Champs | Valeur |
|
||||
|----------------|-----------------------------------------------------------------------|
|
||||
| `Nom` | Le nom que vous souhaitez |
|
||||
| `Type` | `Proxy` |
|
||||
| `Intégration` | Laissez vide |
|
||||
| `Applications` | Sélectionnez le ou les applications que vous avez créées précédemment |
|
||||
|
||||
Dans la section `Paramètres avancés`, supprimez l'existant, et complétez comme suit :
|
||||
|
||||
```yaml
|
||||
log_level: info
|
||||
docker_labels: null
|
||||
authentik_host: https://domaine_de_votre_serveur_authentik/
|
||||
object_naming_template: ak-outpost-%(name)s
|
||||
authentik_host_insecure: false
|
||||
container_image:
|
||||
docker_network: null
|
||||
docker_map_ports: true
|
||||
docker_labels: null
|
||||
```
|
||||
|
||||
Enrtegistrez et quittez.
|
||||
|
||||
Sur l'écran affichant les avant-postes créés, vous verrez le nouvel avant-poste que vous venez de créer. A la fin de la ligne, cliquez sur _afficher les informations_, et copiez précieusement le jeton d'accès.
|
||||
|
||||
### Configuration de la machine distante
|
||||
|
||||
Nous partons du principe que vous avez déjà installé [Docker](/serveex/coeur/docker) et [SWAG](/serveex/coeur/swag) sur cette machine distante.
|
||||
|
||||
Sur votre machine distante, à l'aide de [Dockge](/serveex/coeur/docker/#installer-dockge-pour-gérer-et-déployer-les-conteneurs), créez une stack `authentik-outpost`.
|
||||
|
||||
Si vous n'avez pas installé [Dockge](/serveex/coeur/docker/#installer-dockge-pour-gérer-et-déployer-les-conteneurs), créez un dossier `/docker/authentik-outpost`, ou directement en ligne de commande :
|
||||
|
||||
```sh
|
||||
sudo mkdir -P /docker/authentik-outpost
|
||||
```
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce pour les allergiques au terminal :__
|
||||
vous pouvez utiliser [File Browser](/serveex/files/file-browser) pour naviguer dans vos fichier et éditer vos documents au lieu d'utiliser les commandes du terminal.
|
||||
::
|
||||
|
||||
Créez le fichier `compose.yaml` ou copiez la configuration directement dans le champs si vous avez [Dockge](/serveex/coeur/docker/#installer-dockge-pour-gérer-et-déployer-les-conteneurs)
|
||||
|
||||
En ligne de commande :
|
||||
|
||||
```sh
|
||||
sudo vi /docker/authentik-outpost/compose.yaml
|
||||
```
|
||||
Entrez en mode modification avec `i` et collez la configuration suivante, en changeant les chiffres de `{AUTHENTIK_TAG:proxy:2024.2.3}`{lang=properties} par la meme version que celle de votre serveur Authentik.
|
||||
|
||||
```yaml
|
||||
version: "3.5"
|
||||
services:
|
||||
authentik_proxy:
|
||||
container_name: authentik-outpost
|
||||
image: ghcr.io/goauthentik/proxy:2024.2.3
|
||||
# Optionally specify which networks the container should be
|
||||
# might be needed to reach the core authentik server
|
||||
restart: unless-stopped
|
||||
env_file:
|
||||
- .env
|
||||
# - foo
|
||||
ports:
|
||||
- 9000:9000
|
||||
- 9443:9443
|
||||
environment:
|
||||
AUTHENTIK_HOST: ${HOST}
|
||||
AUTHENTIK_INSECURE: "false"
|
||||
AUTHENTIK_TOKEN: ${TOKEN}
|
||||
# Starting with 2021.9, you can optionally set this too
|
||||
# when authentik_host for internal communication doesn't match the public URL
|
||||
# AUTHENTIK_HOST_BROWSER: https://external-domain.tld
|
||||
```
|
||||
|
||||
Rendez-vous sur la stack de SWAG de la machine distante (ou remplissez directement si vous avez [Dockge](/serveex/coeur/docker/#installer-dockge-pour-gérer-et-déployer-les-conteneurs)) et ajoutez le réseau de authentik-outpost dans le fichier de conf sur ce modele (les champs `networks`) :
|
||||
|
||||
|
||||
```sh
|
||||
sudo vi /docker/swag/compose.yaml
|
||||
```
|
||||
|
||||
```yaml
|
||||
services:
|
||||
swag:
|
||||
container_name: #...
|
||||
# ...
|
||||
networks: # Relie le conteneur au réseau custom
|
||||
- authentik-outpost # Nom du réseau déclaré dans la stack
|
||||
|
||||
networks: # Définit le réseau custom
|
||||
#...
|
||||
authentik-outpost: # Nom du réseau déclaré dans la stack
|
||||
name: authentik-outpost_default # Nom véritable du réseau externe
|
||||
external: true # Précise que c'est un réseau à rechercher en externe
|
||||
```
|
||||
|
||||
Appuyez sur `Echap` puis tapez `:x` et appuyez sur `Entrée` pour sauvegarder et quitter.
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Ici nous partons du principe que le nom du réseau de dockge est `authentik-outpost_default`.
|
||||
:::
|
||||
::
|
||||
|
||||
Si vous avez [Dockge](/serveex/coeur/docker/#installer-dockge-pour-g"rer-et-d"ployer-les-conteneurs), relancez SWAG.
|
||||
|
||||
Sinon, via le terminal :
|
||||
|
||||
```sh
|
||||
cd /docker/swag/
|
||||
sudo docker compose up -d
|
||||
```
|
||||
|
||||
Creez (ou remplissez directement si vous avez [Dockge](/serveex/coeur/docker/#installer-dockge-pour-gérer-et-déployer-les-conteneurs)) le fichier `.env` dans le dossier de l'avant poste authentik :
|
||||
|
||||
En ligne de commande :
|
||||
|
||||
```sh
|
||||
sudo vi /docker/authentik-outpost/.env
|
||||
```
|
||||
|
||||
Entrez en mode modification avec `i` et collez la configuration suivante
|
||||
|
||||
```properties
|
||||
HOST=
|
||||
TOKEN=
|
||||
```
|
||||
Remplissez comme suit
|
||||
|
||||
| Variable | Valeur | Exemple |
|
||||
|-------------------------|---------------------------------------------------------|----------------------------|
|
||||
| `HOST`{lang=properties} | L'url de votre serveur authentik | `https://auth.domaine.fr` |
|
||||
| `TOKEN`{lang=properties} | Le token que vous avez précédemment copié précieusement | `Q2pVEqsTNRkJSO9SkJzU3KZ2` |
|
||||
|
||||
Appuyez sur `Echap` puis tapez `:x` et appuyez sur `Entrée` pour sauvegarder et quitter.
|
||||
|
||||
Si vous avez [Dockge](/serveex/coeur/docker/#installer-dockge-pour-g"rer-et-d"ployer-les-conteneurs), déployez la stack.
|
||||
|
||||
Sinon, via le terminal :
|
||||
|
||||
```sh
|
||||
cd /docker/authentik-outpost/
|
||||
sudo docker compose up -d
|
||||
```
|
||||
|
||||
Le conteneur est en route, vous pouvez vérifier son état dans votre panneau admin de votre instance Authentik, section _Applications > Avant-postes_.
|
||||
|
||||
|
||||
Nous allons a présent configurer SWAG.
|
||||
|
||||
Ouvrez le fichier `authentik-server.conf`.
|
||||
|
||||
```sh
|
||||
sudo vi /docker/swag/config/nginx/authentik-server.conf
|
||||
```
|
||||
|
||||
Dans le fichier, passez en mode modification en tapant `i` et changez `authentik-server` par `authentik-outpost` comme suit :
|
||||
|
||||
```nginx
|
||||
set $upstream_authentik authentik-outpost;
|
||||
proxy_pass http://$upstream_authentik:9000;
|
||||
```
|
||||
|
||||
Sauvegardez et quittez en tapant sur `Echap` puis `:x` et sur `Entrée`.
|
||||
|
||||
Ensuite, configurez les applications à protéger selon si elles sont [natives](/serveex/securite/authentik#protéger-une-app-native) ou par [proxy](/serveex/securite/authentik#protéger-une-app-par-reverse-proxy) comme vous l'avez fait sur votre serveur principal.
|
||||
|
||||
## Migrer une base authentik
|
||||
---
|
||||
Sur la machine d'origine, dumper la bdd :
|
||||
|
||||
```sh
|
||||
sudo docker exec authentik-postgres pg_dump -U authentik -F t authentik > /path/to/mydb.tar
|
||||
```
|
||||
|
||||
Puis l'envoyer sur la machine cible. Sur la machine cible, copier le fichier dans le container docker
|
||||
|
||||
```sh
|
||||
cp /path/to/mydb.tar authentik-postgres:/path/to/wherever
|
||||
```
|
||||
|
||||
(Optionnel) Purgez les tables existantes :
|
||||
|
||||
```sh
|
||||
sudo docker exec -i authentik-postgres psql -U authentik -c "SELECT pg_terminate_backend(pg_stat_activity.pid) FROM pg_stat_activity WHERE pg_stat_activity.datname = 'authentik' AND pid <> pg_backend_pid();" && \
|
||||
sudo docker exec -i authentik-postgres psql -U authentik -d postgres -c "DROP DATABASE IF EXISTS authentik;" && \
|
||||
sudo docker exec -i authentik-postgres psql -U authentik -d postgres -c "CREATE DATABASE authentik;" && \
|
||||
```
|
||||
|
||||
Restaurez la bdd
|
||||
|
||||
```sh
|
||||
sudo docker exec authentik-postgresql pg_restore -U authentik -d authentik /path/to/wherever/mydb.tar
|
||||
```
|
||||
@@ -1,2 +0,0 @@
|
||||
navigation.title: La sécurité
|
||||
icon: lucide:trash-2
|
||||
@@ -1,199 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: Uptime-Kuma
|
||||
description: Installer Uptime-Kuma pour surveiller la disponibilité de vos services auto-hébergés, configurer des alertes et protéger le tableau de bord avec Authentik.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# Uptime-Kuma
|
||||
|
||||
::alert{type="info"}
|
||||
🎯 __Objectifs :__
|
||||
- Installer et déployer Uptime-Kuma
|
||||
- Exposer Uptime Kuma
|
||||
- (Optionnel) Protéger Uptime-Kuma avec Authentik
|
||||
::
|
||||
|
||||
[Uptime-Kuma ](https://github.com/louislam/uptime-kuma)est un conteneur dédié au monitoring de services. Le principe est d'envoyer des requêtes régulières à vos services afin de déterminer s'ils sont en lignes ou non, et de vous alerter le cas échéant. Uptime-Kuma est développé par le meme développeur que Dockge.
|
||||
|
||||

|
||||
|
||||
## Installation
|
||||
---
|
||||
Structure des dossiers
|
||||
|
||||
```sh
|
||||
root
|
||||
└── docker
|
||||
└── uptime-kuma
|
||||
├── date
|
||||
└── compose.yaml
|
||||
```
|
||||
|
||||
Ouvrez Dockge, cliquez sur `compose`, appelez la stack `uptime-kuma` puis copiez collez ceci :
|
||||
|
||||
```yaml
|
||||
---
|
||||
services:
|
||||
uptime-kuma:
|
||||
image: louislam/uptime-kuma:2-slim
|
||||
container_name: uptime-kuma
|
||||
volumes:
|
||||
- /docker/uptime-kuma/uptime-kuma-data:/app/data
|
||||
ports:
|
||||
- 3200:3001 # <Host Port>:<Container Port>
|
||||
restart: always
|
||||
```
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ ajoutez le label de watchtower dans chaque conteneur afin d'automatiser les mises à jour
|
||||
|
||||
```yaml
|
||||
services:
|
||||
uptime-kuma:
|
||||
#...
|
||||
labels:
|
||||
- com.centurylinklabs.watchtower.enable=true
|
||||
::
|
||||
|
||||
Vous n'avez plus qu'à accéder à l'outil via `http://ipdevotreserveur:3200`.
|
||||
|
||||
::alert{type="danger"}
|
||||
:::list{type="danger"}
|
||||
- __En cas d'échec :__ vérifiez les règles de votre pare-feu.
|
||||
:::
|
||||
::
|
||||
|
||||
## Exposer avec Swag
|
||||
---
|
||||
::alert{type="info"}
|
||||
📋 __Au préalable :__
|
||||
<br/><br/>
|
||||
Nous partons du principe que vous avez le sous-domaine `stats.mondomaine.fr` avec un `CNAME` qui pointe vers `mondomaine.fr` dans votre [zone DNS](/generalites/reseau/dns). Et que bien sûr, [à moins que vous utilisiez Cloudflare Zero Trust](/serveex/securite/cloudflare), le port `443` de votre box pointe bien sur le port `443` de votre serveur via [les règles NAT](/generalites/reseau/nat).
|
||||
::
|
||||
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- Uptime-Kuma n'utilise pas d'authentification multifacteur. Exposer Uptime-Kuma sur internet pourrait compromettre les machines auxquelles il est relié. Ne le faite que si vous utilisez un systeme d'authentification multifacteur comme [Authentik](/serveex/securite/authentik/). Sinon, n'exposez pas avec SWAG et utilisez plutôt un VPN comme [Wireguard](/serveex/securite/wireguard).
|
||||
:::
|
||||
::
|
||||
|
||||
Dans les dossiers de Swag, créez le fichier `stats.subdomain.conf`.
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce pour les allergiques au terminal :__
|
||||
vous pouvez utiliser [File Browser](/serveex/files/file-browser) pour naviguer dans vos fichier et éditer vos documents au lieu d'utiliser les commandes du terminal.
|
||||
::
|
||||
|
||||
```sh
|
||||
sudo vi /docker/swag/config/nginx/proxy-confs/stats.subdomain.conf
|
||||
```
|
||||
Entrez en modification avec la touche `i` et collez la configuration ci-dessous :
|
||||
|
||||
```nginx
|
||||
## Version 2023/12/19
|
||||
|
||||
server {
|
||||
listen 443 ssl;
|
||||
listen [::]:443 ssl;
|
||||
|
||||
server_name stats.*;
|
||||
|
||||
include /config/nginx/ssl.conf;
|
||||
|
||||
client_max_body_size 0;
|
||||
|
||||
#if ($lan-ip = yes) { set $geo-whitelist yes; }
|
||||
#if ($geo-whitelist = no) { return 404; }
|
||||
if ($geo-blacklist = no) { return 404; }
|
||||
|
||||
# enable for ldap auth (requires ldap-location.conf in the location block)
|
||||
#include /config/nginx/ldap-server.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-location.conf in the location block)
|
||||
#include /config/nginx/authelia-server.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-location.conf in the location block)
|
||||
#include /config/nginx/authentik-server.conf;
|
||||
|
||||
location / {
|
||||
# enable the next two lines for http auth
|
||||
#auth_basic "Restricted";
|
||||
#auth_basic_user_file /config/nginx/.htpasswd;
|
||||
|
||||
# enable for ldap auth (requires ldap-server.conf in the server block)
|
||||
#include /config/nginx/ldap-location.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-server.conf in the server block)
|
||||
#include /config/nginx/authelia-location.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-server.conf in the server block)
|
||||
#include /config/nginx/authentik-location.conf;
|
||||
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app uptime-kuma;
|
||||
set $upstream_port 3001;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
}
|
||||
```
|
||||
Appuyez sur `Echap` puis sauvegardez et quittez en tapant `:x` puis en appuyant sur `Entrée`.
|
||||
|
||||
Rendez-vous dans dockge, et éditez le compose de SWAG en ajoutant le réseau d'Uptime-Kuma :
|
||||
|
||||
```yaml
|
||||
services:
|
||||
swag:
|
||||
container_name: # ...
|
||||
# ...
|
||||
networks: # Relie le conteneur au réseau custom
|
||||
# ...
|
||||
- uptime-kuma # Nom du réseau déclaré dans la stack
|
||||
|
||||
networks: # Définit le réseau custom
|
||||
# ...
|
||||
uptime-kuma: # Nom du réseau déclaré dans la stack
|
||||
name: uptime-kuma_default # Nom véritable du réseau externe
|
||||
external: true # Précise que c'est un réseau à rechercher en externe
|
||||
```
|
||||
|
||||
Relancez la stack et patientez le temps que SWAG soit complètement opérationnel.
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Ici nous partons du principe que le nom du réseau de Uptime-Kuma est `uptime-kuma_default`. Vous pouvez vérifier que la connexion est opérationnelle en visitant le dashboard de SWAG en tapant `http://ipduserveur:81`.
|
||||
:::
|
||||
::
|
||||
|
||||
Et voilà, vous avez exposé Uptime-Kuma, vous pouvez y accéder en tapant `https://stats.mondomaine.fr`
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__
|
||||
<br/><br>
|
||||
Vous pouvez protéger cette app avec Authentik en ouvrant `stats.subodmain.conf` et en retirant les `#` devant `include /config/nginx/authentik-server.conf;`{lang=nginx} et `include /config/nginx/authentik-location.conf;`{lang=nginx}. N'oubliez pas de [créer une application et un fournisseur dans Authentik](/serveex/securite/authentik#protéger-une-app-par-reverse-proxy). Si vous souhaitez que la page publique de stats soit joignable par tout le monde sans authentification:
|
||||
|
||||
- Editez le fournisseur d'Uptime-Kuma
|
||||
- Dans *paramètres avancés du protocole > chemins authentifiés*, saisissez :
|
||||
|
||||
```properties
|
||||
^/$
|
||||
^/status
|
||||
^/assets/
|
||||
^/assets
|
||||
^/icon.svg
|
||||
^/api/.*
|
||||
^/upload/.*
|
||||
^/metrics
|
||||
::
|
||||
|
||||
Déployez à nouveau la stack.
|
||||
|
||||
Uptime-Kuma sera ainsi joignable directement depuis internet en tapant `https://stats.mondomaine.fr`.
|
||||
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ Si vous utilisez Authentik et que vous ne craignez pas d'exposer votre panneau admin à votre réseau local, vous pouvez désactiver l'authentification d'Uptime-Kuma via les paramètres, afin de ne garder que celle d'Authentik.
|
||||
::
|
||||
@@ -1,181 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: Dozzle
|
||||
description: Installer Dozzle pour surveiller les logs des conteneurs Docker en temps réel depuis une interface web épurée, exposée via SWAG.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# Dozzle
|
||||
|
||||
::alert{type="info"}
|
||||
🎯 __Objectifs :__
|
||||
- Installer Dozzle
|
||||
- Exposer Dozzle avec Swag
|
||||
::
|
||||
|
||||
[Dozzle](https://dozzle.dev/) est un conteneur permettant d'accéder au logs de vos conteneurs et de les afficher en temps réel de via une interface user-friendly. C'est une manière simple de naviguer entre les logs et de retrouver des informations dans l'historique.
|
||||
|
||||

|
||||
|
||||
## Installation
|
||||
---
|
||||
Structure des dossiers
|
||||
|
||||
```sh
|
||||
root
|
||||
└── docker
|
||||
└── dozzle
|
||||
└── data
|
||||
```
|
||||
|
||||
Ouvrez Dockge, cliquez sur `compose`, appelez la stack `dozzle` puis copiez collez ceci :
|
||||
|
||||
```yaml
|
||||
---
|
||||
services:
|
||||
dozzle:
|
||||
container_name: dozzle
|
||||
image: amir20/dozzle:latest
|
||||
ports:
|
||||
- 9135:8080
|
||||
env_file:
|
||||
- .env
|
||||
environment:
|
||||
- DOZZLE_HOSTNAME=${DOMAIN}
|
||||
volumes:
|
||||
- /var/run/docker.sock:/var/run/docker.sock
|
||||
```
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ ajoutez le label de watchtower dans chaque conteneur afin d'automatiser les mises à jour
|
||||
|
||||
```yaml
|
||||
services:
|
||||
dozzle:
|
||||
#...
|
||||
labels:
|
||||
- com.centurylinklabs.watchtower.enable=true
|
||||
::
|
||||
|
||||
Renseignez le `.env` votre nom de domaine, par exemple
|
||||
|
||||
```properties
|
||||
DOMAIN=dozzle.mondomaine.fr
|
||||
```
|
||||
|
||||
Déployez le conteneur et rendez-vous sur `http://ipduserveur:9135`. Et voilà, votre instance Dozzle en webui est disponible !
|
||||
|
||||
## Exposer Dozzle avec Swag
|
||||
---
|
||||
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- Dozzle n'utilise pas d'authentification multifacteur. Exposer Dozzle sur internet pourrait compromettre les machines auxquelles il est relié. Ne le faite que si vous utilisez un systeme d'authentification multifacteur comme [Authentik](/serveex/securite/authentik/). Sinon, n'exposez pas avec SWAG et utilisez plutôt un VPN comme [Wireguard](/serveex/securite/wireguard).
|
||||
:::
|
||||
::
|
||||
|
||||
Vous aurez peut-etre envie d'y accéder à distance et sur tout vos appareils. Pour cela, nous allons exposer Dozzle via Swag.
|
||||
|
||||
::alert{type="info"}
|
||||
📋 __Au préalable :__
|
||||
<br/><br/>
|
||||
Nous partons du principe que vous avez créé dans votre [zone DNS](/generalites/reseau/dns) un sous domaine du type `dozzle.mondomaine.fr` avec pour `CNAME` `mondomaine.fr` et, [à moins que vous utilisiez Cloudflare Zero Trust](/serveex/securite/cloudflare), que que vous avez déjà redirigé le port `443` de votre box vers le `443` de votre serveur dans [les règles NAT](/generalites/reseau/nat).
|
||||
::
|
||||
|
||||
Rendez-vous dans dockge, et éditez le compose de SWAG en ajoutant le réseau de Dozzle :
|
||||
|
||||
```yaml
|
||||
services:
|
||||
swag:
|
||||
container_name: # ...
|
||||
# ...
|
||||
networks: # Relie le conteneur au réseau custom
|
||||
# ...
|
||||
- dozzle # Nom du réseau déclaré dans la stack
|
||||
|
||||
networks: # Définit le réseau custom
|
||||
# ...
|
||||
dozzle: # Nom du réseau déclaré dans la stack
|
||||
name: dozzle_default # Nom véritable du réseau externe
|
||||
external: true # Précise que c'est un réseau à rechercher en externe
|
||||
```
|
||||
|
||||
Relancez la stack en cliquant sur "déployer" et patientez le temps que SWAG soit complètement opérationnel.
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Ici nous partons du principe que le nom du réseau de Dozzle est `dozzle_default`. Vous pouvez vérifier que la connexion est opérationnelle en visitant le dashboard de SWAG en tapant `http://ipduserveur:81`.
|
||||
:::
|
||||
::
|
||||
|
||||
|
||||
Dans les dossiers de Swag, créez le fichier `dozzle.subdomain.conf`.
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ vous pouvez utiliser [File Browser](/serveex/files/file-browser) pour naviguer dans vos fichier et éditer vos documents au lieu d'utiliser les commandes du terminal.
|
||||
::
|
||||
|
||||
```sh
|
||||
sudo vi /docker/swag/config/nginx/proxy-confs/dozzle.subdomain.conf
|
||||
```
|
||||
Entrez en modification avec la touche `i` et collez la configuration ci-dessous :
|
||||
|
||||
```nginx
|
||||
## Version 2023/12/19
|
||||
|
||||
server {
|
||||
listen 443 ssl;
|
||||
listen [::]:443 ssl;
|
||||
|
||||
server_name dozzle.*;
|
||||
|
||||
include /config/nginx/ssl.conf;
|
||||
|
||||
client_max_body_size 0;
|
||||
|
||||
#if ($lan-ip = yes) { set $geo-whitelist yes; }
|
||||
#if ($geo-whitelist = no) { return 404; }
|
||||
if ($geo-blacklist = no) { return 404; }
|
||||
|
||||
# enable for ldap auth (requires ldap-location.conf in the location block)
|
||||
#include /config/nginx/ldap-server.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-location.conf in the location block)
|
||||
#include /config/nginx/authelia-server.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-location.conf in the location block)
|
||||
#include /config/nginx/authentik-server.conf;
|
||||
|
||||
location / {
|
||||
# enable the next two lines for http auth
|
||||
#auth_basic "Restricted";
|
||||
#auth_basic_user_file /config/nginx/.htpasswd;
|
||||
|
||||
# enable for ldap auth (requires ldap-server.conf in the server block)
|
||||
#include /config/nginx/ldap-location.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-server.conf in the server block)
|
||||
#include /config/nginx/authelia-location.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-server.conf in the server block)
|
||||
#include /config/nginx/authentik-location.conf;
|
||||
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app dozzle;
|
||||
set $upstream_port 8080;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Appuyez sur `Echap` puis sauvegardez et quittez en tapant `:x` puis en appuyant sur `Entrée`.
|
||||
|
||||
Et voilà, vous avez exposé Dozzle !
|
||||
|
||||
::alert{type="success"}
|
||||
✨ Vous pouvez protéger cette app avec Authentik en ouvrant `dozzle.subodmain.conf` et en retirant les `#` devant `include /config/nginx/authentik-server.conf;`{lang=nginx} et `include /config/nginx/authentik-location.conf;`{lang=nginx}. N'oubliez pas de [créer une application et un fournisseur dans Authentik](/serveex/securite/authentik#protéger-une-app-par-reverse-proxy).
|
||||
::
|
||||
@@ -1,207 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: Speedtest Tracker
|
||||
description: Installer Speedtest Tracker pour mesurer et enregistrer automatiquement la vitesse de votre connexion internet dans le temps, exposé avec SWAG.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# Speedtest Tracker
|
||||
|
||||
::alert{type="info"}
|
||||
🎯 __Objectifs :__
|
||||
- Installer Speedtest Tracker
|
||||
- Exposer Speedtest Tracker avec Swag
|
||||
::
|
||||
|
||||
[Speedtest Tracker](https://docs.speedtest-tracker.dev/) est un conteneur permettant de programmer des speedtest régulier afin d'historiser l'état de la connexion internet de votre serveur.
|
||||
|
||||

|
||||
|
||||
## Installation
|
||||
---
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Nous utiliserons l'image docker maintenue par [LinuxServer.io](https://docs.linuxserver.io/images/docker-speedtest-tracker/)
|
||||
:::
|
||||
::
|
||||
|
||||
Structure des fichiers
|
||||
|
||||
```sh
|
||||
root
|
||||
└── docker
|
||||
└── speedtest-tracker
|
||||
└── data
|
||||
└── config
|
||||
```
|
||||
|
||||
Dans un terminal, générez une clé avec la commande suivante :
|
||||
|
||||
```sh
|
||||
echo -n 'base64:'; openssl rand -base64 32;
|
||||
```
|
||||
|
||||
Notez la clé.
|
||||
|
||||
Ouvrez Dockge, cliquez sur `compose`, appelez la stack `speedtest-tracker` puis copiez collez ceci :
|
||||
|
||||
```yaml
|
||||
---
|
||||
services:
|
||||
speedtest-tracker:
|
||||
image: lscr.io/linuxserver/speedtest-tracker:latest
|
||||
restart: unless-stopped
|
||||
container_name: speedtest-tracker
|
||||
ports:
|
||||
- ${PORT}:80
|
||||
environment:
|
||||
- PUID=${PUID}
|
||||
- PGID=${GUID}
|
||||
- TZ=Europe/Paris
|
||||
- APP_KEY=${API_KEY}
|
||||
- DB_CONNECTION=sqlite
|
||||
- SPEEDTEST_SCHEDULE=${SCHEDULE}
|
||||
volumes:
|
||||
- /docker/speedtest-tracker/data/config:/config
|
||||
```
|
||||
|
||||
Trouvez votre `PUID` et votre `GUID` en tapant la commande suivante :
|
||||
|
||||
```sh
|
||||
id nomdutilisateur
|
||||
```
|
||||
|
||||
Dans `.env` renseignez la variable `API_KEY` avec la clé que vous avez générée et un planning de test au format cron, ainsi que vos `PUID` et `GUID`, par exemple :
|
||||
|
||||
```properties
|
||||
SCHEDULE=15 */6 * * * # toutes les 6h
|
||||
API_KEY=base64:zihejehkj8_nzhY/OjeieR= # votre clé
|
||||
PUID=1000
|
||||
GUID=1000
|
||||
PORT=3225 # port d'accès à la webui
|
||||
```
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ vous pouvez configurer d'autres variables d'environnements en consultant la [documentation officielle](https://docs.speedtest-tracker.dev/getting-started/environment-variables).
|
||||
::
|
||||
|
||||
Déployez le conteneur et rendez-vous sur http://ipduserveur:3225. Connectez vous avec le compte `[email protected]` et le mot de passe `password`. N'oubliez pas de changer votre id et votre mot de apsse une fois connecté !
|
||||
|
||||
|
||||
## Exposer Speedtest Tracker
|
||||
---
|
||||
::alert{type="info"}
|
||||
📋 __Prérequis :__ <br/></br>
|
||||
Nous partons du principe que vous avez créé dans votre [zone DNS](/generalites/reseau/dns) un sous domaine du type `speedtest.mondomaine.fr` avec pour `CNAME` `mondomaine.fr` et [à moins que vous utilisiez Cloudflare Zero Trust](/serveex/securite/cloudflare), que vous avez déjà redirigé le port `443` de votre box vers le `443` de votre serveur dans [les règles NAT](/generalites/reseau/nat).
|
||||
::
|
||||
|
||||
Il s'agit maintenant d'exposer Speedtest Tracker sur internet, afin de pouvoir y accéder sans que vous soyez chez vous. Pour cela, nous partons du principe que vous avez configuré un sous domaine `speedtest.mondomaine.fr` dans votre zone DNS dont le `CNAME` pointe sur `mondomaine.fr`.
|
||||
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- Speedtest Tracker n'utilise pas d'authentification multifacteur. Exposer Speedtest Tracker sur internet pourrait compromettre les machines auxquelles il est relié. Ne le faite que si vous utilisez un systeme d'authentification multifacteur comme [Authentik](/serveex/securite/authentik/). Sinon, n'exposez pas avec SWAG et utilisez plutôt un VPN comme [Wireguard](/serveex/securite/wireguard).
|
||||
:::
|
||||
::
|
||||
|
||||
Ouvrez le fichier speedtest.subdomain.conf :
|
||||
|
||||
```sh
|
||||
sudo vi /docker/swag/config/nginx/proxy-confs/speedtest.subdomain.conf
|
||||
```
|
||||
|
||||
Paramétrez le comme tel :
|
||||
|
||||
```nginx
|
||||
## Version 2023/12/19
|
||||
|
||||
server {
|
||||
listen 443 ssl;
|
||||
listen [::]:443 ssl;
|
||||
|
||||
# indique que le sous-domaine doit être dirigé
|
||||
server_name speedtest.*;
|
||||
|
||||
include /config/nginx/ssl.conf;
|
||||
|
||||
client_max_body_size 0;
|
||||
|
||||
#if ($lan-ip = yes) { set $geo-whitelist yes; }
|
||||
#if ($geo-whitelist = no) { return 404; }
|
||||
# indique que les pays dans la blacklist sont intedits
|
||||
if ($geo-blacklist = no) { return 404; }
|
||||
|
||||
# enable for ldap auth (requires ldap-location.conf in the location block)
|
||||
#include /config/nginx/ldap-server.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-location.conf in the location block)
|
||||
#include /config/nginx/authelia-server.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-location.conf in the location block)
|
||||
#include /config/nginx/authentik-server.conf;
|
||||
|
||||
location / {
|
||||
# enable the next two lines for http auth
|
||||
#auth_basic "Restricted";
|
||||
#auth_basic_user_file /config/nginx/.htpasswd;
|
||||
|
||||
# enable for ldap auth (requires ldap-server.conf in the server block)
|
||||
#include /config/nginx/ldap-location.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-server.conf in the server block)
|
||||
#include /config/nginx/authelia-location.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-server.conf in the server block)
|
||||
#include /config/nginx/authentik-location.conf;
|
||||
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
|
||||
set $upstream_app speedtest-tracker; # Nom du conteneur
|
||||
set $upstream_port 3225; # Port interne conteneur
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Sauvegardez et quittez. La configuration va se mettre à jour en quelques secondes.
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Par défaut, swag ne connait pas le nom "speedtest-tracker". Pour qu'il puisse y accéder, vous devez rajouter le réseau de Speedtest Tracker dans le `compose.yml` de SWAG.
|
||||
:::
|
||||
::
|
||||
|
||||
Rendez-vous dans dockge, et éditez le compose de SWAG en ajoutant le réseau de Speedtest Tracker :
|
||||
|
||||
```yaml
|
||||
services:
|
||||
swag:
|
||||
container_name: # ...
|
||||
# ...
|
||||
networks: # Relie le conteneur au réseau custom
|
||||
# ...
|
||||
- speedtest-tracker # Nom du réseau déclaré dans la stack
|
||||
|
||||
networks: # Définit le réseau custom
|
||||
# ...
|
||||
speedtest-tracker: # Nom du réseau déclaré dans la stack
|
||||
name: speedtest-tracker_default # Nom véritable du réseau externe
|
||||
external: true # Précise que c'est un réseau à rechercher en externe
|
||||
```
|
||||
|
||||
Relancez la stack en cliquant sur "déployer" et patientez le temps que SWAG soit complètement opérationnel.
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Ici nous partons du principe que le nom du réseau de Speedtest Tracker est `speedtest-tracker_default`. Vous pouvez vérifier que la connexion est opérationnelle en visitant le dashboard de SWAG en tapant `http://ipduserveur:81`.
|
||||
:::
|
||||
::
|
||||
|
||||
Patientez puis tapez `https://speedtest.mondomaine.fr` dans votre navigateur, vous devriez être redirigé vers speedtest-tracker. Vous pouvez vérifier le statut du service via le dashboard (depuis votre réseau local, http://ipdevotreserveur:81).
|
||||
|
||||
::alert{type="success"}
|
||||
✨ Vous pouvez protéger cette app avec Authentik en ouvrant `speedtest.subodmain.conf` et en retirant les `#` devant `include /config/nginx/authentik-server.conf;`{lang=nginx} et `include /config/nginx/authentik-location.conf;`{lang=nginx}. N'oubliez pas de [créer une application et un fournisseur dans Authentik](/serveex/securite/authentik#protéger-une-app-par-reverse-proxy).
|
||||
::
|
||||
@@ -1,256 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: Beszel
|
||||
description: Installer Beszel pour surveiller CPU, RAM, disques et réseau de vos serveurs — y compris à distance — via un tableau de bord web léger.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# Beszel
|
||||
|
||||
::alert{type="info"}
|
||||
🎯 __Objectifs :__
|
||||
- Installer Beszel
|
||||
- Monitorer le serveur local
|
||||
- Monitorer un serveur distant
|
||||
- Exposer Beszel avec Swag
|
||||
::
|
||||
|
||||
[Beszel](https://beszel.dev/) est un conteneur permettant d'accéder aux informations du hardware de vos serveurs en temps réel et de les historiser. Activité CPU, usages des disques, températures, RAM, vous ne raterez rien de l'état de votre serveur. Beszel permet également de paramétrer des notifications et alertes en cas de dépassement de limites que vous avez choisies.
|
||||
|
||||
Beszel dispose d'un hub avec une webui et d'un agent qui permet de collecter les données depuis votre serveur ou sur un serveur distant.
|
||||
|
||||

|
||||
|
||||
## Installation
|
||||
---
|
||||
|
||||
Structure des dossiers
|
||||
|
||||
```sh
|
||||
root
|
||||
└── docker
|
||||
└── beszel
|
||||
├── data
|
||||
└── socket
|
||||
|
||||
```
|
||||
|
||||
Ouvrez Dockge, cliquez sur `compose`, appelez la stack `beszel` puis copiez collez ceci :
|
||||
|
||||
```yaml
|
||||
---
|
||||
services:
|
||||
beszel:
|
||||
image: henrygd/beszel:latest
|
||||
container_name: beszel
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- ${PORT}:8090
|
||||
volumes:
|
||||
- ./data:/beszel_data
|
||||
- ./socket:/beszel_socket
|
||||
|
||||
beszel-agent:
|
||||
image: henrygd/beszel-agent:latest
|
||||
container_name: beszel-agent
|
||||
restart: unless-stopped
|
||||
network_mode: host
|
||||
volumes:
|
||||
- ./socket:/beszel_socket
|
||||
- /var/run/docker.sock:/var/run/docker.sock:ro
|
||||
environment:
|
||||
LISTEN: /beszel_socket/beszel.sock
|
||||
# Do not remove quotes around the key
|
||||
KEY: ${KEY}
|
||||
```
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ ajoutez le label de watchtower dans chaque conteneur afin d'automatiser les mises à jour
|
||||
|
||||
```yaml
|
||||
services:
|
||||
beszel:
|
||||
#...
|
||||
labels:
|
||||
- com.centurylinklabs.watchtower.enable=true
|
||||
::
|
||||
|
||||
Renseignez le `.env`, par exemple :
|
||||
|
||||
```properties
|
||||
PORT=8090 # port de la webui
|
||||
KEY= # clé privée à récupérer dans Beszel lors que vous ajoutez un système
|
||||
```
|
||||
Pour la valeur `KEY`, il faudra lancer Beszel une première fois pour la saisir.
|
||||
|
||||
Déployez le conteneur et rendez-vous sur `http://ipduserveur:8090`. Et voilà, votre instance Beszel en webui est disponible !
|
||||
|
||||
::alert{type="danger"}
|
||||
:::list{type="danger"}
|
||||
- __En cas d'échec :__ vérifiez les règles de votre pare-feu.
|
||||
:::
|
||||
::
|
||||
|
||||
### Ajouter les informations du serveur local
|
||||
|
||||
Maintenant que la webui est accessible, vous devez faire remonter les informations du serveur dedans. Pour cela, il vous suffit d'ajouter une machine dans la webui et de paraméter comme ceci :
|
||||
|
||||

|
||||
|
||||
Note la clé privée et validez. Renseignez la clé dans votre `.env` dans dockge, et redéployez la stack. Lorsque vous retournerez sur la webui, votre serveur apparaitra :
|
||||
|
||||

|
||||
|
||||
|
||||
### Ajouter les informations d'un serveur distant
|
||||
|
||||
Vous pouvez également monitorer un serveur distant. Pour cela vous avez juste à faire tourner l'agent sur le serveur distant. Pour cela, ajoutez une nouvelle machine dans Beszel et renseignez :
|
||||
|
||||
- Le nom qui s'affichera dans Beszel pour votre serveur distant
|
||||
- L'adresse IP ou le nom de domaine de votre serveur distant
|
||||
- Le port d'écoute de votre serveur distant (dans notre exemple cela sera `45876`)
|
||||
|
||||
Beszel vous proposera de copier directement le `compose.yaml` à déployer sur votre serveur distant, ou vous pouvez le configurer comme suit :
|
||||
|
||||
```yaml
|
||||
---
|
||||
services:
|
||||
beszel-agent:
|
||||
image: henrygd/beszel-agent
|
||||
container_name: beszel-agent
|
||||
restart: unless-stopped
|
||||
network_mode: host
|
||||
volumes:
|
||||
- /var/run/docker.sock:/var/run/docker.sock:ro
|
||||
environment:
|
||||
LISTEN: ${PORT}
|
||||
KEY: ${KEY}
|
||||
```
|
||||
|
||||
Et dans le `.env` :
|
||||
|
||||
```properties
|
||||
PORT=45876 # port de communication entre votre hub et l'agent à distance
|
||||
KEY= # clé privée à récupérer dans Beszel lors que vous ajoutez un système
|
||||
```
|
||||
Déployez la stack sur votre serveur distant. Les informations du serveur distant remontront au bout de quelques secondes dans votre webui.
|
||||
|
||||
::alert{type="danger"}
|
||||
:::list{type="danger"}
|
||||
- __En cas d'échec :__ vérifiez les règles de votre pare-feu.
|
||||
:::
|
||||
::
|
||||
|
||||
## Exposer Beszel avec Swag
|
||||
---
|
||||
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- Beszel n'utilise pas d'authentification multifacteur. Exposer Beszel sur internet pourrait compromettre les machines auxquelles il est relié. Ne le faite que si vous utilisez un systeme d'authentification multifacteur comme [Authentik](/serveex/securite/authentik/). Sinon, n'exposez pas avec SWAG et utilisez plutôt un VPN comme [Wireguard](/serveex/securite/wireguard).
|
||||
:::
|
||||
::
|
||||
|
||||
Vous aurez peut-etre envie d'y accéder à distance et sur tout vos appareils. Pour cela, nous allons exposer Beszel via Swag.
|
||||
|
||||
::alert{type="info"}
|
||||
📋 __Au préalable :__
|
||||
<br/><br/>
|
||||
Nous partons du principe que vous avez créé dans votre [zone DNS](/generalites/reseau/dns) un sous domaine du type `beszel.mondomaine.fr` avec pour `CNAME` `mondomaine.fr` et, [à moins que vous utilisiez Cloudflare Zero Trust](/serveex/securite/cloudflare), que que vous avez déjà redirigé le port `443` de votre box vers le `443` de votre serveur dans [les règles NAT](/generalites/reseau/nat).
|
||||
::
|
||||
|
||||
Rendez-vous dans dockge, et éditez le compose de SWAG en ajoutant le réseau de Beszel :
|
||||
|
||||
```yaml
|
||||
services:
|
||||
swag:
|
||||
container_name: # ...
|
||||
# ...
|
||||
networks: # Relie le conteneur au réseau custom
|
||||
# ...
|
||||
- beszel # Nom du réseau déclaré dans la stack
|
||||
|
||||
networks: # Définit le réseau custom
|
||||
# ...
|
||||
beszel: # Nom du réseau déclaré dans la stack
|
||||
name: beszel_default # Nom véritable du réseau externe
|
||||
external: true # Précise que c'est un réseau à rechercher en externe
|
||||
```
|
||||
|
||||
Relancez la stack en cliquant sur "déployer" et patientez le temps que SWAG soit complètement opérationnel.
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Ici nous partons du principe que le nom du réseau de beszel est `beszel_default`. Vous pouvez vérifier que la connexion est opérationnelle en visitant le dashboard de SWAG en tapant `http://ipduserveur:81`.
|
||||
:::
|
||||
::
|
||||
|
||||
Dans les dossiers de Swag, créez le fichier `beszel.subdomain.conf`.
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ vous pouvez utiliser [File Browser](/serveex/files/file-browser) pour naviguer dans vos fichier et éditer vos documents au lieu d'utiliser les commandes du terminal.
|
||||
::
|
||||
|
||||
```sh
|
||||
sudo vi /docker/swag/config/nginx/proxy-confs/beszel.subdomain.conf
|
||||
```
|
||||
Entrez en modification avec la touche `i` et collez la configuration ci-dessous :
|
||||
|
||||
```nginx
|
||||
## Version 2023/12/19
|
||||
|
||||
server {
|
||||
listen 443 ssl;
|
||||
listen [::]:443 ssl;
|
||||
|
||||
server_name beszel.*;
|
||||
|
||||
include /config/nginx/ssl.conf;
|
||||
|
||||
client_max_body_size 0;
|
||||
|
||||
#if ($lan-ip = yes) { set $geo-whitelist yes; }
|
||||
#if ($geo-whitelist = no) { return 404; }
|
||||
if ($geo-blacklist = no) { return 404; }
|
||||
|
||||
# enable for ldap auth (requires ldap-location.conf in the location block)
|
||||
#include /config/nginx/ldap-server.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-location.conf in the location block)
|
||||
#include /config/nginx/authelia-server.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-location.conf in the location block)
|
||||
#include /config/nginx/authentik-server.conf;
|
||||
|
||||
location / {
|
||||
# enable the next two lines for http auth
|
||||
#auth_basic "Restricted";
|
||||
#auth_basic_user_file /config/nginx/.htpasswd;
|
||||
|
||||
# enable for ldap auth (requires ldap-server.conf in the server block)
|
||||
#include /config/nginx/ldap-location.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-server.conf in the server block)
|
||||
#include /config/nginx/authelia-location.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-server.conf in the server block)
|
||||
#include /config/nginx/authentik-location.conf;
|
||||
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app beszel;
|
||||
set $upstream_port 8090;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Appuyez sur `Echap` puis sauvegardez et quittez en tapant `:x` puis en appuyant sur `Entrée`.
|
||||
|
||||
Et voilà, vous avez exposé Beszel !
|
||||
|
||||
::alert{type="success"}
|
||||
✨ Vous pouvez protéger cette app avec Authentik en ouvrant `beszel.subodmain.conf` et en retirant les `#` devant `include /config/nginx/authentik-server.conf;`{lang=nginx} et `include /config/nginx/authentik-location.conf;`{lang=nginx}. N'oubliez pas de [créer une application et un fournisseur dans Authentik](/serveex/securite/authentik#protéger-une-app-par-reverse-proxy).
|
||||
::
|
||||
@@ -1,195 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: UpSnap
|
||||
description: Installer UpSnap pour allumer à distance des machines de votre réseau local via Wake-on-LAN, exposé avec SWAG.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# UpSnap
|
||||
|
||||
::alert{type="info"}
|
||||
🎯 __Objectifs :__
|
||||
- Installer UpSnap
|
||||
- Exposer UpSnap avec Swag
|
||||
::
|
||||
|
||||
[UpSnap](https://github.com/seriousm4x/UpSnap) est un conteneur permettant d'allumer, éteindre, ou mettre en veille vos machines à distance. Il utilise essentiellement le systeme de Wake-On-Lan (WoL) par le réseau et dispose d'autres fonctions avancées.
|
||||
|
||||

|
||||
|
||||
## Installation
|
||||
---
|
||||
|
||||
Structure des dossiers
|
||||
|
||||
```sh
|
||||
root
|
||||
└── docker
|
||||
└── upsnap
|
||||
└── data
|
||||
```
|
||||
|
||||
Ouvrez Dockge, cliquez sur `compose`, appelez la stack `upsnap` puis copiez collez ceci :
|
||||
|
||||
```yaml
|
||||
---
|
||||
services:
|
||||
upsnap:
|
||||
container_name: upsnap
|
||||
image: ghcr.io/seriousm4x/upsnap:5
|
||||
network_mode: host
|
||||
restart: unless-stopped
|
||||
volumes:
|
||||
- /docker/upsnap/data:/app/pb_data
|
||||
environment:
|
||||
- TZ=Europe/Paris
|
||||
- UPSNAP_SCAN_RANGE=${SCAN_RANGE}
|
||||
- UPSNAP_SCAN_TIMEOUT=500ms
|
||||
- UPSNAP_PING_PRIVILEGED=true
|
||||
dns:
|
||||
- ${DNS}
|
||||
entrypoint: /bin/sh -c "./upsnap serve --http 0.0.0.0:8095"
|
||||
healthcheck:
|
||||
test: curl -fs "http://localhost:8095/api/health" || exit 1
|
||||
interval: 10s
|
||||
```
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ ajoutez le label de watchtower dans chaque conteneur afin d'automatiser les mises à jour
|
||||
|
||||
```yaml
|
||||
services:
|
||||
upsnap:
|
||||
#...
|
||||
labels:
|
||||
- com.centurylinklabs.watchtower.enable=true
|
||||
::
|
||||
|
||||
Renseignez le `.env`, par exemple :
|
||||
|
||||
```properties
|
||||
RANGE=192.168.1.0/24 # scan toutes les machines sur le réseau local ayant une adresse IP comprise entre 192.168.0.1 et 192.168.1.255
|
||||
DNS=192.168.1.1 # IP du dns à utiliser pour résoudre les noms de domaines, ici dans l'exemple c'est généralement l'IP du routeur
|
||||
```
|
||||
|
||||
Déployez le conteneur et rendez-vous sur `http://ipduserveur:8095`. Vous n'avez plus qu'à suivre les instructions pour créer votre compte !
|
||||
|
||||
::alert{type="danger"}
|
||||
:::list{type="danger"}
|
||||
- __En cas d'échec :__ vérifiez les règles de votre pare-feu.
|
||||
:::
|
||||
::
|
||||
|
||||
## Exposer UpSnap avec Swag
|
||||
---
|
||||
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- UpSnap n'utilise pas d'authentification multifacteur. Exposer UpSnap sur internet pourrait compromettre les machines auxquel il est relié. Ne le faite que si vous utilisez un systeme d'authentification multifacteur comme [Authentik](/serveex/securite/authentik/). Sinon, n'exposez pas avec SWAG et utilisez plutôt un VPN comme [Wireguard](/serveex/securite/wireguard).
|
||||
:::
|
||||
::
|
||||
|
||||
Vous aurez peut-etre envie d'y accéder à distance et sur tout vos appareils. Pour cela, nous allons exposer UpSnap via Swag.
|
||||
|
||||
::alert{type="info"}
|
||||
📋 __Au préalable :__
|
||||
<br/><br/>
|
||||
Nous partons du principe que vous avez créé dans votre [zone DNS](/generalites/reseau/dns) un sous domaine du type `upsnap.mondomaine.fr` avec pour `CNAME` `mondomaine.fr` et, [à moins que vous utilisiez Cloudflare Zero Trust](/serveex/securite/cloudflare), que que vous avez déjà redirigé le port `443` de votre box vers le `443` de votre serveur dans [les règles NAT](/generalites/reseau/nat).
|
||||
::
|
||||
|
||||
Rendez-vous dans dockge, et éditez le compose de SWAG en ajoutant le réseau de UpSnap :
|
||||
|
||||
```yaml
|
||||
services:
|
||||
swag:
|
||||
container_name: # ...
|
||||
# ...
|
||||
networks: # Relie le conteneur au réseau custom
|
||||
# ...
|
||||
- upsnap # Nom du réseau déclaré dans la stack
|
||||
|
||||
networks: # Définit le réseau custom
|
||||
# ...
|
||||
upsnap: # Nom du réseau déclaré dans la stack
|
||||
name: upsnap_default # Nom véritable du réseau externe
|
||||
external: true # Précise que c'est un réseau à rechercher en externe
|
||||
```
|
||||
|
||||
Relancez la stack en cliquant sur "déployer" et patientez le temps que SWAG soit complètement opérationnel.
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Ici nous partons du principe que le nom du réseau de upsnap est `upsnap_default`. Vous pouvez vérifier que la connexion est opérationnelle en visitant le dashboard de SWAG en tapant `http://ipduserveur:81`.
|
||||
:::
|
||||
::
|
||||
|
||||
Dans les dossiers de Swag, créez le fichier `upsnap.subdomain.conf`.
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ vous pouvez utiliser [File Browser](/serveex/files/file-browser) pour naviguer dans vos fichier et éditer vos documents au lieu d'utiliser les commandes du terminal.
|
||||
::
|
||||
|
||||
```sh
|
||||
sudo vi /docker/swag/config/nginx/proxy-confs/upsnap.subdomain.conf
|
||||
```
|
||||
Entrez en modification avec la touche `i` et collez la configuration ci-dessous :
|
||||
|
||||
```nginx
|
||||
## Version 2023/12/19
|
||||
|
||||
server {
|
||||
listen 443 ssl;
|
||||
listen [::]:443 ssl;
|
||||
|
||||
server_name upsnap.*;
|
||||
|
||||
include /config/nginx/ssl.conf;
|
||||
|
||||
client_max_body_size 0;
|
||||
|
||||
#if ($lan-ip = yes) { set $geo-whitelist yes; }
|
||||
#if ($geo-whitelist = no) { return 404; }
|
||||
if ($geo-blacklist = no) { return 404; }
|
||||
|
||||
# enable for ldap auth (requires ldap-location.conf in the location block)
|
||||
#include /config/nginx/ldap-server.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-location.conf in the location block)
|
||||
#include /config/nginx/authelia-server.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-location.conf in the location block)
|
||||
#include /config/nginx/authentik-server.conf;
|
||||
|
||||
location / {
|
||||
# enable the next two lines for http auth
|
||||
#auth_basic "Restricted";
|
||||
#auth_basic_user_file /config/nginx/.htpasswd;
|
||||
|
||||
# enable for ldap auth (requires ldap-server.conf in the server block)
|
||||
#include /config/nginx/ldap-location.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-server.conf in the server block)
|
||||
#include /config/nginx/authelia-location.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-server.conf in the server block)
|
||||
#include /config/nginx/authentik-location.conf;
|
||||
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app upsnap;
|
||||
set $upstream_port 8095;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Appuyez sur `Echap` puis sauvegardez et quittez en tapant `:x` puis en appuyant sur `Entrée`.
|
||||
|
||||
Et voilà, vous avez exposé UpSnap !
|
||||
|
||||
::alert{type="success"}
|
||||
✨ Vous pouvez protéger cette app avec Authentik en ouvrant `upsnap.subodmain.conf` et en retirant les `#` devant `include /config/nginx/authentik-server.conf;`{lang=nginx} et `include /config/nginx/authentik-location.conf;`{lang=nginx}. N'oubliez pas de [créer une application et un fournisseur dans Authentik](/serveex/securite/authentik#protéger-une-app-par-reverse-proxy).
|
||||
::
|
||||
@@ -1,2 +0,0 @@
|
||||
navigation.title: Monitoring
|
||||
icon: lucide:chart-no-axes-column
|
||||
@@ -1,311 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: Plex
|
||||
description: Installer Plex Media Server avec Tautulli sur votre homelab pour streamer films et séries depuis n'importe où sur tous vos appareils.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# Plex
|
||||
|
||||
::alert{type="info"}
|
||||
🎯 __Objectifs :__
|
||||
- Installer Plex
|
||||
- Installer Tautulli
|
||||
- Accéder aux media depuis l'exterieur
|
||||
::
|
||||
|
||||
[Plex](https://www.plex.tv/fr/) est une plateforme de streaming vidéo déployable chez vous, pour manager votre bibliothèque de films ou de série, et les lire en locale ou à distance. Plex dispose d'applications TV, Android, iOS, Window et Mac OS, permettant la lecture de vos bibliothèques, à la Netflix.
|
||||
|
||||
Avec le *plexpass*, vous pouvez également organsier et lire vos contenus audio, à la spotify, la différence étant que c'est bien votre contenu qui est hébergé et lu depuis chez vous.
|
||||
|
||||

|
||||
|
||||
On installera également [Tautulli](https://docs.linuxserver.io/images/docker-tautulli/), un outil qui permet d'avoir des stats poussées sur Plex. On utilisera, comme dès qu'on le peut, les images de linuxserver.io.
|
||||
|
||||
- [Plus d'info sur le conteneur Plex](https://docs.linuxserver.io/images/docker-plex)
|
||||
- [Plus d'info sur le conteneur Tautulli](https://docs.linuxserver.io/images/docker-tautulli/)
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Vous serez amenés à creer un compte *Plex.tv*. Vous n'avez pas besoin d'exposer votre service Plex, il sera accessible directement par la plateforme. Votre serveur Plex sera gérable directement depuis votre compte.
|
||||
:::
|
||||
::
|
||||
|
||||
## Installer Plex
|
||||
---
|
||||
Structure des dossiers :
|
||||
```sh
|
||||
root
|
||||
├── docker
|
||||
│ ├── plex
|
||||
│ │ ├── compose.yml
|
||||
│ │ ├── .env
|
||||
│ │ ├── config
|
||||
│ │ └── transcode
|
||||
│ └── tautulli
|
||||
│ └── config
|
||||
└── media
|
||||
├── tvseries
|
||||
├── movies
|
||||
└── library
|
||||
```
|
||||
|
||||
Créez les dossiers `movies`, `tvseries` et `library` dans /media :
|
||||
|
||||
```sh
|
||||
mkdir -p /media/movies /media/library /media/tvseries
|
||||
```
|
||||
|
||||
Ouvrez Dockge dans votre navigeateur, et cliquez sur `compose`.
|
||||
Nommez la stack `plex` et ajoutez la config suivante :
|
||||
|
||||
```yaml
|
||||
---
|
||||
services:
|
||||
linuxserver_plex:
|
||||
image: ghcr.io/linuxserver/plex:amd64-latest
|
||||
container_name: plex
|
||||
network_mode: host
|
||||
environment:
|
||||
- PUID=${PUID}
|
||||
- PGID=${GUID}
|
||||
- TZ=Europe/Paris
|
||||
- VERSION=docker
|
||||
volumes:
|
||||
- /docker/plex/config:/config
|
||||
- /docker/plex/transcode:/transcode
|
||||
- /media:/media
|
||||
restart: unless-stopped
|
||||
mem_limit: 4096m
|
||||
mem_reservation: 2048m
|
||||
devices:
|
||||
- /dev/dri:/dev/dri
|
||||
|
||||
tautulli:
|
||||
image: lscr.io/linuxserver/tautulli:latest
|
||||
container_name: tautulli
|
||||
environment:
|
||||
- PUID=${PUID}
|
||||
- PGID=${GUID}
|
||||
- TZ=Europe/Paris
|
||||
volumes:
|
||||
- /docker/tautulli/config:/config
|
||||
ports:
|
||||
- 8181:8181
|
||||
restart: unless-stopped
|
||||
```
|
||||
|
||||
::alert{type="success"}
|
||||
✨ Ajoutez le label de watchtower dans chaque conteneur afin d'automatiser les mises à jour
|
||||
|
||||
```yaml
|
||||
services:
|
||||
plex:
|
||||
#...
|
||||
labels:
|
||||
- com.centurylinklabs.watchtower.enable=true
|
||||
|
||||
tautulli:
|
||||
#...
|
||||
labels:
|
||||
- com.centurylinklabs.watchtower.enable=true
|
||||
::
|
||||
|
||||
Trouvez votre PUID et votre GUID en tapant la commande suivante :
|
||||
|
||||
```sh
|
||||
id nomdutilisateur
|
||||
```
|
||||
Et renseignez le `.env` avec les infos que vous avez trouvées, par exemple :
|
||||
|
||||
```properties
|
||||
PUID=1000
|
||||
GUID=1000
|
||||
```
|
||||
Déployez la stack.
|
||||
|
||||
L'interface locale est disponible via `http://ipduserveur:32400/web/index.html`. L'interface de Tautulli est joignable via `http://ipduserveur:8181`.
|
||||
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- Vous devez impérativement être sur votre réseau local au moment du premier setup de Plex, sans quoi l'url vous renverra sur votre compte Plex sans detecter votre serveur. Un VPN ne vous sauvera pas. Si vous ne pouvez pas faire autrement, [vous pouvez gérer l'installation à distance via un tunnel SSH](https://support.plex.tv/articles/200288586-installation/#toc-2).
|
||||
:::
|
||||
::
|
||||
|
||||
## Paramétrer Plex
|
||||
---
|
||||
Plex propose tout une gamme de film/série gratuitement. Après avoir créé votre compte, et pour ne pas polluer votre bibliothèque, je vous conseille de tout désactiver dans la section _Services en ligne_.
|
||||
|
||||
Ensuite rendez-vous dans la section _Accès à distance_ et choisissez un port manuellement (ici cela sera `1234`). Il est préférable de ne pas garder le port d'origine.
|
||||
|
||||

|
||||
|
||||
- Sur votre routeur, redirigez le port `TCP` source `1234` vers le port `32400`, vers l'IP de votre serveur via [les règles NAT](/generalites/reseau/nat).
|
||||
- Une fois fait, retournez dans Plex afin de vérifier que la connexion est bien opérationnelle
|
||||
|
||||
::alert{type="danger"}
|
||||
:::list{type="danger"}
|
||||
- __En cas d'échec :__ vérifiez les règles de votre pare-feu et autorisez le port `32400` de votre serveur.
|
||||
:::
|
||||
::
|
||||
|
||||
- Si vous avez un abonnement PlexPass et un GPU ou iGPU, activez *l'accélération matérielle* dans la section _Transcodeur_.
|
||||
- Dans la section _Réglages/bibliothèque_, cochez _Analyser ma bibliothèque automatiquement_.
|
||||
- Dans la section _Gérer/bibliothèque_ modifiez ou ajouter les bibliothèque, et choisissez le répertoire `/media/movies` pour les films et `/media/tvseries` pour les séries.
|
||||
|
||||
Et voilà, vous avez un Plex fonctionnel !
|
||||
|
||||
Vous n'avez plus qu'a remplir les dossiers `/media/movies` et `/media/tvseries` sur votre serveur de vos média favoris. Vous pourrez alors télécharger l'application Plex sur vos appareils et lire vos média favoris, chez vous ou à distance !
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Si pour stocker vos média vous utilisez un disque réseau (par exemple un stockage sur un NAS ou un disque dur externe branché ailleurs sur le réseau), veuillez consulter la section [montage samba](/generalites/reseau/samba) afin que Plex puisse y accéder.
|
||||
:::
|
||||
::
|
||||
|
||||
## Exposer Tautulli avec Swag
|
||||
---
|
||||
Plex n'a pas besoin d'etre exposé, étant joignable directement depuis votre compte Plex sur plex.tv.
|
||||
|
||||
En revanche, vous pouvez désirer exposer Tautulli, afin d'accéder aux stats même si vous n'est pas chez vous, depuis une simple url.
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Nous partons du principe que vous avez le sous-domaine `tautulli.mondomaine.fr` avec un `CNAME` qui pointe vers `mondomaine.fr` dans [zone DNS](/generalites/reseau/dns). Et que bien sûr, [à moins que vous utilisiez Cloudflare Zero Trust](/serveex/securite/cloudflare), le port `443` de votre box pointe bien sur le port `443` de votre serveur dans [les règles NAT](/generalites/reseau/nat).
|
||||
:::
|
||||
::
|
||||
|
||||
|
||||
Rendez-vous dans dockge, et éditez le compose de SWAG en ajoutant le réseau de Tautulli :
|
||||
|
||||
```yaml
|
||||
services:
|
||||
swag:
|
||||
container_name: # ...
|
||||
# ...
|
||||
networks: # Relie le conteneur au réseau custom
|
||||
# ...
|
||||
- tautulli # Nom du réseau déclaré dans la stack
|
||||
|
||||
networks: # Définit le réseau custom
|
||||
# ...
|
||||
tautulli: # Nom du réseau déclaré dans la stack
|
||||
name: tautulli_default # Nom véritable du réseau externe
|
||||
external: true # Précise que c'est un réseau à rechercher en externe
|
||||
```
|
||||
|
||||
Relancez la stack en cliquant sur "déployer" et patientez le temps que SWAG soit complètement opérationnel.
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Ici nous partons du principe que le nom du réseau de Tautulli est `tautulli_default`. Vous pouvez vérifier que la connexion est opérationnelle en visitant le dashboard de SWAG en tapant `http://ipduserveur:81`.
|
||||
:::
|
||||
::
|
||||
|
||||
Copiez en renommant le fichier `tautulli.subdomain.conf.sample` en `tautulli.subdomain.conf` et éditez le :
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ vous pouvez utiliser [File Browser](/serveex/files/file-browser) pour naviguer dans vos fichier et éditer vos documents au lieu d'utiliser les commandes du terminal.
|
||||
::
|
||||
|
||||
```sh
|
||||
sudo cp /docker/swag/config/nginx/proxy-confs/tautulli.subdomain.conf.sample /docker/swag/config/nginx/proxy-confs/tautulli.subdomain.conf
|
||||
sudo vi /docker/swag/config/nginx/proxy-confs/tautulli.subdomain.conf
|
||||
```
|
||||
|
||||
Et vérifiez que la configuration correspond bien à ceci, sinon éditez le fichier en appuyant sur `i`:
|
||||
|
||||
```nginx
|
||||
## Version 2023/05/31
|
||||
# make sure that your tautulli container is named tautulli
|
||||
# make sure that your dns has a cname set for tautulli
|
||||
|
||||
server {
|
||||
listen 443 ssl;
|
||||
listen [::]:443 ssl;
|
||||
|
||||
server_name tautulli.*;
|
||||
|
||||
include /config/nginx/ssl.conf;
|
||||
|
||||
client_max_body_size 0;
|
||||
|
||||
# enable for ldap auth (requires ldap-location.conf in the location block)
|
||||
#include /config/nginx/ldap-server.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-location.conf in the location block)
|
||||
#include /config/nginx/authelia-server.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-location.conf in the location block)
|
||||
#include /config/nginx/authentik-server.conf;
|
||||
|
||||
location / {
|
||||
# enable the next two lines for http auth
|
||||
#auth_basic "Restricted";
|
||||
#auth_basic_user_file /config/nginx/.htpasswd;
|
||||
|
||||
# enable for ldap auth (requires ldap-server.conf in the server block)
|
||||
#include /config/nginx/ldap-location.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-server.conf in the server block)
|
||||
#include /config/nginx/authelia-location.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-server.conf in the server block)
|
||||
#include /config/nginx/authentik-location.conf;
|
||||
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app tautulli;
|
||||
set $upstream_port 8181;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
|
||||
location ~ (/tautulli)?/api {
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app tautulli;
|
||||
set $upstream_port 8181;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
|
||||
location ~ (/tautulli)?/newsletter {
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app tautulli;
|
||||
set $upstream_port 8181;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
|
||||
location ~ (/tautulli)?/image {
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app tautulli;
|
||||
set $upstream_port 8181;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
::alert{type="success"}
|
||||
✨ Vous pouvez protéger cette app avec Authentik en retirant les `#` devant `include /config/nginx/authentik-server.conf;`{lang=nginx} et `include /config/nginx/authentik-location.conf;`{lang=nginx}. N'oubliez pas de [créer une application et un fournisseur dans Authentik](/serveex/securite/authentik#protéger-une-app-par-reverse-proxy).
|
||||
::
|
||||
|
||||
Appuyez sur `Echap` puis sauvegardez et quittez en tappant `:x`
|
||||
|
||||
Patientez quelques minutes puis tapez dans votre navigateur `http://tautulli.mondomaine.fr`.
|
||||
|
||||
::alert{type="danger"}
|
||||
:::list{type="danger"}
|
||||
- __En cas d'échec :__ vérifiez les règles de votre pare-feu.
|
||||
:::
|
||||
::
|
||||
|
||||
Et voilà !
|
||||
@@ -1,325 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: Qbittorrent
|
||||
description: Installer qBittorrent avec Gluetun et ProtonVPN pour télécharger des torrents de manière sécurisée derrière un VPN sur votre serveur auto-hébergé.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# Qbittorrent
|
||||
|
||||
::alert{type="info"}
|
||||
🎯 __Objectifs :__
|
||||
- Installer et configurer Qbittorrent
|
||||
- Etre relié au réseau bittorent en toute sécurité avec Gluetun et Proton VPN
|
||||
::
|
||||
|
||||

|
||||
|
||||
Afin de télécharger vos media favoris en toute sécurité, nous allons monter un système à base de :
|
||||
|
||||
- [Qbittorent](https://github.com/linuxserver/docker-qbittorrent) comme logiciel de téléchargement bittorent
|
||||
- [Proton VPN Plus](https://protonvpn.com/torrenting), VPN pour sécuriser vos échanges, auquel vous devez souscrire (il y a de nombreux codes promo) pour accéder au protocole Bittorent, mais vous pouvez également en choisir un autre, à condition qu'il propose le protocole bittorent.
|
||||
- [Gluetun](https://github.com/qdm12/gluetun)
|
||||
- [Qbittorrent port update](https://codeberg.org/TechnoSam/qbittorrent-gluetun-port-update) pour mettre automatiquement à jour le port de votre VPN (qui change régulièrement).
|
||||
- Et le mode [vuetorrent](https://github.com/gabe565/linuxserver-mod-vuetorrent) pour une interface moderne et intuitive.
|
||||
|
||||
Nous monterons ici le système ci-dessous :
|
||||
|
||||

|
||||
|
||||
## Configuration
|
||||
---
|
||||
Structure des dossiers
|
||||
|
||||
```sh
|
||||
root
|
||||
├── docker
|
||||
│ └── seedbox
|
||||
│ ├── qbittorrent
|
||||
│ │ └── config
|
||||
│ ├── gluetun
|
||||
│ ├── compose.yaml
|
||||
│ └── .env
|
||||
│
|
||||
└── media #relié à plex et Qbittorrent
|
||||
├── downloads #vos téléchargements génériques, à selectionner dans les parametres
|
||||
├── movies #à selectionner dans l'interface pour télécharger vos films
|
||||
└── tvseries #à selectionner dans l'interface pour télécharger vos séries
|
||||
```
|
||||
|
||||
Si ce n'est pas déjà fait, créez le dossier `downloads` dans `/media` :
|
||||
|
||||
```sh
|
||||
mkdir -P /media/downloads
|
||||
```
|
||||
|
||||
Ouvrez Dockge, cliquez sur `compose` et nommez la stack `seedbox`. Collez la config ci-dessous :
|
||||
|
||||
```yaml
|
||||
---
|
||||
services:
|
||||
qbit:
|
||||
image: ghcr.io/linuxserver/qbittorrent:libtorrentv1
|
||||
container_name: qbittorrent
|
||||
restart: unless-stopped
|
||||
network_mode: service:gluetun
|
||||
mem_limit: 4g
|
||||
environment:
|
||||
- DOCKER_MODS=ghcr.io/gabe565/linuxserver-mod-vuetorrent|ghcr.io/t-anc/gsp-qbittorent-gluetun-sync-port-mod:main
|
||||
- TZ=Europe/Paris
|
||||
- PUID=${PUID}
|
||||
- PGID=${GUID}
|
||||
- WEBUI_PORT=${UI_PORT}
|
||||
- GSP_GTN_API_KEY=${GSP_KEY}
|
||||
- GSP_QBT_USERNAME=${ID}
|
||||
- GSP_QBT_PASSWORD=${PW}
|
||||
volumes:
|
||||
- /docker/seedbox/qbittorrent/config:/config
|
||||
- /media:/media
|
||||
depends_on:
|
||||
- gluetun
|
||||
|
||||
gluetun:
|
||||
image: qmcgaw/gluetun:v3.41.3
|
||||
container_name: gluetun
|
||||
restart: unless-stopped
|
||||
mem_limit: 4g
|
||||
volumes:
|
||||
- /docker/gluetun/config.toml:/gluetun/auth/config.toml:ro
|
||||
devices:
|
||||
- /dev/net/tun:/dev/net/tun
|
||||
ports:
|
||||
- ${UI_PORT}:5695 # Port de la web-ui
|
||||
- 8000:8000 # Port de controle de Gluetun
|
||||
cap_add:
|
||||
- NET_ADMIN
|
||||
environment:
|
||||
- TZ=Europe/Paris
|
||||
- VPN_SERVICE_PROVIDER=protonvpn
|
||||
- VPN_PORT_FORWARDING=on
|
||||
- VPN_PORT_FORWARDING_PROVIDER=protonvpn
|
||||
- VPN_TYPE=wireguard
|
||||
- WIREGUARD_PRIVATE_KEY=${PR_KEY}
|
||||
- SERVER_COUNTRIES=France
|
||||
- PORT_FORWARD_ONLY=on
|
||||
|
||||
```
|
||||
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ ajoutez le label de watchtower dans chaque conteneur afin d'automatiser les mises à jour
|
||||
|
||||
```yaml
|
||||
services:
|
||||
qbittorrent:
|
||||
#...
|
||||
labels:
|
||||
- com.centurylinklabs.watchtower.enable=true
|
||||
gluetun:
|
||||
#...
|
||||
labels:
|
||||
- com.centurylinklabs.watchtower.enable=true
|
||||
::
|
||||
|
||||
Avant de renseigner le `.env` dans Dockge, nous allons configurer la mise à jour du port de téléchargement. En effet, Proton, et la plupart des VPN, changent régulièrement le port de téléchargement, et celui-ci doit etre communiqué à Qbitorrent.
|
||||
|
||||
Pour ce faire, nous avons ajouté le mod `ghcr.io/t-anc/gsp-qbittorent-gluetun-sync-port-mod` dans le conteneur.
|
||||
|
||||
Il faut à présent permettre au mod de récupérer l'information via Gluetun, qui n'accepte que les communications chiffrées via son API.
|
||||
|
||||
A cet effet, ouvrez un terminal. Nous allons à présent générer une clé d'authentification :
|
||||
|
||||
```sh
|
||||
sudo docker run --rm qmcgaw/gluetun genkey
|
||||
```
|
||||
|
||||
Notez la clé. Puis créez le dossier `/docker/gluetun`
|
||||
|
||||
```sh
|
||||
sudo mkdir /docker/gluetun
|
||||
```
|
||||
|
||||
Et créez le fichier `config.toml`
|
||||
|
||||
```sh
|
||||
sudo vi /docker/gluetun/config.toml
|
||||
```
|
||||
|
||||
Entrez en modification en tapant `i` et éditez le comme suit en ajoutant la clée que vous avez générée :
|
||||
|
||||
```toml
|
||||
[[roles]]
|
||||
name = "t-anc/GSP-Qbittorent-Gluetun-sync-port-mod"
|
||||
routes = ["GET /v1/portforward"]
|
||||
auth = "apikey"
|
||||
apikey = "votre_clée" # clée que vous avez générée précédemment
|
||||
```
|
||||
|
||||
Appuyez sur `échap` et quittez en sauvegardant en tapant `:x`. Rendez-vous dans Dockge, et renseignez les variables dans `.env`:
|
||||
|
||||
```properties
|
||||
PUID=
|
||||
GUID=
|
||||
UI_PORT=
|
||||
PR_KEY=
|
||||
GSP_KEY= # la clé que vous avez générée et renseignée dans config.toml
|
||||
ID=
|
||||
PW=
|
||||
```
|
||||
|
||||
En détails :
|
||||
|
||||
| Variable | Valeur | Exemples |
|
||||
|-----------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------|
|
||||
| `PUID`{lang=properties} | A renseigner avec les infos de votre user (trouvables via la commande `id nomdutilisateur`{lang=shell}) | `1000` |
|
||||
| `GUID`{lang=properties} | A renseigner avec les infos de votre user (trouvables via la commande `id nomdutilisateur`{lang=shell}) | `1000` |
|
||||
| `UI_PORT`{lang=properties} | Le port d'accès à la web ui, elle sera joignable via `http//ipduserveur:port` | `5695` |
|
||||
| `PR_KEY`{lang=properties} | La clée privée fournie par Proton | `buKsjNHLyzKMM1qYnzOy4s7SHfly` |
|
||||
| `GSP_KEY`{lang=properties} | Clé que vous avez générée pour la mise à jour du port | `MnBa47MeVmk7xiv` |
|
||||
| `ID`{lang=properties} | username que vous utilisez pour vous logger dans l'interface de Qbittorrent | `user` |
|
||||
| `PW`{lang=properties} | mot de passe que vous utilisez pour vous logger dans l'interface de Qbittorrent | `password` |
|
||||
|
||||
## Déploiement
|
||||
---
|
||||
Une fois fait, déployez le conteneur.
|
||||
|
||||
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- **Dans les logs de lancement, vous trouverez un mot de passe temporaire pour l'utilisateur `admin`**
|
||||
:::
|
||||
::
|
||||
|
||||
Loggez vous sur `http://ipduserveur:5695` (ou le port que vous avez configuré).
|
||||
|
||||
::alert{type="danger"}
|
||||
:::list{type="danger"}
|
||||
- __En cas d'échec :__ vérifiez les règles de votre pare-feu.
|
||||
:::
|
||||
::
|
||||
|
||||
Changez votre nom d'utilisateur et votre mot de passe dans les paramètres "webui".
|
||||
|
||||
Et voilà ! Dans les paramètres de Qbittorrent, dans "téléchargements" selectionnez `/media/downloads` comme chemin par défaut pour télécharger vos media.
|
||||
|
||||
Lorsque vous lancez un téléchargement, n'oubliez pas de préciser le bon répertoire de téléchargement afin que Plex puisse synchroniser correctement sa bibliothèque (`/media/movies` et `/media/tvseries`). Vous pouvez aussi l'automatiser en créant une catégorie et un répertoire associé.
|
||||
|
||||
## Exposer la webui
|
||||
---
|
||||
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- Qbitorrent n'utilise pas d'authentification multifacteur. Exposer Qbitorrent sur internet pourrait compromettre les machines auxquelles il est relié. Ne le faite que si vous utilisez un systeme d'authentification multifacteur comme [Authentik](/serveex/securite/authentik/). Sinon, n'exposez pas avec SWAG et utilisez plutôt un VPN comme [Wireguard](/serveex/securite/wireguard).
|
||||
:::
|
||||
::
|
||||
|
||||
|
||||
Afin de lancer des téléchargement hors de chez vous, sans VPN, vous pouvez exposer la webui de Qbittorrent.
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Nous partons du principe que vous avez le sous-domaine `seedbox.mondomaine.fr` avec un `CNAME` qui pointe vers `mondomaine.fr` dans [zone DNS](/generalites/reseau/dns). Et que bien sûr, [à moins que vous utilisiez Cloudflare Zero Trust](/serveex/securite/cloudflare), le port `443` de votre box pointe bien sur le port `443` de votre serveur dans [les règles NAT](/generalites/reseau/nat).
|
||||
:::
|
||||
::
|
||||
|
||||
Rendez-vous dans dockge, et éditez le compose de SWAG en ajoutant le réseau de Gluetun :
|
||||
|
||||
```yaml
|
||||
services:
|
||||
swag:
|
||||
container_name: # ...
|
||||
# ...
|
||||
networks: # Relie le conteneur au réseau custom
|
||||
# ...
|
||||
- seedbox # Nom du réseau déclaré dans la stack
|
||||
|
||||
networks: # Définit le réseau custom
|
||||
# ...
|
||||
seedbox: # Nom du réseau déclaré dans la stack
|
||||
name: seedbox_default # Nom véritable du réseau externe
|
||||
external: true # Précise que c'est un réseau à rechercher en externe
|
||||
```
|
||||
|
||||
Relancez la stack en cliquant sur "déployer" et patientez le temps que SWAG soit complètement opérationnel.
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Ici nous partons du principe que le nom du réseau de la seedbox est `seedbox_default`. Vous pouvez vérifier que la connexion est opérationnelle en visitant le dashboard de SWAG en tapant http://ipduserveur:81.
|
||||
:::
|
||||
::
|
||||
|
||||
|
||||
Puis nous allons créer et éditer le fichier `seedbox.subdomain.conf`.
|
||||
|
||||
::alert{type="success"}
|
||||
✨__Astuce pour les allergiques au terminal :__ vous pouvez utiliser [File Browser](/serveex/files/file-browser) pour naviguer dans vos fichier et éditer vos documents au lieu d'utiliser les commandes du terminal.
|
||||
::
|
||||
|
||||
```sh
|
||||
sudo vi /docker/swag/config/nginx/proxy-confs/seedbox.subdomain.conf
|
||||
```
|
||||
|
||||
Entrez en modification en appuyant sur `i` et copiez la configuration ci-dessous, en prenant soin de vérifier le port :
|
||||
|
||||
```nginx
|
||||
## Version 2023/12/19
|
||||
|
||||
server {
|
||||
listen 443 ssl;
|
||||
listen [::]:443 ssl;
|
||||
|
||||
server_name seedbox.*;
|
||||
|
||||
include /config/nginx/ssl.conf;
|
||||
|
||||
client_max_body_size 0;
|
||||
|
||||
#if ($lan-ip = yes) { set $geo-whitelist yes; }
|
||||
#if ($geo-whitelist = no) { return 404; }
|
||||
if ($geo-blacklist = no) { return 404; }
|
||||
|
||||
# enable for ldap auth (requires ldap-location.conf in the location block)
|
||||
#include /config/nginx/ldap-server.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-location.conf in the location block)
|
||||
#include /config/nginx/authelia-server.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-location.conf in the location block)
|
||||
#include /config/nginx/authentik-server.conf;
|
||||
|
||||
location / {
|
||||
# enable the next two lines for http auth
|
||||
#auth_basic "Restricted";
|
||||
#auth_basic_user_file /config/nginx/.htpasswd;
|
||||
|
||||
# enable for ldap auth (requires ldap-server.conf in the server block)
|
||||
#include /config/nginx/ldap-location.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-server.conf in the server block)
|
||||
#include /config/nginx/authelia-location.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-server.conf in the server block)
|
||||
#include /config/nginx/authentik-location.conf;
|
||||
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app gluetun;
|
||||
set $upstream_port 5555;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
}
|
||||
```
|
||||
::alert{type="success"}
|
||||
✨ Vous pouvez protéger cette app avec Authentik en retirant les `#` devant `include /config/nginx/authentik-server.conf;`{lang=nginx} et `include /config/nginx/authentik-location.conf;`{lang=nginx}. N'oubliez pas de [créer une application et un fournisseur dans Authentik](/serveex/securite/authentik#protéger-une-app-par-reverse-proxy).
|
||||
::
|
||||
|
||||
Appuyez sur `Echap` puis sauvegardez et quittez en tapant `:x`.
|
||||
|
||||
Patientez quelques minutes puis tapez dans votre navigateur `https://seedbox.mondomaine.fr`, vous arriverez sur l'interface de Qbittorrent.
|
||||
|
||||
Et voilà, vous avez un mediacenter pret à l'emploi !
|
||||
|
||||

|
||||
@@ -1,514 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: Automatisation
|
||||
description: Automatiser les téléchargements de médias avec la suite Servarr — Radarr, Sonarr, Bazarr, Prowlarr et Overseerr pour films et séries.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# Servarr
|
||||
|
||||
::alert{type="info"}
|
||||
🎯 __Objectifs :__
|
||||
- Automatiser les téléchargements de films et de séries avec Radarr, Sonarr, Bazarr, Prowlarr et Overseerr.
|
||||
::
|
||||
|
||||
[Servarr](https://wiki.servarr.com/) est une collection d'applications développées dans le but d'automatiser le téléchargement, la mise à jour et la gestions des media. Ici nous allons porter notre attention sur les films et séries avec comme objectif :
|
||||
- Pouvoir choisir un film dans un catalogue via une interface web
|
||||
- N'avoir plus rien à faire à part en profiter quelques minutes plus tard sur Plex
|
||||
|
||||
Simple.
|
||||
|
||||

|
||||
|
||||
Je vous propose de déployer la stack puis nous verrons par la suite la configuration de chacune des apps et leur fonctionnement.
|
||||
|
||||
## Installer les apps
|
||||
---
|
||||
|
||||
### Docker compose
|
||||
|
||||
Structure des dossiers :
|
||||
|
||||
```sh
|
||||
root
|
||||
├── docker
|
||||
│ ├── plex
|
||||
│ │ ├── compose.yml
|
||||
│ │ ├── config
|
||||
│ │ └── transcode
|
||||
│ ├── tautulli
|
||||
│ │ └── config
|
||||
│ ├── sonarr
|
||||
│ │ └── config
|
||||
│ ├── radarr
|
||||
│ │ └── config
|
||||
│ ├── bazarr
|
||||
│ │ └── config
|
||||
│ ├── prowlarr
|
||||
│ │ └── config
|
||||
│ └── overseerr
|
||||
│ └── config
|
||||
└── media
|
||||
├── downloads
|
||||
├── tvseries
|
||||
├── movies
|
||||
└── library
|
||||
```
|
||||
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- __Attention :__ Respectez bien ce type de structure de fichier, notamment le dossier `media`. Ce dossier doit etre monté de la même manière dans les compose de _Qbittorrent_ (`/votre/chemin/media:/media`) et des _arr_. Sans cela, les _arr_ risquent de ne pas trouver le chemin fourni par Qbittorrent et de ne pas créer de _hardlinks_. Sans hardlink, les _arr_ copieront les films et cela doublera l'espace utilisé sur votre stockage.
|
||||
:::
|
||||
::
|
||||
|
||||
Ouvrez dockge et votre stack `plex`. Modifiez le compose comme ceci :
|
||||
|
||||
```yaml
|
||||
---
|
||||
services:
|
||||
linuxserver_plex:
|
||||
image: ghcr.io/linuxserver/plex:latest
|
||||
container_name: plex
|
||||
network_mode: host
|
||||
environment:
|
||||
- PUID=${PUID}
|
||||
- PGID=${PGID}
|
||||
- TZ=Europe/Paris
|
||||
- VERSION=docker
|
||||
- PLEX_CLAIM= #optional
|
||||
volumes:
|
||||
- /docker/plex/config:/config
|
||||
- /docker/plex/transcode:/transcode #optional
|
||||
- ${MEDIA_PATH}:/media
|
||||
labels:
|
||||
- com.centurylinklabs.watchtower.enable=true
|
||||
restart: unless-stopped
|
||||
mem_limit: 4096m
|
||||
mem_reservation: 2048m
|
||||
devices:
|
||||
- /dev/dri:/dev/dri
|
||||
|
||||
tautulli:
|
||||
image: lscr.io/linuxserver/tautulli:latest
|
||||
container_name: tautulli
|
||||
environment:
|
||||
- TZ=Europe/Paris
|
||||
volumes:
|
||||
- /docker/tautulli/config:/config
|
||||
ports:
|
||||
- 8181:8181
|
||||
restart: unless-stopped
|
||||
|
||||
sonarr:
|
||||
image: lscr.io/linuxserver/sonarr:latest
|
||||
container_name: sonarr
|
||||
environment:
|
||||
- PUID=${PUID}
|
||||
- PGID=${PGID}
|
||||
- TZ=Europe/Paris
|
||||
volumes:
|
||||
- /docker/sonarr/config:/config
|
||||
- ${MEDIA_PATH}:/media
|
||||
ports:
|
||||
- 8989:8989
|
||||
restart: unless-stopped
|
||||
|
||||
radarr:
|
||||
image: lscr.io/linuxserver/radarr:latest
|
||||
container_name: radarr
|
||||
environment:
|
||||
- PUID=${PUID}
|
||||
- PGID=${PGID}
|
||||
- TZ=Europe/Paris
|
||||
volumes:
|
||||
- /docker/radarr/config:/config
|
||||
- ${MEDIA_PATH}:/media
|
||||
ports:
|
||||
- 7878:7878
|
||||
restart: unless-stopped
|
||||
|
||||
prowlarr:
|
||||
image: lscr.io/linuxserver/prowlarr:latest
|
||||
container_name: prowlarr
|
||||
environment:
|
||||
- PUID=${PUID}
|
||||
- PGID=${PGID}
|
||||
- TZ=Europe/Paris
|
||||
volumes:
|
||||
- /docker/prowlarr/data:/config
|
||||
ports:
|
||||
- 9696:9696
|
||||
restart: unless-stopped
|
||||
|
||||
overseerr:
|
||||
image: lscr.io/linuxserver/overseerr:latest
|
||||
container_name: overseerr
|
||||
dns:
|
||||
- 1.1.1.1
|
||||
- 8.8.8.8
|
||||
environment:
|
||||
- PUID=${PUID}
|
||||
- PGID=${PGID}
|
||||
- TZ=Europe/Paris
|
||||
volumes:
|
||||
- /docker/overseerr/config:/config
|
||||
ports:
|
||||
- 5055:5055
|
||||
restart: unless-stopped
|
||||
|
||||
bazarr:
|
||||
image: lscr.io/linuxserver/bazarr:latest
|
||||
container_name: bazarr
|
||||
restart: unless-stopped
|
||||
environment:
|
||||
- PUID=1000
|
||||
- PGID=1000
|
||||
- TZ=Europe/Paris
|
||||
volumes:
|
||||
- /docker/bazarr/config:/config
|
||||
- ${MEDIA_PATH}:/media
|
||||
ports:
|
||||
- 6767:6767
|
||||
```
|
||||
|
||||
::alert{type="success"}
|
||||
✨ Ajoutez le label de watchtower dans chaque conteneur afin d'automatiser les mises à jour
|
||||
|
||||
```yaml
|
||||
services:
|
||||
plex:
|
||||
#...
|
||||
labels:
|
||||
- com.centurylinklabs.watchtower.enable=true
|
||||
|
||||
tautulli:
|
||||
#...
|
||||
labels:
|
||||
- com.centurylinklabs.watchtower.enable=true
|
||||
::
|
||||
|
||||
Renseignez le `.env` avec les variables ci-dessous
|
||||
|
||||
```properties
|
||||
PUID=
|
||||
GUID=
|
||||
MEDIA_PATH=
|
||||
```
|
||||
|
||||
| Variable | Valeur | Exemples |
|
||||
|-----------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------|
|
||||
| `PUID`{lang=properties} | A renseigner avec les infos de votre user (trouvables via la commande `id nomdutilisateur`{lang=shell}) | `1000` |
|
||||
| `GUID`{lang=properties} | A renseigner avec les infos de votre user (trouvables via la commande `id nomdutilisateur`{lang=shell}) | `1000` |
|
||||
| `MEDIA_PATH`{lang=properties} | le chemin vers votre dossier media, ici : `/media`. Attention, il doit correspondre aussi à celui qu'utilise Qbittorrent. | `/media` |
|
||||
|
||||
Déployez la stack.
|
||||
|
||||
### Paramétrer Radarr
|
||||
---
|
||||
Radarr est une app qui permet de requêter à votre place vos sources de torrent et de définir quel type de release vous souhaitez télécharger en priorité. Radarr permet aussi de mettre à jour vos films si une meilleure version est disponible.
|
||||
|
||||
Maintenant que vous avez déployé la stack, vous pouvez vous rendre sur `http://ipduserveur:7878`.
|
||||
|
||||
::alert{type="danger"}
|
||||
:::list{type="danger"}
|
||||
- __En cas d'échec :__ vérifiez les règles de votre pare-feu.
|
||||
:::
|
||||
::
|
||||
|
||||
Créez vous un compte, choisissez bien *forms login*.
|
||||
|
||||
##### Ajouter un *root folder*
|
||||
|
||||
- Dans le menu à gauche, cliquez sur *Settings > Media Management*.
|
||||
- Ajoutez un *root folder*, choisisez `/media/movies`
|
||||
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- __Attention :__ Si vous avez déjà des films dans `movies` issus de Qbittorrent, ne les ajoutez pas dans Sonarr si ce dernier vous le propose. Radarr risque de les modifier ce qui entrainerait l'arrêt du seed par Qbittorrent.
|
||||
:::
|
||||
::
|
||||
|
||||
##### Configurer les profils
|
||||
|
||||
Dans le menu *Settings > Profiles*, vous trouverez les profils par défaut de Radarr. Comprendre que lorsque vous faites une requete, vous demandez un de ces profils. Ainsi, radarr va chercher en priorité le parametre le plus élevé, puis s'il ne trouve pas, il va passer à celui d'en dessous etc. Vous pouvez par exemple régler comme ceci pour le profile "any", en décochant tout sauf ce qui est sur l'image, et en les mettant dans le même ordre. Avec ce profil "any", Radarr va chercher en priorité du 4K REMUX (meilleure qualité), puis s'il ne trouve pas, il va passer au critère du dessous.
|
||||
|
||||

|
||||
|
||||
##### Ajouter Qbittorrent
|
||||
|
||||
Dans *Settings > Downloads Clients* vous allez ajouter Qbittorrent.
|
||||
|
||||
- Renseignez le *Host* avec l'IP de votre serveur et précisez le port de la webui, si vous avez suivi mon tuto c'est le `5695`.
|
||||
- Renseignez le *Username* et le *Password* de votre interface Qbittorrent.
|
||||
- Cliquez sur *test*.
|
||||
- Si tout est ok, cliquez sur *save*.
|
||||
|
||||
|
||||
##### Connecter à Plex
|
||||
|
||||
Dans *Settings > Connect*, ajoutez une nouvelle connexion, choisissez *Plex Media Server*.
|
||||
- Dans *Host* mettez `plex` ou l'adresse IP de votre serveur.
|
||||
- Dans port mettez `32400`.
|
||||
- Cliquez sur le bouton bleu "authenticate with Plex.tv" et authentifiez vous avec votre compte Plex.
|
||||
- Appuyez sur le bouton *test*.
|
||||
- Si tout est ok, appuyez sur le bouton *save*.
|
||||
|
||||
|
||||
|
||||
##### Récupérer la clé API pour Prowlarr et Overserr
|
||||
|
||||
- Dans *Settings > General*, copiez la *API Key* et notez la précieusement.
|
||||
|
||||
### Paramétrer Sonarr
|
||||
---
|
||||
Sonarr est une app qui permet de requêter à votre place vos sources de torrent et de définir quel type de release vous souhaitez télécharger en priorité. Radarr permet aussi de mettre à jour vos séries si une meilleure version est disponible.
|
||||
|
||||
- Rendez-vous sur `http://ipduserveur:8989`.
|
||||
- Suivez exactement les mêmes étapes que pour Radarr, et en *root folder* mettez `/media/tvseries`.
|
||||
|
||||
::alert{type="danger"}
|
||||
:::list{type="danger"}
|
||||
- __En cas d'échec :__ vérifiez les règles de votre pare-feu.
|
||||
:::
|
||||
::
|
||||
|
||||
### Paramétrer Prowlarr
|
||||
---
|
||||
Prowlarr est un proxy qui permet de gérer vos sources de torrents et de les passer à Radarr et Sonarr.
|
||||
|
||||
Rendez-vous sur `http://ipduserveur:9696` et créez vous un compte en choisissant bien *forms login*.
|
||||
|
||||
::alert{type="danger"}
|
||||
:::list{type="danger"}
|
||||
- __En cas d'échec :__ vérifiez les règles de votre pare-feu.
|
||||
:::
|
||||
::
|
||||
|
||||
|
||||
##### Ajouter une source
|
||||
|
||||
- Dans la section *Indexers*, ajoutez l'indexer de votre source de torrent.
|
||||
|
||||
##### Ajouter Radarr et Sonarr
|
||||
|
||||
Dans la section *Settings > Apps*, ajoutez Radarr et Sonarr avec les informations ci-dessous :
|
||||
- Prowlarr Server : `http://prowlarr:9696` (ou remplacez prowlarr par l'IP de votre serveur)
|
||||
- Sonarr / Radarr Server : `http://sonarr:8989` ou `http://radarr:7878`(ou remplacez sonarr/radarr par l'IP de votre serveur)
|
||||
- API Key, la clé que vous avez notée pour Radarr et celle de Sonarr.
|
||||
- Appuyez sur *Test*.
|
||||
- Si tout va bien, appuyez sur *Save*.
|
||||
|
||||
|
||||
### Paramétrer Bazarr
|
||||
---
|
||||
Bazarr est une app qui permet de chercher automatiquement les bons sous-titre dans les langues souhaitez pour tout les films et séries que Radarr et Sonarr ajoutent pour vous.
|
||||
|
||||
Rendez-vous sur `http://ipduserveur:6767`.
|
||||
|
||||
::alert{type="danger"}
|
||||
:::list{type="danger"}
|
||||
- __En cas d'échec :__ vérifiez les règles de votre pare-feu.
|
||||
:::
|
||||
::
|
||||
|
||||
Rendez-vous dans *Settings > General* et créez un identifiant et un mot de passe en utilisant le *forms login*.
|
||||
|
||||
#### Ajouter un profil de langage
|
||||
|
||||
- Dans *Settings > Languages* cliquez sur le bouton rose *Add new profile* et nommez le.
|
||||
- Cliquez sur le bouton rose *Add Languages* et ajoutez les langues que vous souhaitez, par exemple *French* et *English*.
|
||||
- Sauvegardez et quittez.
|
||||
- En bas de l'ecran dans *Default Language For Newly Added Show*, cochez les deux cases et renseignez le profil que vous venez de créer.
|
||||

|
||||
- Enregistrez avec le bouton tout en haut de l'écran.
|
||||
|
||||
#### Ajouter des fournisseurs de sous-titre
|
||||
|
||||
- Dans *Settings > Providers*, ajoutez vos fournisseurs favoris, comme par exemple :
|
||||
|
||||

|
||||
|
||||
- Enregistrez avec le bouton tout en haut de l'écran.
|
||||
|
||||
#### Ajouter Radarr et Sonarr
|
||||
|
||||
- Rendez-vous dans *Settings > Sonarr*
|
||||
- Dans *Adress*, mettez `sonarr` ou l'adresse IP du serveur.
|
||||
- Dans *Port* mettez `8989`.
|
||||
- Dans *API Key* mettez la clé API de Sonarr.
|
||||
- Cliquez sur *Test*.
|
||||
- Enregistrez avec le bouton tout en haut de l'écran.
|
||||
|
||||
Faites de même avec Radarr.
|
||||
|
||||
|
||||
### Paramétrer Overseerr
|
||||
---
|
||||
|
||||
[Overseerr](https://overseerr.dev/) est une application qui permet de naviguer dans un catalogue de film et de faire des requetes à Sonarr et à Radarr. Il suffit de naviguer dans les films ou séries, puis de cliquer sur *Demander*, et le film ou la série sera automatiquement téléchargée selon les paramètres de Radarr ou de Sonarr. Si le film ou la série n'est pas sortie, cela sera automatiquement téléchargé lorsque cela sera disponible. Ainsi, les épisodes d'une séerie arrivent automatiquement au fur et à mesure dans Plex sans aucune intervention manuelle.
|
||||
|
||||

|
||||
|
||||
Rendez-vous sur `http://ipduserveur:5055` et authentifiez vous avec votre compte Plex.
|
||||
|
||||
::alert{type="danger"}
|
||||
:::list{type="danger"}
|
||||
- __En cas d'échec :__ vérifiez les règles de votre pare-feu.
|
||||
:::
|
||||
::
|
||||
|
||||
#### Ajouter Radarr et Sonarr
|
||||
|
||||
Lorsque cela vous est demandé, ajoutez un serveur radarr :
|
||||
- Cochez *serveur par défaut*.
|
||||
- __Nom du serveur :__ Radarr
|
||||
- __Nom d'hôte ou adresse IP :__ `radarr` ou l'adresse IP de votre serveur
|
||||
- __Port :__ `7878`.
|
||||
- __Clé d'API :__ la clé API de Radarr.
|
||||
- Cliquez sur *Tester* en bas.
|
||||
|
||||
Si tout va bien, continuez à renseigner les champs.
|
||||
- __Profil de qualité :__ celui que vous avez configuré (par exemple, `any`).
|
||||
- __Dossier racine :__ le dossier de plex. Dans nos exemples : `/media/movies`.
|
||||
- __Disponibilité minimale :__ `Annoncé`. Ainsi, si un film n'est pas sorti, vous pouvez le demander et il sera automatiquement récupéré à sa sortie.
|
||||
- Cochez les 3 cases du bas.
|
||||
- Sauvegardez et continuez.
|
||||
|
||||
Puis faites de même avec Sonarr :
|
||||
- Cochez *serveur par défaut*.
|
||||
- __Nom du serveur :__ Radarr
|
||||
- __Nom d'hôte ou adresse IP :__ `sonarr` ou l'adresse IP de votre serveur
|
||||
- __Port :__ `8989`.
|
||||
- __Clé d'API :__ la clé API de Sonarr.
|
||||
- Cliquez sur *Tester* en bas.
|
||||
|
||||
Si tout va bien, continuez à renseigner les champs.
|
||||
- __Profil de qualité :__ celui que vous avez configuré (par exemple, `any`).
|
||||
- __Dossier racine :__ le dossier de plex. Dans nos exemples : `/media/tvseries`.
|
||||
- __Profil de langue :__ `Deprecated`.
|
||||
- Cochez les 4 cases du bas.
|
||||
- Sauvegardez et continuez.
|
||||
|
||||
Et voilà ! Vous n'avez plus qu'à faire une demande d'un film et d'une serie, puis de vérifier dans qbittorrent ou dans radarr/sonarr que tout va bien. Dans quelques minutes, votre media sera sur Plex !
|
||||
|
||||
## Exposer Overseerr avec Swag
|
||||
---
|
||||
|
||||
Il peut etre intéressant d'exposer Overseerr, si vous souhaitez pouvoir faire des requêtes depuis l'exterieur sans VPN, ou si vous avez partagé votre Bibliothèque Plex à des utilisateurs et que vous souhaitez qu'ils aient accès à Overseerr.
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Nous partons du principe que vous avez le sous-domaine `films.mondomaine.fr` avec un `CNAME` qui pointe vers `films.fr` dans [zone DNS](/generalites/reseau/dns). Et que bien sûr, [à moins que vous utilisiez Cloudflare Zero Trust](/serveex/securite/cloudflare), le port `443` de votre box pointe bien sur le port `443` de votre serveur dans [les règles NAT](/generalites/reseau/nat).
|
||||
:::
|
||||
::
|
||||
|
||||
|
||||
Rendez-vous dans dockge, et éditez le compose de SWAG en ajoutant le réseau d'overseer, qui est celui de Plex car dans la stack Plex :
|
||||
|
||||
```yaml
|
||||
services:
|
||||
swag:
|
||||
container_name: # ...
|
||||
# ...
|
||||
networks: # Relie le conteneur au réseau custom
|
||||
# ...
|
||||
- plex # Nom du réseau déclaré dans la stack
|
||||
|
||||
networks: # Définit le réseau custom
|
||||
# ...
|
||||
plex: # Nom du réseau déclaré dans la stack
|
||||
name: plex_default # Nom véritable du réseau externe
|
||||
external: true # Précise que c'est un réseau à rechercher en externe
|
||||
```
|
||||
|
||||
Relancez la stack en cliquant sur "déployer" et patientez le temps que SWAG soit complètement opérationnel.
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Ici nous partons du principe que le nom du réseau de Tautulli est `plex_default`. Vous pouvez vérifier que la connexion est opérationnelle en visitant le dashboard de SWAG en tapant `http://ipduserveur:81`.
|
||||
:::
|
||||
::
|
||||
|
||||
Créez le fichier `films.subdomain.conf` et éditez le :
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ vous pouvez utiliser [File Browser](/serveex/files/file-browser) pour naviguer dans vos fichier et éditer vos documents au lieu d'utiliser les commandes du terminal.
|
||||
::
|
||||
|
||||
```sh
|
||||
sudo vi /docker/swag/config/nginx/proxy-confs/films.subdomain.conf
|
||||
```
|
||||
|
||||
Rentrez en édition en appuyant sur `i`:
|
||||
|
||||
```nginx
|
||||
## Version 2024/07/16
|
||||
# make sure that your overseerr container is named overseerr
|
||||
# make sure that your dns has a cname set for overseerr
|
||||
|
||||
server {
|
||||
listen 443 ssl;
|
||||
listen [::]:443 ssl;
|
||||
|
||||
server_name films.*;
|
||||
|
||||
include /config/nginx/ssl.conf;
|
||||
|
||||
client_max_body_size 0;
|
||||
|
||||
# enable for ldap auth (requires ldap-location.conf in the location block)
|
||||
#include /config/nginx/ldap-server.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-location.conf in the location block)
|
||||
#include /config/nginx/authelia-server.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-location.conf in the location block)
|
||||
#include /config/nginx/authentik-server.conf;
|
||||
|
||||
location / {
|
||||
# enable the next two lines for http auth
|
||||
#auth_basic "Restricted";
|
||||
#auth_basic_user_file /config/nginx/.htpasswd;
|
||||
|
||||
# enable for ldap auth (requires ldap-server.conf in the server block)
|
||||
#include /config/nginx/ldap-location.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-server.conf in the server block)
|
||||
#include /config/nginx/authelia-location.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-server.conf in the server block)
|
||||
#include /config/nginx/authentik-location.conf;
|
||||
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app overseerr;
|
||||
set $upstream_port 5055;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
|
||||
location ~ (/overseerr)?/api {
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app overseerr;
|
||||
set $upstream_port 5055;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Appuyez sur `Echap` puis sauvegardez et quittez en tappant `:x`
|
||||
|
||||
Patientez quelques minutes puis tapez dans votre navigateur `http://films.mondomaine.fr`.
|
||||
|
||||
::alert{type="danger"}
|
||||
:::list{type="danger"}
|
||||
- __En cas d'échec :__ vérifiez les règles de votre pare-feu.
|
||||
:::
|
||||
::
|
||||
|
||||
Et voilà, vous avez exposé Overseerr !
|
||||
@@ -1,2 +0,0 @@
|
||||
navigation.title: Media & Seedbox
|
||||
icon: lucide:list-video
|
||||
@@ -1,175 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: Immich
|
||||
description: Installer Immich, une alternative auto-hébergée à Google Photos et iCloud avec reconnaissance faciale, géolocalisation et synchronisation multi-appareils.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# Immich
|
||||
|
||||
::alert{type="info"}
|
||||
🎯 __Objectifs :__ installer [Immich](https://immich.app/docs/overview/introduction) pour gérer vos photos sur tout vos appareils.
|
||||
::
|
||||
|
||||
[Immich](https://immich.app/docs/overview/introduction) est une solution de gestion de photos et de vidéos que vous pouvez installer directement sur votre serveur. Cette solution remplace les clouds type Google Photo ou iCloud. Elle dispose de nombreuse fonctionnalités comme la reconnaissance de visage ou la géolocalisation.
|
||||
|
||||

|
||||
|
||||
## Installation
|
||||
---
|
||||
Structure des dossiers
|
||||
|
||||
```sh
|
||||
root
|
||||
└── docker
|
||||
└── immich
|
||||
├── library
|
||||
├── compose.yaml
|
||||
└── .env
|
||||
```
|
||||
|
||||
|
||||
Ouvrez Dockge, cliquez sur `compose`, appelez la stack `immich` puis copiez collez le contenu du dernier `docker-compose.yml` [publié ici](https://github.com/immich-app/immich/blob/main/docker/docker-compose.yml).
|
||||
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- __Attention__ : n'ajoutez pas le label de Watchtower à la stack d'Immich. Immich étant une solution en perpetuelle évolution, des mises à jour automatiques risqueraient de casser votre installation.
|
||||
:::
|
||||
::
|
||||
|
||||
Configurer le `.env` en copiant collant le contenu de la dernière version [publiée ici](https://github.com/immich-app/immich/blob/main/docker/example.env) et suivez les commentaires indiqués dans le fichier.
|
||||
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Si vous avez un NAS ou un disque réseau partagé via [samba](/generalites/reseau/samba/) pour stocker vos données, remplacez la valeur de `UPLOAD_LOCATION`{lang=properties} par le chemin d'accès de votre dossier partagé.
|
||||
:::
|
||||
::
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ si votre CPU/iGPU/GPU le supporte, Immich permet d'utiliser l'accélération matérielle pour lire les vidéos ou pour la reconnaissance d'images. Ces fonctionnalités peuvent tripler les performances d'Immich. Plus d'infos sur le [Transcoding](https://immich.app/docs/features/hardware-transcoding/) et sur le [Machine learning](https://immich.app/docs/features/ml-hardware-acceleration).
|
||||
::
|
||||
|
||||
Déployez le conteneur.
|
||||
|
||||
Et voilà, vous pouvez vous connecter et suivre les instructions sur `http://ipduserveur:2283`
|
||||
|
||||
## Exposer Immich avec Swag
|
||||
---
|
||||
Tout l'intérêt d'une telle solution, c'est de pouvoir y accéder à distance et sur tout vos appareils. Pour cela, nous allons exposer Immich via Swag.
|
||||
|
||||
::alert{type="info"}
|
||||
📋 __Au préalable :__
|
||||
<br/><br/>
|
||||
Nous partons du principe que vous avez le sous-domaine `immich.mondomaine.fr` avec un `CNAME` qui pointe vers `mondomaine.fr` dans votre [zone DNS](/generalites/reseau/dns). Et que bien sûr, [à moins que vous utilisiez Cloudflare Zero Trust](/serveex/securite/cloudflare), le port `443` de votre box pointe bien sur le port `443` de votre serveur via [les règles NAT](/generalites/reseau/nat).
|
||||
::
|
||||
|
||||
Dans Dockge, rendez-vous dans la stack de SWAG et éditez le compose en ajoutant le réseau de immich :
|
||||
|
||||
```yaml
|
||||
services:
|
||||
swag:
|
||||
container_name: # ...
|
||||
# ...
|
||||
networks: # Relie le conteneur au réseau custom
|
||||
# ...
|
||||
- immich # Nom du réseau déclaré dans la stack
|
||||
|
||||
networks: # Définit le réseau custom
|
||||
# ...
|
||||
immich: # Nom du réseau déclaré dans la stack
|
||||
name: immich_default # Nom véritable du réseau externe
|
||||
external: true # Précise que c'est un réseau à rechercher en externe
|
||||
```
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Ici nous partons du principe que le nom du réseau de immich est `immich_default`. Vous pouvez vérifier que la connexion est opérationnelle en visitant le dashboard de SWAG en tapant http://ipduserveur:81.
|
||||
:::
|
||||
::
|
||||
|
||||
Relancez la stack en cliquant sur "déployer" et patientez le temps que SWAG soit complètement opérationnel.
|
||||
|
||||
|
||||
Dans les dossiers de Swag, créez le fichier `immich.subdomain.conf`.
|
||||
|
||||
::alert{type="success"}
|
||||
:::list{type="success"}
|
||||
- __Astuce :__ vous pouvez utiliser [File Browser](/serveex/files/file-browser) pour naviguer dans vos fichier et éditer vos documents au lieu d'utiliser les commandes du terminal.
|
||||
:::
|
||||
::
|
||||
|
||||
```sh
|
||||
sudo vi /docker/swag/config/nginx/proxy-confs/immich.subdomain.conf
|
||||
```
|
||||
Entrez en modification avec la touche `i` et collez la configuration ci-dessous :
|
||||
|
||||
```nginx
|
||||
## Version 2023/12/19
|
||||
|
||||
server {
|
||||
listen 443 ssl;
|
||||
listen [::]:443 ssl;
|
||||
|
||||
server_name immich.*;
|
||||
|
||||
include /config/nginx/ssl.conf;
|
||||
|
||||
client_max_body_size 0;
|
||||
|
||||
#if ($lan-ip = yes) { set $geo-whitelist yes; }
|
||||
#if ($geo-whitelist = no) { return 404; }
|
||||
if ($geo-blacklist = no) { return 404; }
|
||||
|
||||
# enable for ldap auth (requires ldap-location.conf in the location block)
|
||||
#include /config/nginx/ldap-server.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-location.conf in the location block)
|
||||
#include /config/nginx/authelia-server.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-location.conf in the location block)
|
||||
#include /config/nginx/authentik-server.conf;
|
||||
|
||||
location / {
|
||||
# enable the next two lines for http auth
|
||||
#auth_basic "Restricted";
|
||||
#auth_basic_user_file /config/nginx/.htpasswd;
|
||||
|
||||
# enable for ldap auth (requires ldap-server.conf in the server block)
|
||||
#include /config/nginx/ldap-location.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-server.conf in the server block)
|
||||
#include /config/nginx/authelia-location.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-server.conf in the server block)
|
||||
#include /config/nginx/authentik-location.conf;
|
||||
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app immich_server;
|
||||
set $upstream_port 3001;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
|
||||
location ~ (/immich)?/api {
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app immich_server;
|
||||
set $upstream_port 3001;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Appuyez sur `Echap` puis sauvegardez et quittez en tapant `:x` puis en appuyant sur `Entrée`.
|
||||
|
||||
Et voilà, vous avez exposé Immich ! N'oubliez pas d'installer les applications [iOS](https://apps.apple.com/us/app/immich/id1613945652)/[Android](https://play.google.com/store/apps/details?id=app.alextran.immich) afin de synchroniser vos appareils.
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ Vous pouvez protéger cette app avec Authentik de façon native en [suivant ces instructions](https://docs.goauthentik.io/integrations/services/immich/).
|
||||
::
|
||||
@@ -1,195 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: Nextcloud
|
||||
description: Installer Nextcloud pour auto-héberger vos fichiers, photos et agenda — une alternative respectueuse de la vie privée à Google Drive, OneDrive et iCloud.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# Nextcloud
|
||||
|
||||
::alert{type="info"}
|
||||
🎯 __Objectifs :__ installer [Nextcloud](https://nextcloud.com/) pour gérer vos photos sur tout vos appareils.
|
||||
::
|
||||
|
||||
[Nextcloud](https://nextcloud.com/) est une solution qui vous permet d'accéder à vos données sur tout vos appareils, et de les synchroniser. Nexctloud dispose également de fonctionnalités de collaboration, de calendrier et bien d'autres. Cette solution remplace des solutions du type Google Drive, iCloud, ou encore OneDrive.
|
||||
|
||||

|
||||
|
||||
## Installation
|
||||
---
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Nous utiliserons l'image docker maintenue par [LinuxServer.io](https://docs.linuxserver.io/images/docker-nextcloud/)
|
||||
:::
|
||||
::
|
||||
|
||||
Structure des fichiers
|
||||
|
||||
```sh
|
||||
root
|
||||
└── docker
|
||||
└── nextcloud
|
||||
├── config
|
||||
├── data
|
||||
├── compose.yaml
|
||||
└── .env
|
||||
```
|
||||
|
||||
Ouvrez Dockge, cliquez sur `compose`, appelez la stack `nextcloud` puis copiez collez ceci :
|
||||
|
||||
```yaml
|
||||
---
|
||||
services:
|
||||
nextcloud:
|
||||
image: lscr.io/linuxserver/nextcloud:latest
|
||||
container_name: nextcloud
|
||||
environment:
|
||||
- PUID=${PUID}
|
||||
- PGID=${GUID}
|
||||
- TZ=Etc/UTC
|
||||
volumes:
|
||||
- /docker/nextcloud/config:/config
|
||||
- /docker/nextcloud/data:/data
|
||||
ports:
|
||||
- ${PORT}:443
|
||||
restart: unless-stopped
|
||||
```
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Si vous avez un NAS ou un disque réseau partagé via [samba](/generalites/reseau/samba) pour stocker vos données, remplacez `/docker/nextcloud/data` par le chemin d'accès de votre dossier partagé.
|
||||
:::
|
||||
::
|
||||
|
||||
Trouvez votre `PUID` et votre `GUID` en tapant la commande suivante :
|
||||
|
||||
```sh
|
||||
id nomdutilisateur
|
||||
```
|
||||
Et renseignez le `.env` avec le port souhaité, et les infos que vous avez trouvées, par exemple :
|
||||
|
||||
```properties
|
||||
PUID=1000
|
||||
GUID=1000
|
||||
PORT=4545
|
||||
```
|
||||
|
||||
Déployez la stack et rendez-vous sur `http://ipduserveur:4545` et suivez les instructions.
|
||||
|
||||
::alert{type="danger"}
|
||||
:::list{type="danger"}
|
||||
- __En cas d'échec :__ vérifiez les règles de votre pare-feu.
|
||||
:::
|
||||
::
|
||||
|
||||
## Exposer Nextcloud avec Swag
|
||||
---
|
||||
Tout l'intérêt d'une telle solution, c'est de pouvoir y accéder à distance et sur tout vos appareils. Pour cela, nous allons exposer Nextcloud via Swag.
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Nous partons du principe que vous avez le sous-domaine `nextcloud.mondomaine.fr` avec un `CNAME` qui pointe vers `mondomaine.fr` dans votre [zone DNS](/generalites/reseau/dns). Et que bien sûr, [à moins que vous utilisiez Cloudflare Zero Trust](/serveex/securite/cloudflare), le port `443` de votre box pointe bien sur le port `443` de votre serveur via [les règles NAT](/generalites/reseau/nat).
|
||||
:::
|
||||
::
|
||||
|
||||
Dans Dockge, rendez-vous dans la stack de SWAG et éditez le compose en ajoutant le réseau de nextcloud :
|
||||
|
||||
```yaml
|
||||
services:
|
||||
swag:
|
||||
container_name: # ...
|
||||
# ...
|
||||
networks: # Relie le conteneur au réseau custom
|
||||
# ...
|
||||
- nextcloud # Nom du réseau déclaré dans la stack
|
||||
|
||||
networks: # Définit le réseau custom
|
||||
# ...
|
||||
nextcloud: # Nom du réseau déclaré dans la stack
|
||||
name: nextcloud_default # Nom véritable du réseau externe
|
||||
external: true # Précise que c'est un réseau à rechercher en externe
|
||||
```
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Ici nous partons du principe que le nom du réseau de nextcloud est `nextcloud_default`. Vous pouvez vérifier que la connexion est opérationnelle en visitant le dashboard de SWAG en tapant http://ipduserveur:81.
|
||||
:::
|
||||
::
|
||||
|
||||
Relancez la stack en cliquant sur "déployer" et patientez le temps que SWAG soit complètement opérationnel.
|
||||
|
||||
Dans les fichiers de nextcloud, éditez le fichier `config.php`.
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ vous pouvez utiliser [File Browser](/serveex/files/file-browser) pour naviguer dans vos fichier et éditer vos documents au lieu d'utiliser les commandes du terminal.
|
||||
::
|
||||
|
||||
```sh
|
||||
sudo vi /docker/nextcloud/config/www/nextcloud/config/config.php
|
||||
```
|
||||
|
||||
Entrez en modification avec la touche `i` et copiez les informations suivantes __avant__ `);`.
|
||||
|
||||
```js
|
||||
'trusted_proxies' => [gethostbyname('swag')], 'overwrite.cli.url' => 'https://nextcloud.example.com/',
|
||||
'overwritehost' => 'nextcloud.example.com',
|
||||
'overwriteprotocol' => 'https',
|
||||
```
|
||||
|
||||
Ajoutez également votre nom de domaine dans la section `array` , cela devrait ressembler à ceci
|
||||
```js
|
||||
array (
|
||||
0 => '192.168.0.1:444', # Cette ligne est surement différente chez vous, ne la modifiez pas !
|
||||
1 => 'nextcloud.mondomaine.fr', # Renseignez votre domaine
|
||||
),
|
||||
```
|
||||
Appuyez sur `Echap` puis sauvegardez et quittez en tapant `:x` puis en appuyant sur `Entrée`.
|
||||
|
||||
Dans les dossiers de Swag, créez le fichier `nextcloud.subdomain.conf`.
|
||||
|
||||
```sh
|
||||
sudo vi /docker/swag/config/nginx/proxy-confs/nexctloud.subdomain.conf
|
||||
```
|
||||
Entrez en modification avec la touche `i` et collez la configuration ci-dessous :
|
||||
|
||||
```nginx
|
||||
## Version 2024/04/25
|
||||
server {
|
||||
listen 443 ssl;
|
||||
listen [::]:443 ssl;
|
||||
|
||||
server_name nextcloud.*;
|
||||
|
||||
include /config/nginx/ssl.conf;
|
||||
|
||||
client_max_body_size 0;
|
||||
|
||||
location / {
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app nextcloud;
|
||||
set $upstream_port 443;
|
||||
set $upstream_proto https;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
# Hide proxy response headers from Nextcloud that conflict with ssl.conf
|
||||
# Uncomment the Optional additional headers in SWAG's ssl.conf to pass Nextcloud's security scan
|
||||
proxy_hide_header Referrer-Policy;
|
||||
proxy_hide_header X-Content-Type-Options;
|
||||
proxy_hide_header X-Frame-Options;
|
||||
proxy_hide_header X-XSS-Protection;
|
||||
|
||||
# Disable proxy buffering
|
||||
proxy_buffering off;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Appuyez sur `Echap` puis sauvegardez et quittez en tapant `:x` puis en appuyant sur `Entrée`.
|
||||
|
||||
Et voilà, vous avez exposé Nextcloud ! Et n'oubliez pas d'installer [les applications pour ordinateurs et mobiles](https://nextcloud.com/fr/install/).
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ Vous pouvez protéger cette app avec Authentik de façon native en [suivant ces instructions](https://docs.goauthentik.io/integrations/services/nextcloud/).
|
||||
::
|
||||
@@ -1,2 +0,0 @@
|
||||
navigation.title: Cloud Drive & Photos
|
||||
icon: lucide:cloud-upload
|
||||
@@ -1,164 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: File Browser
|
||||
description: Installer File Browser pour parcourir et gérer les fichiers de votre serveur depuis une interface web, exposée de manière sécurisée avec SWAG.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# File Browser
|
||||
|
||||
::alert{type="info"}
|
||||
🎯 __Objectifs :__
|
||||
- Installer File Browser
|
||||
- Exposer File Browser avec Swag
|
||||
::
|
||||
|
||||
[File Browser](https://github.com/filebrowser/filebrowser) est une interface permettant d'accéder aux fichiers de votre serveur et de les éditer.
|
||||
|
||||

|
||||
|
||||
## Installation
|
||||
---
|
||||
Ouvrez Dockge, cliquez sur `compose`, appelez la stack `filebrowser` puis copiez collez ceci :
|
||||
|
||||
```yaml
|
||||
---
|
||||
services:
|
||||
filebrowser:
|
||||
container_name: filebrowser
|
||||
volumes:
|
||||
- /docker/filebrowser/config:/config/
|
||||
- /chemin/vers/vos/dossiers:/vosdossiers #ajoutez ici les dossiers que vous voulez voir apparaitre dans filebrowser
|
||||
ports:
|
||||
- 8010:80
|
||||
image: filebrowser/filebrowser:s6
|
||||
```
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ ajoutez le label de watchtower dans chaque conteneur afin d'automatiser les mises à jour
|
||||
|
||||
```yaml
|
||||
services:
|
||||
filebrowser:
|
||||
#...
|
||||
labels:
|
||||
- com.centurylinklabs.watchtower.enable=true
|
||||
::
|
||||
|
||||
|
||||
Déployez le conteneur et rendez-vous sur `http://ipduserveur:8010`. Et voilà, votre instance File Browser en webui est disponible !
|
||||
|
||||
::alert{type="danger"}
|
||||
:::list{type="danger"}
|
||||
- __En cas d'échec :__ vérifiez les règles de votre pare-feu.
|
||||
:::
|
||||
::
|
||||
|
||||
## Exposer File Browser avec Swag
|
||||
---
|
||||
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- File Browser n'utilise pas d'authentification multifacteur. Exposer File Browser sur internet pourrait compromettre les machines auxquelles il est relié. Ne le faite que si vous utilisez un systeme d'authentification multifacteur comme [Authentik](/serveex/securite/authentik/). Sinon, n'exposez pas avec SWAG et utilisez plutôt un VPN comme [Wireguard](/serveex/securite/wireguard).
|
||||
:::
|
||||
::
|
||||
|
||||
Vous aurez peut-etre envie d'y accéder à distance et sur tout vos appareils. Pour cela, nous allons exposer IT Tools via Swag.
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- __Au préalable :__ nous partons du principe que vous avez créé dans votre [zone DNS](/generalites/reseau/dns) un sous domaine du type `files.mondomaine.fr` avec pour `CNAME` `mondomaine.fr` et, [à moins que vous utilisiez Cloudflare Zero Trust](/serveex/securite/cloudflare), que que vous avez déjà redirigé le port `443` de votre box vers le `443` de votre serveur dans [les règles NAT](/generalites/reseau/nat).
|
||||
:::
|
||||
::
|
||||
|
||||
Dans Dockge, rendez-vous dans la stack de SWAG et éditez le compose en ajoutant le réseau de filebrowser :
|
||||
|
||||
```yaml
|
||||
services:
|
||||
swag:
|
||||
container_name: # ...
|
||||
# ...
|
||||
networks: # Relie le conteneur au réseau custom
|
||||
# ...
|
||||
- filebrowser # Nom du réseau déclaré dans la stack
|
||||
|
||||
networks: # Définit le réseau custom
|
||||
# ...
|
||||
filebrowser: # Nom du réseau déclaré dans la stack
|
||||
name: filebrowser_default # Nom véritable du réseau externe
|
||||
external: true # Précise que c'est un réseau à rechercher en externe
|
||||
```
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Ici nous partons du principe que le nom du réseau de filebrowser est `filebrowser_default`. Vous pouvez vérifier que la connexion est opérationnelle en visitant le dashboard de SWAG en tapant http://ipduserveur:81.
|
||||
:::
|
||||
::
|
||||
|
||||
Relancez la stack en cliquant sur "déployer" et patientez le temps que SWAG soit complètement opérationnel.
|
||||
|
||||
Dans les dossiers de Swag, créez le fichier `files.subdomain.conf`.
|
||||
|
||||
```sh
|
||||
sudo vi /docker/swag/config/nginx/proxy-confs/files.subdomain.conf
|
||||
```
|
||||
Entrez en modification avec la touche `i` et collez la configuration ci-dessous :
|
||||
|
||||
```nginx
|
||||
## Version 2023/12/19
|
||||
|
||||
server {
|
||||
listen 443 ssl;
|
||||
listen [::]:443 ssl;
|
||||
|
||||
server_name files.*;
|
||||
|
||||
include /config/nginx/ssl.conf;
|
||||
|
||||
client_max_body_size 0;
|
||||
|
||||
#if ($lan-ip = yes) { set $geo-whitelist yes; }
|
||||
#if ($geo-whitelist = no) { return 404; }
|
||||
if ($geo-blacklist = no) { return 404; }
|
||||
|
||||
# enable for ldap auth (requires ldap-location.conf in the location block)
|
||||
#include /config/nginx/ldap-server.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-location.conf in the location block)
|
||||
#include /config/nginx/authelia-server.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-location.conf in the location block)
|
||||
#include /config/nginx/authentik-server.conf;
|
||||
|
||||
location / {
|
||||
# enable the next two lines for http auth
|
||||
#auth_basic "Restricted";
|
||||
#auth_basic_user_file /config/nginx/.htpasswd;
|
||||
|
||||
# enable for ldap auth (requires ldap-server.conf in the server block)
|
||||
#include /config/nginx/ldap-location.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-server.conf in the server block)
|
||||
#include /config/nginx/authelia-location.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-server.conf in the server block)
|
||||
#include /config/nginx/authentik-location.conf;
|
||||
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app filebrowser;
|
||||
set $upstream_port 80;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Appuyez sur `Echap` puis sauvegardez et quittez en tapant `:x` puis en appuyant sur `Entrée`.
|
||||
|
||||
Et voilà, vous avez exposé File Browser !
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ vous pouvez protéger cette app avec Authentik en ouvrant `files.subodmain.conf` et en retirant les `#` devant `include /config/nginx/authentik-server.conf;`{lang=nginx} et `include /config/nginx/authentik-location.conf;`{lang=nginx}. N'oubliez pas de [créer une application et un fournisseur dans Authentik](/serveex/securite/authentik#protéger-une-app-par-reverse-proxy).
|
||||
::
|
||||
@@ -1,214 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: Pingvin
|
||||
description: Installer Pingvin Share, une plateforme d'envoi de fichiers auto-hébergée pour partager des fichiers de façon sécurisée sans WeTransfer ni Google Drive.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# Pingvin
|
||||
|
||||
::alert{type="info"}
|
||||
🎯 __Objectifs :__
|
||||
- Installer Pingvin
|
||||
- Exposer Pingvin
|
||||
::
|
||||
|
||||
[Pingvin](https://github.com/stonith404/pingvin-share) est un outil permettant de partager rapidement des fichiers, à la manière de WeTransfer. Ses nombreuses options de partage (mot de passe, durée d'expiration, personnalisation du lien...) en font l'outil idéal pour partager rapidement des fichiers. Pingvin permet également de créer des _demandes de dépot_, c'est à dire un lien partageable à envoyer à quelqu'un de votre choix pour qu'il puisse téléverser ses fichiers afin que vous puissiez les récupérer.
|
||||
|
||||

|
||||
|
||||
## Installation
|
||||
---
|
||||
Ouvrez Dockge, cliquez sur `compose`, appelez la stack `pingvin` puis copiez collez ceci :
|
||||
|
||||
```yaml
|
||||
---
|
||||
services:
|
||||
pingvin-share:
|
||||
container_name: pingvin
|
||||
image: stonith404/pingvin-share
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- 3600:3000
|
||||
volumes:
|
||||
- /docker/pingvin/data:/opt/app/backend/data
|
||||
- /docker/pingvin/data/img:/opt/app/frontend/public/img
|
||||
- /docker/pingvin/uploads:/opt/app/backend/uploads # chemin du dossier dans lequel vous souhaitez stocker les fichiers uploadés dans pingvin. A changer selon vos préférences.
|
||||
depends_on:
|
||||
clamav:
|
||||
condition: service_healthy
|
||||
networks:
|
||||
- swag
|
||||
|
||||
clamav: #antivirus pour les fichiers
|
||||
restart: unless-stopped
|
||||
image: clamav/clamav
|
||||
```
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Ici nous partons du principe que le nom du réseau de Swag est `swag_default`.
|
||||
:::
|
||||
::
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ ajoutez le label de watchtower dans chaque conteneur afin d'automatiser les mises à jour
|
||||
|
||||
```yaml
|
||||
services:
|
||||
filebrowser:
|
||||
#...
|
||||
labels:
|
||||
- com.centurylinklabs.watchtower.enable=true
|
||||
|
||||
clamav:
|
||||
#...
|
||||
labels:
|
||||
- com.centurylinklabs.watchtower.enable=true
|
||||
::
|
||||
|
||||
Déployez le conteneur et rendez-vous sur `http://ipduserveur:3600`. Et voilà, votre instance File Browser en webui est disponible !
|
||||
|
||||
::alert{type="danger"}
|
||||
:::list{type="danger"}
|
||||
- __En cas d'échec :__ vérifiez les règles de votre pare-feu.
|
||||
:::
|
||||
::
|
||||
|
||||
## Exposer Immich avec Swag
|
||||
---
|
||||
Tout l'intérêt d'une telle solution, c'est de pouvoir y accéder à distance et sur tout vos appareils. Pour cela, nous allons exposer Pingvin via Swag.
|
||||
|
||||
::alert{type="info"}
|
||||
📋 __Au préalable :__
|
||||
<br/><br/>
|
||||
Nous partons du principe que vous avez le sous-domaine `pingvin.mondomaine.fr` avec un `CNAME` qui pointe vers `mondomaine.fr` dans votre [zone DNS](/generalites/reseau/dns). Et que bien sûr, [à moins que vous utilisiez Cloudflare Zero Trust](/serveex/securite/cloudflare), le port `443` de votre box pointe bien sur le port `443` de votre serveur via [les règles NAT](/generalites/reseau/nat).
|
||||
::
|
||||
|
||||
Dans Dockge, rendez-vous dans la stack de SWAG et éditez le compose en ajoutant le réseau de pingvin :
|
||||
|
||||
```yaml
|
||||
services:
|
||||
swag:
|
||||
container_name: # ...
|
||||
# ...
|
||||
networks: # Relie le conteneur au réseau custom
|
||||
# ...
|
||||
- pingvin # Nom du réseau déclaré dans la stack
|
||||
|
||||
networks: # Définit le réseau custom
|
||||
# ...
|
||||
pingvin: # Nom du réseau déclaré dans la stack
|
||||
name: pingvin_default # Nom véritable du réseau externe
|
||||
external: true # Précise que c'est un réseau à rechercher en externe
|
||||
```
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Ici nous partons du principe que le nom du réseau de pingvin est `pingvin_default`. Vous pouvez vérifier que la connexion est opérationnelle en visitant le dashboard de SWAG en tapant http://ipduserveur:81.
|
||||
:::
|
||||
::
|
||||
|
||||
Relancez la stack en cliquant sur "déployer" et patientez le temps que SWAG soit complètement opérationnel.
|
||||
|
||||
Dans les dossiers de Swag, créez le fichier `pingvin.subdomain.conf`.
|
||||
|
||||
::alert{type="success"}
|
||||
:::list{type="success"}
|
||||
- __Astuce :__ vous pouvez utiliser [File Browser](/serveex/files/file-browser) pour naviguer dans vos fichier et éditer vos documents au lieu d'utiliser les commandes du terminal.
|
||||
:::
|
||||
::
|
||||
|
||||
```sh
|
||||
sudo vi /docker/swag/config/nginx/proxy-confs/pingvin.subdomain.conf
|
||||
```
|
||||
Entrez en modification avec la touche `i` et collez la configuration ci-dessous :
|
||||
|
||||
```nginx
|
||||
## Version 2023/12/19
|
||||
|
||||
server {
|
||||
listen 443 ssl;
|
||||
listen [::]:443 ssl;
|
||||
|
||||
server_name pingvin.*;
|
||||
|
||||
include /config/nginx/ssl.conf;
|
||||
|
||||
client_max_body_size 0;
|
||||
|
||||
#if ($lan-ip = yes) { set $geo-whitelist yes; }
|
||||
#if ($geo-whitelist = no) { return 404; }
|
||||
if ($geo-blacklist = no) { return 404; }
|
||||
|
||||
# enable for ldap auth (requires ldap-location.conf in the location block)
|
||||
#include /config/nginx/ldap-server.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-location.conf in the location block)
|
||||
#include /config/nginx/authelia-server.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-location.conf in the location block)
|
||||
#include /config/nginx/authentik-server.conf;
|
||||
|
||||
location / {
|
||||
# enable the next two lines for http auth
|
||||
#auth_basic "Restricted";
|
||||
#auth_basic_user_file /config/nginx/.htpasswd;
|
||||
|
||||
# enable for ldap auth (requires ldap-server.conf in the server block)
|
||||
#include /config/nginx/ldap-location.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-server.conf in the server block)
|
||||
#include /config/nginx/authelia-location.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-server.conf in the server block)
|
||||
#include /config/nginx/authentik-location.conf;
|
||||
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app pingvin;
|
||||
set $upstream_port 3000;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
Appuyez sur `Echap puis sauvegardez et quittez en tapant `:x` puis en appuyant sur `Entrée`.
|
||||
|
||||
Et voilà, vous avez exposé Pingvin !
|
||||
|
||||
## Sécuriser Pingvin avec Authentik
|
||||
|
||||
Vous pouvez protéger cette app avec Authentik de façon native en suivant les instructions ci-dessous.
|
||||
|
||||
1. Dans votre espace admin authentik, créez un fournisseur OAuth2/OpenID.
|
||||
|
||||
2. Remplissez chaque section comme suit en remplaçant `mondomaine.fr` par votre domaine. Copiez quelque part le contenu des champs `ID du client` et `Secret du client`.
|
||||
|
||||

|
||||

|
||||

|
||||
|
||||
3. Enregistrez et créez une application `pingvin` comme suit.
|
||||
|
||||

|
||||
|
||||
4. Enregistrez et aller dans la liste de vos avant-postes. Ajoutez le fournisseur pingvin` à votre avant-poste.
|
||||
|
||||
5. Quittez authentik, et allez dans l'interface d'administration de Pingvin.
|
||||
|
||||
6. Dans la section _« Identifiant social »_ renseignez les champs suivant :
|
||||
- `URI de découverte OpenID` avec `https://pingvin.mondomaine.fr/application/o/pingvin/.well-known/openid-configuration` (n'oubliez pas de remplacer `mondomaine.fr` par votre domaine)
|
||||
- `Revendication du nom d’utilisateur OpenID` avec `preferred_username`
|
||||
- `ID du client OpenID` avec l'ID que vous avez copié en étape 2.
|
||||
- `Secret du client OpenID` avec le token que vous avez copié en étape 2.
|
||||
|
||||
Et voilà, désormais lorsque vous vous connectez à Pingvin, un bouton "Open ID" sera disponible en dessous de la mire de connexion.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
navigation.title: Fichiers & partage
|
||||
icon: lucide:folder-tree
|
||||
@@ -1,224 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: Code-Serveur
|
||||
description: Installer code-server pour utiliser VS Code dans votre navigateur depuis votre homelab — montez des dossiers et exposez-le de manière sécurisée avec SWAG.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# Code-Server
|
||||
|
||||
::alert{type="info"}
|
||||
🎯 __Objectifs :__
|
||||
- Installer code-server
|
||||
- Monter des dossiers dans vscode
|
||||
- Exposer code-server avec Swag
|
||||
::
|
||||
|
||||
[code-server](https://github.com/linuxserver/docker-code-server) est un conteneur permettant d'accéder à [vscode](https://code.visualstudio.com/) en web-ui dans un environnement linux. C'est littéralement vscode et vos projets directement dans votre poche, disponibles partout.
|
||||
|
||||

|
||||
|
||||
## Installation
|
||||
---
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Pour cette installation nous utiliserons [l'image maintenue par LinuxServer.io](https://docs.linuxserver.io/images/docker-code-server/).
|
||||
:::
|
||||
::
|
||||
|
||||
Structure des dossiers
|
||||
|
||||
```sh
|
||||
root
|
||||
├── docker
|
||||
│ └── code-server
|
||||
│ └── config
|
||||
└── #n'importe quel dossier à monter dans vscode
|
||||
```
|
||||
|
||||
Ouvrez Dockge, cliquez sur `compose`, appelez la stack `code-server` puis copiez collez ceci :
|
||||
|
||||
```yaml
|
||||
---
|
||||
services:
|
||||
code-server:
|
||||
image: lscr.io/linuxserver/code-server:latest
|
||||
container_name: code-server
|
||||
environment:
|
||||
- PUID=${PUID}
|
||||
- PGID=${GUID}
|
||||
- TZ=Etc/UTC
|
||||
- HASHED_PASSWORD=${PW}
|
||||
volumes:
|
||||
- /docker/code-server/config:/config
|
||||
# ajoutez vos dossier à monter dans vscode
|
||||
# - /chemin/vers/dossier:/dossier
|
||||
ports:
|
||||
- 8443:8443
|
||||
restart: unless-stopped
|
||||
```
|
||||
|
||||
::alert{type="success"}
|
||||
✨ Ajoutez le label de watchtower dans chaque conteneur afin d'automatiser les mises à jour
|
||||
|
||||
```yaml
|
||||
services:
|
||||
code-server:
|
||||
#...
|
||||
labels:
|
||||
- com.centurylinklabs.watchtower.enable=true
|
||||
::
|
||||
|
||||
Choisissez un mot de passe et générez un hash
|
||||
|
||||
```sh
|
||||
echo -n "votremotdepasse" | npx argon2-cli -e
|
||||
```
|
||||
|
||||
Notez précieusement le résultat. Trouvez votre PUID et votre GUID en tapant la commande suivante :
|
||||
|
||||
```sh
|
||||
id nomdutilisateur
|
||||
```
|
||||
|
||||
Et renseignez le `.env` avec les infos que vous avez trouvées, par exemple :
|
||||
|
||||
```properties
|
||||
PW='$argon2i$v=19$m=4096,t=3,p=1$wST5QhBgk2lu1ih4DMuxvg$LS1alrVdIWtvZHwnzCM1DUGg+5DTO3Dt1d5v9XtLws4'
|
||||
PUID=1000
|
||||
GUID=1000
|
||||
```
|
||||
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- __Attention :__ Pensez à mettre un guillemet simple `'`au debut et à la fin du hash
|
||||
:::
|
||||
::
|
||||
|
||||
Déployez le conteneur et rendez-vous sur `http://ipduserveur:8443`. Et voilà, votre instance code-server en webui est disponible !
|
||||
|
||||
::alert{type="danger"}
|
||||
:::list{type="danger"}
|
||||
- __En cas d'échec :__ vérifiez les règles de votre pare-feu.
|
||||
:::
|
||||
::
|
||||
|
||||
## Monter des dossiers
|
||||
---
|
||||
Vous pouvez monter les dossiers à partager dans vscode en ajoutant les volumes concernés dans le compose.yaml (ou via dockge), et en redéployant le conteneur.
|
||||
|
||||
```yaml
|
||||
services:
|
||||
code-server:
|
||||
#...
|
||||
volumes:
|
||||
- /chemin/vers/dossier:/dossier
|
||||
```
|
||||
Une fois dans vscode, vous pourrez accéder au dossier.
|
||||
|
||||
## Exposer code-server avec Swag
|
||||
---
|
||||
Tout l'intérêt d'une telle solution, c'est de pouvoir y accéder à distance et sur tout vos appareils. Pour cela, nous allons exposer coder-server via Swag.
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- __Au préalable :__ Nous partons du principe que vous avez créé dans votre [zone DNS](/generalites/reseau/dns) un sous domaine du type `code.mondomaine.fr` avec pour `CNAME` `mondomaine.fr` et [à moins que vous utilisiez Cloudflare Zero Trust](/serveex/securite/cloudflare), que que vous avez déjà redirigé le port `443` de votre box vers le `443` de votre serveur dans [les règles NAT](/generalites/reseau/nat).
|
||||
:::
|
||||
::
|
||||
|
||||
Dans Dockge, rendez-vous dans la stack de SWAG et éditez le compose en ajoutant le réseau de code-server :
|
||||
|
||||
```yaml
|
||||
services:
|
||||
swag:
|
||||
container_name: # ...
|
||||
# ...
|
||||
networks: # Relie le conteneur au réseau custom
|
||||
# ...
|
||||
- code-server # Nom du réseau déclaré dans la stack
|
||||
|
||||
networks: # Définit le réseau custom
|
||||
# ...
|
||||
code-server: # Nom du réseau déclaré dans la stack
|
||||
name: code-serveur # Nom véritable du réseau externe
|
||||
external: true # Précise que c'est un réseau à rechercher en externe
|
||||
```
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Ici nous partons du principe que le nom du réseau de code-server est `code-server_default`. Vous pouvez vérifier que la connexion est opérationnelle en visitant le dashboard de SWAG en tapant http://ipduserveur:81.
|
||||
:::
|
||||
::
|
||||
|
||||
Relancez la stack en cliquant sur "déployer" et patientez le temps que SWAG soit complètement opérationnel.
|
||||
|
||||
Dans les dossiers de Swag, créez le fichier `code.subdomain.conf`.
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ vous pouvez utiliser [File Browser](/serveex/files/file-browser) pour naviguer dans vos fichier et éditer vos documents au lieu d'utiliser les commandes du terminal.
|
||||
::
|
||||
|
||||
```sh
|
||||
sudo vi /docker/swag/config/nginx/proxy-confs/code.subdomain.conf
|
||||
```
|
||||
Entrez en modification avec la touche `i` et collez la configuration ci-dessous :
|
||||
|
||||
```nginx
|
||||
## Version 2023/12/19
|
||||
|
||||
server {
|
||||
listen 443 ssl;
|
||||
listen [::]:443 ssl;
|
||||
|
||||
server_name code.*;
|
||||
|
||||
include /config/nginx/ssl.conf;
|
||||
|
||||
client_max_body_size 0;
|
||||
|
||||
#if ($lan-ip = yes) { set $geo-whitelist yes; }
|
||||
#if ($geo-whitelist = no) { return 404; }
|
||||
if ($geo-blacklist = no) { return 404; }
|
||||
|
||||
# enable for ldap auth (requires ldap-location.conf in the location block)
|
||||
#include /config/nginx/ldap-server.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-location.conf in the location block)
|
||||
#include /config/nginx/authelia-server.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-location.conf in the location block)
|
||||
#include /config/nginx/authentik-server.conf;
|
||||
|
||||
location / {
|
||||
# enable the next two lines for http auth
|
||||
#auth_basic "Restricted";
|
||||
#auth_basic_user_file /config/nginx/.htpasswd;
|
||||
|
||||
# enable for ldap auth (requires ldap-server.conf in the server block)
|
||||
#include /config/nginx/ldap-location.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-server.conf in the server block)
|
||||
#include /config/nginx/authelia-location.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-server.conf in the server block)
|
||||
#include /config/nginx/authentik-location.conf;
|
||||
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app code-server;
|
||||
set $upstream_port 8443;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Appuyez sur `Echap` puis sauvegardez et quittez en tapant `:x` puis en appuyant sur `Entrée`.
|
||||
|
||||
Et voilà, vous avez exposé code-server !
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ Vous pouvez protéger cette app avec Authentik en ouvrant `code.subodmain.conf` et en retirant les `#` devant `include /config/nginx/authentik-server.conf;`{lang=nginx} et `include /config/nginx/authentik-location.conf;`{lang=nginx}.N'oubliez pas de [créer une application et un fournisseur dans Authentik](/serveex/securite/authentik#protéger-une-app-par-reverse-proxy).
|
||||
::
|
||||
@@ -1,199 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: Gitea
|
||||
description: Installer Gitea, un service Git auto-hébergé léger pour gérer vos dépôts de code de façon privée sur votre propre serveur.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# Gitea
|
||||
|
||||
::alert{type="info"}
|
||||
🎯 __Objectifs :__
|
||||
- Installer Gitea
|
||||
- Exposer Gitea avec Swag
|
||||
::
|
||||
|
||||
[Gitea](https://https://about.gitea.com/) est une plateforme DevOps, permettant de gérer des dépots, à la manière de GitHub mais chez vous en selfhost.
|
||||
|
||||

|
||||
|
||||
## Installation
|
||||
---
|
||||
Structure des dossiers
|
||||
|
||||
```sh
|
||||
root
|
||||
└── docker
|
||||
└── gitea
|
||||
└── data
|
||||
```
|
||||
|
||||
Ouvrez Dockge, cliquez sur `compose`, appelez la stack `gitea` puis copiez collez ceci :
|
||||
|
||||
```yaml
|
||||
---
|
||||
networks:
|
||||
gitea:
|
||||
external: false
|
||||
services:
|
||||
server:
|
||||
image: gitea/gitea:1.22.0
|
||||
container_name: gitea
|
||||
environment:
|
||||
- USER_UID=${UID}
|
||||
- USER_GID=${GID}
|
||||
- TZ=Europe/Paris
|
||||
restart: unless-stopped
|
||||
networks:
|
||||
- gitea
|
||||
volumes:
|
||||
- ./data:/data
|
||||
ports:
|
||||
- 3333:3000
|
||||
- 222:22
|
||||
```
|
||||
Et renseignez le `.env` avec les infos que vous avez trouvées, par exemple :
|
||||
|
||||
```properties
|
||||
UID=1000
|
||||
GID=1000
|
||||
```
|
||||
|
||||
Déployez le conteneur et rendez-vous sur `http://ipduserveur:3333`. Et voilà, votre instance Gitea est disponible !
|
||||
|
||||
::alert{type="danger"}
|
||||
:::list{type="danger"}
|
||||
- __En cas d'échec :__ vérifiez les règles de votre pare-feu.
|
||||
:::
|
||||
::
|
||||
|
||||
## Exposer Gitea avec Swag
|
||||
---
|
||||
Tout l'intérêt d'une telle solution, c'est de pouvoir y accéder à distance et sur tout vos appareils. Pour cela, nous allons exposer Gitea via Swag.
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- __Au préalable :__ nous partons du principe que vous avez créé dans votre [zone DNS](/generalites/reseau/dns) un sous domaine du type `gitea.mondomaine.fr` avec pour `CNAME` `mondomaine.fr` et, [à moins que vous utilisiez Cloudflare Zero Trust](/serveex/securite/cloudflare), que que vous avez déjà redirigé le port `443` de votre box vers le `443` de votre serveur dans [les règles NAT](/generalites/reseau/nat).
|
||||
:::
|
||||
::
|
||||
|
||||
Dans Dockge, rendez-vous dans la stack de SWAG et éditez le compose en ajoutant le réseau de gitea :
|
||||
|
||||
```yaml
|
||||
services:
|
||||
swag:
|
||||
container_name: # ...
|
||||
# ...
|
||||
networks: # Relie le conteneur au réseau custom
|
||||
# ...
|
||||
- gitea # Nom du réseau déclaré dans la stack
|
||||
|
||||
networks: # Définit le réseau custom
|
||||
# ...
|
||||
gitea: # Nom du réseau déclaré dans la stack
|
||||
name: gitea_default # Nom véritable du réseau externe
|
||||
external: true # Précise que c'est un réseau à rechercher en externe
|
||||
```
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Ici nous partons du principe que le nom du réseau de gitea est `gitea_default`. Vous pouvez vérifier que la connexion est opérationnelle en visitant le dashboard de SWAG en tapant http://ipduserveur:81.
|
||||
:::
|
||||
::
|
||||
|
||||
Relancez la stack en cliquant sur "déployer" et patientez le temps que SWAG soit complètement opérationnel.
|
||||
|
||||
Dans les dossiers de Swag, créez le fichier `gitea.subdomain.conf`.
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ vous pouvez utiliser [File Browser](/serveex/files/file-browser) pour naviguer dans vos fichier et éditer vos documents au lieu d'utiliser les commandes du terminal.
|
||||
::
|
||||
|
||||
```sh
|
||||
sudo vi /docker/swag/config/nginx/proxy-confs/gitea.subdomain.conf
|
||||
```
|
||||
Entrez en modification avec la touche `i` et collez la configuration ci-dessous :
|
||||
|
||||
```nginx
|
||||
## Version 2023/12/19
|
||||
|
||||
server {
|
||||
listen 443 ssl;
|
||||
listen [::]:443 ssl;
|
||||
|
||||
server_name gitea.*;
|
||||
|
||||
include /config/nginx/ssl.conf;
|
||||
|
||||
client_max_body_size 0;
|
||||
|
||||
# enable for ldap auth (requires ldap-location.conf in the location block)
|
||||
#include /config/nginx/ldap-server.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-location.conf in the location block)
|
||||
#include /config/nginx/authelia-server.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-location.conf in the location block)
|
||||
#include /config/nginx/authentik-server.conf;
|
||||
|
||||
location / {
|
||||
# enable the next two lines for http auth
|
||||
#auth_basic "Restricted";
|
||||
#auth_basic_user_file /config/nginx/.htpasswd;
|
||||
|
||||
# enable for ldap auth (requires ldap-server.conf in the server block)
|
||||
#include /config/nginx/ldap-location.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-server.conf in the server block)
|
||||
#include /config/nginx/authelia-location.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-server.conf in the server block)
|
||||
#include /config/nginx/authentik-location.conf;
|
||||
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app gitea;
|
||||
set $upstream_port 3000;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
|
||||
location ~ (/gitea)?/info/lfs {
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app gitea;
|
||||
set $upstream_port 3000;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Appuyez sur `Echap` puis sauvegardez et quittez en tapant `:x` puis en appuyant sur `Entrée`.
|
||||
|
||||
Ouvrez le fichier `app.ini` dans les fichiers du conteneur
|
||||
|
||||
```sh
|
||||
sudo vi /docker/gitea/data/gitea/conf/app.ini
|
||||
```
|
||||
|
||||
Entrez en modification avec la touche `i` et et modifiez la section serveur avec les infos de votre domaine
|
||||
|
||||
```properties
|
||||
[server]
|
||||
DOMAIN = gitea.mondomaine.fr
|
||||
SSH_DOMAIN = gitea.mondomaine.fr
|
||||
ROOT_URL = https://gitea.mondomaine.fr/
|
||||
```
|
||||
Appuyez sur `Echap` puis sauvegardez et quittez en tapant `:x` puis en appuyant sur `Entrée`.
|
||||
|
||||
Relancez le conteneur.
|
||||
|
||||
Et voilà, vous avez exposé Gitea !
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ Vous pouvez protéger cette app avec Authentik de façon native en [suivant ces instructions](https://docs.goauthentik.io/integrations/services/gitea/).
|
||||
::
|
||||
@@ -1,168 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: IT-Tools
|
||||
description: Installer IT Tools, une collection auto-hébergée d'utilitaires pratiques pour développeurs — convertisseurs, encodeurs, formateurs et plus encore.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# IT Tools
|
||||
|
||||
::alert{type="info"}
|
||||
🎯 __Objectifs :__
|
||||
- Installer IT-Tools
|
||||
- Exposer IT Tools avec Swag
|
||||
::
|
||||
|
||||
[IT Tools](https://github.com/CorentinTh/it-tools) est un conteneur exposant une page web permettant d'accéder à un grand nombre d'outil de développement.
|
||||
|
||||

|
||||
|
||||
## Installation
|
||||
---
|
||||
|
||||
Ouvrez Dockge, cliquez sur `compose`, appelez la stack `it-tools` puis copiez collez ceci :
|
||||
|
||||
```yaml
|
||||
---
|
||||
services:
|
||||
it-tools:
|
||||
container_name: it-tools
|
||||
restart: unless-stopped
|
||||
image: corentinth/it-tools:latest
|
||||
ports:
|
||||
- 3222:80
|
||||
```
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ ajoutez le label de watchtower dans chaque conteneur afin d'automatiser les mises à jour
|
||||
|
||||
```yaml
|
||||
services:
|
||||
it-tools:
|
||||
#...
|
||||
labels:
|
||||
- com.centurylinklabs.watchtower.enable=true
|
||||
::
|
||||
|
||||
|
||||
Déployez le conteneur et rendez-vous sur `http://ipduserveur:3222`. Et voilà, votre instance IT Tools en webui est disponible !
|
||||
|
||||
::alert{type="danger"}
|
||||
:::list{type="danger"}
|
||||
- __En cas d'échec :__ vérifiez les règles de votre pare-feu.
|
||||
:::
|
||||
::
|
||||
|
||||
## Exposer IT Tools avec Swag
|
||||
---
|
||||
Vous aurez peut-etre envie d'y accéder à distance et sur tout vos appareils. Pour cela, nous allons exposer IT Tools via Swag.
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- __Au préalable :__ nous partons du principe que vous avez créé dans votre [zone DNS](/generalites/reseau/dns) un sous domaine du type `tools.mondomaine.fr` avec pour `CNAME` `mondomaine.fr` et, [à moins que vous utilisiez Cloudflare Zero Trust](/serveex/securite/cloudflare), que que vous avez déjà redirigé le port `443` de votre box vers le `443` de votre serveur dans [les règles NAT](/generalites/reseau/nat).
|
||||
:::
|
||||
::
|
||||
|
||||
Dans Dockge, rendez-vous dans la stack de SWAG et éditez le compose en ajoutant le réseau de it-tools :
|
||||
|
||||
```yaml
|
||||
services:
|
||||
swag:
|
||||
container_name: # ...
|
||||
# ...
|
||||
networks: # Relie le conteneur au réseau custom
|
||||
# ...
|
||||
- it-tools # Nom du réseau déclaré dans la stack
|
||||
|
||||
networks: # Définit le réseau custom
|
||||
# ...
|
||||
it-tools: # Nom du réseau déclaré dans la stack
|
||||
name: it-tools_default # Nom véritable du réseau externe
|
||||
external: true # Précise que c'est un réseau à rechercher en externe
|
||||
```
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Ici nous partons du principe que le nom du réseau de it-tools est `it-tools_default`. Vous pouvez vérifier que la connexion est opérationnelle en visitant le dashboard de SWAG en tapant http://ipduserveur:81.
|
||||
:::
|
||||
::
|
||||
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Ici nous partons du principe que le nom du réseau de Swag est `swag_default`.
|
||||
:::
|
||||
::
|
||||
|
||||
Relancez la stack en cliquant sur "déployer" et patientez le temps que SWAG soit complètement opérationnel.
|
||||
|
||||
Dans les dossiers de Swag, créez le fichier `tools.subdomain.conf`.
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ vous pouvez utiliser [File Browser](/serveex/files/file-browser) pour naviguer dans vos fichier et éditer vos documents au lieu d'utiliser les commandes du terminal.
|
||||
::
|
||||
|
||||
```sh
|
||||
sudo vi /docker/swag/config/nginx/proxy-confs/tools.subdomain.conf
|
||||
```
|
||||
Entrez en modification avec la touche `i` et collez la configuration ci-dessous :
|
||||
|
||||
```nginx
|
||||
## Version 2023/12/19
|
||||
|
||||
server {
|
||||
listen 443 ssl;
|
||||
listen [::]:443 ssl;
|
||||
|
||||
server_name tools.*;
|
||||
|
||||
include /config/nginx/ssl.conf;
|
||||
|
||||
client_max_body_size 0;
|
||||
|
||||
#if ($lan-ip = yes) { set $geo-whitelist yes; }
|
||||
#if ($geo-whitelist = no) { return 404; }
|
||||
if ($geo-blacklist = no) { return 404; }
|
||||
|
||||
# enable for ldap auth (requires ldap-location.conf in the location block)
|
||||
#include /config/nginx/ldap-server.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-location.conf in the location block)
|
||||
#include /config/nginx/authelia-server.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-location.conf in the location block)
|
||||
#include /config/nginx/authentik-server.conf;
|
||||
|
||||
location / {
|
||||
# enable the next two lines for http auth
|
||||
#auth_basic "Restricted";
|
||||
#auth_basic_user_file /config/nginx/.htpasswd;
|
||||
|
||||
# enable for ldap auth (requires ldap-server.conf in the server block)
|
||||
#include /config/nginx/ldap-location.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-server.conf in the server block)
|
||||
#include /config/nginx/authelia-location.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-server.conf in the server block)
|
||||
#include /config/nginx/authentik-location.conf;
|
||||
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app it-tools;
|
||||
set $upstream_port 80;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Appuyez sur `Echap` puis sauvegardez et quittez en tapant `:x` puis en appuyant sur `Entrée`.
|
||||
|
||||
Et voilà, vous avez exposé it-tools !
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ Vous pouvez protéger cette app avec Authentik en ouvrant `tools.subodmain.conf` et en retirant les `#` devant `include /config/nginx/authentik-server.conf;`{lang=nginx} et `include /config/nginx/authentik-location.conf;`{lang=nginx}. N'oubliez pas de [créer une application et un fournisseur dans Authentik](/serveex/securite/authentik#protéger-une-app-par-reverse-proxy).
|
||||
::
|
||||
@@ -1,2 +0,0 @@
|
||||
navigation.title: Développement
|
||||
icon: lucide:code-xml
|
||||
@@ -1,309 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: Adguard Home
|
||||
description: Installer AdGuard Home pour bloquer publicités et trackers à l'échelle du réseau avec DNS-over-HTTPS, gestion des clients et règles de filtrage personnalisées.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# Adguard Home
|
||||
|
||||
::alert{type="info"}
|
||||
🎯 __Objectifs :__
|
||||
- Installer et déployer Adguard
|
||||
- Exposer Adguard
|
||||
- Sécuriser les requêtes avec SSL/TLS
|
||||
- Configurer les appareils clients
|
||||
::
|
||||
|
||||
[AdGuard Home](https://github.com/AdguardTeam/AdGuardHome) est un serveur DNS anti-pub et anti-traçage qui fonctionne au niveau du système. Une fois configuré, il couvrira TOUS vos appareils domestiques et vous n'aurezbesoin d'aucun logiciel côté client pour cela.
|
||||
|
||||
Il fonctionne comme un serveur DNS qui redirige les domaines de suivi vers un «black hole», empêchant ainsi vos appareils de se connecter à ces serveurs.
|
||||
|
||||
En pratique, une fois en place, il vous faudra juste configurer les serveurs DNS de vos appareils, pour que ces derniers l'utilisent.
|
||||
|
||||
**Rappel sur le fonctionnement d'un DNS :**
|
||||
|
||||
Lorsque vous naviguez sur un site, ou une application, des requêtes sont émises vers un ou des domaines afin d'afficher le contenu de votre page. Les publicités notamment. Votre appareil ne connait pas les adresses IP de ces serveurs à joindre. Pour les connaitre, il va contacter un _serveur de nom_ (Domain Name Server) qui lui va lui répondre avec l'adresse IP la plus à jour pour le domaine de la requête.
|
||||
|
||||
Par défaut, votre appareil utilise le serveur votre fournisseur d'accès, paramétré dans votre box ou directement sur le CGNAT de votre opérateur si appareil mobile. Cela peut etre changé directement dans les réglages de votre navigateur, mais aussi dans le système de votre appareil, et parfois directement dans votre box si votre FAI le permet.
|
||||
|
||||
Adguard lui, va s'intercaler entre le serveur de nom et votre appareil. Si vous paramétrez vos appareil, ils contacteront d'abord adguard qui filtrera les requetes, via des listes régulièrement mises à jour :
|
||||
|
||||
- Si le domaine n'est pas dans une blocklist, il contactera des serveurs de noms génériques (dit upstreams) et répondra vers vos appareils avec l'adresse IP recherchée.
|
||||
- Si le domaine est dans une blocklist, il ne contactera pas les DNS upstream et ne répondre pas à vos appareils. Le contenu affilié à cette requete ne s'affichera pas.
|
||||
|
||||
C'est ainsi que les pubs et domaines malveillants sont bloqués : leurs domaines sont présents dans la blocklist, le reste de la page lui charge correctement.
|
||||
|
||||

|
||||
## Installation
|
||||
---
|
||||
Structure des dossiers :
|
||||
|
||||
```sh
|
||||
root
|
||||
└── docker
|
||||
└── adguard
|
||||
├── confdir
|
||||
├── workdir
|
||||
├── compose.yaml
|
||||
└── .env
|
||||
```
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Nous monterons aussi le dossier `/docker/swag/config/etc/letsencrypt` afin d'avoir accès au certificat SSL de Swag.
|
||||
:::
|
||||
::
|
||||
|
||||
Ouvrez Dockge, et cliquez sur `compose`
|
||||
|
||||
Nommez la stack `adguardhome` et copiez la configuration ci-dessous
|
||||
|
||||
```yaml
|
||||
---
|
||||
services:
|
||||
|
||||
adguardhome:
|
||||
container_name: adguard
|
||||
image: adguard/adguardhome
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- 53:53/udp
|
||||
- 8080:80/tcp
|
||||
- 4443:443/tcp
|
||||
- 853:853/tcp
|
||||
- 3000:3000/tcp
|
||||
volumes:
|
||||
- /docker/adguardhome/confdir:/opt/adguardhome/conf
|
||||
- /docker/adguardhome/workdir:/opt/adguardhome/work
|
||||
- /docker/swag/config/etc/letsencrypt:/swag-ssl:ro
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ Ajoutez le label de watchtower dans chaque conteneur afin d'automatiser les mises à jour
|
||||
|
||||
```yaml
|
||||
services:
|
||||
adguardhome:
|
||||
#...
|
||||
labels:
|
||||
- com.centurylinklabs.watchtower.enable=true
|
||||
::
|
||||
|
||||
Déployez la stack.
|
||||
|
||||
Rendez-vous sur `http//ipduserveur:3000` et suivez les instructions
|
||||
|
||||
Et voilà, vous avez déployé Adguard !
|
||||
|
||||
## Exposer Adguard avec Swag
|
||||
---
|
||||
Pour être utilisable hors de chez vous, vous devez exposer Adguard
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- __Au préalable :__ nous partons du principe que vous avez créé dans votre [zone DNS](/generalites/reseau/dns) un sous domaine du type `adguard.mondomaine.fr` avec pour `CNAME` `mondomaine.fr` et que que vous avez déjà redirigé le port `443` de votre box vers le `443` de votre serveur dans [les règles NAT](/generalites/reseau/nat). Redirigez également le port `53` et le port `853` vers votre serveur. Ces ports serviront à router les requêtes DNS.
|
||||
:::
|
||||
::
|
||||
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- N'utilisez pas les tunnels cloudflare pour exposer Adguard, et désactivez tout proxy.
|
||||
:::
|
||||
::
|
||||
|
||||
Dans Dockge, rendez-vous dans la stack de SWAG et éditez le compose en ajoutant le réseau d'adguard :
|
||||
|
||||
```yaml
|
||||
services:
|
||||
swag:
|
||||
container_name: # ...
|
||||
# ...
|
||||
networks: # Relie le conteneur au réseau custom
|
||||
# ...
|
||||
- adguard # Nom du réseau déclaré dans la stack
|
||||
|
||||
networks: # Définit le réseau custom
|
||||
# ...
|
||||
adguard: # Nom du réseau déclaré dans la stack
|
||||
name: adguard_default # Nom véritable du réseau externe
|
||||
external: true # Précise que c'est un réseau à rechercher en externe
|
||||
```
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Ici nous partons du principe que le nom du réseau d'adguard est `adguard_default`. Vous pouvez vérifier que la connexion est opérationnelle en visitant le dashboard de SWAG en tapant http://ipduserveur:81.
|
||||
:::
|
||||
::
|
||||
|
||||
Relancez la stack en cliquant sur "déployer" et patientez le temps que SWAG soit complètement opérationnel.
|
||||
|
||||
Créez et ouvrez le fichier `adguard.subdomain.conf`
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce pour les allergiques au terminal :__
|
||||
vous pouvez utiliser [File Browser](/serveex/files/file-browser) pour naviguer dans vos fichier et éditer vos documents au lieu d'utiliser les commandes du terminal.
|
||||
::
|
||||
|
||||
```sh
|
||||
sudo vi /docker/swag/config/nginx/proxy-confs/adguard.subdomain.conf
|
||||
```
|
||||
|
||||
Editez le fichier en appuyant sur `i` puis copiez la configuration ci-dessous :
|
||||
|
||||
```nginx
|
||||
## Version 2023/05/31
|
||||
# make sure that your adguard container is named adguard
|
||||
# make sure that your dns has a cname set for adguard
|
||||
|
||||
server {
|
||||
listen 443 ssl;
|
||||
listen [::]:443 ssl;
|
||||
|
||||
server_name adguard.*;
|
||||
|
||||
include /config/nginx/ssl.conf;
|
||||
|
||||
client_max_body_size 0;
|
||||
|
||||
#if ($lan-ip = yes) { set $geo-whitelist yes; }
|
||||
#if ($geo-whitelist = no) { return 404; }
|
||||
if ($geo-blacklist = no) { return 404; }
|
||||
|
||||
# enable for ldap auth (requires ldap-location.conf in the location block)
|
||||
#include /config/nginx/ldap-server.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-location.conf in the location block)
|
||||
#include /config/nginx/authelia-server.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-location.conf in the location block)
|
||||
#include /config/nginx/authentik-server.conf;
|
||||
|
||||
location / {
|
||||
# enable the next two lines for http auth
|
||||
#auth_basic "Restricted";
|
||||
#auth_basic_user_file /config/nginx/.htpasswd;
|
||||
|
||||
# enable for ldap auth (requires ldap-server.conf in the server block)
|
||||
#include /config/nginx/ldap-location.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-server.conf in the server block)
|
||||
#include /config/nginx/authelia-location.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-server.conf in the server block)
|
||||
#include /config/nginx/authentik-location.conf;
|
||||
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app adguard;
|
||||
set $upstream_port 3000;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
|
||||
location /control {
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app adguard;
|
||||
set $upstream_port 3000;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
|
||||
location /dns-query {
|
||||
# to properly use this please set `allow_unencrypted_doh: true` and `force_https: false` in adguard
|
||||
# see https://github.com/AdguardTeam/AdGuardHome/wiki/Configuration#configuration-file
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app adguard;
|
||||
set $upstream_port 3000;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__
|
||||
<br/><br/>
|
||||
Vous pouvez protéger cette app avec Authentik en ouvrant `adguard.subdomain.conf` et en retirant les `#` devant `include /config/nginx/authentik-server.conf;`{lang=nginx} et `include /config/nginx/authentik-location.conf;`{lang=nginx}. n'oubliez pas de [créer une application et un fournisseur dans Authentik](/serveex/securite/authentik/#protéger-une-app-par-reverse-proxy). Il vous faudra exclure l'url `https://adguard.mondomaine.fr/dns-query` de l'authentification :
|
||||
|
||||
- Editez le fournisseur d'Adguard
|
||||
- Dans *paramètres avancés du protocole > chemins authentifiés*, saisissez `^/dns-query`
|
||||
::
|
||||
|
||||
Appuyez sur `Echap` puis sauvegardez et quittez en tapant `:x`
|
||||
|
||||
Et voilà, vous exposez Adguard à présent !
|
||||
|
||||
## Configurer le chiffrement SSL/TLS
|
||||
---
|
||||
Le chiffrement est essentiel si vous souhaitez garder privées les requêtes que vous faites vers adguard. Chiffrer ces requêtes c'est vous assurez que personne, meme votre FAI ne connaissent votre historique. C'est aussi vous assurer que personne d'autre que votre serveur vous répond.
|
||||
|
||||
Afin de configurer le chiffrement :
|
||||
|
||||
- Allez dans _paramètre_ puis dans _chiffrement_.
|
||||
- Parametrez comme suit
|
||||
|
||||

|
||||
|
||||
- Puis en dessous, dans la section _certificats_ cochez _Définir un emplacement de fichier du certificat_
|
||||
- Dans le champs de saisie, mettez `/swag-ssl/live/mondomaine.fr/fullchain.pem` en remplaçant `mondomaine.fr` par votre domaine principal.
|
||||
- Dans _clé privée_ cochez _Définir un fichier pour la clef privée_
|
||||
- Dans le champs de saisie, mettez `/swag-ssl/live/mondomaine.fr/privkey.pem` en remplaçant `mondomaine.fr` par votre domaine principal.
|
||||
- Validez
|
||||
|
||||
Et voilà ! Vous avez protégé vos futures requêtes DNS !
|
||||
|
||||
## Configurer les appareils
|
||||
---
|
||||
Pour configurer vos appareils, vous avez plusieurs choix (que vous pouvez cumuler).
|
||||
### Sécuriser le réseau local
|
||||
Vous pouvez sécuriser votre réseau local avec adguard en configurant votre box pour que chaque requête DNS soit dirigée par défaut vers adguard plutot que les services de votre FAI. Attention, votre box doit pouvoir permettre le changement de DNS (Orange ne le permet pas).
|
||||
|
||||
Généralement cette option est dans les paramètres _DHCP_ de votre box. Pensez bien à ajouter un serveur secondaire tel que :
|
||||
|
||||
- Cloudlare : `1.1.1.1`
|
||||
- Google : `8.8.8.8`
|
||||
|
||||
En effet, sans cela, si votre serveur tombe, vos appareils n'arriveraient plus à se connecter à internet.
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Des appareils peuvent avoir un autre DNS paramétré et ne pas utiliser ceux de la box.
|
||||
:::
|
||||
::
|
||||
|
||||
### Forcer un navigateur à utiliser Adguard
|
||||
|
||||
Dans votre navigateur, vous pouvez configurer un DNS pour le forcer à utiliser adguard home.
|
||||
Dans les paramètres, il vous faudra renseigner l'adresse` https://adguard.mondomaine.fr/dns-query`
|
||||
|
||||
### Windows, paramétrer Adguard au niveau système
|
||||
|
||||
Dans windows, vous devez paramétrer Adguard pour chaque carte réseau que vous souhaitez utiliser.
|
||||
|
||||
- Rendez vous dans _accueil > Réseau et internet >_ et choisissez votre carte réseau à modifier
|
||||
- Cliquez sur _modifier les DNS_ (parfois dans _propriété du matériel_)
|
||||
- Choisissez `Manuel`
|
||||
- Activez IPv4
|
||||
- Renseignez l'IP publique de votre serveur (celle accessible depuis internet)
|
||||
- Activez _DNS sur HTTPS (modèle manuel)_
|
||||
- Désactivez _retour au texte en clair_
|
||||
- Enregistrez
|
||||
|
||||
Tous les programmes de votre machine utilisant cette carte réseau seront filtrés par Adguard.
|
||||
|
||||
|
||||
## Ajouter des filtres
|
||||
---
|
||||
|
||||
- Allez dans les paramètres et changez les filtres.
|
||||
@@ -1,249 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: Vaultwarden
|
||||
description: Installer Vaultwarden, un gestionnaire de mots de passe auto-hébergé compatible Bitwarden pour remplacer les gestionnaires Google ou Apple sur tous vos appareils.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# Vaultwarden
|
||||
|
||||
::alert{type="info"}
|
||||
🎯 __Objectifs :__ Installer [Vaultwarden](https://github.com/dani-garcia/vaultwarden) pour gérer vos mot de passe sur tout vos appareils (remplace la gestion de mot de passe Google ou Apple).
|
||||
::
|
||||
|
||||

|
||||
|
||||
[Vaultwarden](https://github.com/dani-garcia/vaultwarden) est une solution de gestion de vos mot de passe (génération, saisie semi-automatique...) que vous pouvez installer directement sur votre serveur. Cette solution remplace les gestionnaires comme Google, Apple ou Keepass. Cette solution permet de synchroniser tout vos mots de passe sur vos différentes machines, avec un chiffrement de bout en bout.
|
||||
|
||||
Vaultwarden est un fork de la solution [Bitwarden](https://bitwarden.com/fr-fr/help/).
|
||||
|
||||
## Installation
|
||||
---
|
||||
Structure des dossiers
|
||||
|
||||
```sh
|
||||
root
|
||||
└── docker
|
||||
└── vaultwarden
|
||||
├── data
|
||||
├── compose.yaml
|
||||
└── .env
|
||||
```
|
||||
|
||||
Ouvrez Dockge, cliquez sur `compose`, appelez la stack `vaultwarden` puis copiez collez ceci :
|
||||
|
||||
```yaml
|
||||
---
|
||||
services:
|
||||
vaultwarden:
|
||||
container_name: vaultwarden
|
||||
image: vaultwarden/server:latest
|
||||
restart: unless-stopped
|
||||
env_file:
|
||||
- .env
|
||||
volumes:
|
||||
- ./data/:/data/
|
||||
ports:
|
||||
- 3050:80
|
||||
environment:
|
||||
- DOMAIN=${URL}
|
||||
- LOGIN_RATELIMIT_MAX_BURST=10
|
||||
- LOGIN_RATELIMIT_SECONDS=60
|
||||
- ADMIN_RATELIMIT_MAX_BURST=10
|
||||
- ADMIN_RATELIMIT_SECONDS=60
|
||||
- ADMIN_TOKEN=${TOKEN}
|
||||
- SENDS_ALLOWED=true
|
||||
- EMERGENCY_ACCESS_ALLOWED=true
|
||||
- WEB_VAULT_ENABLED=true
|
||||
- SIGNUPS_ALLOWED=false
|
||||
- SIGNUPS_VERIFY=true
|
||||
- SIGNUPS_VERIFY_RESEND_TIME=3600
|
||||
- SIGNUPS_VERIFY_RESEND_LIMIT=5
|
||||
|
||||
```
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ Ajoutez le label de watchtower dans chaque conteneur afin d'automatiser les mises à jour
|
||||
|
||||
```yaml
|
||||
services:
|
||||
vaultwarden:
|
||||
#...
|
||||
labels:
|
||||
- com.centurylinklabs.watchtower.enable=true
|
||||
::
|
||||
|
||||
Nous allons maintenant générer un hash de mot de passe, qu'il faudra renseigner dans la variable `TOKEN` du `.env`
|
||||
|
||||
```sh
|
||||
echo -n 'votremotdepasse' | argon2 "$(openssl rand -base64 32)" -e -id -k 65540 -t 3 -p 4
|
||||
```
|
||||
|
||||
Copiez le résultat précieusement et gardez en tête le mot de passe que vous avez choisi.
|
||||
|
||||
Dans le `.env`, renseignez les variables suivantes :
|
||||
|
||||
```properties
|
||||
URL=
|
||||
TOKEN=
|
||||
```
|
||||
|
||||
| Variable | Valeur | Exemple |
|
||||
|-------------------------|---------------------------------------------------------|----------------------------|
|
||||
| `URL`{lang=properties} | L'url de votre serveur vaultwarden | `https://vault.domaine.fr` |
|
||||
| `TOKEN`{lang=properties} | Le token que vous avez précédemment copié précieusement | `'$argon2id$v=19$m=65540,t=3,p=4$bXBGME` |
|
||||
|
||||
Puis déployez le conteneur.
|
||||
|
||||
Depuis quelques temps, Vaultwarden ne permet pas d'etre accéder sans certificat SSL, ce qui empeche d'y accéder via son IP local. Nous y accèderons donc après l'avoir exposé avec SWAG, qui ajoute lui même un certificat SSL.
|
||||
|
||||
|
||||
::alert{type="danger"}
|
||||
:::list{type="danger"}
|
||||
- __En cas d'échec :__ vérifiez les règles de votre pare-feu.
|
||||
:::
|
||||
::
|
||||
|
||||
## Exposer Vaultwarden avec SWAG
|
||||
---
|
||||
Tout l'intérêt d'une telle solution, c'est de pouvoir y accéder à distance et sur tout vos appareils. Pour cela, nous allons exposer Vaultwarden via [SWAG](/serveex/coeur/swag).
|
||||
|
||||
::alert{type="info"}
|
||||
✨ __Au préalable :__ nous partons du principe que vous avez créé dans votre [zone DNS](/generalites/reseau/dns) un sous domaine du type `vault.mondomaine.fr` avec pour `CNAME` `mondomaine.fr` et, [à moins que vous utilisiez Cloudflare Zero Trust](/serveex/securite/cloudflare), que que vous avez déjà redirigé le port `443` de votre box vers le `443` de votre serveur dans [les règles NAT](/generalites/reseau/nat).
|
||||
::
|
||||
|
||||
Dans Dockge, rendez-vous dans la stack de SWAG et éditez le compose en ajoutant le réseau de vaultwarden :
|
||||
|
||||
```yaml
|
||||
services:
|
||||
swag:
|
||||
container_name: # ...
|
||||
# ...
|
||||
networks: # Relie le conteneur au réseau custom
|
||||
# ...
|
||||
- vaultwarden # Nom du réseau déclaré dans la stack
|
||||
|
||||
networks: # Définit le réseau custom
|
||||
# ...
|
||||
vaultwarden: # Nom du réseau déclaré dans la stack
|
||||
name: vaultwarden_default # Nom véritable du réseau externe
|
||||
external: true # Précise que c'est un réseau à rechercher en externe
|
||||
```
|
||||
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Ici nous partons du principe que le nom du réseau de vaultwarden est `vaultwarden_default`. Vous pouvez vérifier que la connexion est opérationnelle en visitant le dashboard de SWAG en tapant http://ipduserveur:81.
|
||||
:::
|
||||
::
|
||||
|
||||
Relancez la stack en cliquant sur "déployer" et patientez le temps que SWAG soit complètement opérationnel.
|
||||
|
||||
Dans les dossiers de Swag, créez le fichier `vault.subdomain.conf`.
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ vous pouvez utiliser [File Browser](/serveex/files/file-browser) pour naviguer dans vos fichier et éditer vos documents au lieu d'utiliser les commandes du terminal.
|
||||
::
|
||||
|
||||
```sh
|
||||
sudo vi /docker/swag/config/nginx/proxy-confs/vault.subdomain.conf
|
||||
```
|
||||
Entrez en modification avec la touche `i` et collez la configuration ci-dessous :
|
||||
|
||||
```nginx
|
||||
server {
|
||||
listen 443 ssl;
|
||||
listen [::]:443 ssl;
|
||||
|
||||
server_name vault.*;
|
||||
|
||||
include /config/nginx/ssl.conf;
|
||||
|
||||
client_max_body_size 128M;
|
||||
|
||||
# enable for ldap auth (requires ldap-location.conf in the location block)
|
||||
#include /config/nginx/ldap-server.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-location.conf in the location block)
|
||||
#include /config/nginx/authelia-server.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-location.conf in the location block)
|
||||
#include /config/nginx/authentik-server.conf;
|
||||
|
||||
location / {
|
||||
# enable the next two lines for http auth
|
||||
#auth_basic "Restricted";
|
||||
#auth_basic_user_file /config/nginx/.htpasswd;
|
||||
|
||||
# enable for ldap auth (requires ldap-server.conf in the server block)
|
||||
#include /config/nginx/ldap-location.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-server.conf in the server block)
|
||||
#include /config/nginx/authelia-location.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-server.conf in the server block)
|
||||
#include /config/nginx/authentik-location.conf;
|
||||
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app vaultwarden;
|
||||
set $upstream_port 80;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
|
||||
location ~ ^(/vaultwarden)?/admin {
|
||||
# enable the next two lines for http auth
|
||||
#auth_basic "Restricted";
|
||||
#auth_basic_user_file /config/nginx/.htpasswd;
|
||||
|
||||
# enable for ldap auth (requires ldap-server.conf in the server block)
|
||||
#include /config/nginx/ldap-location.conf;
|
||||
|
||||
# enable for Authelia (requires authelia-server.conf in the server block)
|
||||
#include /config/nginx/authelia-location.conf;
|
||||
|
||||
# enable for Authentik (requires authentik-server.conf in the server block)
|
||||
#include /config/nginx/authentik-location.conf;
|
||||
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app vaultwarden;
|
||||
set $upstream_port 80;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
|
||||
location ~ (/vaultwarden)?/api {
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app vaultwarden;
|
||||
set $upstream_port 80;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
|
||||
location ~ (/vaultwarden)?/notifications/hub {
|
||||
include /config/nginx/proxy.conf;
|
||||
include /config/nginx/resolver.conf;
|
||||
set $upstream_app vaultwarden;
|
||||
set $upstream_port 80;
|
||||
set $upstream_proto http;
|
||||
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
|
||||
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Appuyez sur `Echap` puis sauvegardez et quittez en tapant `:x` puis en appuyant sur `Entrée`.
|
||||
|
||||
Et voilà, vous avez exposé Vaultwarden ! Accédez au panneau d'administration via `https://vault.mondomaine.fr/admin` et collez le mot de passe que vous avez choisi pour générer l'`ADMIN_TOKEN`. Plus d'info sur les fonctionnalités de [Bitwarden](https://bitwarden.com/help/).
|
||||
|
||||
N'oubliez pas d'installer les extensions Bitwarden (elles sont compatibles avec Vaultwarden) pour [Chrome](https://chromewebstore.google.com/detail/gestionnaire-de-mots-de-p/nngceckbapebfimnlniiiahkandclblb) ou pour [Firefox](https://addons.mozilla.org/fr/firefox/addon/bitwarden-password-manager/) ainsi que les applications [iOS](https://apps.apple.com/fr/app/bitwarden/id1137397744) et [Android](https://play.google.com/store/apps/details?id=com.x8bit.bitwarden&hl=fr) afin de synchroniser vos mot de passe.
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ vous pouvez protéger cette app avec Authentik en ouvrant `tools.subodmain.conf` et en retirant les `#` devant `include /config/nginx/authentik-server.conf;`{lang=nginx} et `include /config/nginx/authentik-location.conf;`{lang=nginx}. N'oubliez pas de [créer une application et un fournisseur dans Authentik](/serveex/securite/authentik#protéger-une-app-par-reverse-proxy).
|
||||
::
|
||||
@@ -1,2 +0,0 @@
|
||||
navigation.title: Applications utiles
|
||||
icon: lucide:award
|
||||
@@ -1,2 +0,0 @@
|
||||
icon: noto:microscope
|
||||
navigation.redirect: /serveex/introduction
|
||||
@@ -1,24 +0,0 @@
|
||||
---
|
||||
icon: lucide:bookmark
|
||||
navigation: true
|
||||
title: Introduction
|
||||
description: Introduction à Stockeex — un projet personnel de gestion de stock et d'inventaire. Documentation en cours de rédaction.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
# Stockeex
|
||||
|
||||
::terminal{style="margin-top:80px;"}
|
||||
---
|
||||
content:
|
||||
- sudo systemctl status stockeex-article
|
||||
- currently writing, come back later...
|
||||
---
|
||||
::
|
||||
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
|
||||
<div align="center">
|
||||
<img src="/img/stockeex/stockeex-raid.svg" alt="Image" style="max-width: 60%;">
|
||||
</div>
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
icon: noto:computer-disk
|
||||
navigation.redirect: /stockeex/introduction
|
||||
@@ -1,69 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: Lumeex
|
||||
description: Lumeex est un générateur de galerie photo statique en Python — minimaliste, léger et entièrement personnalisable sans CMS.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
|
||||
<div align="center">
|
||||
<img src="https://git.djeex.fr/Djeex/lumeex/raw/branch/main/illustration/logo.svg" alt="Lumeex Screenshot" width="300"/>
|
||||
</div>
|
||||
<p/>
|
||||
<div align="center">
|
||||
<p>Yet another minimalist, lightweight photo gallery static site generator.</p>
|
||||
</div>
|
||||
</p>
|
||||
<div align="center">
|
||||
<img src="https://git.djeex.fr/Djeex/lumeex/raw/branch/main/illustration/lumeex.png" alt="Lumeex Screenshot" />
|
||||
</div>
|
||||
---
|
||||
|
||||
Amateur de photographie, j'ai passé plusieurs semaines à chercher un framework avec une galerie photo qui rende mieux qu'Instagram. Je souhaitais quelque chose qui mette en avant les photos plutot que l'auteur, et qui rend chaque visite unique en rendant le chargement des photos aleatoire. Tout en pouvant filtrer et trier par tag ou association de tag.
|
||||
|
||||
Finalement, je n'ai rien trouvé qui faisait exactement ce que je voulais, et lorsque cela s'en approchait c'etait toujours via de lourds CMS. J'ai alors décidé de faire un site statique, à la main, avec Notepad++ à l'ancienne. Me debrouillant assez bien en HTML/CSS et un peu en javascript, je suis vité tombé sur un résultat sympa, durant mes vacances entre deux sessions à la plage. Après tout, un bon ouvrier doit avoir de bons outils, et il n'y a pas de meilleurs outils que ceux que l'on crée soit-même.
|
||||
|
||||
Puis je me suis dit qu'il serait peut etre pas mal d'automatiser certaines actions, comme les formats de favicons, le resize et la conversion des images, la génération de la gallerie au lieu de tout saisir à la main, la création des robots.txt et sitemap... Et je me suis remis à Python.
|
||||
|
||||
Finalement, après avoir obtenu de bons résultats, je me suis dit autant aller jusqu'au bout: un framework complet permettant de générer une galerie sur un site statique, en remplissant juste les informations du site dans un fichier de config et avec un peu de customisations visuelle sans rentrer dans le code.
|
||||
|
||||
C'est ainsi qu'est né **Lum[eex]{style="color: #1ad6ff"}**
|
||||
|
||||
</p>
|
||||
<div align="center">
|
||||
<img src="https://git.djeex.fr/Djeex/lumeex/raw/branch/main/illustration/lumeex-webui.png" alt="Lumeex Screenshot" />
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
::card-grid{grid-template-columns="repeat(2, minmax(0, 1fr));"}
|
||||
#title
|
||||
Et voilà le bousin
|
||||
|
||||
#root
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
|
||||
#default
|
||||
|
||||
::card{icon=noto:open-book}
|
||||
#title
|
||||
__Documentation__
|
||||
#description
|
||||
[Accéder à la doc](https://lumeex.djeex.fr)
|
||||
::
|
||||
|
||||
::card{icon=simple-icons:gitea style="color: #9ee773;"}
|
||||
#title
|
||||
__Repository__
|
||||
#description
|
||||
[Accéder au repo](https://git.djeex.fr/Djeex/lumeex)
|
||||
::
|
||||
|
||||
::card{icon=fluent-color:design-ideas-48}
|
||||
#title
|
||||
__Demo__
|
||||
#description
|
||||
[Explorer la demo](https://modern.djeex.fr)
|
||||
::
|
||||
::
|
||||
@@ -1,58 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: Instameex
|
||||
description: Instameex est un outil Docker pour fusionner des exports SDR et HDR en un JPEG avec gain map prêt pour l'upload HDR sur Instagram.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
|
||||
<div align="center">
|
||||
<img src="https://git.djeex.fr/Djeex/instameex/raw/branch/main/src/assets/img/logo-long.svg" alt="Lumeex Screenshot" width="300"/>
|
||||
</div>
|
||||
<p/>
|
||||
<div align="center">
|
||||
<p>Mixez vos photos SDR et HDR pour obtenir un fichier parfait pour Instagram</p>
|
||||
</div>
|
||||
</p>
|
||||
<div align="center">
|
||||
<img src="https://git.djeex.fr/Djeex/instameex/raw/branch/main/illustration/instameex-illustration.png" alt="Instameex Screenshot" width="640" />
|
||||
</div>
|
||||
---
|
||||
|
||||
Il n'y a rien de plus frustrant que la gestion du HDR d'instagram. Ce dernier compresse et démolit les gainmap, et au moindre changement de ratio ou de taille supprimme purement et simplement le HDR. Quant à lightroom, leur systeme de "SDR preview" est tout bonnement inacceptable, ne permettant pas d'obtenir des résultats correct. Jusqu'ici, lorsque l'on veut poster sur instagram, il faut choisir entre un SDR potable et un HDR déficient, ou l'inverse.
|
||||
|
||||
Pourquoi ne pas tout simplement éditer pleinement son fichier SDR d'une part, son fichier HDR d'une autre part, et recalculer une gainmap à partir de ces deux fichiers parfaits ?
|
||||
Quelques aventuriers se sont déjà lancés sur ce chemin, notamment avec un plugin [Adobe Lightroom Classic](https://github.com/karachungen/lightroom-plugin-export-hdr). Mais jugez moi comme vous voulez, je n'utilise que Lightroom CC, qui ne gère pas les plugins.
|
||||
|
||||
Je me suis alors inspiré d'un [fork du premier projet](https://github.com/kostis-kounadis/instagram-hdr-assembler) qui a donné lieu au plugin LrC, pour créer un front, déployable facilement avec docker. On ne va pas se mentir, cela a été un bon moyen de tester mon abo Claude Code. Et je dois avouer que c'est très impressionnant de le voir créer ses propres environnements, faire des test de bout en bout, auto-corriger son code, et écrire des bilans détaillés. J'ai quand même tout relu, je vous rassure. Et j'ai énormément appris sur les principes du HDR, des gainmap, des courbes HLG/PQ, des espaces colorimétriques, et j'en passe.
|
||||
|
||||
En gros, voilà ce que donne mon workflow à présent pour poster sur Insta :
|
||||
|
||||

|
||||
|
||||
Je vous présente donc **Instam[eex]{style="color: #1ad6ff"}**
|
||||
|
||||
---
|
||||
::card-grid{grid-template-columns="repeat(2, minmax(0, 1fr));"}
|
||||
#title
|
||||
Et voilà le résultat
|
||||
|
||||
#root
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
|
||||
#default
|
||||
::card
|
||||
#title
|
||||
🐋 __Instameex__
|
||||
#description
|
||||
[Accéder au repo](https://git.djeex.fr/Djeex/instameex)
|
||||
::
|
||||
|
||||
::card
|
||||
#title
|
||||
🌍 __Version en ligne__
|
||||
#description
|
||||
[Convertir en ligne](https://instameex.djeex.fr)
|
||||
::
|
||||
::
|
||||
@@ -1,2 +0,0 @@
|
||||
icon: noto:test-tube
|
||||
navigation.title: Mes bêtises
|
||||
@@ -1,253 +0,0 @@
|
||||
---
|
||||
navigation: true
|
||||
title: Wireguard 14
|
||||
description: Ancien guide WireGuard 14 conservé à titre archivé — voir le guide WireGuard à jour pour une installation actuelle.
|
||||
main:
|
||||
fluid: false
|
||||
---
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
# Wireguard
|
||||
|
||||
::alert{type="info"}
|
||||
🎯 __Objectifs :__
|
||||
- Installer Wireguard
|
||||
- Configurer les clients
|
||||
- Accéder au réseau sécurisé
|
||||
::
|
||||
|
||||
## Introduction
|
||||
---
|
||||
L'utilisation d'un VPN permet d'accéder à distance aux ressources locales du serveur sans les exposer sur internet. C'est notamment une manière propre de sécuriser l'accès à la console SSH, plutot que d'exposer le port sur internet. C'est pouvoir se connecter à son réseau où que l'on soit, de maniere sécurisée, et de faire dialoguer des machines qui sont sur des réseaux différents.
|
||||
|
||||
Ici nous utiliserons [Wireguard](https://www.wireguard.com/), un serveur VPN sécurisé et très performant, à l'aide des conteneurs :
|
||||
|
||||
- [wg-easy](https://github.com/wg-easy/wg-easy) pour le serveur, qui propose une interface web très simple pour controler les connexions et télécharger les fichiers de conf (notamment par QR code pour les téléphones)
|
||||
- [Wireguard](https://docs.linuxserver.io/images/docker-wireguard/?h=wireguard) pour les clients linux
|
||||
|
||||
Il existe aussi des clients Windows, MacOS, iOS et Android.
|
||||
|
||||
Le principe est le suivant :
|
||||
|
||||
- Sur internet, n'importe qui peut contacter n'importe quel box internet et donc essayer de contacter n'importe quel serveur exposé.
|
||||
- Votre serveur est sur votre réseau local. Il est accessible depuis le réseau local mais pas depuis internet, mis à part les services exposés (comme nous l'avons fait avec Dockge). Pour accéder aux ressources non exposées, vous devez être connecté sur le meme réseau que votre serveur et donc etre chez vous. De plus, vous devez laisser ouvert les ports utilisés par vos services à travers le pare feu de votre serveur.
|
||||
- Nous souhaitons ici au contraire, depuis n'importe où, pouvoir accéder de maniere securisée aux services non exposés sur internet du serveur, comme la console SSH qui permet de se connecter à la machine par exemple.
|
||||
- Nous souhaitons aussi accéder aux services d'autres serveurs, et par exemple relier de maniere sécurisée deux instances de Dockge pour tout controler depuis la meme interface.
|
||||
|
||||
Pour cela nous allons créer un **réseau privé virtuel**, ou VPN, c'est à dire un tunnel sécurisé auquel personne n'a accès à part les machines que vous relierez entre elles. Elles feront partie d'un nouveau réseau et pourront dialoguer entre elle comme dans un réseau local.
|
||||
|
||||
D'autre part, vous pourrez ajouter votre téléphone, un ordinateur portable ou n'importe quel appareil au réseau pour pouvoir utiliser vos ressources depuis vos appareils quotidiens, où que vous soyiez.
|
||||
|
||||

|
||||
|
||||
Dans cette illustration, la machine 1 est sur deux réseaux :
|
||||
|
||||
- son réseau local (tous les appareils liés à la box, avec une adresse IP du type `192.168.x.x ` donc ici la machine 1 et la machine 2)
|
||||
- le réseau du VPN (tous les appareils reliés au VPN, avec une seconde adresse IP du type `10.8.x.x` donc ici la machine 1 et 4)
|
||||
|
||||
On peut aussi faire en sorte que les machines reliées au réseau virtuel partagent les acces à leur réseau local. Ici nous ne le ferons pas, pour des raisons de sécurité, et de complexité en terme de sous-réseau (si les deux machines distantes ont des machines locales qui utilisent la meme adresse IP locale, par exemple `192.168.1.1`, cela posera des conflits).
|
||||
|
||||
Ainsi, sur le réseau virtuel, seules les machines directement reliées pourront dialoguer entre elle depuis ce réseau. Elles ne pourront pas dialoguer avec une machine situées sur un autre réseau local et non reliée au VPN.
|
||||
|
||||
## Côté serveur
|
||||
---
|
||||
::alert{type="info"}
|
||||
📋 __A vérifier au préalable :__
|
||||
- Vérifiez si le port `51820 UDP` estlibre sur votre serveur, et bien routé dans le NAT de la box `Source 51820 UDP -> Destination 51820 UDP -> Serveur`. En effet, votre serveur étant derrière votre box, le port de votre box doit etre joignable et rediriger vers le port de votre serveur connecté à votre VPN.
|
||||
- Vérifiez aussi que le port `51821 TCP` est libre sur le serveur pour accéder à la web ui.
|
||||
::
|
||||
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- __Attention :__ Cette documentation utilise la version `14` de [wg-easy](https://wg-easy.github.io/wg-easy/latest/). La version `15`comporte des breaking changes qui ne sont pas compatibles avec les configurations proposées ici.
|
||||
:::
|
||||
::
|
||||
|
||||
Structure des dossiers
|
||||
|
||||
```sh
|
||||
root
|
||||
└── docker
|
||||
└── wg-easy
|
||||
├── config
|
||||
│ └── etc_wireguard
|
||||
├── compose.yaml
|
||||
└── .env
|
||||
```
|
||||
|
||||
Le conteneur sera en mode `HOST`, c'est à dire qu'il occupera les ports de votre host comme s'il n'etait pas dans un conteneur mais directement installé sur la machine, sans passer par un sous-réseau.
|
||||
|
||||
Ouvrez Dockge, cliquez sur `compose` et nommez la stack `wg_easy`.
|
||||
|
||||
Copiez la configuration suivante :
|
||||
|
||||
```yaml
|
||||
---
|
||||
services:
|
||||
wg-easy:
|
||||
network_mode: host
|
||||
env_file:
|
||||
- .env
|
||||
environment:
|
||||
- LANG=en
|
||||
- WG_HOST=${HOST}
|
||||
- PASSWORD_HASH=${PW}
|
||||
- WG_DEFAULT_ADDRESS=${ADDRESS}
|
||||
- WG_HIDE_KEYS=never
|
||||
- WG_ALLOWED_IPS=${IPS}
|
||||
- WG_DEFAULT_DNS=
|
||||
- UI_TRAFFIC_STATS=true
|
||||
- UI_CHART_TYPE=1
|
||||
image: ghcr.io/wg-easy/wg-easy:14
|
||||
container_name: wg-easy
|
||||
volumes:
|
||||
- /docker/wg_easy/config/etc_wireguard:/etc/wireguard
|
||||
restart: unless-stopped
|
||||
cap_add:
|
||||
- NET_ADMIN
|
||||
- SYS_MODULE
|
||||
```
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__
|
||||
- Vous pouvez personnaliser le port de wireguard avec `WG_PORT` au lieu du port par defaut `51820`
|
||||
- Ajoutez le label de watchtower afin d'automatiser les mises à jour
|
||||
|
||||
```yaml
|
||||
services
|
||||
wg-easy:
|
||||
#...
|
||||
labels:
|
||||
- com.centurylinklabs.watchtower.enable=true
|
||||
::
|
||||
|
||||
Dans `.env` :
|
||||
|
||||
```properties
|
||||
HOST=
|
||||
PW=
|
||||
ADDRESS=
|
||||
IPS=
|
||||
```
|
||||
|
||||
| Variable | Valeur | Exemples |
|
||||
|---------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------|
|
||||
| `HOST`{lang=properties} | IP publique de votre box internet (elle doit etre fixe) | `80.72.136.27` |
|
||||
| `PW`{lang=properties} | Hash du mot de passe, [à générer ici](https://bcrypt-generator.com/). **ATTENTION:** doubler les `$` | `$$2a$$12$$FF6T4QqSP9Ho`|
|
||||
| `ADDRESS`{lang=properties} | Plage d'adresse que le DHCP du VPN peut attribuer, le `x` doit etre présent, on peut changer les autres chiffres ou les remplacer par `x` aussi | `10.8.0.x` |
|
||||
| `IPS`{lang=properties} | les IPs qui doivent etre routées par les clients vers le VPN. Dans notre cas, on veut que seul le traffic vers le serveur et clients du VPN soit routé, on veut pas de leurs réseau local et on veut conserver l'accès à internet direct sans passer par le VPN.Si vous voulez tout de meme ajouter toutes les machines connectées aux appareils en local, ajoutez la plage `192.168.0.0/16` en séparant les deux plages par une virgule. | `10.8.0.0/24` |
|
||||
|
||||
|
||||
Puis déployez la stack.
|
||||
|
||||
### Activation du forwarding depuis l'host
|
||||
|
||||
Pour que l'host autorise les clients à communiquer entre eux, vous devez activer les paramèttres suivants :
|
||||
|
||||
```sh
|
||||
sudo sysctl net.ipv4.ip_forward=1
|
||||
sudo sysctl net.ipv4.conf.all.src_valid_mark=1
|
||||
```
|
||||
|
||||
### Recuperation des fichiers de conf
|
||||
|
||||
Afin de configurer les clients, vous devez télécharger les fichiers de conf générés par l'host :
|
||||
|
||||
- Connectez vous via le web en local sur `http://ipduserveur:51821`
|
||||
- Créez un client
|
||||
- Téléchargez le fichier de conf
|
||||
- Renommez le en `wg0.conf`
|
||||
|
||||
::alert{type="danger"}
|
||||
:::list{type="danger"}
|
||||
- En cas d'échec, vérifiez les règles du pare-feu.
|
||||
:::
|
||||
::
|
||||
|
||||
## Sur le serveur client
|
||||
---
|
||||
::alert{type="info"}
|
||||
:::list{type="info"}
|
||||
- Nous partons du principe que le serveur client est un serveur linux avec Docker installé
|
||||
:::
|
||||
::
|
||||
|
||||
Structure des dossiers
|
||||
|
||||
```sh
|
||||
root
|
||||
└── docker
|
||||
└── wireguard
|
||||
└── config
|
||||
│ └── wg_confs
|
||||
└── compose.yaml
|
||||
```
|
||||
|
||||
Creez le dossier `/docker/wireguard/config/wg_confs`.
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce pour les allergiques au terminal :__
|
||||
vous pouvez utiliser [File Browser](/serveex/files/file-browser) pour naviguer dans vos fichier et éditer vos documents au lieu d'utiliser les commandes du terminal.
|
||||
::
|
||||
|
||||
```sh
|
||||
sudo mkdir -p /docker/wireguard/config/wg_confs
|
||||
```
|
||||
|
||||
Copiez le fichier` wg0.conf` téléchargé précédemment.
|
||||
|
||||
::alert{type="success"}
|
||||
✨ __Astuce :__ Le moyen le plus simple est de transférer le fichier par sftp dans le dossier `/home/nomdutilisateur` puis de le copier dans le bon dossier :
|
||||
|
||||
```sh
|
||||
sudo cp ~/wg0.conf /docker/wireguard/config/wg_confs
|
||||
|
||||
::
|
||||
|
||||
Creez le `compose.yaml` dans `/docker/wireguard `:
|
||||
```sh
|
||||
sudo vi /docker/wireguard/compose.yaml
|
||||
```
|
||||
Appuyez sur `i` pour rentrer en modification et copiez la configuration ci-dessous
|
||||
```yaml
|
||||
services:
|
||||
wireguard:
|
||||
image: lscr.io/linuxserver/wireguard:latest
|
||||
container_name: wireguard
|
||||
network_mode: host
|
||||
cap_add:
|
||||
- NET_ADMIN
|
||||
- SYS_MODULE #optional
|
||||
environment:
|
||||
- TZ=Europe/Paris
|
||||
volumes:
|
||||
- /docker/wireguard/config:/config
|
||||
- /lib/modules:/lib/modules #optional
|
||||
restart: unless-stopped
|
||||
```
|
||||
|
||||
Appuyez sur `Echap` puis tapez `:x` pour quitter et sauvegarder.
|
||||
|
||||
Lancez le conteneur :
|
||||
```sh
|
||||
cd /docker/wireguard
|
||||
sudo docker compose up -d
|
||||
```
|
||||
::alert{type="info" icon="exclamation-circle"}
|
||||
:::list{type="info"}
|
||||
- A répéter pour chaque client
|
||||
:::
|
||||
::
|
||||
|
||||
## Autres appareils
|
||||
---
|
||||
- **Téléphone :** installer wireguard et scanner le QR code via le webui (http://ipduserveur:51821)
|
||||
- **PC :** Installer wireguard client et mettre directement le fichier de conf téléchargé via le webui
|
||||
|
||||
::alert{type="warning"}
|
||||
:::list{type="warning"}
|
||||
- __Attention :__ Si des machines clientes sont sur le meme réseau local que le serveur (derriere la box), éditez le fichier `wg0.conf` uploadé sur cette machine en changeant avec l'adresse locale du serveur : `Endpoint = ipduserveur:51820`{lang=properties}
|
||||
:::
|
||||
::
|
||||
|
||||
Et voilà ce que cela peut donner !
|
||||
|
||||

|
||||
@@ -1,2 +0,0 @@
|
||||
icon: lucide:trash-2
|
||||
navigation.title: Obsolète
|
||||
@@ -1,2 +0,0 @@
|
||||
icon: noto:recycling-symbol
|
||||
navigation.title: Poubelle
|
||||
@@ -0,0 +1,2 @@
|
||||
title: About
|
||||
icon: i-noto-star
|
||||
@@ -0,0 +1,51 @@
|
||||
---
|
||||
title: Welcome
|
||||
description: Introduction to Docudjeex, a personal homelab documentation site covering self-hosted services, Debian, and Docker infrastructure.
|
||||
navigation:
|
||||
icon: i-lucide-home
|
||||
hideHeader: true
|
||||
hideCopyPage: true
|
||||
hideToc: true
|
||||
---
|
||||
|
||||
|
||||
:ellipsis{right=0px width=75% blur=150px zIndex=60}
|
||||
# docu[·]{style="color: #1ad6ff"}what?
|
||||
|
||||
__Docu[·]{style="color: #1ad6ff"}djeex__ is a site containing the documentation of my personal servers, originally created to easily keep track of my configurations and commands.
|
||||
My infrastructure is built around the Debian 13 + Docker combo, making exporting and deployment simpler.
|
||||
Special thanks to __Nipah__, __Xenio__, __KevOut__ and others for their patience and support. The simple idea of writing this documentation would not exist without them.
|
||||
|
||||
## About the documentation
|
||||
|
||||
The documentation provided here is experimental and shared in a spirit of open knowledge and experience. It is not intended to build production-grade or industrialized infrastructure. It may contain mistakes and/or approximations.
|
||||
|
||||
Naturally, this documentation should only be used within a strictly legal framework.
|
||||
|
||||
### Available or Upcoming Documentation
|
||||
|
||||
:::div{class="relative"}
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
:::
|
||||
|
||||
::card-group
|
||||
::card{icon="i-noto-open-book" title="General" to="/general/networking/nat"}
|
||||
Networking, storage, and hardware basics
|
||||
::
|
||||
|
||||
::card{icon="i-noto-microscope" title="Serveex" to="/serveex/introduction"}
|
||||
Step-by-step Homelab Deployment Guide
|
||||
::
|
||||
|
||||
::card{icon="i-noto-computer-disk" title="Stockeex"}
|
||||
*(coming soon)* Build your own home NAS to store your data and media
|
||||
::
|
||||
|
||||
::card{icon="i-noto-test-tube" title="My nonsense" to="/nonsense/python/nvidia-stock-bot"}
|
||||
Personal scripts and side projects
|
||||
::
|
||||
|
||||
::card{icon="i-noto-recycling-symbol" title="Recycled" to="/recycled/deprecated/wireguard-14"}
|
||||
Deprecated pages, kept for archive
|
||||
::
|
||||
::
|
||||
@@ -0,0 +1,2 @@
|
||||
title: General
|
||||
icon: i-noto-open-book
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
title: General
|
||||
description: General homelab knowledge, networking, storage, and hardware fundamentals that apply beyond any single self-hosted app.
|
||||
navigation:
|
||||
icon: i-lucide-bookmark
|
||||
---
|
||||
|
||||
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px zIndex=60}
|
||||
## Homelab Fundamentals
|
||||
|
||||
This section covers the general knowledge that [Serveex](/serveex/introduction) itself relies on but doesn't re-explain every time: how networking actually works at home, how to choose and set up storage, and what hardware to run it all on. Read it once, then link back to it from any app-specific guide.
|
||||
|
||||
### Networking
|
||||
|
||||
:::div{class="relative"}
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
:::
|
||||
|
||||
::card-group
|
||||
::card{icon="i-lucide-router" title="NAT & DHCP" to="/general/networking/nat"}
|
||||
Port forwarding and fixed DHCP leases on your router
|
||||
::
|
||||
|
||||
::card{icon="i-lucide-globe" title="DNS Zone" to="/general/networking/dns"}
|
||||
Reading and editing a domain's DNS zone
|
||||
::
|
||||
|
||||
::card{icon="i-lucide-folder-sync" title="Samba" to="/general/networking/samba"}
|
||||
Share folders over the local network
|
||||
::
|
||||
::
|
||||
|
||||
### Storage
|
||||
|
||||
:::div{class="relative"}
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
:::
|
||||
|
||||
::card-group
|
||||
::card{icon="i-lucide-database" title="RAID" to="/general/storage/raid"}
|
||||
Redundant disk arrays, hardware vs software
|
||||
::
|
||||
|
||||
::card{icon="i-lucide-layers" title="ZFS" to="/general/storage/zfs"}
|
||||
Snapshots, checksums, and built-in redundancy
|
||||
::
|
||||
::
|
||||
|
||||
### Hardware
|
||||
|
||||
:::div{class="relative"}
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
:::
|
||||
|
||||
::card-group
|
||||
::card{icon="i-lucide-cpu" title="The Basics" to="/general/hardware/basics"}
|
||||
CPUs, RAM, storage, and form factors
|
||||
::
|
||||
|
||||
::card{icon="i-lucide-network" title="Network" to="/general/hardware/network"}
|
||||
Switches, NICs, and cabling
|
||||
::
|
||||
|
||||
::card{icon="i-lucide-hard-drive" title="The ProloNAS" to="/general/hardware/prolonas"}
|
||||
A budget N100 home server build
|
||||
::
|
||||
::
|
||||
|
||||
### Linux tips for dummies
|
||||
|
||||
:::div{class="relative"}
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px}
|
||||
:::
|
||||
|
||||
::card-group
|
||||
::card{icon="i-lucide-terminal" title="Command Line Basics" to="/general/linux/cli-basics"}
|
||||
How a command is built, and the ones you'll actually use
|
||||
::
|
||||
|
||||
::card{icon="i-lucide-folder-tree" title="Folders and Partitions" to="/general/linux/filesystem"}
|
||||
What lives where on Debian, and the habits that keep it tidy
|
||||
::
|
||||
|
||||
::card{icon="i-lucide-wrench" title="Handy CLI Tools" to="/general/linux/handy-tools"}
|
||||
Terminal tools worth installing, and how to set them up
|
||||
::
|
||||
::
|
||||
@@ -0,0 +1,2 @@
|
||||
title: Networking
|
||||
icon: i-lucide-network
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
title: NAT & DHCP
|
||||
description: Learn how NAT, port forwarding, and DHCP work on a home router. Configure fixed IP leases and understand how to expose local services.
|
||||
---
|
||||
|
||||
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px zIndex=60}
|
||||
|
||||
|
||||

|
||||
|
||||
## What is a "port"?
|
||||
|
||||
Ports are different channels through which your router sends and receives data. This allows multiple services to run simultaneously.
|
||||
When it receives data through a port, your router forwards that data to the machine that:
|
||||
|
||||
- either initiated the request,
|
||||
- or is configured to receive data on a specific port.
|
||||
|
||||
Your router has over 65,000 ports available.
|
||||
|
||||
Some programs and applications are designed to use specific ports. For example, when your network sends data from an HTML page, the router receives it through port 80 (non-secure) or port `443` (secure via SSL).
|
||||
|
||||
So, your router acts as a data dispatcher between the internet and your local machines.
|
||||
|
||||
## Port Forwarding
|
||||
|
||||
Forwarding a `port` means setting a rule that specifies which `source` can send data to which `port` on your router, which will then forward it to a specific `port` on a specific `machine`. The `sources` and `destination machine` are identified by their IP addresses.
|
||||
|
||||
| Variable | Description | Example |
|
||||
|------------------------|---------------------------------------------------------|-------------------------|
|
||||
| `source machine` | IP of the source machine (from the internet) | `All`<br>`123.45.67.89` |
|
||||
| `source port` | Incoming port on the router | `443` |
|
||||
| `destination port` | Port on the destination machine | `3000` |
|
||||
| `destination machine` | IP of the target machine (on your local network) | `192.168.1.50` |
|
||||
|
||||
According to the table:
|
||||
If we remove `All` and keep the IP `123.45.67.89`, all traffic from this IP sent to port `443` on your router will be forwarded to port `3000` on the local IP `192.168.1.50`.
|
||||
|
||||
If we remove the IP and keep `All`, then all traffic from the internet on port `443` will be redirected to port `3000` on `192.168.1.50`.
|
||||
|
||||
This is useful when you have a server that must be accessible from the internet. For instance, a website uses port `80` (non-secure) or `443` (SSL-secured).
|
||||
To make the website accessible, you'll configure your router to redirect the domain request to your local server.
|
||||
Assume your service runs on port `3000` locally (`http://192.168.1.50:3000`), you would redirect all traffic from port `443` on the router to port `3000` on the local server.
|
||||
|
||||
::warning{to="/serveex/core/swag"}
|
||||
|
||||
__Warning:__ If you have multiple services to expose like `subdomain1.mydomain.com` and `subdomain2.mydomain.com`, your router cannot differentiate requests and forward to different ports.
|
||||
You must use a **Reverse Proxy** to route traffic based on the request.
|
||||
::
|
||||
|
||||
## DHCP
|
||||
|
||||
Every time a device connects to your local network, your router assigns it an IP address using DHCP rules.
|
||||
This IP is randomly selected from a predefined pool.
|
||||
At every device reboot, the IP may change, which is problematic if you're forwarding ports, as the target IP may no longer be valid.
|
||||
|
||||
To avoid this, use your router's DHCP server to assign a static IP address.
|
||||
|
||||
Each device has a physical "MAC address".
|
||||
To assign a fixed IP, you must know your device's MAC address (visible in your router when it's connected), and assign it a static IP.
|
||||
This is called a "static DHCP lease."
|
||||
|
||||
That way, your machine's IP never changes and your port forwarding rules remain effective.
|
||||
|
||||
| Variable | Description | Example |
|
||||
|---------------|----------------------------------|---------------------|
|
||||
| `IP` | Fixed local IP to assign | `192.168.1.50` |
|
||||
| `MAC Address` | Physical address of the device | `5E:FF:56:A2:AF:15` |
|
||||
|
||||
For more information, refer to your router's documentation.
|
||||
@@ -0,0 +1,59 @@
|
||||
---
|
||||
title: DNS Zone
|
||||
description: Understand how DNS works, how to read and edit a DNS zone, and how to configure domain names for your self-hosted services.
|
||||
---
|
||||
|
||||
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px zIndex=60}
|
||||
|
||||
## Introduction
|
||||
|
||||
When you browse a website or use an app, requests are made to one or more domains to fetch content for the page. Your device doesn't know the IP addresses of these servers, so it contacts a _name server_ (Domain Name Server), which responds with the most up-to-date IP address for the domain being requested.
|
||||
|
||||
The DNS zone is like a registry with signposts that direct your requests to the correct destination.
|
||||
|
||||

|
||||
|
||||
## The DNS Zone
|
||||
|
||||
When you purchase a domain from a registrar (Cloudflare, OVH, etc.), the registrar assigns you a DNS zone that you can customize.
|
||||
|
||||
You can enter _records_ into this DNS zone to direct requests properly. You can find [more information here](https://help.ovhcloud.com/csm/fr-dns-servers-general-information?id=kb_article_view&sysparm_article=KB0051661).
|
||||
|
||||
Example of a DNS zone for the domain `mydomain.com`:
|
||||
|
||||
```
|
||||
$TTL 3600
|
||||
@ IN SOA ns1.dns.me. dns.net. (2024051800 86400 3600 3600000 60)
|
||||
IN NS ns1.dns.me.
|
||||
IN NS ns2.dns.me.
|
||||
IN A 203.0.113.10
|
||||
www IN CNAME mydomain.com.
|
||||
subdomain IN CNAME mydomain.com.
|
||||
```
|
||||
|
||||
In this example:
|
||||
|
||||
- `$TTL 3600` tells global name servers that the records are valid for 1 hour (after which they need to re-check).
|
||||
- `IN SOA ns1.dns.me. dns.net. (...)` indicates `ns1.dns.me` as the primary DNS server, with refresh intervals.
|
||||
- `IN NS` records define the authoritative name servers for the domain.
|
||||
- `IN A 203.0.113.10` means `mydomain.com` points to IP `203.0.113.10`.
|
||||
- `subdomain IN CNAME mydomain.com.` means `subdomain.mydomain.com` points to the same destination as `mydomain.com`.
|
||||
|
||||
So, if you want to point `mydomain.com` to your server, you can do it by adding an `A` record pointing to your server's public IP address.
|
||||
|
||||
::warning
|
||||
|
||||
__Warning:__ If your server is hosted at home:
|
||||
- Your public IP is the one assigned to your home router. Make sure it's static, or configure [DDNS](https://aws.amazon.com/fr/what-is/dynamic-dns/).
|
||||
- Make sure you've [set up port 443 forwarding to your server's listening port](/general/networking/nat).
|
||||
::
|
||||
|
||||
If you're adding a subdomain that should also point to your server, use a `CNAME` record pointing to `mydomain.com`.
|
||||
|
||||
::note
|
||||
|
||||
__Why not use an `A` record for the subdomain?__ If your subdomain points to the same server as `mydomain.com`, it's better to use a `CNAME` record because if the server's IP changes, you won’t need to update the subdomain record.
|
||||
::
|
||||
|
||||
Most registrars offer user-friendly interfaces to manage DNS records. Refer to your registrar’s documentation for specific instructions.
|
||||
@@ -0,0 +1,225 @@
|
||||
---
|
||||
title: Samba
|
||||
description: Set up Samba on Debian to share folders over your local network and access them from Windows, macOS, or Linux.
|
||||
---
|
||||
|
||||
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px zIndex=60}
|
||||
|
||||
Samba is a free implementation of the SMB/CIFS protocol, allowing access to a folder located on a network drive. It can be configured on macOS, Windows, or Linux.
|
||||
|
||||
There are many tutorials for setting up Samba on Windows or on NAS systems like Synology, but here we focus on Debian.
|
||||
|
||||

|
||||
|
||||
## Create and configure a Shared Network Folder
|
||||
::note
|
||||
|
||||
In this example, we will share the `/video` folder from a remote machine called `remote-machine`. We will access this folder from a machine called `local-machine`. The user connecting to the network drive will be `sambauser`.
|
||||
::
|
||||
|
||||
::steps{level="3"}
|
||||
### Install Samba Server
|
||||
|
||||
```bash [Terminal]
|
||||
sudo apt update && sudo apt upgrade
|
||||
sudo apt install samba smbclient cifs-utils
|
||||
```
|
||||
|
||||
### Create the `/video` Folder
|
||||
|
||||
```bash [Terminal]
|
||||
sudo mkdir /video
|
||||
```
|
||||
|
||||
### Configure the Share
|
||||
|
||||
Now, edit the file `/etc/samba/smb.conf`.
|
||||
|
||||
```bash [Terminal]
|
||||
sudo nano /etc/samba/smb.conf
|
||||
```
|
||||
|
||||
::tip{icon="" to="/serveex/files/file-browser-quantum"}
|
||||
✨ __Tip:__ You can use **File Browser Quantum** to navigate and edit your files instead of using terminal commands.
|
||||
::
|
||||
|
||||
Find the `workgroup` variable and name your workgroup (e.g., `workgroup = WORKGROUP`).
|
||||
|
||||
Then scroll to the end of the file and add the following configuration:
|
||||
|
||||
```properties [smb.conf]
|
||||
[video]
|
||||
comment = Video folder
|
||||
path = /video
|
||||
writable = yes
|
||||
guest ok = no
|
||||
valid users = @smbshare
|
||||
force create mode = 770
|
||||
force directory mode = 770
|
||||
inherit permissions = yes
|
||||
```
|
||||
|
||||
Press :kbd{value="Ctrl+O"}, then :kbd{value="Enter"} to save, and :kbd{value="Ctrl+X"} to exit.
|
||||
### Done!
|
||||
::
|
||||
|
||||
### Create a Samba User and Group
|
||||
|
||||
Since we're using a secured share, we need to create a user and group to access it remotely.
|
||||
|
||||
::steps{level="3"}
|
||||
### Create the group
|
||||
|
||||
```bash [Terminal]
|
||||
sudo groupadd smbshare
|
||||
```
|
||||
|
||||
Give the group control over the `/video` folder:
|
||||
|
||||
```bash [Terminal]
|
||||
sudo chgrp -R smbshare /video
|
||||
```
|
||||
|
||||
Set inherited permissions:
|
||||
|
||||
```bash [Terminal]
|
||||
sudo chmod 2775 /video
|
||||
```
|
||||
### Create the user
|
||||
|
||||
Now add a no-login user: this user cannot log into the server but can access Samba.
|
||||
|
||||
```bash [Terminal]
|
||||
sudo useradd -M -s /sbin/nologin sambauser
|
||||
```
|
||||
|
||||
Add the user to the `smbshare` group:
|
||||
|
||||
```bash [Terminal]
|
||||
sudo usermod -aG smbshare sambauser
|
||||
```
|
||||
|
||||
Set a Samba password:
|
||||
|
||||
```bash [Terminal]
|
||||
sudo smbpasswd -a sambauser
|
||||
```
|
||||
|
||||
### Enable the Samba account
|
||||
|
||||
```bash [Terminal]
|
||||
sudo smbpasswd -e sambauser
|
||||
```
|
||||
### Done!
|
||||
::
|
||||
|
||||
## Accessing a Shared Folder
|
||||
|
||||
::steps{level="3"}
|
||||
### Install Required Packages
|
||||
|
||||
```bash [Terminal]
|
||||
sudo apt update && sudo apt upgrade
|
||||
sudo apt install cifs-utils
|
||||
```
|
||||
|
||||
### Create the Mount Destination
|
||||
|
||||
We will create a folder on our local machine where the remote `/video` folder will be mounted, e.g. `/mnt/video`.
|
||||
|
||||
```bash [Terminal]
|
||||
sudo mkdir /mnt/video
|
||||
```
|
||||
|
||||
### Prepare the .credentials File
|
||||
|
||||
To avoid typing our username and password every time, create a `.credentials` file storing the login info.
|
||||
|
||||
Create it in the `/smb` folder:
|
||||
|
||||
```bash [Terminal]
|
||||
sudo mkdir /smb
|
||||
sudo nano /smb/.credentials
|
||||
```
|
||||
|
||||
Write:
|
||||
|
||||
```properties [.credentials]
|
||||
username=sambauser
|
||||
password=password
|
||||
```
|
||||
|
||||
* `sambauser`: the user we created on the `remote-machine`
|
||||
* `password`: the password set earlier
|
||||
|
||||
Press :kbd{value="Ctrl+O"}, then :kbd{value="Enter"} to save, and :kbd{value="Ctrl+X"} to exit.
|
||||
|
||||
Set proper file permissions:
|
||||
|
||||
```bash [Terminal]
|
||||
sudo chmod 600 /smb/.credentials
|
||||
```
|
||||
|
||||
### Mount the Shared Folder
|
||||
::warning
|
||||
__Warning:__ If you're using ufw as firewall, you need to add a rule to allow your remote server to access to your share.
|
||||
```bash [Terminal]
|
||||
sudo ufw allow from <your-remote-ip> to any app Samba
|
||||
```
|
||||
::
|
||||
Now mount the folder:
|
||||
|
||||
```bash [Terminal]
|
||||
sudo mount -t cifs -o credentials=/smb/.credentials //remote-ip/video /mnt/video
|
||||
```
|
||||
|
||||
Replace `remote-ip` with your `remote-machine`'s IP address.
|
||||
|
||||
Verify the mount:
|
||||
|
||||
```bash [Terminal]
|
||||
sudo mount -t cifs
|
||||
```
|
||||
|
||||
You’ll see details confirming the mount is successful.
|
||||
|
||||
Now you can access the `/video` folder of the `remote-machine` from your `local-machine`!
|
||||
|
||||
### (Optional) Auto-mount on Boot
|
||||
|
||||
By default, shares aren't auto-mounted after reboot. To automate this, edit the `/etc/fstab` file.
|
||||
|
||||
First, back it up:
|
||||
|
||||
```bash [Terminal]
|
||||
sudo cp /etc/fstab /etc/fstab.bak
|
||||
```
|
||||
|
||||
Then add the mount configuration line:
|
||||
|
||||
```bash [Terminal]
|
||||
echo "//remote-ip/video /mnt/video cifs _netdev,nofail,credentials=/smb/.credentials,x-systemd.automount,x-systemd.device-timeout=15 0 0" | sudo tee -a /etc/fstab
|
||||
```
|
||||
|
||||
Reboot the machine:
|
||||
|
||||
```bash [Terminal]
|
||||
sudo reboot
|
||||
```
|
||||
|
||||
After rebooting, verify the mount:
|
||||
|
||||
```bash [Terminal]
|
||||
sudo mount -t cifs
|
||||
```
|
||||
### And done!
|
||||
::
|
||||
|
||||
::tip
|
||||
__Unmount the Shared Folder__
|
||||
|
||||
```bash [Terminal]
|
||||
sudo umount -t cifs /mnt/video
|
||||
```
|
||||
::
|
||||
@@ -0,0 +1,2 @@
|
||||
title: Storage
|
||||
icon: i-lucide-hard-drive
|
||||
@@ -0,0 +1,108 @@
|
||||
---
|
||||
title: RAID
|
||||
description: Understand RAID concepts, hardware vs software, RAID levels, and how to set up redundant disk arrays for your homelab.
|
||||
---
|
||||
|
||||
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px zIndex=60}
|
||||
|
||||
_Redundant Array of Independent Disks_
|
||||
|
||||
In computing, RAID (Redundant Array of Independent Disks) is a system that allows multiple hard drives to be combined to improve performance and/or reliability. It works by restructuring and distributing data blocks across the drives.
|
||||
|
||||
Originally, RAID systems were hardware-based, meaning a dedicated controller (a specific chip) managed data distribution and RAID operations. Today, most RAID systems (or their equivalents) are software-based. In fact, many software technologies can create RAID-like systems with features not available in hardware RAID, such as automatic repair (data scrubbing), snapshots, and more.
|
||||
|
||||
## Different Types of RAID
|
||||
|
||||
There are several types of RAID, each offering its own pros and cons. In general, RAID impacts the following five factors:
|
||||
|
||||
- Number of drives
|
||||
- Total storage capacity
|
||||
- Read speed
|
||||
- Write speed
|
||||
- Fault tolerance (resistance to hardware failure)
|
||||
|
||||
::warning
|
||||
|
||||
RAID is not a backup system but a service continuity system! It only allows hot-swapping of drives without interrupting your server or restoring from backup. You still need an external backup system.
|
||||
::
|
||||
|
||||
### No RAID
|
||||
|
||||
<div style="display: flex; align-items: center;">
|
||||
<img src="/img/global/no-raid.svg" alt="Disks with no RAID redundancy" style="max-width: 30%; max-height:230px; margin-right: 20px;">
|
||||
<ul>
|
||||
<li>Just your disks, without RAID. Data is stored disk by disk.</li>
|
||||
<li>If you lose a disk, only its data is lost.</li>
|
||||
<li>Total capacity is the sum of all disks.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Use your disks without RAID when you're not afraid of data loss and can tolerate service interruptions between failure and backup restoration.
|
||||
|
||||
### RAID 0
|
||||
|
||||
<div style="display: flex; align-items: center;">
|
||||
<img src="/img/global/raid0.svg" alt="RAID 0 striping data across disks" style="max-width: 30%; max-height:230px; margin-right: 20px;">
|
||||
<ul>
|
||||
<li>OS sees 1 drive.</li>
|
||||
<li>Data is striped across all disks.</li>
|
||||
<li>If you lose one disk, you lose all data.</li>
|
||||
<li>High read and write performance (multiplied by number of disks).</li>
|
||||
<li>Total capacity is the sum of all disks.</li>
|
||||
<li>Minimum of 2 disks required.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Use RAID 0 when you prioritize performance and are not concerned about data loss. Ideal for temporary, high-speed storage (video editing, AI workloads, etc). Not suitable for long-term storage, as one failure means total data loss.
|
||||
|
||||
### RAID 1
|
||||
|
||||
<div style="display: flex; align-items: center;">
|
||||
<img src="/img/global/raid1.svg" alt="RAID 1 mirroring data across disks" style="max-width: 30%; max-height:230px; margin-right: 20px;">
|
||||
<ul>
|
||||
<li>OS sees 1 drive.</li>
|
||||
<li>All disks contain identical data.</li>
|
||||
<li>You can lose all but one disk.</li>
|
||||
<li>Improved read speed (scales with number of disks).</li>
|
||||
<li>Total capacity is equal to one disk (e.g., 2×10TB = 10TB).</li>
|
||||
<li>Minimum of 2 disks required.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Use RAID 1 for strong redundancy. Each disk contains all data, so performance remains unaffected during a failure. Once failed disks are replaced, data is quickly restored. However, usable storage is limited to one disk’s capacity, making it an expensive solution.
|
||||
|
||||
::tip{icon=""}
|
||||
✨ __Tip:__ You can combine RAID 1 with other RAID types to create mirrored arrays.
|
||||
::
|
||||
|
||||
### RAID 5
|
||||
<p align="center">
|
||||
<img src="/img/global/raid5.svg" alt="RAID 5 with distributed parity" style="max-width: 40%; margin-right: 20px;">
|
||||
</p>
|
||||
|
||||
- OS sees 1 drive.
|
||||
- Data is striped with parity blocks for redundancy.
|
||||
- You can lose 1 disk and recover data.
|
||||
- Improved read speed (scales with number of disks).
|
||||
- Total capacity is the sum of all disks minus one (e.g., 3×10TB = 20TB).
|
||||
- Minimum of 3 disks (4 recommended to reduce capacity loss).
|
||||
|
||||
Use RAID 5 when you want reliable storage with 3 to 5 disks and minimal space loss. It tolerates one disk failure but may have degraded performance during recovery, which can take days.
|
||||
|
||||
### RAID 6
|
||||
<p align="center">
|
||||
<img src="/img/global/raid6.svg" alt="RAID 6 with double distributed parity" style="max-width: 50%; margin-right: 20px;">
|
||||
</p>
|
||||
|
||||
- OS sees 1 drive.
|
||||
- Data is striped with dual parity blocks.
|
||||
- You can lose 2 disks and still recover data.
|
||||
- Improved read speed (scales with number of disks).
|
||||
- Total capacity is the sum of all disks minus two (e.g., 4×10TB = 20TB).
|
||||
- Minimum of 4 disks (6 recommended to minimize space loss).
|
||||
|
||||
Use RAID 6 in similar situations as RAID 5, especially with 6 or more disks. More disks mean higher failure risk. RAID 6 offers peace of mind by tolerating two simultaneous failures.
|
||||
|
||||
## Software RAID
|
||||
(coming soon)
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
title: ZFS
|
||||
description: Introduction to ZFS, a combined file system and volume manager with snapshots, checksums, and built-in redundancy for reliable homelab storage.
|
||||
---
|
||||
|
||||
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px zIndex=60}
|
||||
|
||||
|
||||
ZFS is widely used in the world of servers, NAS systems (like FreeNAS / TrueNAS), virtualization, and even by tech-savvy individuals who want reliable storage. It is both a _file system_ (like NTFS for Windows, EXT4, FAT32, etc.) and a _volume manager_ (similar to LVM).
|
||||
|
||||
To put it simply:
|
||||
|
||||
- A **volume manager** organizes physical storage (like one or more hard drives).
|
||||
- A **file system** organizes how data blocks are written, read, and deleted within those volumes.
|
||||
|
||||
ZFS goes far beyond traditional file systems in terms of performance and features.
|
||||
Here’s what we’re most interested in:
|
||||
|
||||
- Its __snapshot management__ features, allowing you to quickly roll back in case of issues.
|
||||
- Its support for disk groupings and [__RAID-like structures__](/general/storage/raid) (Z-Mirror, RAIDZ1, RAIDZ2, RAIDZ3).
|
||||
- Its __automatic recovery of corrupted data__ (through scrubbing).
|
||||
- Its performance, enhanced by RAM caching (ZFS ARC).
|
||||
- Its robust error notifications and monitoring.
|
||||
|
||||
## Structure
|
||||

|
||||
|
||||
ZFS has a unique structure:
|
||||
|
||||
- **vdev** (virtual device): a group of physical or virtual disks.
|
||||
- **zpool**: a collection of vdevs configured as a single storage pool. A zpool can contain multiple vdevs, but a vdev belongs to only one zpool.
|
||||
- **dataset**: a logical data container within a zpool. Each dataset can have its own settings (compression, quotas, permissions, etc.).
|
||||
|
||||
There are several dataset types:
|
||||
|
||||
- **file system**: a standard ZFS filesystem, mounted without storage quotas.
|
||||
- **zvol**: a "virtual disk" with a defined size, which you can format and partition as if it were a physical disk.
|
||||
- **snapshot**: a frozen-in-time version of another dataset. Snapshots can be created manually or through backup tools. They can be mounted to browse data as it was at the snapshot time.
|
||||
|
||||
## Why ZFS over others?
|
||||
### Data Integrity
|
||||
|
||||
ZFS continuously checks that your stored data hasn't become corrupted. Every block of data is associated with a checksum, allowing ZFS to detect even the smallest alteration. If corruption is found and a healthy copy exists elsewhere, ZFS can repair the data automatically.
|
||||
|
||||
### Built-in RAID
|
||||
|
||||
ZFS includes its own volume management system (vdevs). You can build a zpool using multiple disks, similar to traditional [RAID](/general/storage/raid) setups, but with more flexibility. For example:
|
||||
|
||||
- **Z-mirror** → equivalent to RAID 1
|
||||
- **RAIDZ1** → equivalent to RAID 5 (tolerates 1 disk failure)
|
||||
- **RAIDZ2** → equivalent to RAID 6 (tolerates 2 disk failures)
|
||||
- **RAIDZ3** → tolerates up to 3 disk failures
|
||||
|
||||
ZFS handles all this natively: no external RAID software needed.
|
||||
|
||||
::note{to="/general/storage/raid"}
|
||||
|
||||
Check out the **article on RAID** to find the right solution for your needs.
|
||||
::
|
||||
|
||||
### Snapshots and Clones
|
||||
|
||||
ZFS allows you to create snapshots: instantaneous images of a dataset's state. Snapshots take up minimal space and can be scheduled frequently. You can also create clones: writable copies of snapshots.
|
||||
|
||||
### Compression and Deduplication
|
||||
|
||||
ZFS can compress data on the fly (transparently to the user), saving disk space. It also supports deduplication (removing duplicate data), though this feature requires a lot of memory and is not recommended for all use cases.
|
||||
|
||||
---
|
||||
|
||||
Now you know why ZFS is *the* file system to deploy on your NAS.
|
||||
@@ -0,0 +1,2 @@
|
||||
title: Hardware
|
||||
icon: i-lucide-server
|
||||
@@ -0,0 +1,154 @@
|
||||
---
|
||||
title: The Basics
|
||||
description: Overview of server hardware fundamentals. CPUs, RAM, storage, and form factors to understand before building your homelab.
|
||||
---
|
||||
|
||||
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px zIndex=60}
|
||||
|
||||

|
||||
|
||||
A __server__ is essentially a computer dedicated to specific tasks, designed to remain accessible at all times. Structurally, it's not much different from a regular computer. Depending on its intended use, some components may vary. This article serves as a reference to help you understand the essential components of a server and how their roles adapt based on your needs.
|
||||
|
||||
## Motherboard
|
||||
The __motherboard__ is the foundation of your machine. It's the component that connects all others together. It enables communication between components and interaction with peripherals (keyboard, mouse, etc.). Choose it based on your I/O (Input/Output) needs like USB ports, network ports, speed, etc., and ensure compatibility with the components you plan to install.
|
||||
|
||||
Key components connected to the motherboard:
|
||||
|
||||
- CPU
|
||||
- RAM
|
||||
- Storage (HDD and/or SSD)
|
||||
- Optional dedicated GPU
|
||||
|
||||
Common consumer motherboard formats:
|
||||
|
||||
- E-ATX: largest
|
||||
- ATX: standard
|
||||
- Micro-ATX: smaller
|
||||
- Mini-ITX: smallest
|
||||
|
||||
Larger boards generally offer more ports and features. Pre-built systems might use proprietary formats.
|
||||
|
||||
## CPU
|
||||
<div style="display: flex; align-items: center;">
|
||||
<img src="/img/global/cpu.svg" alt="CPU icon" style="max-width: 25%; max-height:230px; margin-right: 20px;">
|
||||
<p>The <strong>CPU</strong> (Central Processing Unit) is the computer's calculator. It processes most software tasks. Modern CPUs have multiple cores, often with virtual threads, to better handle workloads. They need to be cooled using either an active cooler (with a fan) or a passive one (fanless), depending on power consumption (watts). Choose your CPU based on how you plan to use the server.</p>
|
||||
</div>
|
||||
|
||||
::warning
|
||||
|
||||
__Caution:__ Ensure third-party coolers are compatible with the CPU socket and always apply thermal paste before installing the cooler.
|
||||
::
|
||||
|
||||
Consider:
|
||||
|
||||
- Number of cores (more cores = better multitasking)
|
||||
- Clock speed in GHz
|
||||
- Power consumption in Watts
|
||||
|
||||
For low-power home servers or NAS (non-intensive computing), consider Intel N100/150 (4 cores) or N305/N355 (8 cores), efficient and low power (ideal for 24/7 uptime).
|
||||
|
||||
## RAM
|
||||
|
||||
<p align="center">
|
||||
<img src="/img/global/ram.svg" alt="RAM icon" style="max-width: 65%;">
|
||||
</p>
|
||||
|
||||
__RAM__ (Random Access Memory) is fast, temporary memory used by the CPU (and iGPU if applicable) for quick access during execution. It clears periodically and when the machine powers down. Better RAM = better CPU performance.
|
||||
|
||||
Comes as sticks installed on the motherboard. Varies by format and generation (currently DDR5).
|
||||
|
||||
## GPU
|
||||
|
||||
The __GPU__ (Graphics Processing Unit) handles graphical, video, and sometimes AI-related processing. Its main theoretical use is to display the image on your screen. In servers, it's useful for media centers (e.g. [Jellyfin](/serveex/media/jellyfin)) and for accelerating AI tasks like facial recognition or photo indexing (e.g. [Immich](/serveex/cloud/immich)).
|
||||
|
||||
Depending on the required performance, one can choose between a dedicated GPU with its own VRAM (a graphics card connected to a PCIe slot on the motherboard), or an iGPU, an integrated GPU built into the CPU (such as the N100/N150 or N305/N355), which uses the system’s shared RAM.
|
||||
|
||||
## HDD(s)
|
||||
|
||||
<p align="center">
|
||||
<img src="/img/global/hdd.svg" alt="Hard disk drive icon" style="max-width: 50%; margin-right: 20px;">
|
||||
</p>
|
||||
|
||||
An __HDD__ (Hard Disk Drive), or hard drive, is a component used to store data. It was once the standard storage device in computers. HDDs consist of one or more stacked platters and read/write heads, somewhat like a vinyl record player.
|
||||
|
||||
Today, HDDs can store enormous amounts of data (up to 30TB, or 30,000 gigabytes, for consumer models), but their read and write speeds are limited due to their mechanical nature. They are also bulky and heavy.
|
||||
|
||||
Generally, HDDs are best suited for storing data that doesn’t require frequent access or fast write speeds, such as media files (videos, photos), cloud drives, or archived data. They perform well in these scenarios and, most importantly, are significantly cheaper than SSDs for the same amount of storage.
|
||||
|
||||
::tip{icon="" to="/general/storage/raid"}
|
||||
✨ __Tip:__ Use multiple HDDs in **RAID** to enhance performance and redundancy.
|
||||
::
|
||||
|
||||
Comes in 3.5" and 2.5" formats; servers usually favor the more reliable 3.5".
|
||||
|
||||
## SSD(s)
|
||||
|
||||
<p align="center">
|
||||
<img src="/img/global/nvme.svg" alt="NVMe SSD icon" style="max-width: 50%; margin-right: 20px;">
|
||||
</p>
|
||||
|
||||
An __SSD__ (Solid State Drive) is a small circuit board with memory chips soldered onto it, used to store information. Unlike RAM, these chips retain data even when not powered, meaning the information is preserved after a reboot. SSDs are generally used as the main storage medium for your server.
|
||||
|
||||
Unlike HDDs, SSDs have no moving parts, are highly compact, and most importantly, are extremely fast, offering speeds of several gigabytes per second for high-performance models.
|
||||
|
||||
SSDs come in various formats, but today the preferred choice is the M.2 NVMe version, as it is the smallest, fastest, and has become the standard on modern motherboards.
|
||||
|
||||
However, SSDs are significantly more expensive than hard drives for the same storage capacity. Typically, the operating system (OS) is installed on the SSD to ensure fast performance. In a server environment, it's also ideal to store [Docker containers](/serveex/core/docker) and databases on the SSD. More broadly, any data that needs to be accessed frequently and quickly, such as websites, applications, or processing workloads, should be stored on an SSD.
|
||||
|
||||
## Network Card
|
||||
|
||||
A __network card__ allows your machine to communicate with your network (including the internet). It consists of a controller chip and one or more network ports. These ports, often Ethernet ports, can come in different physical formats and support various data transfer standards:
|
||||
|
||||
- __RJ45 Gigabit Ethernet (10/100/1000):__ The standard RJ45 connector, supporting speeds from 10 Mbps (1.25 MB/s) up to 1000 Mbps (125 MB/s).
|
||||
- __RJ45 2.5G:__ Same connector type, supporting up to 2.5 Gbps (2,500 Mbps or 312.5 MB/s).
|
||||
- __RJ45 5G:__ Same connector, supporting up to 5 Gbps (625 MB/s).
|
||||
- __RJ45 10G Base-T:__ Same RJ45 format, supporting up to 10 Gbps (1.25 GB/s).
|
||||
- __SFP 1G:__ SFP port, commonly used for fiber optic connections, supporting speeds up to 1 Gbps.
|
||||
- __SFP+ 10G:__ An enhanced version of the SFP port, also used for fiber optics, supporting up to 10 Gbps.
|
||||
|
||||
::warning
|
||||
|
||||
__Caution:__ Match network gear (router, switch, cables) to your desired speed. For most uses, CAT5E cables are enough; use CAT6A beyond 10 Gbps. Fiber requires additional care (simplex, duplex, transceivers...).
|
||||
::
|
||||
|
||||
The network card is usually built directly into the motherboard, but you can also use dedicated network cards, for example via USB or a PCIe expansion slot.
|
||||
|
||||
In general, for a server setup, it's recommended to have at least two Ethernet ports to ensure redundancy in case one connection fails.
|
||||
|
||||
## Input/Output Ports
|
||||
|
||||
__I/O__ ports allow communication with external devices (displays, keyboard, mouse, network...). Motherboards typically offer:
|
||||
|
||||
- Ethernet ports
|
||||
- USB ports (varied types/speeds)
|
||||
- Video ports
|
||||
- Audio jacks
|
||||
|
||||
Choose a motherboard and expansions based on your I/O needs.
|
||||
|
||||
## Power Supply
|
||||
|
||||
The __power supply unit__ (PSU) is the component that provides electrical power to your machine’s components. It connects to the wall via a power cord and has several output cables that plug into the motherboard and various peripherals, such as hard drives or dedicated graphics cards.
|
||||
|
||||
A power supply is defined by several key characteristics:
|
||||
|
||||
- Wattage (its total power output),
|
||||
- Modularity (whether the cables are fixed or detachable),
|
||||
- Efficiency (measured as a percentage). For example, a 500W PSU with 80% efficiency will actually draw 625W from the wall to deliver 500W to the system.
|
||||
|
||||
Another important factor is the form factor. There are several standard sizes, from ATX L (for larger cases) to SFX (for compact builds). There are also specialized models for rack-mounted servers, which are typically flat and space-efficient.
|
||||
|
||||
To choose the right PSU, a common rule of thumb is to estimate your system’s power needs based on usage, and then double that value. This is because most power supplies operate at optimal efficiency around 50% of their maximum load.
|
||||
|
||||
## Case
|
||||
|
||||
<div style="display: flex; align-items: center;">
|
||||
<img src="/img/global/case.svg" alt="Computer case icon" style="max-width: 25%; max-height:230px; margin-right: 20px;">
|
||||
<p>The <strong>case</strong> is also an essential component of your machine. It plays a key role in cooling, through its fans and airflow design, and it determines the form factor compatibility for your motherboard, power supply, and any dedicated GPU you may install.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Additionally, the case dictates how many HDDs you can install and what formats they support. Some cases are rack-mountable, meaning they can be installed in server racks (server cabinets).
|
||||
|
||||
Choose your case carefully based on your specific needs and the hardware you plan to use.
|
||||
@@ -0,0 +1,121 @@
|
||||
---
|
||||
title: Network
|
||||
description: Overview of networking hardware for homelabs. Switches, NICs, cables, and how to connect your servers efficiently.
|
||||
---
|
||||
|
||||
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px zIndex=60}
|
||||
|
||||

|
||||
|
||||
A computer network cannot exist without the hardware required to build it. Hardware determines the size of the network, communication speeds, and its overall performance. In this article, we will focus on the simplest types of networks, typically found in home environments.
|
||||
|
||||
## The Router
|
||||
The __router__ is the central hub of your network. It directs __packets__ (the blocks of data that travel across your network) from the sender to the appropriate recipient. It manages the routing of data both within your local network and to/from external networks. In short, it enables devices to communicate with each other and with the internet.
|
||||
|
||||
Everyone has a router at home: it's the __internet box__ provided by your ISP (Internet Service Provider).
|
||||
|
||||
In general, a router consists of:
|
||||
|
||||
- a WAN (Wide Area Network) port that receives data from the internet (or from a higher-level network). For example, it could be a port for a fiber optic connection from your ISP, or an SFP+/RJ45 port for a third-party router.
|
||||
- a switch, i.e., a hub with several __LAN__ (Local Area Network) ports allowing multiple devices to connect to your network. These ports can be RJ45 or SFP/SFP+.
|
||||
- sometimes a built-in WiFi transmitter/receiver.
|
||||
|
||||
A router may also include _firewall_ capabilities, allowing you to restrict traffic from specific devices, as well as _[NAT (Network Address Translation)](/general/networking/nat)_ for port forwarding. It generally includes a _[DHCP (Dynamic Host Configuration Protocol)](/general/networking/nat#dhcp)_ server to automatically assign _IP addresses_ to devices connected to the network.
|
||||
|
||||
The router directly affects communication speeds between devices. The WAN port limits the maximum internet speed you can receive from your ISP. For example, if your subscription offers 5 Gb/s, you’ll need a WAN port that supports at least 5 Gb/s. Likewise, internal device-to-device communication is limited by the speed of the switch. If your devices communicate at 5 Gb/s, the router’s switch must have 5 Gb/s ports. If you're using WiFi 7 equipment and want to enjoy its full speed, your router must support it as well. If you’re using a separate WiFi access point, make sure its network port matches or exceeds the speed of the WiFi it broadcasts, and that the router supports it too.
|
||||
|
||||
Internet speed, number of devices, WiFi speed, and internal network speed: these are the four key factors to consider when choosing an internet box or buying your own router.
|
||||
|
||||
::tip{icon=""}
|
||||
✨ __Tip:__
|
||||
You can easily use a third-party router to manage your network if your ISP’s internet box supports _bridge mode_. In France, only the provider Free offers this option. It is technically possible with other providers that do not support bridge mode, but it can be quite difficult and may prevent you from using all the features a third-party router provides.
|
||||
::
|
||||
|
||||
## The Switch
|
||||
|
||||
The __switch__, or network switch, is a device that allows multiple devices to connect to the network. It acts as a literal hub, connecting directly to the router or to another switch upstream. It helps avoid overloading the switch ports on your router or relocating devices to another room without running a cable from each one back to the router. Another common use case is to segment multiple networks that are managed by the same router.
|
||||
|
||||
There are generally two types of switches:
|
||||
|
||||
- **Unmanaged switches**, the most common. These are plug-and-play: you just plug them in and everything works automatically.
|
||||
- **Managed switches**. These offer a configuration interface (via command line or web UI), allowing you to fine-tune routing rules under the control of the router. They are powerful for creating virtual networks between your devices, but usually require more setup time and are less convenient than simple unmanaged switches.
|
||||
|
||||
::warning
|
||||
|
||||
__Warning:__ Make sure to use a switch with ports that match the speeds supported by your network devices.
|
||||
::
|
||||
|
||||
## Cables
|
||||
|
||||
Cables are essential components of your network. Depending on their type and category, they can limit the bandwidth between devices, so they must be chosen to match your network's specifications. They also need to be compatible with your devices' ports.
|
||||
|
||||
Here’s a quick reference of the most common cable and port standards:
|
||||
|
||||
- **RJ45 Gigabit Ethernet 10/100/1000**: The standard RJ45 connector, supporting speeds from 10 Mbps (1.25 MB/s) to 1000 Mbps (125 MB/s)
|
||||
- **RJ45 2.5G**: Same connector, supporting speeds up to 2.5 Gbps (312.5 MB/s)
|
||||
- **RJ45 5G**: Same connector, supporting speeds up to 5 Gbps (625 MB/s)
|
||||
- **RJ45 10GBase-T**: Same connector, supporting speeds up to 10 Gbps (1.25 GB/s)
|
||||
- **SFP 1G**: SFP port, typically used for fiber optics, supporting up to 1 Gbps
|
||||
- **SFP+ 10G**: Enhanced SFP port, also for fiber, supporting up to 10 Gbps
|
||||
|
||||
### Ethernet Cables
|
||||
|
||||
These copper cables usually use the standard `RJ45` connector. It's the most common network connector found on routers and switches.
|
||||
|
||||
Ethernet cables are divided into categories that define their maximum speed based on distance:
|
||||
|
||||
| Speed | Cable Type | Max Distance |
|
||||
|-----------|------------|--------------|
|
||||
| 10 Gb/s | CAT 6A | 100 m |
|
||||
| | CAT 6 | 55 m |
|
||||
| | CAT 5e | 30 m |
|
||||
| 5 Gb/s | CAT 6 | 100 m |
|
||||
| | CAT 5e | 30 m |
|
||||
| 2.5 Gb/s | CAT 5e | 100 m |
|
||||
| 1 Gb/s | CAT 5e | 100 m |
|
||||
| 100 Mb/s | CAT 5 | 100 m |
|
||||
|
||||
Some of these cables are flat, round, shielded (requiring grounding), etc. Choose based on your setup. What matters is that, for example, if you want to connect a device with a 2.5 Gb/s RJ45 port to a 2.5 Gb/s router, you’ll need at least a `CAT 5e` cable.
|
||||
|
||||
On the other hand, if your device is limited to 100 Mb/s, a simple `CAT 5` cable will suffice.
|
||||
|
||||
Nowadays, in new buildings, it is standard practice to install `CAT 6A` cables inside walls. This way, wall ports are ready to support 10 Gb/s over 100 meters.
|
||||
|
||||
|
||||
### Optical Cables
|
||||
|
||||
Very thin but fragile, optical cables are increasingly appearing in home networks. It often starts with the fiber cable connecting your ISP’s outlet to your box/router. They have several advantages:
|
||||
|
||||
- Extremely compact
|
||||
- Zero electrical consumption (unlike copper, which loses energy as heat)
|
||||
- No electromagnetic radiation (no shielding needed, no signal interference)
|
||||
- Very high speeds over long distances
|
||||
|
||||
For local networking, it's important to understand that several types of fiber cables exist. Their performance depends on both distance and compatibility with the appropriate `transceiver`. Fiber cables connect to your devices' SFP+ ports via a small device called a transceiver, which converts electrical signals to light (and vice versa).
|
||||
|
||||
For local networks, the recommended standard is a **multimode OM3 fiber with LC connectors**, paired with a **10G LC SFP+ transceiver**. This setup allows 10 Gb/s connections and is compatible with most devices featuring SFP+ ports.
|
||||
|
||||
::warning
|
||||
|
||||
__Warning:__ Make sure to use transceivers that are compatible with your devices (routers, switches, or other hardware). There is no universal standard yet, and manufacturers usually specify which brands are supported.
|
||||
::
|
||||
|
||||
|
||||
### DAC Cables
|
||||
|
||||
These are copper cables with integrated `transceivers`. They allow two SFP/SFP+ ports to communicate over short distances without using fragile fiber or RJ45 adapters. However, they consume more energy due to natural copper loss, which is non-negligible.
|
||||
|
||||
|
||||
### SFP+ Transceivers
|
||||
|
||||
These let you connect different types of cables to your SFP/SFP+ ports. Variants are available for:
|
||||
|
||||
- Fiber optic
|
||||
- DAC
|
||||
- RJ45
|
||||
|
||||
::warning
|
||||
|
||||
__Warning:__ RJ45 transceivers consume a lot of energy due to copper signal loss and can generate significant heat. Low-power models (under 2W) exist and are generally rated for longer cables (e.g., 80m instead of 30m). Surprisingly, these are preferred over short-distance models because they generate less heat and consume less energy, making them more compatible with sensitive devices. Using the wrong type can cause network degradation or even outages.
|
||||
::
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
title: The ProloNAS
|
||||
description: Build a capable home server on a budget using an Intel N100 mini PC. A practical guide to getting started with self-hosting for under $130.
|
||||
---
|
||||
|
||||
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px zIndex=60}
|
||||
|
||||
::note
|
||||
This article was written before the __massive__ increase in computer hardware prices we've been experiencing since late 2025. However, setting costs aside, it remains just as relevant.
|
||||
::
|
||||
|
||||
When you decide to dive into the adventure of running your own home server, the same questions usually come up: _“Where should I start?”_, _“Isn’t it expensive?”_. And often, people either give up or end up buying a proprietary NAS that they’ll throw away a year later once they realize it only brings headaches and wasted money.
|
||||
|
||||
A server isn’t a piece of furniture. It’s simply any computer capable of running Linux. That’s why mini PCs powered by **Intel N100** processors are so popular: for around $100–130 on Chinese platforms, you can get a machine that runs **24/7** for years, capable of handling everything you’d expect from a home server or personal cloud without sacrificing performance.
|
||||
|
||||
It’s **objectively inexpensive**, and anyone with a bit of curiosity can get started.
|
||||
|
||||
A mini PC for $100 + a USB dock for $50 that holds multiple hard drives = a complete platform for $150, versus **$350–1200** for branded NAS systems.
|
||||
|
||||
That’s all a **ProloNAS** is: a NAS anyone can afford. The name is a French pun, *prolo* (slang for "working-class") plus *NAS*, a home server for the rest of us, not just people who can drop $1000 on a branded box. It’s then up to you to scale your storage capacity according to your needs.
|
||||
|
||||

|
||||
|
||||
## Example Hardware
|
||||
|
||||
- Mini PC (**Note: choose 16 GB / 512 GB**): [Aliexpress](https://fr.aliexpress.com/item/1005008477986765.html)
|
||||
- DAS (Direct Attached Storage) (**Note: select “EU plug”**): [Aliexpress](https://fr.aliexpress.com/item/1005007933987260.html)
|
||||
- More refined alternative with a fan: [Amazon](https://www.amazon.fr/Boîtier-Disque-Ventilateur-Supportant-Capacité/dp/B0DD3GSSCX)
|
||||
|
||||
> *These are not affiliate links, buy wherever you prefer.*
|
||||
|
||||
## Why a NAS?
|
||||
|
||||
A **NAS** (Network Attached Storage) is a machine centered around storage, designed to be shared over a network. The idea is to have a **reliable and secure** storage space that serves as the backbone for your personal services and apps such as a self-hosted cloud like [Nextcloud](/serveex/cloud/nextcloud), a photo sync tool like [Immich](/serveex/cloud/immich), or a media server like [Jellyfin](/serveex/media/jellyfin). You can also store camera footage, backups, or even development projects on it.
|
||||
|
||||
### But why not just use a mini PC with an external hard drive?
|
||||
|
||||
Sure, a simple mini PC with 1–2 TB of storage will do for most people. And your movie collection might fit on an external drive of a few extra terabytes. But that’s **neither reliable nor scalable**: a single shock or hardware failure could permanently destroy your data.
|
||||
|
||||
A real NAS is built around **storage reliability**. It uses redundancy strategies like [RAID](/general/storage/raid) to protect against drive failure, and snapshot systems like [ZFS](/general/storage/zfs) to guard against corruption.
|
||||
|
||||
In short, a NAS lets you **host everything yourself** that you currently entrust to third parties while maintaining control, reliability, and data safety.
|
||||
|
||||
## The Problem with Consumer NAS Systems
|
||||
|
||||
Many brands offer “ready-to-use” NAS platforms: Synology, QNAP, Ugreen, and others. They promise simplicity and sleek web interfaces, but the reality is quite different.
|
||||
|
||||
### First, the price.
|
||||
|
||||
$350 is the starting price for a 2-bay NAS (without drives) from Synology. For that, you get a 2019 processor, no SSD slot for the OS, and a measly 2 GB of RAM.
|
||||
|
||||
Now, compare that to the **ProloNAS**: an N100 (4 cores), 16 GB RAM, a 512 GB SSD for $100–130, plus a 4-bay DAS for $55. That’s **half the price** of a 2-bay Synology, and **a quarter of the price** of a 4-bay one.
|
||||
|
||||
### Locked-Down Operating Systems
|
||||
|
||||
“Yeah, but at least with a Synology, you plug it in and everything just works.”
|
||||
|
||||
One year.
|
||||
That’s how long it took before I threw away my Synology and realized I should have started with a **ProloNAS** (which later became a full-fledged server).
|
||||
|
||||
Manufacturers ship heavily customized Linux-based OSes: ancient kernels, limited app repositories, and complete dependence on their proprietary tools. As a result, you can’t fully tailor your NAS to your needs, and many Docker containers simply won’t run because the kernel is too old.
|
||||
|
||||
### Total Vendor Lock-In
|
||||
|
||||
“I’m fine with the built-in apps.”
|
||||
Yeah, I thought so too… until my needs exploded: media center, password manager, Git hosting, strong authentication, web hosting, and more.
|
||||
|
||||
Why stay stuck with half-baked proprietary tools when you can rely on **open-source projects** that are regularly updated and interoperable?
|
||||
|
||||
And what happens when the manufacturer decides to drop support or limit hardware compatibility? It’s already happened, Synology made certain drives **incompatible** unless they were “certified” by them. They even **disabled hardware transcoding** on their NAS units: [see here](https://www.cachem.fr/synology-desactive-transcodage-materiel-nas/).
|
||||
|
||||
In short, you have **no control** over a product that isn’t open, nor truly yours.
|
||||
|
||||
## OK, but how do I turn my Mini PC Serveex into a ProloNAS?
|
||||
|
||||
As mentioned earlier: by adding a **DAS (drive hub)** and setting up a redundant storage system with [RAID](/general/storage/raid) and [ZFS](/general/storage/zfs), you can transform your mini PC into a robust and scalable NAS.
|
||||
|
||||
Enjoy !
|
||||
@@ -0,0 +1,2 @@
|
||||
title: Linux tips for dummies
|
||||
icon: i-lucide-terminal
|
||||
@@ -0,0 +1,255 @@
|
||||
---
|
||||
title: Command line basics
|
||||
description: Understand how a Linux command is built, learn the essential terminal commands, what their names mean, and get a cheat sheet to keep at hand.
|
||||
---
|
||||
|
||||
|
||||
:ellipsis{left=0px width=40rem top=10rem blur=140px zIndex=60}
|
||||
|
||||
A server has no desktop, no icons and no mouse. Everything happens in a terminal, and that black window with a blinking cursor is the single thing that puts people off self-hosting. It shouldn't: the terminal is just a conversation. You type one line, the machine does exactly that and answers. Nothing more magic than a search bar, except it does far more and never hides an option behind three menus.
|
||||
|
||||
The good news is that you don't need to know a hundred commands. Ten of them cover almost everything you'll do on a home server, and they all follow the same pattern. Learn the pattern first, and every command you meet later becomes readable, even the ones you've never seen.
|
||||
|
||||
## How a command is built
|
||||
|
||||
Every command line, without exception, is the same sentence: **what to run**, **how to run it**, **what to run it on**.
|
||||
|
||||
```text [Anatomy of a command]
|
||||
sudo apt install -y nano
|
||||
│ │ │ │ └─ argument: what the command works on
|
||||
│ │ │ └──── option: changes how it behaves
|
||||
│ │ └──────────── subcommand: what the program should do
|
||||
│ └──────────────── the program you're running
|
||||
└───────────────────── run it with administrator rights
|
||||
```
|
||||
|
||||
Read out loud, that line says "as an administrator, ask the package manager to install the nano package, and don't ask me to confirm". Spaces are what separate the pieces, which is why a folder named `My Backups` has to be quoted (`cd "My Backups"`) or the shell reads it as two different things.
|
||||
|
||||
### Options, short and long
|
||||
|
||||
Options change how a command behaves. They come in two flavours, and most commands accept both:
|
||||
|
||||
- **Short**, a single dash and a single letter: `ls -a`. They can be stacked, so `ls -l -a -h` is usually written `ls -lah`.
|
||||
- **Long**, two dashes and a whole word: `ls --all`. Longer to type, but you can still tell what it does six months later, which is why they're the better choice in a script.
|
||||
|
||||
Some options expect a value right after them: `ssh-keygen -t ed25519` (`-t` for type), `rsync --exclude @eaDir`. And case matters, always. In `ls`, `-r` reverses the sort order while `-R` walks into subfolders. Same letter, different case.
|
||||
|
||||
### Arguments and paths
|
||||
|
||||
The argument is the target: a file, a folder, a package name, an address. Many commands accept several at once, separated by spaces, which is what makes the terminal fast: `rm file1.txt file2.txt file3.txt` deletes three files in one go.
|
||||
|
||||
When the target is a place on the disk, you write it as a path, and there are a few shortcuts worth knowing:
|
||||
|
||||
| Path | Means |
|
||||
| --- | --- |
|
||||
| `/` | the root of the whole system, everything lives under it |
|
||||
| `~` | your own home folder, `/home/username` |
|
||||
| `.` | the folder you're currently in |
|
||||
| `..` | the folder just above |
|
||||
| `/var/log` | an **absolute** path, same result from anywhere |
|
||||
| `logs/today` | a **relative** path, understood from where you currently stand |
|
||||
|
||||
Which folder holds what is a subject of its own, covered in [folders and partitions](/general/linux/filesystem).
|
||||
|
||||
The prompt itself tells you where you are: in `username@serveex:~/docker$`, you're logged in as `username` on the machine named `serveex`, inside the `docker` folder of your home. That final `$` means a normal user. If it ever shows `#`, you're root and every typo counts double.
|
||||
|
||||
### Getting help
|
||||
|
||||
Two habits make you independent from tutorials. `command --help` prints a quick summary of every option, and `man command` opens the full manual (`man` for *manual*), which you leave by pressing :kbd{value="Q"}.
|
||||
|
||||
::tip{icon=""}
|
||||
✨ __Tip:__ three keyboard habits that change everything: :kbd{value="Tab"} completes the file or folder name you started typing, so you almost never type a full path; the :kbd{value="Up"} arrow brings back your previous commands, which saves retyping a long line for one character; and :kbd{value="Ctrl"} + :kbd{value="C"} stops whatever is currently running.
|
||||
::
|
||||
|
||||
### Chaining commands
|
||||
|
||||
Once the pattern clicks, commands can be plugged into each other:
|
||||
|
||||
- `&&` runs the next one only if the previous one succeeded: `sudo apt update && sudo apt full-upgrade`
|
||||
- `|`, the pipe, feeds the output of one command into another: `ls -l | grep backup` lists the folder, then keeps only the lines containing "backup"
|
||||
- `>` writes the output into a file instead of the screen, and `>>` adds to the end of that file: `df -h > disk-report.txt`
|
||||
|
||||
## The commands you'll actually use
|
||||
|
||||
Most command names are abbreviations of an English phrase. Once you know what they stand for, they stop looking like keyboard noise.
|
||||
|
||||
### `pwd`, print working directory
|
||||
|
||||
Tells you where you are. It changes nothing, it just answers the question.
|
||||
|
||||
```bash [Terminal]
|
||||
pwd
|
||||
```
|
||||
|
||||
```console [Output]
|
||||
/home/username/docker
|
||||
```
|
||||
|
||||
### `ls`, list
|
||||
|
||||
Lists what's in the current folder. On its own it prints bare names, so it's almost always used with options: `-l` for the long format with sizes, dates and permissions, `-a` to also show hidden files (the ones starting with a dot), `-h` for sizes in K/M/G instead of raw bytes.
|
||||
|
||||
```bash [Terminal]
|
||||
ls -lah
|
||||
```
|
||||
|
||||
```console [Output]
|
||||
total 20K
|
||||
drwxr-xr-x 4 username username 4.0K Sep 5 10:12 .
|
||||
drwxr-xr-x 18 username username 4.0K Sep 4 21:03 ..
|
||||
-rw-r--r-- 1 username username 512 Sep 5 10:12 .env
|
||||
-rw-r--r-- 1 username username 1.2K Sep 5 09:58 compose.yaml
|
||||
drwxr-xr-x 3 username username 4.0K Sep 2 18:44 immich
|
||||
```
|
||||
|
||||
The first column is the permissions, `d` at the very start meaning it's a folder. Then the owner, the size, the date of the last change, and the name.
|
||||
|
||||
### `cd`, change directory
|
||||
|
||||
Moves you around. With a path it goes there, with `..` it goes up one level, and with nothing at all it takes you back home.
|
||||
|
||||
```console [Terminal]
|
||||
username@serveex:~/docker$ cd /var/log
|
||||
username@serveex:/var/log$ cd ..
|
||||
username@serveex:/$ cd
|
||||
username@serveex:~$
|
||||
```
|
||||
|
||||
Notice the prompt following you around: it always shows where you currently stand, so you rarely need `pwd` in practice.
|
||||
|
||||
### `mkdir`, make directory
|
||||
|
||||
Creates a folder. Several at once if you list them, and `-p` creates the whole chain of parents in one shot, which is the version you'll actually use.
|
||||
|
||||
```bash [Terminal]
|
||||
mkdir backups
|
||||
mkdir -p docker/immich/config
|
||||
```
|
||||
|
||||
```console [Output]
|
||||
|
||||
```
|
||||
|
||||
Nothing. That's not a bug, it's the rule: most commands say nothing when they succeed and only speak up when something goes wrong. Silence is good news, and `ls` confirms the folder is there.
|
||||
|
||||
### `cp` and `mv`, copy and move
|
||||
|
||||
`cp` copies, `mv` moves. Same shape both times: first the source, then the destination. Copying a folder needs `-r`, for *recursive*, since a folder means everything inside it too. `mv` doubles as the rename command, because renaming a file is just moving it to a new name.
|
||||
|
||||
```bash [Terminal]
|
||||
cp compose.yaml compose.yaml.bak
|
||||
cp -r config/ config-backup/
|
||||
mv old-name.txt new-name.txt
|
||||
ls
|
||||
```
|
||||
|
||||
```console [Output]
|
||||
compose.yaml compose.yaml.bak config config-backup new-name.txt
|
||||
```
|
||||
|
||||
Three silent commands, and `ls` showing the result: the copy sits next to the original, the folder was duplicated, and `old-name.txt` is gone because moving it to another name is exactly what renaming means.
|
||||
|
||||
### `rm`, remove
|
||||
|
||||
Deletes. There is no recycle bin, no undo, no confirmation dialog. `-r` deletes a folder and its contents, `-f` forces without asking.
|
||||
|
||||
::warning{to="/nonsense/bash/rm-confirmation"}
|
||||
`rm -rf` is the command that wipes homelabs. It doesn't check, doesn't warn, and doesn't stop. Read the path twice before pressing :kbd{value="Enter"}, especially when the line starts with `sudo` and contains a `/` or a `*`. You can also prevent this by wrapping `sudo` in a small Bash function that asks **"are you sure?"** before it lets an `rm` through, covered in **rm confirmation guard**.
|
||||
::
|
||||
|
||||
### `cat` and `nano`, read and edit
|
||||
|
||||
`cat` (short for *concatenate*) dumps a whole file to the screen, perfect for a short config. For anything longer, `less` scrolls through it (named as a joke on `more`, the older pager it replaced), and you quit it with :kbd{value="Q"}.
|
||||
|
||||
To actually change a file, `nano` opens a simple editor: arrows to move, :kbd{value="Ctrl"} + :kbd{value="O"} to save, :kbd{value="Ctrl"} + :kbd{value="X"} to leave.
|
||||
|
||||
```bash [Terminal]
|
||||
cat .env
|
||||
```
|
||||
|
||||
```properties [Output]
|
||||
PUID=1000
|
||||
PGID=1000
|
||||
TZ=Europe/Paris
|
||||
```
|
||||
|
||||
### `grep`, search inside files
|
||||
|
||||
`grep` stands for *global regular expression print*, which is a mouthful for "find me this text". You give it what to look for and where, and it prints every matching line. `-r` searches a whole folder, `-i` ignores upper and lower case, `-n` shows line numbers.
|
||||
|
||||
```bash [Terminal]
|
||||
grep -rin "password" /home/username/docker
|
||||
```
|
||||
|
||||
```console [Output]
|
||||
/home/username/docker/immich/.env:6:DB_PASSWORD=changeme
|
||||
/home/username/docker/vaultwarden/compose.yaml:14: ADMIN_PASSWORD=hunter2
|
||||
```
|
||||
|
||||
Each line is the file, then the line number inside it, then the matching line itself. Very handy for the day you can't remember which stack holds a setting.
|
||||
|
||||
### `sudo`, run as administrator
|
||||
|
||||
*Substitute user do*. A normal user can't touch the system's files, which is exactly what protects you from wrecking the machine by accident. Prefixing a command with `sudo` runs that single command with administrator rights, and asks for your password the first time.
|
||||
|
||||
```bash [Terminal]
|
||||
nano /etc/ssh/sshd_config
|
||||
```
|
||||
|
||||
```console [Output]
|
||||
Error writing /etc/ssh/sshd_config: Permission denied
|
||||
```
|
||||
|
||||
```bash [Terminal]
|
||||
sudo nano /etc/ssh/sshd_config
|
||||
```
|
||||
|
||||
```console [Output]
|
||||
[sudo] password for username:
|
||||
```
|
||||
|
||||
::note
|
||||
If a command answers `Permission denied`, that's usually the whole problem: it needed `sudo`. Resist the reflex of putting `sudo` on everything though, a file created as root will keep annoying you afterwards because your normal user no longer owns it.
|
||||
::
|
||||
|
||||
## Cheat sheet
|
||||
|
||||
The ones worth keeping at hand, and where their names come from.
|
||||
|
||||
| Command | Short for | What it does |
|
||||
| --- | --- | --- |
|
||||
| `pwd` | print working directory | Shows where you are |
|
||||
| `ls` | list | Lists files and folders |
|
||||
| `cd` | change directory | Moves you somewhere else |
|
||||
| `mkdir` | make directory | Creates a folder |
|
||||
| `touch` | plain English | Creates an empty file, or refreshes its date |
|
||||
| `cp` | copy | Copies a file or folder |
|
||||
| `mv` | move | Moves or renames |
|
||||
| `rm` | remove | Deletes, permanently |
|
||||
| `cat` | concatenate | Prints a file to the screen |
|
||||
| `less` | a pun on `more` | Scrolls through a long file |
|
||||
| `nano` | the editor replacing Pico | Edits a file |
|
||||
| `grep` | global regular expression print | Searches for text |
|
||||
| `find` | plain English | Searches for files by name, size or date |
|
||||
| `man` | manual | Opens a command's full documentation |
|
||||
| `df` | disk free | Shows free space per partition |
|
||||
| `lsblk` | list block devices | Draws the tree of disks and partitions |
|
||||
| `du` | disk usage | Shows what a folder weighs |
|
||||
| `ps` | process status | Lists running processes |
|
||||
| `htop` | Hisham's `top` | Live view of CPU, RAM and processes |
|
||||
| `kill` | plain English | Stops a process by its number |
|
||||
| `chmod` | change mode | Changes a file's permissions |
|
||||
| `chown` | change owner | Changes who owns a file |
|
||||
| `sudo` | substitute user do | Runs one command as administrator |
|
||||
| `apt` | Advanced Packaging Tool | Installs, updates and removes packages |
|
||||
| `systemctl` | control systemd | Starts, stops and enables services |
|
||||
| `ssh` | secure shell | Opens a session on a remote machine |
|
||||
| `scp` | secure copy | Copies files over SSH |
|
||||
| `tar` | tape archive | Packs and unpacks archives |
|
||||
| `wget` | web get | Downloads a file from a URL |
|
||||
| `curl` | client URL | Sends a request to a URL |
|
||||
| `history` | plain English | Lists the commands you typed before |
|
||||
|
||||
::tip{icon=""}
|
||||
✨ __Tip:__ nobody memorises this. You'll look up the same three options for weeks, then one day realise you're typing them without thinking. Until then, `--help` and this table are perfectly legitimate.
|
||||
::
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user