67 Commits
Author SHA1 Message Date
Djeex 912b0b42ef Fixed gluetun version 2026-08-25 10:34:32 +00:00
Djeex e4a7405bfe Fixed deprecated path in qbitorrent.md 2026-08-25 10:32:59 +00:00
Djeex 2dfe9e6652 chore: bump nuxt to ^3.21.11 to match main
The pinned nuxt ^3.14.159 never resolved a fuse.js version satisfying
@vueuse/integrations' optional peer dependency (fuse.js ^7), used by
Docus's search component. A clean install would crash rendering any
page. Matching main's nuxt version pulls in @nuxt/cli's own fuse.js
^7.4.2, which npm hoists and that satisfies the peer.
2026-08-11 23:21:38 +02:00
Djeex e6c18a3a7a feat: add canonical URL and og:url
Docus doesn't generate canonical links or og:url natively. This
branch has no @nuxtjs/sitemap/nuxt-site-config, so the plugin reads
the base URL from docus.url in app.config.ts (already includes the
/fr prefix) instead of hardcoding it, and combines it with the
current route path.
2026-08-11 23:14:20 +02:00
Djeex 9b852e5834 Fixed darkreader lock 2026-08-11 10:11:56 +00:00
Djeex 4874316023 feat: generate /fr/sitemap.xml via custom Nitro route
@nuxtjs/sitemap is incompatible with app.baseURL: '/fr/' here — it broke
nginx routing (403) on this deployment where /fr/ is served via an alias
to a separate static build. A hand-rolled Nitro route sidesteps the
module entirely and gets prerendered to a plain sitemap.xml file at the
root of the generated output, matching what the nginx alias expects.
2026-08-11 11:44:46 +02:00
Djeex 916c16d7ce feat: add SEO descriptions to all pages and fix canonical URL 2026-08-11 11:31:10 +02:00
Djeex e7641cd8a7 Instameex 2026-08-03 16:01:13 +00:00
Djeex cbbe23010e Fixed qbittorrent screenshot 2026-03-11 12:03:25 +00:00
Djeex a46056e4aa Fixed Debian version 2026-03-11 11:53:42 +00:00
Djeex 920b6936ee Fixed :
- speedtest-tracker typo
- uptime-kuma version
- debian installation dead link
- debian version
- removing ufw from default utilities (too much issues for beginners)
- watchtower fork
- authentik cd + version
- Qbittorent -> Gluetun version
2026-03-11 11:16:47 +00:00
Djeex 92806de059 Qbit and gluetun max memory + libtorrentv1 2025-10-27 16:36:37 +00:00
Djeex ddb4b16bd6 Fixed typo 2025-10-26 18:04:54 +00:00
Djeex 603760e578 Fixed typo 2025-10-26 18:02:26 +00:00
Djeex a154cc0373 Wireguard 15 2025-10-26 17:35:55 +00:00
Djeex bcc35e6605 Fixed issues 2025-10-22 16:04:42 +00:00
Djeex c971bd3838 Fixed issues 2025-10-22 15:57:37 +00:00
Djeex b28955a886 Backrest Docker Stop 2025-10-22 15:43:28 +00:00
Djeex 18bb336ec2 Prolonas v2 2025-10-09 16:45:06 +00:00
Djeex f6613d987a Prolonas v1 2025-10-09 16:20:27 +00:00
Djeex 4d1c8f4777 HotDisk 2025-10-05 17:01:38 +00:00
Djeex fa58530fe5 Socat Proxy 2025-09-26 13:02:01 +00:00
Djeex 2f2d11013d Fixed typo 2025-09-02 06:35:18 +00:00
Djeex a2a12ea969 Fixed bazarr + lumeex update 2025-08-28 20:51:54 +00:00
Djeex 3ad5b654a4 Fixed wrong language 2025-08-11 22:41:38 +00:00
Djeex b48eb2ae06 Lumeex 2025-08-11 22:39:46 +00:00
Djeex 1f3081f4ee Fixed typo 2025-08-11 12:22:01 +00:00
Djeex 5b209ff464 Better sh hl 2025-08-10 23:01:50 +00:00
Djeex 9abb7b3c59 Bad cc 2025-07-27 16:23:38 +00:00
Djeex 58bc409737 Network 2025-07-27 16:17:51 +00:00
Djeex 62c36d7ec8 Typo 2025-07-27 14:29:39 +00:00
Djeex 1f56df6a02 fixed links 2025-07-26 21:19:27 +00:00
Djeex 2d2a07f06c hardware 2025-07-26 20:48:00 +00:00
Djeex ad1782a939 Fixed translation 2025-07-24 21:22:18 +00:00
Djeex 109c285876 Fixed links 2025-07-24 21:17:59 +00:00
Djeex bb26e5e5b4 Fixed images 2025-07-24 21:15:10 +00:00
Djeex 09bd0bbd20 Fixed typo 2025-07-24 17:52:41 +00:00
Djeex ff4fbb05c6 Fixed typo 2025-07-20 19:47:52 +00:00
Djeex 8a2cf3d75e New folder + icons + updated links 2025-07-20 19:25:03 +00:00
Djeex dde0b724d5 Fixed typo 2025-07-20 16:32:29 +00:00
Djeex ddbd0c6677 Fixed wrong env var description 2025-07-19 18:04:49 +00:00
Djeex 6ad48a3a2f Fixed scheme 2025-07-18 15:27:17 +00:00
Djeex 233c06d58a Fixed typo 2025-07-18 15:05:57 +00:00
Djeex 0188964f24 Some fix 2025-07-18 15:05:14 +00:00
Djeex 92d3214602 Different updates 2025-07-18 10:13:37 +00:00
Djeex 5849eeb6c7 RAID 2025-07-16 09:06:49 +00:00
Djeex 68defde59b Home update + Serveex introduction new illustration 2025-07-14 15:55:49 +00:00
Djeex eed768d108 Fixed issues with ' preventing password with $ to works. Notice that vaulktwarden doc isn't updated. 2025-07-13 16:51:28 +00:00
Djeex 96e095c099 Fixed compose + added WG_PORT 2025-07-13 11:23:07 +00:00
Djeex 79f852bd3d nvidia-stock-bot-v4 2025-07-13 10:21:59 +00:00
Djeex d346f7fb4a Fixed typo 2025-07-12 23:06:16 +00:00
Djeex 824b5b9eb3 Fixed typo 2025-07-12 10:40:43 +00:00
Djeex a2e01614d3 Luks header script 2025-07-11 16:32:17 +00:00
Djeex 4e748b50d7 Filebrowser + Dozzle update 2025-07-11 14:15:11 +00:00
Djeex a086969bd0 updated url 2025-07-11 07:28:57 +00:00
Djeex f807cd7a1f updated version 2025-07-11 07:16:13 +00:00
Djeex a80df85cad updated link 2025-07-11 07:14:30 +00:00
Djeex abcdf62f0f updated compose 2025-07-11 07:02:59 +00:00
Djeex 623d61e3d3 Fixed typo 2025-07-10 11:02:22 +00:00
Djeex 844e86b81f Removed french discord link 2025-07-07 14:14:22 +00:00
Djeex 5317991f17 Added github social + removed french discord 2025-07-07 08:22:32 +00:00
Djeex b69621c552 Fixed pics 2025-07-04 16:06:06 +00:00
Djeex f749aade70 Language switcher 2025-07-04 15:02:08 +00:00
Djeex 80cdcc9fb6 BaseURL /fr/ 2025-07-04 14:32:02 +00:00
Djeex 07e524857e Some minor fixes 2025-07-04 13:57:05 +00:00
Djeex 7630f970fe Added license 2025-06-04 14:30:04 +00:00
Djeex 3e6bb5aa92 First commit -clean 2025-06-04 14:19:33 +00:00
300 changed files with 22040 additions and 43102 deletions
+14
View File
@@ -0,0 +1,14 @@
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'
}
}
-27
View File
@@ -1,27 +0,0 @@
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"
Regular → Executable
+9 -41
View File
@@ -1,44 +1,12 @@
# Nuxt dev/build outputs
.output
.data
.nuxt
.nitro
.cache
dist
# Node dependencies
node_modules node_modules
*.iml
# Logs
logs
*.log
# Misc
.DS_Store
.fleet
.idea .idea
.eslintcache *.log*
.nuxt
# Local env files .vscode
.DS_Store
coverage
dist
sw.*
.env .env
.env.* .output
!.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
+1
View File
@@ -0,0 +1 @@
strict-peer-dependencies=false
-83
View File
@@ -1,83 +0,0 @@
# 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.
-71
View File
@@ -1,71 +0,0 @@
# 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 -8
View File
@@ -1,6 +1,5 @@
MIT License MIT License
Copyright (c) 2025 > Djeex
Copyright (c) 2026 Djeex
Permission is hereby granted, free of charge, to any person obtaining a copy Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal
@@ -19,9 +18,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 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 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.
Regular → Executable
+22 -48
View File
@@ -1,69 +1,43 @@
<p align="center"> <p align="center">
<img src="public/img/global/docudjeex-home.svg" align="center" width="700"> <img src="https://git.djeex.fr/Djeex/DjeexLab/raw/branch/main/docs/files/img/global/lab.svg" align="center" width="700">
[![docu.djeex.fr](https://img.shields.io/badge/Docu·djeex-00b0f0?style=for-the-badge&logoColor=white&logo=materialformkdocs)](https://docu.djeex.fr/) [![Uptime-Kuma](https://stats.djeex.fr/api/badge/23/status?style=for-the-badge)](https://docu.djeex.fr/)
[![docu.djeex.fr](https://img.shields.io/badge/Docu·djeex-00b0f0?style=for-the-badge&logoColor=white&logo=materialformkdocs)](https://docu.djeex.fr/)
[![Uptime-Kuma](https://stats.djeex.fr/api/badge/23/status?style=for-the-badge)](https://docu.djeex.fr/)
</p> </p>
# 🔧 Homelab docs & other dumb things # 🔧 De la doc, encore de la doc
**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.). **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/)
This documentation site is built using [Nuxt.js](https://nuxt.com/), on the [Docus](https://docus.dev) theme (Nuxt UI + Nuxt Content).
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. Ce repo contient de quoi modifier les pages, ajouter vos changements, et redéployer le site.
## Requirements ## Setup
- Node.js 20 or later Installer les dépendances
- npm
## Getting started ```sh
Install dependencies:
```bash
npm install npm install
``` ```
Start the dev server: ## Environnement de dévelopment (port 3000)
```bash ```sh
npm run dev npm run dev
``` ```
The site will be available at `http://localhost:3000`. ## Génération des pages statiques
## Build ```sh
npm run generate
```bash
npm run build
``` ```
This builds the production site (pointed at `https://docu.djeex.fr` via `NUXT_SITE_URL`) into `.output`. Run it with: 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.
```bash ## Preview build
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 :
```sh
npm run preview
``` ```
## Project structure
```
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).
+81
View File
@@ -0,0 +1,81 @@
// 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: '',
}
}
},
})
-140
View File
@@ -1,140 +0,0 @@
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
View File
@@ -1,37 +0,0 @@
/* 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;
}
-141
View File
@@ -1,141 +0,0 @@
<?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>

Before

Width:  |  Height:  |  Size: 8.8 KiB

-154
View File
@@ -1,154 +0,0 @@
<?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>

Before

Width:  |  Height:  |  Size: 9.6 KiB

-84
View File
@@ -1,84 +0,0 @@
<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>
-102
View File
@@ -1,102 +0,0 @@
<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>
-3
View File
@@ -1,3 +0,0 @@
<template>
<div />
</template>
-47
View File
@@ -1,47 +0,0 @@
<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>
-43
View File
@@ -1,43 +0,0 @@
<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>
-37
View File
@@ -1,37 +0,0 @@
<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>
-138
View File
@@ -1,138 +0,0 @@
<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>
-17
View File
@@ -1,17 +0,0 @@
<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>
-30
View File
@@ -1,30 +0,0 @@
<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>
-102
View File
@@ -1,102 +0,0 @@
<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>
-22
View File
@@ -1,22 +0,0 @@
<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>
-21
View File
@@ -1,21 +0,0 @@
<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>
-21
View File
@@ -1,21 +0,0 @@
<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>
-22
View File
@@ -1,22 +0,0 @@
<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>
-200
View File
@@ -1,200 +0,0 @@
<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>
+87
View File
@@ -0,0 +1,87 @@
@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;
}

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

+3
View File
@@ -0,0 +1,3 @@
<template>
<img width="120" src="/img/logo.svg"/>
</template>
-96
View File
@@ -1,96 +0,0 @@
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 })
+36
View File
@@ -0,0 +1,36 @@
---
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
![](/img/global/docudjeex-home.svg)
#support
::card{icon=cib:gitea style="color:#1ad6ff;"}
#title
__git.djeex.fr__
#description
[Consultez mes bêtises](https://git.djeex.fr)
::
+42
View File
@@ -0,0 +1,42 @@
---
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
::
::
+3
View File
@@ -0,0 +1,3 @@
icon: noto:star
navigation.title: Bienvenue
navigation.redirect: /apropos/bienvenue
+67
View File
@@ -0,0 +1,67 @@
---
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)
::
![picture](/img/global/nat.svg)
## 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,21 +1,29 @@
--- ---
navigation: true
title: Zone DNS title: Zone DNS
description: Comprendre le fonctionnement du DNS, lire et éditer une zone DNS, et configurer des noms de domaine pour vos services auto-hébergés. description: Comprendre le fonctionnement du DNS, lire et éditer une zone DNS, et configurer des noms de domaine pour vos services auto-hébergés.
main:
fluid: false
--- ---
:ellipsis{left=0px width=40rem top=10rem blur=140px}
# Noms de domaines et zone DNS
::alert{type="info"}
:ellipsis{left=0px width=40rem top=10rem blur=140px zIndex=60} 🎯 __Objectifs :__
- Comprendre le fonctionnement d'un serveur DNS
- Comprendre comment modifier une zone DNS
::
## Introduction ## Introduction
---
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. 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 va lui répondre avec l'adresse IP la plus à jour pour le domaine de la requête. 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. 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.
La zone DNS, c'est une sorte de registre avec des panneaux qui redirige vos requêtes vers la bonne destination. La zone DNS, c'est une sorte de registre avec des panneaux qui redirige vos requêtes vers la bonne destination.
![Schéma d'une zone DNS dirigeant les requêtes vers le bon serveur](/img/global/dns.svg) ![Picture](/img/global/dns.svg)
## La zone DNS ## La zone DNS
---
Lorsque vous réservez un domaine chez votre registrar (cloudflare, ovh...), ce registrar vous attribue une zone DNS que vous pouvez personnaliser. Lorsque vous réservez un domaine chez votre registrar (cloudflare, ovh...), ce registrar vous attribue une zone DNS que vous pouvez personnaliser.
Vous pouvez rentrer des _enregistrements_ dans cette zone DNS qui permettront d'orienter les requêtes au bon endroit. Vous trouverez [plus d'information ici](https://help.ovhcloud.com/csm/fr-dns-servers-general-information?id=kb_article_view&sysparm_article=KB0051661). Vous pouvez rentrer des _enregistrements_ dans cette zone DNS qui permettront d'orienter les requêtes au bon endroit. Vous trouverez [plus d'information ici](https://help.ovhcloud.com/csm/fr-dns-servers-general-information?id=kb_article_view&sysparm_article=KB0051661).
@@ -23,37 +31,38 @@ Vous pouvez rentrer des _enregistrements_ dans cette zone DNS qui permettront d'
Exemple d'une zone DNS du domaine mondomaine.fr: Exemple d'une zone DNS du domaine mondomaine.fr:
``` ```
$TTL 3600
@ IN SOA ns1.dns.me. dns.net. (2024051800 86400 3600 3600000 60) @ IN SOA ns1.dns.me. dns.net. (2024051800 86400 3600 3600000 60)
IN NS ns1.dns.me. IN NS ns1.dns.me.
IN NS ns2.dns.me. IN NS ns2.dns.me.
IN A 203.0.113.10 IN A 203.0.113.0
www IN CNAME mondomaine.fr. www IN CNAME mondomaine.fr
sousdomaine IN CNAME mondomaine.fr. sousdomaine IN CNAME mondomaine.fr
``` ```
Dans cet exemple : Dans cet exemple :
- `$TTL 3600` indique aux différents serveurs de noms de la planète que les enregistrements sont valides 1h (et qu'au-delà il faudra revérifier). - `$TTL 3600` indique aux différents serveurs de noms de la planète que les enregistrement sont valides 1h (et qu'au-delà il faudra rev"rifier).
- `IN SOA ns1.dns.me. dns.net. (2024051800 86400 3600 3600000 60)` indique que `ns1.dns.me` est le serveur dns principal, et les nombres sont des indications de rafraichissement. - `IN SOA ns1.dns.me. dns.net. (2024051800 86400 3600 3600000 60)` indique que `ns1.dns.me` est le serveur dns principal, et les nombres sont des indications de rafraichissement.
- `IN NS ns1.dns.me.` et `IN NS ns2.dns.me.` indique que `ns1.dns.me` et `ns2.dns.me` sont des serveurs de noms pour ce domaine. - `IN NS ns1.dns.me.` et `IN NS ns2.dns.me.` indique que `ns1.dns.me` et `ns2.dns.me` sont des serveurs de noms pour ce domaine.
- `IN A 203.0.113.10` signifie que `mondomaine.fr` pointe vers l'IP `203.0.113.10` - `IN A 203.0.113.0` signifie que `mondomaine.fr` pointe vers l'IP `203.0.113.0`
- `sousdomaine IN CNAME mondomaine.fr.` signifie que `sousdomaine.mondomaine.fr` pointe vers `mondomaine.fr` et donc vers l'IP `203.0.113.10`. - `sousdomaine IN CNAME mondomaine.fr` signifie que `sousdomaine.mondomaine.fr` pointe vers `mondomaine.fr` et donc vers l'IP `203.0.113.0`.
Ainsi, si vous choisissez de pointer le domaine `mondomaine.fr` vers votre serveur, vous pouvez le faire en ajoutant un enregistrement `A` pointant vers l'IP publique de votre serveur. Ainsi, si vous choisissez de pointer le domaine `mondomaine.fr` vers votre serveur, vous pouvez le faire en ajoutant un enregistrement `A` pointant vers l'IP publique de votre serveur.
::warning ::alert{type="warning"}
:::list{type="warning"}
__Attention :__ si votre serveur est hébergé chez vous : - __Attention,__ Si votre serveur est chez vous :
:::
- l'IP publique est celle de votre box internet. Assurez-vous auprès de votre opérateur que cette IP est fixe ou configurez un [DDNS](https://aws.amazon.com/fr/what-is/dynamic-dns/). - l'IP publique est celle de votre box internet. Assurez-vous auprès de votre opérateur que cette IP est fixe ou configurez un [DDNS](https://aws.amazon.com/fr/what-is/dynamic-dns/).
- assurez-vous d'avoir [redirigé le port 443 vers le port d'écoute de votre serveur](/general/networking/nat). - assurez-vous d'avoir [redirigé le port 443 vers le port d'écoute de votre serveur](/generalites/reseau/nat).
:: ::
Et si vous ajoutez un sous-domaine qui doit pointer vers votre serveur, vous pouvez utiliser un enregistrement `CNAME` vers `mondomaine.fr`. Et si vous ajoutez un sous-domaine qui doit pointer vers votre serveur, vous pouvez utiliser un enregistrement `CNAME` vers `mondomaine.fr`.
::note ::alert{type="info"}
:::list{type="info"}
__Pourquoi ne pas utiliser un enregistrement `A` pour le sous-domaine ?__ Si votre sous domaine pointe sur le meme serveur que `mondomaine.fr`, il vaut mieux utiliser un enregistrement `CNAME` car en cas de changement d'IP du serveur, il n'y aura aucune autre manipulation à faire. - __Pourquoi ne pas utiliser un enregistrement `A` pour le sous-domaine ?__ Si votre sous domaine pointe sur le meme serveur que `mondomaine.fr`, il vaut mieux utiliser un enregistrement `CNAME` car en cas de changement d'IP du serveur, il n'y aura aucune autre manipulation à faire.
:::
:: ::
La plupart des registrar proposent des interfaces plus lisibles pour modifier ces informations. Renseignez-vous auprès de la documentation de votre registrar. La plupart des registrar proposent des interfaces plus lisbles pour modifier ces informations. Renseignez-vous auprès de la documentation de votre registrar.
+229
View File
@@ -0,0 +1,229 @@
---
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
::
![samba](/img/global/smb.svg)
## 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
```
+2
View File
@@ -0,0 +1,2 @@
navigation.title: Réseau
icon: lucide:network
@@ -1,13 +1,21 @@
--- ---
navigation: true
title: RAID title: RAID
description: Comprendre le RAID, matériel vs logiciel, niveaux RAID, et comment mettre en place des grappes de disques redondants pour votre homelab. description: Comprendre le RAID matériel vs logiciel, niveaux RAID, et comment mettre en place des grappes de disques redondants pour votre homelab.
main:
fluid: false
--- ---
:ellipsis{left=0px width=40rem top=10rem blur=140px}
# RAID
:ellipsis{left=0px width=40rem top=10rem blur=140px zIndex=60}
_Redundant Array of Independent Disks_ _Redundant Array of Independent Disks_
::alert{type="info"}
🎯 __Objectifs :__
- Comprendre ce qu'est un système RAID
- Comprendre quel type de RAID est adapté aux différents usages
::
En informatique, le RAID (Redundant Array of Independent Disks) est un système permettant de combiner plusieurs disques durs pour améliorer les performances et/ou la fiabilité. Il fonctionne en restructurant et en répartissant les blocs de données entre les disques. En informatique, le RAID (Redundant Array of Independent Disks) est un système permettant de combiner plusieurs disques durs pour améliorer les performances et/ou la fiabilité. Il fonctionne en restructurant et en répartissant les blocs de données entre les disques.
À lorigine, les systèmes RAID étaient matériels, ce qui signifiait quun contrôleur dédié (une puce spécifique) gérait la distribution des données et les opérations RAID. Aujourdhui, la plupart des systèmes RAID (ou équivalents) sont logiciels. En fait, de nombreuses technologies logicielles peuvent créer des systèmes de type RAID avec des fonctionnalités indisponibles dans les RAID matériels, comme la réparation automatique (data scrubbing), les instantanés (snapshots), etc. À lorigine, les systèmes RAID étaient matériels, ce qui signifiait quun contrôleur dédié (une puce spécifique) gérait la distribution des données et les opérations RAID. Aujourdhui, la plupart des systèmes RAID (ou équivalents) sont logiciels. En fait, de nombreuses technologies logicielles peuvent créer des systèmes de type RAID avec des fonctionnalités indisponibles dans les RAID matériels, comme la réparation automatique (data scrubbing), les instantanés (snapshots), etc.
@@ -22,28 +30,30 @@ Il existe plusieurs types de RAID, chacun ayant ses avantages et inconvénients.
- Vitesse d’écriture - Vitesse d’écriture
- Tolérance aux pannes (résistance aux défaillances matérielles) - Tolérance aux pannes (résistance aux défaillances matérielles)
::warning ::alert{type="warning"}
:::list{type="warning"}
Le RAID nest pas un système de sauvegarde mais un système de continuité de service ! Il permet seulement le remplacement à chaud des disques sans interruption du serveur ou restauration depuis une sauvegarde. Vous avez toujours besoin dun système de sauvegarde externe. - Le RAID nest pas un système de sauvegarde mais un système de continuité de service ! Il permet seulement le remplacement à chaud des disques sans interruption du serveur ou restauration depuis une sauvegarde. Vous avez toujours besoin dun système de sauvegarde externe.
:::
:: ::
### Sans RAID ### Sans RAID
---
<div style="display: flex; align-items: center;"> <div style="display: flex; align-items: center;">
<img src="/img/global/no-raid.svg" alt="Disques sans redondance RAID" style="max-width: 30%; max-height:230px; margin-right: 20px;"> <img src="/fr/img/global/no-raid.svg" alt="Image" style="max-width: 30%; max-height:230px; margin-right: 20px;">
<ul> <ul>
<li>Vos disques sans RAID. Les données sont stockées disque par disque.</li> <li>Vos disques sans RAID. Les données sont stockées disque par disque.</li>
<li>Si vous perdez un disque, seules ses données sont perdues.</li> <li>Si vous perdez un disque, seules ses données sont perdues.</li>
<li>La capacité totale est la somme de tous les disques.</li> <li>La capacité totale est la somme de tous les disques.</li>
</ul>
</div> </div>
Utilisez vos disques sans RAID si vous navez pas peur de perdre des données et pouvez tolérer une interruption de service entre la panne et la restauration. Utilisez vos disques sans RAID si vous navez pas peur de perdre des données et pouvez tolérer une interruption de service entre la panne et la restauration.
### RAID 0 ### RAID 0
---
<div style="display: flex; align-items: center;"> <div style="display: flex; align-items: center;">
<img src="/img/global/raid0.svg" alt="RAID 0 répartissant les données entre les disques" style="max-width: 30%; max-height:230px; margin-right: 20px;"> <img src="/fr/img/global/raid0.svg" alt="Image" style="max-width: 30%; max-height:230px; margin-right: 20px;">
<ul> <ul>
<li>Le système voit un seul disque.</li> <li>Le système voit un seul disque.</li>
<li>Les données sont entrelacées entre tous les disques.</li> <li>Les données sont entrelacées entre tous les disques.</li>
@@ -51,15 +61,15 @@ Utilisez vos disques sans RAID si vous navez pas peur de perdre des données
<li>Excellentes performances en lecture et écriture (multipliées par le nombre de disques).</li> <li>Excellentes performances en lecture et écriture (multipliées par le nombre de disques).</li>
<li>La capacité totale est la somme de tous les disques.</li> <li>La capacité totale est la somme de tous les disques.</li>
<li>Minimum de 2 disques requis.</li> <li>Minimum de 2 disques requis.</li>
</ul>
</div> </div>
Utilisez RAID 0 si vous souhaitez privilégier la performance et que la perte de données nest pas un problème. Idéal pour le stockage temporaire à haute vitesse (montage vidéo, IA, etc). Pas adapté au stockage à long terme, car la perte d'un seul disque entraîne la perte totale des données. Utilisez RAID 0 si vous souhaitez privilégier la performance et que la perte de données nest pas un problème. Idéal pour le stockage temporaire à haute vitesse (montage vidéo, IA, etc). Pas adapté au stockage à long terme.
### RAID 1 ### RAID 1
---
<div style="display: flex; align-items: center;"> <div style="display: flex; align-items: center;">
<img src="/img/global/raid1.svg" alt="RAID 1 dupliquant les données entre les disques" style="max-width: 30%; max-height:230px; margin-right: 20px;"> <img src="/fr/img/global/raid1.svg" alt="Image" style="max-width: 30%; max-height:230px; margin-right: 20px;">
<ul> <ul>
<li>Le système voit un seul disque.</li> <li>Le système voit un seul disque.</li>
<li>Tous les disques contiennent les mêmes données.</li> <li>Tous les disques contiennent les mêmes données.</li>
@@ -67,18 +77,18 @@ Utilisez RAID 0 si vous souhaitez privilégier la performance et que la perte de
<li>Vitesse de lecture améliorée (selon le nombre de disques).</li> <li>Vitesse de lecture améliorée (selon le nombre de disques).</li>
<li>Capacité totale égale à un seul disque (ex. : 2×10 To = 10 To).</li> <li>Capacité totale égale à un seul disque (ex. : 2×10 To = 10 To).</li>
<li>Minimum de 2 disques requis.</li> <li>Minimum de 2 disques requis.</li>
</ul>
</div> </div>
Utilisez RAID 1 pour une redondance maximale. Chaque disque contient toutes les données, donc les performances ne sont pas affectées en cas de panne. Une fois les disques remplacés, les données sont rapidement restaurées. Mais la capacité utilisable est limitée à un seul disque, ce qui en fait une solution coûteuse. Utilisez RAID 1 pour une redondance maximale. Chaque disque contient toutes les données, donc les performances ne sont pas affectées en cas de panne. Une fois les disques remplacés, les données sont rapidement restaurées. Mais la capacité utilisable est limitée à un seul disque, ce qui en fait une solution coûteuse.
::tip{icon=""} ::alert{type="success"}
__Astuce :__ Vous pouvez combiner le RAID 1 avec dautres types de RAID pour créer des grappes miroir. __Astuce :__ Vous pouvez combiner le RAID 1 avec dautres types de RAID pour créer des grappes miroir.
:: ::
### RAID 5 ### RAID 5
---
<p align="center"> <p align="center">
<img src="/img/global/raid5.svg" alt="RAID 5 avec parité distribuée" style="max-width: 40%; margin-right: 20px;"> <img src="/fr/img/global/raid5.svg" alt="Image" style="max-width: 40%; margin-right: 20px;">
</p> </p>
- Le système voit un seul disque. - Le système voit un seul disque.
@@ -91,8 +101,9 @@ Utilisez RAID 1 pour une redondance maximale. Chaque disque contient toutes les
Utilisez RAID 5 pour un stockage fiable avec 3 à 5 disques et une perte minimale despace. Il tolère une panne, mais la reconstruction peut durer plusieurs jours avec des performances dégradées. Utilisez RAID 5 pour un stockage fiable avec 3 à 5 disques et une perte minimale despace. Il tolère une panne, mais la reconstruction peut durer plusieurs jours avec des performances dégradées.
### RAID 6 ### RAID 6
---
<p align="center"> <p align="center">
<img src="/img/global/raid6.svg" alt="RAID 6 avec double parité distribuée" style="max-width: 50%; margin-right: 20px;"> <img src="/fr/img/global/raid6.svg" alt="Image" style="max-width: 50%; margin-right: 20px;">
</p> </p>
- Le système voit un seul disque. - Le système voit un seul disque.
@@ -103,6 +114,3 @@ Utilisez RAID 5 pour un stockage fiable avec 3 à 5 disques et une perte minimal
- Minimum de 4 disques (6 recommandés pour minimiser la perte despace). - Minimum de 4 disques (6 recommandés pour minimiser la perte despace).
Utilisez RAID 6 dans les mêmes cas que RAID 5, surtout avec 6 disques ou plus. Plus de disques = plus de risque de panne. RAID 6 vous apportera plus de fiabilité en cas de panne simultanée de deux disques. Il n'y a rien de plus frustrant que de perdre un second disque en pleine reconstruction du remplacement du premier. Utilisez RAID 6 dans les mêmes cas que RAID 5, surtout avec 6 disques ou plus. Plus de disques = plus de risque de panne. RAID 6 vous apportera plus de fiabilité en cas de panne simultanée de deux disques. Il n'y a rien de plus frustrant que de perdre un second disque en pleine reconstruction du remplacement du premier.
## RAID logiciel
(bientôt)
@@ -1,52 +1,53 @@
--- ---
navigation: true
title: ZFS title: ZFS
description: Introduction à ZFS, système de fichiers et gestionnaire de volumes combinés avec snapshots, checksums et redondance intégrée pour un stockage fiable. description: Introduction à ZFS système de fichiers et gestionnaire de volumes combinés avec snapshots, checksums et redondance intégrée pour un stockage fiable.
main:
fluid: false
--- ---
:ellipsis{left=0px width=40rem top=10rem blur=140px}
# ZFS
::alert{type="info"}
🎯 __Objectifs :__
- Comprendre ce qu'est ZFS et son utilité
::
ZFS est populaire dans le monde des serveurs, des NAS (comme FreeNAS / TrueNAS), de la virtualisation, et même chez les particuliers qui veulent un stockage résilient. C'est est un _système de fichier_ (à l'instar de NTFS pour windows, EXT4, FAT32 etc...) mais également un __gestionnaire de volume__ (comme LVM par exemple). Pour le dire (très) rapidement, un gestionnaire de volume arrange l'espace sur des espaces physiques comme un ou plusieurs disques durs, et un gestionnaire de fichier arrange la maniere dont sont organisés les blocs de données dans ces volumes pour écrire, lire et supprimer les données.
:ellipsis{left=0px width=40rem top=10rem blur=140px zIndex=60} ZFS dépasse largement les limites des autres systèmes de fichiers, que cela soit en terme de performance ou de fonctionnalité.
ZFS est populaire dans le monde des serveurs, des NAS (comme FreeNAS / TrueNAS), de la virtualisation, et même chez les particuliers qui veulent un stockage résilient. C'est un _système de fichier_ (à l'instar de NTFS pour Windows, EXT4, FAT32 etc.) mais également un _gestionnaire de volume_ (comme LVM par exemple).
Pour le dire simplement :
- un **gestionnaire de volume** organise le stockage physique (un ou plusieurs disques durs).
- un **système de fichiers** organise la manière dont les blocs de données sont écrits, lus et supprimés dans ces volumes.
ZFS dépasse largement les limites des autres systèmes de fichiers, que ce soit en termes de performance ou de fonctionnalités.
Ce qui nous intéresse le plus : Ce qui nous intéresse le plus :
- ses fonctionnalités de __gestion des instantanés__ (snaphsot), permettant de rapidement revenir en arrière en cas de problème
- ses fonctionnalités de __gestion des instantanés__ (snapshot), permettant de rapidement revenir en arrière en cas de problème - sa gestion des grappes de disques et [__ses équivalent au RAID__](/generalites/stockage/raid) (Z-Mirror, RAIDZ1, RAIDZ2, RAIDZ3)
- sa gestion des grappes de disques et [__ses équivalent au RAID__](/general/storage/raid) (Z-Mirror, RAIDZ1, RAIDZ2, RAIDZ3) - sa __reconstruction automatique des données corrumpues__ (via le scrubbing)
- sa __reconstruction automatique des données corrompues__ (via le scrubbing)
- ses performance avec son cache RAM (ZFS ARC) - ses performance avec son cache RAM (ZFS ARC)
- ses notifications en cas d'erreur - ses notifications en cas d'erreur
## Structure ## Structure
![ZFS logo](/img/global/zfs.svg)
![](/img/global/zfs.svg)
ZFS dispose d'une structure particulière : ZFS dispose d'une structure particulière :
- __vdev__ (virtual device) : une grappe de disques (physiques ou virtuel) - __vdev__ (virtual device) : une grappe de disques (physiques ou virtuel)
- __zpool__ : un ensemble de _vdev_ configuré comme un seul pool de stockage. Un _zpool_ peut englober plusieurs _vdev_ mais pas l'inverse. - __zpool__ : un ensemble de disques physiques ou virtuels en volume simple, Z-mirror ou RAIDZ. Un _zpool_ peut englober plusieurs _vdev_ mais pas l'inverse.
- __dataset__ : un conteneur logique de données dans un _zpool_. Chaque dataset peut avoir ses propres options (compression, quotas, permissions, etc.). - __dataset__ : un système de de donnée dans un _zpool_. Chaque dataset peut avoir ses propres options (compression, quotas, permissions, etc.).
Il existe plusieurs types de dataset : Il existe plusieurs types de dataset :
- __file system__ : un système de fichier, ZFS par défaut, monté comme un volume sans quota de stockage. - __file system__ : un système de fichier, ZFS par défaut, monté comme un volume sans quota de stockage.
- __zvol__ : un "disque virtuel" avec un quota d'espace, que vous pouvez formater/partitionner comme vous le souhaitez. Il sera utilisable comme un disque physique. - __zvol__ : un "disque virtuel" avec un quota d'espace, que vous pouvez formater/partitionner comme vous le souhaitez. Il sera utilisable comme un disque physique.
- __snapshot__ : un état figé dun autre dataset à un instant donné. Ils peuvent être créés manuellement ou via des outils de sauvegarde. Ils peuvent être montés pour parcourir les données dans leur état au moment du snapshot. - __snapshot__ : un état figé dun autre dataset à un instant donné. Ils peuvent etre créés manuellement ou via des outils de sauvegarde. Ils peuvent etre montés pour parcourir les données dans leur état au moment du snapshot.
## Pourquoi ZFS vs les autres ? ## Pourquoi ZFS vs les autres ?
### Intégrité des données ### Intégrité des données
ZFS vérifie automatiquement que les données stockées ne sont pas corrompues. Chaque bloc de données est accompagné dune empreinte (checksum) qui permet à ZFS de détecter toute altération, même minime. Et sil y a un problème, il peut souvent le réparer automatiquement, si une copie saine existe ailleurs dans le système. ZFS vérifie automatiquement que les données stockées ne sont pas corrompues. Chaque bloc de données est accompagné dune empreinte (checksum) qui permet à ZFS de détecter toute altération, même minime. Et sil y a un problème, il peut souvent le réparer automatiquement, si une copie saine existe ailleurs dans le système.
### RAID intégré ### RAID intégré
ZFS propose son propre système de gestion de volumes (vdev). Vous pouvez créer un pool de stockage (zpool) en combinant plusieurs disques, un peu comme avec le [RAID](/general/storage/raid) classique, mais de façon plus souple. Par exemple : ZFS propose son propre système de gestion de volumes (vdev). Vous pouvez créer un pool de stockage (zpool) en combinant plusieurs disques, un peu comme avec le [RAID](/generalites/stockage/raid) classique, mais de façon plus souple. Par exemple :
- __Z-mirror__ => equivalent du RAID 1 - __Z-mirror__ => equivalent du RAID 1
- __RAIDZ1__ => équivalent du RAID 5 (tolérance à 1 panne disque) - __RAIDZ1__ => équivalent du RAID 5 (tolérance à 1 panne disque)
- __RAIDZ2__ => équivalent du RAID 6 (tolérance à 2 pannes disque) - __RAIDZ2__ => équivalent du RAID 6 (tolérance à 2 pannes disque)
@@ -54,9 +55,10 @@ ZFS propose son propre système de gestion de volumes (vdev). Vous pouvez créer
ZFS gère cela directement, pas besoin de logiciel RAID externe. ZFS gère cela directement, pas besoin de logiciel RAID externe.
::note{to="/general/storage/raid"} ::alert{type="info"}
:::list{type="info"}
Consultez l'**article sur le RAID** pour en savoir plus sur la solution qui vous convient. - Consultez [l'article sur le RAID](/generalites/stockage/raid) pour en savoir plus sur la solution qui vous convient.
:::
:: ::
### Snapshots et clones ### Snapshots et clones
@@ -67,6 +69,4 @@ ZFS permet de créer des snapshots, cest-à-dire des captures instantanées d
ZFS peut compresser les données à la volée (transparente pour lutilisateur), ce qui permet d’économiser de lespace disque. Il propose aussi la déduplication (éliminer les doublons), mais cette fonctionnalité consomme beaucoup de mémoire et nest pas recommandée pour tous les usages. ZFS peut compresser les données à la volée (transparente pour lutilisateur), ce qui permet d’économiser de lespace disque. Il propose aussi la déduplication (éliminer les doublons), mais cette fonctionnalité consomme beaucoup de mémoire et nest pas recommandée pour tous les usages.
--- Voilà, à présent vous savez pourquoi ZFS est Ze systeme de fichier à déployer sur votre NAS.
Voilà, à présent vous savez pourquoi ZFS est *Ze* système de fichiers à déployer sur votre NAS.
@@ -0,0 +1,2 @@
navigation.title: Stockage
icon: lucide:hard-drive
+152
View File
@@ -0,0 +1,152 @@
---
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
::
![hardware](/img/global/hardware.svg)
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 lordinateur. Il traite la plupart des tâches logicielles. Aujourdhui 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>
@@ -0,0 +1,116 @@
---
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
::
![hardware](/img/global/hardware-networking.svg)
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.
:::
::
@@ -0,0 +1,77 @@
---
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.
![](/img/global/prolonas.svg)
## 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.
@@ -0,0 +1,2 @@
navigation.title: Hardware
icon: lucide:server
+3
View File
@@ -0,0 +1,3 @@
icon: noto:open-book
navigation.title: Généralités
navigation.redirect: /generalites/reseau/nat
+280
View File
@@ -0,0 +1,280 @@
---
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
![](/img/serveex/serveex-server.svg)
**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
@@ -0,0 +1,77 @@
---
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.
::
![picture](/img/serveex/server.svg)
## 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
:::
::
+177
View File
@@ -0,0 +1,177 @@
---
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
::
![picture](/img/serveex/docker.svg)
## 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.
![picture](/img/serveex/dockge.png)
### 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 !
+399
View File
@@ -0,0 +1,399 @@
---
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 :**
![Picture](/img/serveex/reverse-proxy.svg)
## 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).
![picture](https://www.linuxserver.io/user/pages/03.blog/introducing-swag-dashboard/example.png)
## 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`.
+2
View File
@@ -0,0 +1,2 @@
navigation.title: Le coeur du serveur
icon: lucide:server-cog
+260
View File
@@ -0,0 +1,260 @@
---
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.
![picture](/img/serveex/vpn.svg)
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 !
![picture](/img/serveex/wireguard.svg)
+587
View File
@@ -0,0 +1,587 @@
---
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é.
![Picture](/img/serveex/auth-native.svg)
- Le second permet d'injecter une authentification via authentik grace à SWAG avant d'arriver sur le service désiré.
![Picture](/img/serveex/auth-proxy.svg)
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 :
![Picture](/img/serveex/auth1.png)
- Puis à l'étape suivante choisissez "Transférer l'authentification (application unique)" et éditez comme suit (attention aux flow, c'est important) :
![Picture](/img/serveex/auth2.png)
- Ensuite, allez dans le menu à gauche dans _Avant-poste_ et éditez _authentik Embedded Outpost_
![Picture](/img/serveex/auth3.png)
- 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 :
![Picture](/img/serveex/authentik.svg)
## 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.
![auth-outpost](/img/serveex/auth-outpost.svg)
### 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,105 +1,120 @@
--- ---
navigation: true
title: Cloudflare Zero Trust title: Cloudflare Zero Trust
description: Utiliser les tunnels Cloudflare et Zero Trust pour exposer des services sans ouvrir de ports, configurer SWAG et gérer plusieurs tunnels. description: Utiliser les tunnels Cloudflare et Zero Trust pour exposer des services sans ouvrir de ports configurer SWAG et gérer plusieurs tunnels.
main:
fluid: false
--- ---
:ellipsis{left=0px width=40rem top=10rem blur=140px}
# Cloudflare Zero Trust
::alert{type="info"}
🎯 __Objectifs :__
- Comprendre le principe des Tunnels Cloudflare
- Paramétrer son compte cloudflare
- Paramétrer SWAG
- Gérer plusieurs tunnels
::
:ellipsis{left=0px width=40rem top=10rem blur=140px zIndex=60}
![cloudfare_tunnels](/img/serveex/cloudflared.svg) ![cloudfare_tunnels](/img/serveex/cloudflared.svg)
## Introduction ## Introduction
L'architecture _Zero Trust_ est la pratique consistant à concevoir des systèmes fondés sur le principe de __« ne jamais faire confiance__, __toujours vérifier »__, par opposition au principe traditionnel de __« confiance, mais vérifier »__. Ce concept est devenu très populaire récemment, à la suite des attaques toujours plus nombreuses concernant les données des utilisateurs. C'est un concept très large, nous nous concentrerons sur lapplication du _Zero Trust_ aux services Web que nous hébergeons. ---
L'architecture _Zero Trust_ est la pratique consistant à concevoir des systèmes fondés sur le principe de __« ne jamais faire confiance__, __toujours vérifier »__, par opposition au principe traditionnel de __« confiance, mais vérifier »__. Ce concept est devenu très populaires récemment, à la suite des attaques toujours plus nombreuses concernant les données des utilisateurs. C'est un concept très large, nous nous concentrerons sur lapplication du _Zero Trust_ aux services Web que nous hébergeons.
Les _tunnels Cloudflare_ offrent un moyen simple d'arriver au _Zero Trust_, en s'appuyant sur [SWAG](/serveex/core/swag) et [Authentik](/serveex/advanced/authentik). Les _tunnels Cloudflare_ offrent un moyen simple d'arriver au _Zero Trust_, en s'appuyant sur [SWAG](/serveex/coeur/swag) et [Authentik](/serveex/securite/authentik).
Pour le dire simplement, les Tunnels Cloudflare permettent notamment de : Pour le dire simplement, les Tunnels Cloudflare permettent notamment de :
- Masquer l'IP de votre serveur (et donc de votre box s'il est hébergé chez vous). - Masquer l'IP de votre serveur (et donc de votre box s'il est hébergé chez vous).
- D'authentifier le trafic. - D'authentifier le traffic.
- De bénéficier des protections de Cloudflare (attaques DDOS, etc, blacklist, requêtes malveillantes, etc.). - De bénéficier des protection de Cloudflare (attaques DDOS, etc, blacklist, requêtes malveillantes, etc...).
- De bénéficier du CDN, c'est-à-dire du serveur de cache de Cloudflare, qui permet d'augmenter les performances de vos sites web. - De bénéficier du CDN, c'est à dire du serveur de cache de Cloudlfare, qui permet d'augmenter les performances de vos sites web.
- De ne plus avoir besoin de l'ouverture de ports de votre routeur pour les services exposés par SWAG. - De ne plus avoir besoin de l'ouverture de ports de votre routeur pour les services exposés par SWAG.
Ici, nous expliquerons comment associer SWAG aux tunnels Cloudflare. Ici, nous expliquerons comment associer SWAG aux tunnels Cloudflare.
::warning ::alert{type="warning"}
__Attention :__ :::list{type="warning"}
- __Attention :__
:::
- N'utilisez pas les tunnels Cloudflare pour exposer un serveur mail - N'utilisez pas les tunnels Cloudflare pour exposer un serveur mail
- N'utilisez pas les tunnels Cloudflare pour exposer un service vidéo comme Jellyfin. Contrairement à Plex, [Jellyfin n'a pas de relais cloud](/serveex/media/jellyfin) et est exposé directement par SWAG dans ce guide, veillez donc à le laisser derrière une simple redirection de port plutôt que derrière un tunnel Cloudflare - N'utilisez pas les tunnels Cloudflare pour exposer un service vidéo, comme Plex (si vous avez [suivi ce guide](/serveex/media/plex), Plex n'est pas exposé, c'est donc valide)
- N'utilisez pas les tunnels Cloudflare pour le protocole BitTorrent (si vous avez [suivi ce guide](/serveex/media/qbittorrent), tout est bon) - N'utilisez pas les tunnels Cloudflare pour utiliser le protocole bittorrent (si vous avez [suivi ce guide](/serveex/media/qbittorrent), tout est bon)
:: ::
## Configuration Cloudflare ## Configuration Cloudflare
---
### Zone DNS ### Zone DNS
Avant toute chose, vous devez définir Cloudflare comme gestionnaire de votre [zone DNS](/general/networking/dns). Si vous avez réservé votre nom de domaine chez Cloudflare, c'est déjà le cas. Sinon, renseignez vous auprès de votre registrar sur comment ajouter des DNS externes. Cloudflare dispose d'[une documentation expliquant pas à pas comment paramétrer une Zone DNS](https://developers.cloudflare.com/dns/zone-setups/full-setup/setup/), que vous ayez un domaine externe ou reservé chez Cloudflare. Avant toute chose, vous devez définir Cloudflare comme gestionnaire de votre [zone DNS](/generalites/reseau/dns). Si vous avez réservé votre nom de domaine chez Cloudflare, c'est déjà le cas. Sinon, renseignez vous auprès de votre registrar sur comment ajouter des DNS externes. Cloudflare dispose d'[une documentation expliquant pas à pas comment paramétrer une Zone DNS](https://developers.cloudflare.com/dns/zone-setups/full-setup/setup/), que vous ayez un domaine externe ou reservé chez Cloudflare.
Si vous n'avez qu'un seul serveur à protéger derrière Cloudflare, vous pouvez supprimer l'ensemble des enregistrements DNS existants, par défaut le domaine et tous ses sous-domaines seront directement redirigés vers le tunnel. Si vous avez qu'un seul serveur à protéger derrière Cloudflare, vous pouvez supprimer l'ensemble des enregistrement DNS existant, par défaut le domaine et tout ses sous-domaines seront directement redirigés vers le tunnel.
Si vous avez des sous-domaines à rediriger vers d'autres serveurs, vous pourrez toujours les déclarer dans la zone DNS à l'aide d'un enregistrement A. Si vous avez des sous-domaines à rediriger vers d'autres serveurs, vous pourrez toujours les déclarer dans la zone DNS à l'aide d'un enregistrement A.
Si vous avez plusieurs serveurs et donc plusieurs tunnels pour un même domaine principal, [voyez ici](#gérer-plusieurs-tunnels-pour-plusieurs-serveurs). Si vous avez plusieurs serveurs et donc plusieurs tunnels pour un meme domaine principal, [voyez ici](http://192.168.7.80:8005/serveex/cloudflare/#gerer-plusieurs-tunnels-pour-plusieurs-serveurs).
### Clé API ### Clé API
Pour commencer, vous devez créer un nouveau jeton API pour Cloudflare et récupérer vos identifiants de zone et de compte. Pour commencer, nous devons créer un nouveau jeton API pour Cloudflare et récupérer nos identifiants de zone et de compte.
Sur le tableau de bord de Cloudflare, dans la page de présentation de votre domaine, vous pouvez voir les identifiants de `zone` et de `compte` en bas à droite de l'écran. Copiez précieusement ces deux identifiants. Sur le tableau de bord de Cloudflare, dans la page de présentation de votre domaine, vous pouvez voir les identifiants de `zone` et de `compte` en bas à droite de l'écran. Copiez précieusement ces deux identifiants.
![id and account](/img/serveex/cf-id.png) ![id and account](/img/serveex/cf-id.png)
Juste en dessous d'eux, il y a un lien intitulé _Obtenez votre jeton API_. Cliquez dessus. Le périmètre dont vous avez besoin pour le jeton doit inclure `Zone:DNS:Edit` et `Account:Cloudflare Tunnel:Edit`. Assurez-vous que votre page de création de token ressemble à celle illustrée dans la capture d'écran ci-dessous. Juste en dessous d'eux, il y a un lien intitulé _Obtenez votre jeton API_. Cliquez dessus. Le périmètre dont nous avons besoin pour le jeton doit inclure `Zone:DNS:Edit` et `Account:Cloudflare Tunnel:Edit`. Assurez-vous que votre page de création de token ressemble à celle illustrée dans la capture d'écran ci-dessous.
![API token](/img/serveex/cf-token.png) ![API token](/img/serveex/cf-token.png)
Une fois que vous aurez enregistré, votre jeton sera affiché une fois. Copiez-le précieusement, car vous ne pourrez plus le revoir après la fermeture. Une fois que nous aurons enregistré, notre jeton sera affiché une fois. copiez le précieusement, car vous ne pourrez plus le revoir après la fermeture.
### Cloudflare Zero Trust ### Cloudflare Zero Trust
Vous devez vous inscrire à _Cloudflare Teams_ pour pouvoir accéder au tableau de bord _Zero Trust_ qui gère les tunnels et les politiques d'accès. Il s'agit d'un service premium, mais ils proposent un forfait gratuit pour un maximum de 50 utilisateurs, ce qui devrait suffire pour votre Home Lab. Gardez à lesprit que puisquil sagit dune fonctionnalité premium, ils demandent une carte de crédit valide lors de linscription, mais avec le forfait gratuit, il n'y aura aucun frais. Vous devez vous inscrire à _Cloudflare Teams_ pour pouvoir accéder au tableau de bord _Zero Trust_ qui gère les tunnels et les politiques d'accès. Il s'agit d'un service premium, mais ils proposent un forfait gratuit pour un maximum de 50 utilisateurs, ce qui devrait suffire pour votre Home Lab. Gardez à lesprit que puisquil sagit dune fonctionnalité premium, ils demandent une carte de crédit valide lors de linscription, mais avec le forfait gratuit, il n'y aura aucun frais.
Inscrivez-vous [via ce lien](https://one.dash.cloudflare.com/). Inscrivez-vous [via ce lien](https://dash.teams.cloudflare.com/).
## Configuration de SWAG
::note
Nous partons du principe que vous avez le domaine `mondomaine.fr` avec les DNS qui pointent bien vers ceux de Cloudflare, comme vu précédemment. ## Configuration de Swag
---
::alert{type="info"}
:::list{type="info"}
- Nous partons du principe que vous avez le domaine `mondomaine.fr` avec les DNS qui pointent bien vers ceux de Cloudflare, comme vu précédemment.
:::
:: ::
SWAG dispose de deux `Docker Mods` permettant d'y intégrer : SWAG dispose de deux `Docker Mods` permettant d'y intégrer :
- __Cloudflared__, le conteneur qui permet de créer et de gérer les tunnels - __Cloudflared__, le conteneur qui permet de créer et de gérer les tunnels
- __Cloudflared Real IP__, un conteneur qui permet à SWAG d'obtenir la vraie source IP des requêtes depuis internet plutôt que celle de Docker (ce qui pourrait entrer en conflit avec le mod de géolocalisation DBIP). - __Cloudflared Real IP__, un conteneur qui permet à SWAG d'obtenir la vraie source IP des requêtes depuis internet plutot que celle de Docker (ce qui pourrait entrer en conflit avec le mod de géolocalisatioN DBIP).
Ces deux mods, fusionnés dans le conteneur de SWAG, nécessitent un peu de configuration. Ces deux mods, fusionnés dans le conteneur de SWAG, nécessitent un peu de configuration.
::steps{level="3"}
### Configuration du tunnel ### Configuration du tunnel
Pour configurer les tunnels, nous aurons besoin de créer un fichier `tunnelconfig.yml` auquel nous ferons appel dans le `compose.yaml` de SWAG. Pour configurer les tunnels, nous aurons besoin de créer un fichier `tunnelconfig.yml` auquel nous ferons appel dans le `compose.yaml` de SWAG.
::tip{icon="" to="/serveex/files/file-browser-quantum"} ::alert{type="success"}
__Astuce :__ vous pouvez utiliser **File Browser Quantum** pour naviguer dans vos fichier et éditer vos documents au lieu d'utiliser les commandes du terminal. __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.
:: ::
```bash [Terminal] ```sh
sudo nano /srv/docker/swag/config/tunnelconfig.yml sudo vi /docker/swag/config/tunnelconfig.yml
``` ```
Collez la configuration ci-dessous Entrez en modification avec la touche `i` et collez la configuration ci-dessous
```yaml [tunnelconfig.yml] ```yaml
ingress: ingress:
- hostname: mondomaine.fr - hostname: mondomaine.fr
service: https://mondomaine.fr service: https://mondomaine.fr
- hostname: "*.mondomaine.fr" - hostname: "*.mondomaine.fr"
service: https://mondomaine.fr service: https://mondomaine.fr
- service: http_status:404 - service: http_status:404
``` ```
Enregistrez avec :kbd{value="Ctrl+O"} puis :kbd{value="Entrée"}, puis quittez avec :kbd{value="Ctrl+X"}. Appuyez sur `Echap` puis sauvegardez et quittez en tapant `:x` puis en appuyant sur `Entrée`.
### Configuration de Cloudflare Real IP ### Configuration de Cloudflare Real IP
@@ -107,37 +122,24 @@ A présent, nous allons configurer le bon fonctionnement du mode _Cloudflare Rea
Ouvrez le fichier `nginx.conf` Ouvrez le fichier `nginx.conf`
```bash [Terminal] ```sh
sudo nano /srv/docker/swag/config/nginx/nginx.conf sudo vi /docker/swag/config/nginx/nginx.conf
``` ```
Entrez en modification avec la touche `i` et collez la configuration ci-dessous à la fin de la section `http`
Collez la configuration ci-dessous à la fin de la section `http` : ```nginx
```nginx [nginx.conf]
real_ip_header X-Forwarded-For; real_ip_header X-Forwarded-For;
real_ip_recursive on; real_ip_recursive on;
include /config/nginx/cf_real-ip.conf; include /config/nginx/cf_real-ip.conf;
set_real_ip_from 127.0.0.1; set_real_ip_from 127.0.0.1;
``` ```
Appuyez sur `Echap` puis sauvegardez et quittez en tapant `:x` puis en appuyant sur `Entrée`.
Enregistrez avec :kbd{value="Ctrl+O"} puis :kbd{value="Entrée"}, puis quittez avec :kbd{value="Ctrl+X"}. ### Docker compose
### Déployer la stack SWAG
::warning
Ceci remplace toute la définition du service SWAG. Si vous avez déjà ajouté une section `networks:` ou des `EXTRA_DOMAINS` pour d'autres apps (Dockge, TinyAuth, etc.), fusionnez-les avec le bloc ci-dessous au lieu de l'écraser, sinon vous perdrez cette configuration.
::
Assurez-vous que le fichier de base fail2ban existe déjà, sinon Docker créera un dossier à sa place au lieu de monter le fichier, ce qui casse silencieusement la persistance des bannissements :
```bash [Terminal]
sudo touch /srv/docker/swag/config/fail2ban/fail2ban.sqlite3
```
Ouvrez Dockge, éditez la stack SWAG avec cette configuration Ouvrez Dockge, éditez la stack SWAG avec cette configuration
```yaml [compose.yaml] ```yaml
--- ---
services: services:
swag: swag:
@@ -168,24 +170,26 @@ services:
ports: ports:
- 81:81 - 81:81
volumes: volumes:
- /srv/docker/swag/config:/config - /docker/swag/config:/config
- /srv/docker/swag/config/fail2ban/fail2ban.sqlite3:/dashboard/fail2ban.sqlite3:ro - /docker/swag/config/fail2ban/fail2ban.sqlite3:/dashboard/fail2ban.sqlite3:ro
restart: unless-stopped restart: unless-stopped
``` ```
::tip{icon=""} ::alert{type="success"}
__Astuce :__ ajoutez un label Watchtower pour automatiser les mises à jour : __Astuce :__ ajoutez le label de watchtower dans chaque conteneur afin d'automatiser les mises à jour
```yaml [compose.yaml] ```yaml
--- services:
labels: swag:
- com.centurylinklabs.watchtower.enable=true #...
``` labels:
- com.centurylinklabs.watchtower.enable=true
:: ::
Renseignez votre fichier `.env` :
```properties [.env] Et renseignez le `.env` les infos que vous avez trouvées et notées tout au long de ce guide
```properties
PUID= PUID=
PGID= PGID=
DOMAIN= DOMAIN=
@@ -201,7 +205,7 @@ TUNNEL_PW=
| Variable | Valeur | Exemples | | Variable | Valeur | Exemples |
|-----------------------------------|-----------------------------------------------------------------------------------------------------------|--------------------------------| |-----------------------------------|-----------------------------------------------------------------------------------------------------------|--------------------------------|
| `PUID`{lang=properties} | A renseigner avec les infos de votre user (trouvables via la commande `id nomdutilisateur`{lang=shell}) | `1000` | | `PUID`{lang=properties} | A renseigner avec les infos de votre user (trouvables via la commande `id nomdutilisateur`{lang=shell}) | `1000` |
| `PGID`{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 ` |
| `DOMAIN`{lang=properties} | Le domaine que vous avez réservé | `mondomaine.fr` | | `DOMAIN`{lang=properties} | Le domaine que vous avez réservé | `mondomaine.fr` |
| `PLUGIN`{lang=properties} | Le fournisseur de zone DNS, ici Cloudflare. Pensez à renseigner `cloudflare.ini` (voir [guide de swag](https://docs.linuxserver.io/general/swag/#create-container-via-dns-validation-with-a-wildcard-cert)) | `cloudflare` | | `PLUGIN`{lang=properties} | Le fournisseur de zone DNS, ici Cloudflare. Pensez à renseigner `cloudflare.ini` (voir [guide de swag](https://docs.linuxserver.io/general/swag/#create-container-via-dns-validation-with-a-wildcard-cert)) | `cloudflare` |
| `EMAIL`{lang=properties} | Votre email pour le certificat | `[email protected]` | | `EMAIL`{lang=properties} | Votre email pour le certificat | `[email protected]` |
@@ -211,60 +215,55 @@ TUNNEL_PW=
| `TUNNEL_NAME`{lang=properties} | Le nom de votre tunnel | `mon_tunnel` | | `TUNNEL_NAME`{lang=properties} | Le nom de votre tunnel | `mon_tunnel` |
| `TUNNEL_PW`{lang=properties} | Un mot de passe fort généré aléatoirement | `iSzKRmP4VbnlsMvdSdgBEJiJi` | | `TUNNEL_PW`{lang=properties} | Un mot de passe fort généré aléatoirement | `iSzKRmP4VbnlsMvdSdgBEJiJi` |
Une fois fait, déployez la stack. Cela prendra un peu de temps, vérifiez les logs, vous devriez arriver à `server ready`. Une fois fait, déployez la stack. Cela prendra un peu de temps, vérifiez les logs, vous devriez arriver à `serveur ready`
Une fois le conteneur en ligne, vérifiez dans cloudflare que votre tunnel est bien présent dans la section _Networks > Tunnels_ de [Cloudflare Zero Trust](https://one.dash.cloudflare.com/). Par défaut, l'ensemble des sous-domaines sont redirigés vers le tunnel, sans avoir besoin de les déclarer [dans votre zone DNS](/general/networking/dns). Une fois le conteneur en ligne, vérifiez dans cloudflare que votre tunnel est bien présent dans la section _Networks > Tunnels_ de [Cloudflare Zero Trust](https://one.dash.cloudflare.com/). Par défaut, l'ensemble des sous domaine sont redirigés vers le tunnel, sans avoir besoin de les déclarer [dans votre zone DNS](/generalites/reseau/dns).
::tip{icon="" to="/general/networking/dns"} ::alert{type="success"}
__Astuce :__ si vous voulez exposer un service sans tunnel, déclarez simplement un enregistrement A **dans votre zone DNS**. En cas de problème de résolution, désactivez la fonction _proxy_ pour cet enregistrement, par exemple pour `sous.mondomaine.fr`. __Astuce:__ si vous voulez exposer un service sans tunnel, vous pouvez toujours déclarer un enregistrement A [dans votre zone DNS](/generalites/reseau/dns). En cas de problème de résolution, désactivez la fonction _proxy_ pour cet enregistrement. Par exemple pour `sous.mondomaine.fr`
![dns](/img/serveex/cf-dns.png) ![dns](/img/serveex/cf-dns.png)
:: ::
### Terminé !
::
## Gérer plusieurs tunnels pour plusieurs serveurs ## Gérer plusieurs tunnels pour plusieurs serveurs
Par défaut, l'ensemble des sous-domaines de votre domaine passent par l'unique tunnel. Mais si vous avez un second serveur, il suffit de changer le nom du tunnel dans cette instance de SWAG, puis de rediriger les sous-domaines vers le bon tunnel dans votre zone DNS. ---
Par défaut, l'ensemble des sous domaine de votre nom de domaine pointent vers le tunnel que vous avez créé. Mais si vous avez un second serveur, vous pouvez avoir un second tunnel en changeant seulement le nom de tunnel dans la configuration de l'instance swag de votre serveur.
::steps{level="3"} Vous devrez ensuite dans votre zone DNS rediriger les sous domaine souhaité vers le bon tunnel. Pour cela, faites comme suit.
### Changer le nom du tunnel
Dans la stack SWAG du second serveur, mettez un `TUNNEL_NAME` différent dans le fichier `.env`, puis redéployez. Rendez-vous dans dans la section _Networks > Tunnels_ de [Cloudflare Zero Trust](https://one.dash.cloudflare.com/).
### Trouver les ID des tunnels Notez les deux ID des tunnels
Rendez-vous dans la section _Networks > Tunnels_ de [Cloudflare Zero Trust](https://one.dash.cloudflare.com/) et notez les ID des tunnels :
![tunnels_id](/img/serveex/cf-tunnels-id.png) ![tunnels_id](/img/serveex/cf-tunnels-id.png)
### Ajouter les enregistrements CNAME Rendez-vous à présent dans la section DNS de [cloudflare](https://dash.cloudflare.com/), après avoir cliqué sur le nom de domaine concerné.
Dans le [tableau de bord DNS de Cloudflare](https://dash.cloudflare.com/), cliquez sur votre nom de domaine, puis sur `Ajouter un enregistrement` et ajoutez ces deux enregistrements CNAME (en incluant bien `.cfargotunnel.com`) : Cliquez sur `ajouter un enregistrement` et ajoutez deux enregistrements comme suit en ajoutant bien `.cfargotunnel.com` après vos id de tunnels.
| Type | Nom | Cible | | Type | Nom | Cible |
|---------|----------------|-------------------------------------| |---------|----------------|-------------------------------------|
| `CNAME` | `sousdomaine1` | `votreiddetunnel1.cfargotunnel.com` | | `CNAME` | `sousdomaine1` | `votreiddetunnel1.cfargotunnel.com` |
| `CNAME` | `sousdomaine2` | `votreiddetunnel2.cfargotunnel.com` | | `CNAME` | `sousdomaine2` | `votreiddetunnel2.cfargotunnel.com` |
### Terminé !
::
Si vous avez de nombreux sous-domaines, vous pouvez déclarer un seul sous-domaine par tunnel comme ci-dessus, puis déclarer vos autres sous-domaines en les faisant pointer vers ces sous-domaines de référence.
Ainsi, en cas de changement d'ID de tunnel, vous n'aurez qu'un seul enregistrement DNS à modifier. Si vous avez de nombreux sous-domaines, vous pouvez déclarer un seul sous domaine par tunnel comme ci-dessus, puis déclarer vos autres sous domaine en les faisant pointer vers ces sous domaines de référence.
Ainsi, en cas de changement d'id de tunnel, vous n'aurez qu'à le changer que pour un seul sous-domaine.
Par exemple : Par exemple :
- `sub1` et `sub2` pointent eux aussi vers le serveur derrière `sousdomaine1` : - Le serveur de `sousdomaine1` doit egalement etre la cible de sub1, et sub2 :
| Type | Nom | Cible | | Type | Nom | Cible |
|---------|--------|----------------| |---------|----------------|-------------------------------------|
| `CNAME` | `sub1` | `sousdomaine1` | | `CNAME` | `sub1` | `sousdomaine1` |
| `CNAME` | `sub2` | `sousdomaine1` | | `CNAME` | `sub2` | `sousdomaine1` |
- `sub3` et `sub4` pointent vers le serveur derrière `sousdomaine2` : - Le serveur de `sousdomaine2` doit egalement etre la cible de sub3, et sub4 :
| Type | Nom | Cible |
|---------|----------------|-------------------------------------|
| `CNAME` | `sub3` | `sousdomaine2` |
| `CNAME` | `sub4` | `sousdomaine2` |
| Type | Nom | Cible |
|---------|--------|----------------|
| `CNAME` | `sub3` | `sousdomaine2` |
| `CNAME` | `sub4` | `sousdomaine2` |
+2
View File
@@ -0,0 +1,2 @@
navigation.title: La sécurité
icon: lucide:trash-2
@@ -0,0 +1,199 @@
---
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.
![picture](https://user-images.githubusercontent.com/1336778/212262296-e6205815-ad62-488c-83ec-a5b0d0689f7c.jpg)
## 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.
::
+181
View File
@@ -0,0 +1,181 @@
---
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.
![Dozzle](https://blog.unixhost.pro/wp-content/uploads/2023/03/image-5.png)
## 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).
::
@@ -0,0 +1,207 @@
---
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.
![speedtest-tracker](/img/serveex/speedtest-tracker.avif)
## 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).
::
+256
View File
@@ -0,0 +1,256 @@
---
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.
![Beszel](/img/serveex/beszel.png)
## 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 :
![Beszel add system](/img/serveex/beszel-add.png)
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 :
![Beszel add system](/img/serveex/beszel-system.png)
### 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).
::
+195
View File
@@ -0,0 +1,195 @@
---
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.
![Beszel](/img/serveex/upsnap.webp)
## 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).
::
+2
View File
@@ -0,0 +1,2 @@
navigation.title: Monitoring
icon: lucide:chart-no-axes-column
+311
View File
@@ -0,0 +1,311 @@
---
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.
![picture](/img/serveex/plex.png)
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.
![picture](/img/serveex/plex-port.png)
- 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à !
+325
View File
@@ -0,0 +1,325 @@
---
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
::
![Picture](/img/serveex/qbit-vue.jpeg)
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 :
![Picture](/img/serveex/qbit.svg)
## 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 !
![Picture](/img/serveex/seed.svg)
+514
View File
@@ -0,0 +1,514 @@
---
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.
![arr](/img/serveex/arr.svg)
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.
![profiles_radarr](/img/serveex/radarr1.png)
##### 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.
![Bazarr](/img/serveex/bazarr2.png)
- 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 :
![Bazarr](/img/serveex/bazarr.png)
- 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.
![Overseerr](/img/serveex/overseerr.webp)
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 !
+2
View File
@@ -0,0 +1,2 @@
navigation.title: Media & Seedbox
icon: lucide:list-video
+175
View File
@@ -0,0 +1,175 @@
---
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.
![Picture](/img/serveex/immich.png)
## 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/).
::
+195
View File
@@ -0,0 +1,195 @@
---
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.
![Picture](/img/serveex/nextcloud.png)
## 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/).
::
+2
View File
@@ -0,0 +1,2 @@
navigation.title: Cloud Drive & Photos
icon: lucide:cloud-upload
+164
View File
@@ -0,0 +1,164 @@
---
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.
![File Browser](/img/serveex/filebrowser.png)
## 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).
::
+214
View File
@@ -0,0 +1,214 @@
---
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.
![File Browser](/img/serveex/pingvin.png)
## 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`.
![Picture](/img/serveex/pingvin-auth1.png)
![Picture](/img/serveex/pingvin-auth2.png)
![Picture](/img/serveex/pingvin-auth3.png)
3. Enregistrez et créez une application `pingvin` comme suit.
![Picture](/img/serveex/pingvin-auth4.png)
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 dutilisateur 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.
+2
View File
@@ -0,0 +1,2 @@
navigation.title: Fichiers & partage
icon: lucide:folder-tree
@@ -0,0 +1,224 @@
---
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.
![code-server](https://github.com/coder/code-server/raw/main/docs/assets/screenshot-2.png)
## 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).
::
+199
View File
@@ -0,0 +1,199 @@
---
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.
![gitea](https://about.gitea.com/img/home-screenshot.png)
## 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/).
::
@@ -0,0 +1,168 @@
---
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.
![IT Tools](/img/serveex/it-tools.png)
## 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).
::
+2
View File
@@ -0,0 +1,2 @@
navigation.title: Développement
icon: lucide:code-xml
+309
View File
@@ -0,0 +1,309 @@
---
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.
![Picture](/img/serveex/adguard.svg)
## 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
![Picture](/img/serveex/adguard-chiffrement.png)
- 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.
+249
View File
@@ -0,0 +1,249 @@
---
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](/img/serveex/vaultwarden.png)
[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).
::
+2
View File
@@ -0,0 +1,2 @@
navigation.title: Applications utiles
icon: lucide:award
+2
View File
@@ -0,0 +1,2 @@
icon: noto:microscope
navigation.redirect: /serveex/introduction
+24
View File
@@ -0,0 +1,24 @@
---
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>
+2
View File
@@ -0,0 +1,2 @@
icon: noto:computer-disk
navigation.redirect: /stockeex/introduction
@@ -0,0 +1,44 @@
---
navigation: true
title: Nvidia Stock Bot
description: Un bot Python qui surveille la disponibilité des GPU en temps réel et envoie des alertes Discord — créé lors de la pénurie de la série RTX 5000.
main:
fluid: false
---
:ellipsis{left=0px width=40rem top=10rem blur=140px}
# Scripts python
Mes cochonneries en python
## 🤖 Nvidia Stock Bot
---
Depuis déjà 4 ans, la pénurie de materiel electronique fait rage. Et les cartes graphiques ne sont pas épargnées. En 2020, j'ai du attendre 2 mois pour obtenir mon exemplaire de RTX 3080, et pour cela j'ai du m'inscrire sur [JV Hardware](https://discord.gg/gxffg3GA96) où une poignée de geek avait mis en place un bot qui envoyait un ping lorsqu'elles étaient disponibles.
4 ans après et 5000 abonnés plus tard, vient la sortie des RTX 5000. Et là aucun bot dispo sur le marché ne semble fonctionner correctement. Je ne parle même pas d'un certain "influenceur" qui se permet de faire payer l'accès à son bot qui ne fonctionne meme pas. Il copie à la main les alertes provenant d'autres serveurs, comme le notre qui ont résolu le problème.
Quoiqu'il en soit, désireux d'obtenir une RTX 5090 pour ma machine dédiée à l'IA, je me suis dit qu'il était peut etre le temps de plonger dans le monde de python et de ChatGPT pour m'épauler. A l'aide d'un autre membre du serveur, KevOut, qui a principalement guidé sur le principe de départ et les sources des différentes API, j'ai réussi à obtenir un bot propre, fonctionnel, qui envoie différents types d'alertes via Discord. Avec un simple conteneur docker à déployer.
Après moult déconvenues, je suis passé de ceci :
![Nvidia Stock Bot Old](/img/betises/nvidia-stock-bot-old.svg)
à cela :
![Nvidia Stock bot](/img/betises/nvidia-stock-bot.svg)
Et plus récemment :
![Nvidia Stock bot](/img/betises/nvidia-stock-bot-en-v4.svg)
J'ai également eu la chance d'être référencé dans la fameuse [newsletter selfhost](https://selfh.st/weekly/2025-07-11/) !
Plus d'infos directement sur le repo :
::card
#title
🐋 __Nvidia Stock Bot__
#description
[Robot d'alerte de stock de GPU Nvidia](https://git.djeex.fr/Djeex/nvidia-stock-bot)
::
@@ -0,0 +1,39 @@
---
navigation: true
title: Adguard CIDRE
description: Un script Python pour synchroniser automatiquement les listes CIDR d'AdGuard Home et sécuriser votre serveur DNS auto-hébergé exposé sur internet.
main:
fluid: false
---
:ellipsis{left=0px width=40rem top=10rem blur=140px}
# 🤖 Adguard CIDRE Sync
---
Adguard Home est une solution merveilleuse pour filter ses requêtes DNS et ainsi se débarasser de la publicité ou des DNS des fournisseurs d'accès, ou encore réécrire des requetes.
Quand c'est en local, c'est très chouette. Mais quand on veut que tout ses appareils en profitent même à l'exterieur, on est obligé de l'exposer sur le net. Et n'importe qui peut s'en servir et saturer le petit remote à 1€ qu'on a pris pour l'heberger.
Adguard permet d'avoir des listes de clients autorisés ou bloqués. Problème, pour autoriser un client il faut son IP, et dans le cas d'un téléphone sur le réseau mobile, beh elle change régulièrement. L'idée est donc plutot de bloquer des listes générales plutot que d'autoriser des IP qui de toute façon changent régulièrement.
CIDRE est un outil qui permet de synchroniser des listes de plages IP géolocalisées mises à jour régulièrement avec un pare feu. Plutot que de faire tourner CIDRE sur le remote complet avec des règles de pare feu complexes, je me suis dit qu'il fallait simplement s'arranger pour ajouter les plages IP à jour que CIDRE propose au systeme de block list d'adguard, selon les pays que l'on souhaite bloquer.
C'est ainsi qu'est né Adguard CIDRE Sync, un conteneur qui synchronise régulièrement la block list d'Adguard avec les plages IP recensées par CIDRE à la fréquence que vous voulez.
L'idée etant de :
- Backup le fichier de conf d'Adguard au premier lancement (le fichier jamais touché par le robot est ainsi conservé au cas où)
- Télécharger la liste des pays selectionnés via une variable d'environnement
- Permettre d'ajouter soi-meme des IP "à la main" dans un fichier
- Concaténer le tout, backup le fichier de conf (dernière update), et injecter la liste dans la bonne section du fichier de conf d'Adguard
- Recharger Adguard en relançant le container (accès au socket via docker socket proxy pour limiter les permissions)
Tout ceci de manière complètement autonome, avec une fréquence choisie en variable d'environnement dans la conf du compose.
Plus d'infos directement sur le repo :
::card
#title
🐋 __Adguard CIDRE Sync__
#description
[Robot de synchronisation de la blocklist d'Adguard](https://git.djeex.fr/Djeex/adguard-cidre)
::
+69
View File
@@ -0,0 +1,69 @@
---
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)
::
::
+58
View File
@@ -0,0 +1,58 @@
---
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 :
![Instameex](/img/betises/instameex-workflow.svg)
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,35 +1,37 @@
--- ---
navigation: true
title: Doublons servarr title: Doublons servarr
description: Un script bash pour détecter et corriger les fichiers médias en double dans les bibliothèques Sonarr et Radarr en remplaçant les copies par des hardlinks. description: Un script bash pour détecter et corriger les fichiers médias en double dans les bibliothèques Sonarr et Radarr en remplaçant les copies par des hardlinks.
main:
fluid: false
---
:ellipsis{left=0px width=40rem top=10rem blur=140px}
# Detection de doublons et remplacement par des hardlinks
--- ---
Six mois après avoir téléchargé des térabytes de media, je me suis rendu compte que Sonarr et Radarr les copaient dans ma biblio Plex au lieu de créer des hardlinks. C'est dû à un mécanisme contre intuitif qui est que si vous montez plusieurs dossiers dans Sonarr/Radarr, il les voit comme deux systemes de fichiers différents. Et ne peut donc pas créer de hardlinks. C'est pour cela qu'il ne faut monter qu'un seul dossier parent, qui contient tous les enfants (`downloads`, `movies`, `tvseries` dans le dossier parent `media` par exemple).
:ellipsis{left=0px width=40rem top=10rem blur=140px zIndex=60} J'ai donc restructuré mes dossiers, remis à la main chaque chemin dans Qbittorrent, Plex, et autres. Il restait à trouver un moyen de détecter les doublons existants et d'automatiquement les supprimer et de créer des hardlinks à la place, pour économiser de l'espace.
Six mois après avoir téléchargé des térabytes de media, je me suis rendu compte que Sonarr et Radarr les copaient dans ma biblio Plex au lieu de créer des hardlinks. C'est dû à un mécanisme contre intuitif qui est que si vous montez plusieurs dossiers dans Sonarr/Radarr, il les voit comme deux systèmes de fichiers différents. Et ne peut donc pas créer de hardlinks. C'est pour cela qu'il ne faut monter qu'un seul dossier parent, qui contient tous les enfants (`downloads`, `movies`, `tvseries` dans le dossier parent `media` par exemple). Mes dossiers :
J'ai donc restructuré mes dossiers, remis à la main chaque chemin dans qBittorrent, Plex, et autres. Il restait à trouver un moyen de détecter les doublons existants et d'automatiquement les supprimer et de créer des hardlinks à la place, pour économiser de l'espace. ```sh
.
::file-tree └── media
--- ├── seedbox
label: Mes dossiers ├── radarr
tree: │ └── tv-radarr
.: ├── movies
- media: └── tvseries
- seedbox/ ```
- radarr:
- tv-radarr/
- movies/
- tvseries/
---
::
Mes dossiers originaux sont dans `seedbox`, et il ne faut surtout pas les modifier pour qu'ils continuent d'etre "seed". Les copies, et donc doublons, sont dans `movies` et `tvseries`. Mais pour complexifier la chose, j'ai aussi des media uniques originaux déposés par ailleurs dans `movies` et `tvseries`, sinon cela serait trop facile. Et dans ces deux dossiers, il peut y avoir des sous dossiers, des sous-sous dossiers, etc. Mes dossiers originaux sont dans `seedbox`, et il ne faut surtout pas les modifier pour qu'ils continuent d'etre "seed". Les copies, et donc doublons, sont dans `movies` et `tvseries`. Mais pour complexifier la chose, j'ai aussi des media uniques originaux déposés par ailleurs dans `movies` et `tvseries`, sinon cela serait trop facile. Et dans ces deux dossiers, il peut y avoir des sous dossiers, des sous-sous dossiers, etc.
L'idée est donc de : L'idée est donc de :
- lister les originaux dans seedbox - lister les originaux dans seedbox
- lister les fichiers dans movies et tvseries - lister les fichiers dans movies
- comparer les deux listes et isoler les chemins des doublons - comparer les deux listes et isoler les chemins des doublons
- supprimer les doublons - supprimer les doublons
- hardlinker les originaux dans les dossiers des doublons supprimés - hardlinker les originaux dans les dossiers des doublons supprimés
@@ -42,7 +44,7 @@ Je vous passe les incessantes questions réponses avec ChatGPT, je suis assez d
Pour tester, j'ai d'abord demandé un script qui ne fait que lister et comparer : Pour tester, j'ai d'abord demandé un script qui ne fait que lister et comparer :
```bash [Terminal] ```sh
#!/bin/bash #!/bin/bash
# Créer un tableau associatif pour stocker les doublons # Créer un tableau associatif pour stocker les doublons
@@ -66,6 +68,7 @@ while IFS= read -r -d '' file; do
echo echo
fi fi
else else
# Si c'est la première fois qu'on rencontre ce nom de fichier
seen[$filename]="$inode" seen[$filename]="$inode"
seen["$filename:full_path"]="$file" seen["$filename:full_path"]="$file"
fi fi
@@ -83,12 +86,10 @@ Doublons pour "episode1.mkv" :
Avec "awk", il se serait arrêté à `/media/seedbox/sonarr/Serie`. Je ne suis absolument pas un pro, mais Qwen3 a été plus performant et m'a expliqué de A à Z pourquoi et comment faire. Avec "awk", il se serait arrêté à `/media/seedbox/sonarr/Serie`. Je ne suis absolument pas un pro, mais Qwen3 a été plus performant et m'a expliqué de A à Z pourquoi et comment faire.
Une fois que j'ai vu que cela fonctionnait bien, j'ai demandé un script qui fait l'intégralité de la cinématique, de la comparaison aux hardlinks en passant par la suppression des doublons. Une fois que j'ai vu que cela fonctionnait bien, j'ai demandé un script qui fait l'intégralité de la cinématique, de la comparaison aux hardlinks en passant par la suppression des doublons.
Encore une fois ChatGPT a été décevant. Malgré mes demandes, il créait d'abord les hardlinks et ensuite il supprimait les doublons. Ce qui.. suprimme aussi le lien (meme si cela conserve l'originale). Idiot. Encore une fois ChatGPT a été décevant. Malgré mes demandes, il créait d'abord les hardlinks et ensuite il supprimait les doublons. Ce qui.. suprimme aussi le lien (meme si cela conserve l'originale). Idiot.
Petit détour par Qwen3, et ma RTX 5090 en PLS, et paf un résultat bien plus propre. Bon il a gardé les emoji de ChatGPT qui peut pas s'empecher d'en mettre partout, mais voilà : Petit détour par Qwen3, et ma RTX 5090 en PLS, et paf un résultat bien plus propre. Bon il a gardé les emoji de ChatGPT qui peut pas s'empecher d'en mettre partout, mais voilà :
```bash [Terminal] ```sh
#!/bin/bash #!/bin/bash
echo "🔍 Étape 1 : Indexation des fichiers originaux dans /media/seedbox..." echo "🔍 Étape 1 : Indexation des fichiers originaux dans /media/seedbox..."
@@ -135,7 +136,6 @@ echo "✅ Terminé."
``` ```
Bilan j'ai : Bilan j'ai :
- appris pas mal de subtilité bash - appris pas mal de subtilité bash
- appris qu'il ne faut jamais copier coller un script généré ChatGPT sans le comprendre et sans le tester en dry-run - appris qu'il ne faut jamais copier coller un script généré ChatGPT sans le comprendre et sans le tester en dry-run
- appris que Qwen sur une RTX 5090 est plus cohérent que ChatGPT 4o sur des fermes de serveurs (je vous passe les résultats de la version "normale"). - appris que Qwen sur une RTX 5090 est plus cohérent que ChatGPT 4o sur des fermes de serveurs (je vous passe les résultats de la version "normale").
@@ -1,26 +1,28 @@
--- ---
title: LUKS Backup navigation: true
description: A bash script to automatically dump LUKS headers from all encrypted disks, identify them by serial number, and store them in an encrypted archive. title: Luks backup
description: Un script bash pour extraire automatiquement les headers LUKS de tous les disques chiffrés, les identifier par numéro de série et les archiver de façon chiffrée.
main:
fluid: false
---
:ellipsis{left=0px width=40rem top=10rem blur=140px}
# Backup des headers luks pour disques/volumes chiffrés
--- ---
Je me suis rendu compte il y a peu qu'il ne suffisait pas d'avoir le mot de passe pour deverouiller un volume luks apres une panne ou une corruption. J'ai ainsi appris à dump les headers luks des disques/volumes et à utiliser les numéros de série + noms de partitions pour pouvoir bien identifier quel header correspond à quel disque/partition (j'en ai 10 !).
:ellipsis{left=0px width=40rem top=10rem blur=140px zIndex=60} Après avoir bien galéré à la main, j'avoue avoir demandé à Qwen3 (llm hebergé sur ma RTX 5090) de me faire un script qui automatise le listing et identification des disques, dump les headers et les stock dans une archive chiffrée prete à etre backupée sur mon serveur de sauvegarde.
I recently realized that having just the password is not enough to unlock a LUKS volume after a failure or corruption. I learned how to dump the LUKS headers from disks/volumes and to use the serial numbers along with partition names to accurately identify which header corresponds to which disk/partition (I have 10 of them!). Ainsi, ce script :
* Liste et identifie les disques avec leur numéro de série
* Liste les partition
* Dump les headers dans un dossier dans `/root` (dossier sécurisé)
* Cree une archive temporaire
* Prompt pour saisir un mot de passe
* Chiffre avec le mot de passe
* Détruit l'archive non chiffrée
After struggling to do this manually, I asked Qwen3 (an LLM running on my RTX 5090) to create a script that automates the listing and identification of disks, dumps the headers, and stores them in an encrypted archive ready to be backed up on my backup server. ```
This script:
* Lists and identifies disks with their serial numbers
* Lists partitions
* Dumps headers into a secured folder under `/root`
* Creates a temporary archive
* Prompts for a password
* Encrypts the archive with that password
* Deletes the unencrypted archive
```bash [Terminal]
#!/bin/bash #!/bin/bash
# Directory where LUKS headers will be backed up # Directory where LUKS headers will be backed up
@@ -83,4 +85,4 @@ else
fi fi
``` ```
**Dont forget to back up `/etc/fstab` and `/etc/crypttab` as well!** Ne pas oublier de backup `/etc/fstab` et `/etc/crypttab` !
@@ -1,34 +1,38 @@
--- ---
navigation: true
title: Socat Proxy title: Socat Proxy
description: Utiliser socat pour proxifier le socket Docker via Docker Socket Proxy, permettant à Beszel de collecter les stats des conteneurs sans exposer le socket complet. description: Utiliser socat pour proxifier le socket Docker via Docker Socket Proxy, permettant à Beszel de collecter les stats des conteneurs sans exposer le socket complet.
main:
fluid: false
---
:ellipsis{left=0px width=40rem top=10rem blur=140px}
# Socat Proxy
--- ---
:ellipsis{left=0px width=40rem top=10rem blur=140px zIndex=60}
Ce projet répond à un cas d'usage problématique : Ce projet répond à un cas d'usage problématique :
- J'ai [Beszel](https://beszel.dev/), un conteneur de monitoring en mode host, nécessitant d'exposer le socket de Docker afin qu'il récupère les stats des conteneurs - J'ai [Beszel](https://beszel.dev/), un conteneur de monitoring en mode host, nécessitant d'exposer le socket de Docker afin qu'il récupère les stats des conteneurs
- Afin de ne pas laisser le socket complètement ouvert pour Beszel, j'ai [Docker Socket Proxy](https://github.com/Tecnativa/docker-socket-proxy), un conteneur qui se place entre le socket de docker et le conteneur qui en a besoin, et qui filtre les requêtes en paramétrant les bonnes permissions pour ne pas tout exposer au conteneur qui l'utilise. - Afin de ne pas laisser le socket complètement ouvert pour Beszel, j'ai [Docker Socket Proxy](https://github.com/Tecnativa/docker-socket-proxy), un conteneur qui se place entre le scoket de docker et le conteneur qui en a besoin, et qui filtre le requêtes en paramétrant les bonnes permissions pour ne pas tout exposer au conteneur qui l'utilise.
Problème, si __Beszel__ est en mode host, il doit contacter __Docker Socket Proxy__ directement sur un port de l'host, c'est à dire en exposant un port de __Docker Socket Proxy__. Ce qui fait que n'importe quel conteneur/application sur mon host peut l'appeler et utiliser le socket docker. Problème, si __Beszel__ est en mode host, il doit contacter __Docker Socket Proxy__ directement sur un port de l'host, c'est à dire en exposant un port de __Docker Socket Proxy__. Ce qui fait que n'importe quel conteneur/application sur mon host peut l'appeler et utiliser le socket docker.
C'est là qu'intervient [Socat Proxy](https://git.djeex.fr/Djeex/socat-proxy). Ce dernier est un conteneur qui : C'est là qu'intervient [Socat Proxy](https://git.djeex.fr/Djeex/socat-proxy). Ce dernier est un conteneur qui :
- Crée un socket UNIX - Crée un socket UNIX
- Écoute ce socket - Ecoute ce socket
- Envoie les requêtes vers Docker Socket Proxy et vice versa - Envoie les requetes vers Docker Socket Proxy et vice versa
- Permet de remplacer le vrai socket docker en exposant le socket proxy créé, dans le conteneur final via un bind mount (ici, Beszel) - Permet de remplacer le vrai socket docker en exposant le socket proxy créé, dans le conteneur final via un bind mount (ici, Beszel)
Ainsi, un filtre comme Docker Socket Proxy dialogue avec Socat Proxy dans leur propre réseau isolé (en mode bridge), et le bind mount du socket UNIX créé est localisé sur l'host dans un dossier avec les permissions nécessaires pour ne pas être visible des autres conteneurs/applicatifs. Ainsi, un filtre comme Docker Socket Proxy dialogue avec Socat Proxy dans leur propre réseau isolé (en mode bridge), et le bind mount du socket UNIX créé est localisé sur l'host dans un dossier avec les permissions nécessaires pour ne pas etre visible des autres conteneurs/applicatifs.
En gros : En gros :
![Schéma de Socat Proxy relayant le socket Docker entre réseaux isolés](/img/nonsense/socat-proxy.svg) ![](/img/betises/socat-proxy.svg)
Par exemple, pour Beszel cela rendrait comme ceci : Par exemple, pour Beszel cela rendrait comme ceci :
```yaml [compose.yaml] ```yaml
---
services: services:
socat-proxy: socat-proxy:
image: git.djeex.fr/djeex/socat-proxy:latest image: git.djeex.fr/djeex/socat-proxy:latest
@@ -77,6 +81,10 @@ services:
Plus d'infos directement sur le repo : Plus d'infos directement sur le repo :
::card{title="🐋 __Socat Proxy__" to="https://git.djeex.fr/Djeex/socat-proxy" target="_blank"}
Un proxy de socket léger basé sur un bind mount ::card
:: #title
🐋 __Socat Proxy__
#description
[A lighteweight bind mount socket proxy](https://git.djeex.fr/Djeex/socat-proxy)
::
@@ -1,14 +1,16 @@
--- ---
navigation: true
title: HotDisk title: HotDisk
description: Un script bash qui surveille la température des disques durs et éteint automatiquement le serveur lorsqu'ils dépassent un seuil de sécurité trop longtemps. description: Un script bash qui surveille la température des disques durs et éteint automatiquement le serveur lorsqu'ils dépassent un seuil de sécurité trop longtemps.
main:
fluid: false
---
:ellipsis{left=0px width=40rem top=10rem blur=140px}
# HotDisk
--- ---
Quand on a un NAS avec plusieurs disques dans une buanderie, les températures peuvent vite grimper. Or, un disque dur est très sensible aux températures et peut subir de gros dommages s'il dépasse une température seuil pendant un certain temps. Après un été très chaud qui a fournit son lot de sueur froide en regardant la température de mes disques, j'ai cherché un moyen de pouvoir automatiser l'extinction du serveur en cas de dépassement prolonger de la température maximale supportée par mes disques.
:ellipsis{left=0px width=40rem top=10rem blur=140px zIndex=60}
Quand on a un NAS avec plusieurs disques dans une buanderie, les températures peuvent vite grimper.
Un disque dur est très sensible à la chaleur et peut subir de gros dommages s'il dépasse une température seuil trop longtemps.
Après un été très chaud qui a fourni son lot de sueur froide en regardant la température de mes disques, j'ai cherché un moyen de pouvoir automatiser l'extinction du serveur en cas de dépassement prolongé de la température maximale supportée par mes disques.
N'ayant rien trouvé de convaincant, je l'ai donc fait moi-même. N'ayant rien trouvé de convaincant, je l'ai donc fait moi-même.
@@ -18,8 +20,7 @@ N'ayant rien trouvé de convaincant, je l'ai donc fait moi-même.
- Il déclenche larrêt du système si la température dépasse la limite pendant la durée configurée. - Il déclenche larrêt du système si la température dépasse la limite pendant la durée configurée.
- Il enregistre toutes les températures et l’état des compteurs, et effectue automatiquement la rotation des journaux. - Il enregistre toutes les températures et l’état des compteurs, et effectue automatiquement la rotation des journaux.
Puis tant qu'on y est, j'ai ajouté un script d'installation qui installe le script principal, le rend exécutable, crée un service systemd et un timer, et les active automatiquement. Puis tant qu'on y est, j'ai ajouté un script d'installation qui installe le script, le rend éxecutable, crée un service systemd et un timer systemd et l'active. Le script d'installation permet aussi de régler les différentes variables:
Le script d'installation permet aussi de régler différents paramètres :
| Variable | Description | Valeur par défaut | | Variable | Description | Valeur par défaut |
|-----------------------|------------------------------------------------------------------------------|-----------------------------------------------| |-----------------------|------------------------------------------------------------------------------|-----------------------------------------------|
@@ -31,15 +32,18 @@ Le script d'installation permet aussi de régler différents paramètres :
| `LOG_ROTATE_PERIOD` | Période de rotation des journaux (`daily` ou `weekly`) | `daily` | | `LOG_ROTATE_PERIOD` | Période de rotation des journaux (`daily` ou `weekly`) | `daily` |
| `DISCORD_WEBHOOK` | URL du webhook Discord pour les notifications | _Obligatoire_ | | `DISCORD_WEBHOOK` | URL du webhook Discord pour les notifications | _Obligatoire_ |
Il exécute aussi un autre script qui paramètre **logrotate** avec les éléments configurés précédemment. Il execute aussi un autre script qui paramètre le logrotate avec les éléments configurés prédédemment. Et enfin, le script d'installation peut etre executé via un simple curl + execution d'un dernier script pour les plus flemmard.
Et enfin, le script d'installation peut être exécuté directement via un simple `curl` suivi d'un dernier script de configuration, parfait pour les plus flemmards.
Il a fallu également gérer le sujet du root sans sudo, du sudo seul, de l'utilisateur sans sudo, les divers cas d'erreur (dépendances manquantes, erreur dans les permissions, créations de fichier, de lecture des données des disques, etc.) Il a fallu également gérer le sujet du root sans sudo, du sudo seul, de l'utilisateur sans sudo, les divers cas d'erreur (dépendances manquantes, erreur dans les permissions, créations de fichier, de lecture des données des disques, etc...)
Et l'acces concurrent au fichier de statuts. Et l'acces concurrent au fichier de statuts.
Plus d'infos directement sur le repo : Plus d'infos directement sur le repo :
::card{title="📜 __HotDisk__" to="https://git.djeex.fr/Djeex/hotdisk" target="_blank"}
Gardez vos disques au frais ! ::card
:: #title
📜 __HotDisk__
#description
[Gardez vos disques au frais !](https://git.djeex.fr/Djeex/hotdisk)
::
@@ -1,32 +1,35 @@
--- ---
navigation: true
title: Backrest Docker Stop title: Backrest Docker Stop
description: Un script bash qui arrête les conteneurs Docker avant une sauvegarde Backrest et les redémarre après, pour des sauvegardes de bases de données sans dump complexe. description: Un script bash qui arrête les conteneurs Docker avant une sauvegarde Backrest et les redémarre après pour des sauvegardes de bases de données sans dump complexe.
main:
fluid: false
---
:ellipsis{left=0px width=40rem top=10rem blur=140px}
# Backrest Docker Stop
--- ---
[Backrest](https://github.com/garethgeorge/backrest) est un formidable outil de backup. Dans le cas de [Serveex](https://docu.djeex.fr/fr/serveex/introduction), la majeure partie des données à sauvegarder sont des conteneurs, et souvent ces conteneurs possèdent des bases de données. Le problème ? On ne peut pas sauvegarder proprement une BDD qui est en route. Alors, il existe plein de solutions complexe à base de dump des bases de données, mais souvent le plus simple cela reste de stopper les conteneurs, de sauvegarder, et de redémarrer les conteneurs.
:ellipsis{left=0px width=40rem top=10rem blur=140px zIndex=60} **Backrest** ne propose pas de solutions native, mais il propose d'executer des scripts customisés à déclencher sur des évenements, comme le démarrage et la fin de la sauvegarde par exemple. Notre besoin est donc de stopper les conteneurs dont on veut sauvegarder la BDD, à chaque démarrage du plan de sauvegarde, et de les redémarrer à la fin de l'execution du plan de sauvegarde.
[Backrest](https://github.com/garethgeorge/backrest) est un formidable outil de backup. Dans le cas de [Serveex](/serveex/introduction), la majeure partie des données à sauvegarder sont des conteneurs, et souvent ces conteneurs possèdent des bases de données.
Le problème ? On ne peut pas sauvegarder proprement une BDD qui est en route. Alors, il existe plein de solutions complexes à base de dump des bases de données, mais souvent le plus simple cela reste de stopper les conteneurs, de sauvegarder, et de redémarrer les conteneurs.
**Backrest** ne propose pas de solutions natives, mais il propose d'exécuter des scripts customisés à déclencher sur des événements, comme le démarrage et la fin de la sauvegarde par exemple. Notre besoin est donc de stopper les conteneurs dont on veut sauvegarder la BDD, à chaque démarrage du plan de sauvegarde, et de les redémarrer à la fin de l'exécution du plan de sauvegarde. Pour cela nous allons avoir besoin d'un script bash et d'une connexion sécurisée entre Backrest et le socket de Docker, afin d'avoir la cinématique suivante :
Pour cela nous allons avoir besoin d'un script bash et de connecter Backrest au socker de Docker, afin d'avoir la cinématique suivante :
- Le plan de sauvegarde se met en route - Le plan de sauvegarde se met en route
- L'événement déclenche l'exécution d'un script custom - L'evenement déclenche l'execution d'un script custom
- Le script contacte docker et demande la liste des conteneurs qui comportent le label `backrest.backup.stop=true` - Le script contacte docker et demande la liste des conteneurs qui comportent le label `backrest.backup.stop=true`
- Il récupère cette liste et leur envoie une commande d'extinction - Il récupère cette liste et leur envoie une commande d'extinction
- Le plan de sauvegarde s'arrête - Le plan de sauvegarde s'arrête
- L'événement déclenche l'exécution d'un script custom - L'evenement déclenche l'execution d'un script custom
- Le script recontacte docker, récupère la même liste, et redémarre ces conteneurs - Le script contacte docker et demande la liste des conteneurs qui comportent le label `backrest.backup.stop=true`
- Il récupère cette liste et leur envoie une commande de démarrage
## Faire communiquer Backrest et Docker en toute sécurité ## Faire communiquer Backrest et Docker en toute sécurité
Pour faire communiquer **Backrest** et Docker en toute sécurité, nous utiliserons [Docker Socket Proxy](https://github.com/linuxserver/docker-socket-proxy). Pour faire communiquer **Backrest** et Docker en toute sécurité, nous utiliserons [Docker Socket Proxy](https://github.com/linuxserver/docker-socket-proxy), afin de n'accorder que les droits nécessaires plutot que d'exposer l'intégralité du socket à Docker. Voici donc la stack :
Cela évite d'exposer l'intégralité du socket Docker et n'accorde que les droits nécessaires.
Voici un exemple de stack Docker :
```yaml [compose.yaml] ```yaml
--- ---
services: services:
backrest: backrest:
@@ -67,7 +70,7 @@ Et voilà, Backrest pourra ainsi communiquer avec Docker en toute sécurité.
## Les scripts ## Les scripts
Vous trouverez ci-dessous les scripts à renseigner en action pour les événements de démarrage et d'arrêt de la sauvegarde dans **Backrest**. Vous trouverez ci-dessous les scripts à renseigner en action pour les évèvenements de démarrage et d'arrêt de la sauvegarde dans **Backrest**.
::code-group ::code-group
```sh [Stop] ```sh [Stop]
@@ -81,7 +84,6 @@ do
done done
sleep 10 sleep 10
``` ```
```sh [Start] ```sh [Start]
#!/usr/bin/env bash #!/usr/bin/env bash
@@ -95,18 +97,16 @@ sleep 10
``` ```
:: ::
## Le label
## Le label
Une fois les scripts renseignés et paramétrés pour les bons hooks dans **Backrest**, vous n'avez plus qu'à ajouter le libellé `backrest.backup.stop=true` dans les fichiers `compose.yaml` des conteneurs à éteindre et rallumer durant les sauvegardes : Une fois les scripts renseignés et paramétrés pour les bons hooks dans **Backrest**, vous n'avez plus qu'à ajouter le libellé `backrest.backup.stop=true` dans les fichiers `compose.yaml` des conteneurs à éteindre et rallumer durant les sauvegardes :
```yaml [compose.yaml] ```yaml
---
services: services:
votre_service: votre_service:
... ...
labels: labels:
- backrest.backup.stop=true - com.centurylinklabs.watchtower.enable=true
``` ```
Et voilà ! Et voilà, à la prochaine sauvegarde, les conteneurs correctement labelisés s'arreteront pendant la sauvegarde et redémarreront tout seuls à la fin.
À la prochaine sauvegarde, les conteneurs correctement labelisés s'arrêteront pendant la sauvegarde et redémarreront tout seuls une fois terminée.
+2
View File
@@ -0,0 +1,2 @@
icon: noto:test-tube
navigation.title: Mes bêtises
@@ -0,0 +1,253 @@
---
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.
![picture](/img/serveex/vpn.svg)
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 !
![picture](/img/serveex/wireguard.svg)
+2
View File
@@ -0,0 +1,2 @@
icon: lucide:trash-2
navigation.title: Obsolète
+2
View File
@@ -0,0 +1,2 @@
icon: noto:recycling-symbol
navigation.title: Poubelle
-2
View File
@@ -1,2 +0,0 @@
title: About
icon: i-noto-star
-51
View File
@@ -1,51 +0,0 @@
---
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
::
::
-2
View File
@@ -1,2 +0,0 @@
title: General
icon: i-noto-open-book
-88
View File
@@ -1,88 +0,0 @@
---
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
::
::
@@ -1,2 +0,0 @@
title: Networking
icon: i-lucide-network

Some files were not shown because too many files have changed in this diff Show More