diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 2d53037..6c07501 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1746,6 +1746,14 @@ body:has(#menu-controller:checked) { top: 0px; } +.bottom-4 { + bottom: 1rem; +} + +.bottom-1 { + bottom: 0.25rem; +} + .z-10 { z-index: 10; } @@ -1762,6 +1770,10 @@ body:has(#menu-controller:checked) { z-index: 30; } +.-z-10 { + z-index: -10; +} + .order-first { order: -9999; } @@ -2045,6 +2057,16 @@ body:has(#menu-controller:checked) { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.translate-x-full { + --tw-translate-x: 100%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.translate-y-full { + --tw-translate-y: 100%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + .cursor-pointer { cursor: pointer; } @@ -2164,6 +2186,11 @@ body:has(#menu-controller:checked) { border-bottom-left-radius: 0.5rem; } +.rounded-b-none { + border-bottom-right-radius: 0px; + border-bottom-left-radius: 0px; +} + .rounded-tr-none { border-top-right-radius: 0px; } @@ -2172,6 +2199,14 @@ body:has(#menu-controller:checked) { border-bottom-left-radius: 0px; } +.rounded-br-none { + border-bottom-right-radius: 0px; +} + +.rounded-tl-none { + border-top-left-radius: 0px; +} + .border-2 { border-width: 2px; } @@ -2256,6 +2291,11 @@ body:has(#menu-controller:checked) { background-color: rgb(22 163 74 / var(--tw-bg-opacity)); } +.bg-blue-600 { + --tw-bg-opacity: 1; + background-color: rgb(37 99 235 / var(--tw-bg-opacity)); +} + .bg-orange-600 { --tw-bg-opacity: 1; background-color: rgb(234 88 12 / var(--tw-bg-opacity)); @@ -2326,11 +2366,6 @@ body:has(#menu-controller:checked) { background-color: rgba(var(--color-neutral-100), 0.5); } -.bg-blue-600 { - --tw-bg-opacity: 1; - background-color: rgb(37 99 235 / var(--tw-bg-opacity)); -} - .object-scale-down { -o-object-fit: scale-down; object-fit: scale-down; @@ -2678,6 +2713,11 @@ body:has(#menu-controller:checked) { background-color: rgb(34 197 94 / var(--tw-bg-opacity)) !important; } +.hover\:\!bg-blue-500:hover { + --tw-bg-opacity: 1 !important; + background-color: rgb(59 130 246 / var(--tw-bg-opacity)) !important; +} + .hover\:\!bg-orange-500:hover { --tw-bg-opacity: 1 !important; background-color: rgb(249 115 22 / var(--tw-bg-opacity)) !important; @@ -2722,11 +2762,6 @@ body:has(#menu-controller:checked) { background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity)); } -.hover\:\!bg-blue-500:hover { - --tw-bg-opacity: 1 !important; - background-color: rgb(59 130 246 / var(--tw-bg-opacity)) !important; -} - .hover\:text-primary-500:hover { --tw-text-opacity: 1; color: rgba(var(--color-primary-500), var(--tw-text-opacity)); @@ -2992,6 +3027,11 @@ body:has(#menu-controller:checked) { background-color: rgb(22 101 52 / var(--tw-bg-opacity)); } +.dark .dark\:bg-blue-800 { + --tw-bg-opacity: 1; + background-color: rgb(30 64 175 / var(--tw-bg-opacity)); +} + .dark .dark\:bg-orange-800 { --tw-bg-opacity: 1; background-color: rgb(154 52 18 / var(--tw-bg-opacity)); @@ -3050,11 +3090,6 @@ body:has(#menu-controller:checked) { background-color: rgba(var(--color-neutral-800), 0.5); } -.dark .dark\:bg-blue-800 { - --tw-bg-opacity: 1; - background-color: rgb(30 64 175 / var(--tw-bg-opacity)); -} - .dark .dark\:prose-invert { --tw-prose-body: var(--tw-prose-invert-body); --tw-prose-headings: var(--tw-prose-invert-headings); @@ -3137,6 +3172,11 @@ body:has(#menu-controller:checked) { background-color: rgb(21 128 61 / var(--tw-bg-opacity)) !important; } +.dark .dark\:hover\:\!bg-blue-700:hover { + --tw-bg-opacity: 1 !important; + background-color: rgb(29 78 216 / var(--tw-bg-opacity)) !important; +} + .dark .dark\:hover\:\!bg-orange-700:hover { --tw-bg-opacity: 1 !important; background-color: rgb(194 65 12 / var(--tw-bg-opacity)) !important; @@ -3172,11 +3212,6 @@ body:has(#menu-controller:checked) { background-color: rgba(var(--color-primary-400), var(--tw-bg-opacity)); } -.dark .dark\:hover\:\!bg-blue-700:hover { - --tw-bg-opacity: 1 !important; - background-color: rgb(29 78 216 / var(--tw-bg-opacity)) !important; -} - .dark .dark\:hover\:text-primary-400:hover { --tw-text-opacity: 1; color: rgba(var(--color-primary-400), var(--tw-text-opacity)); diff --git a/assets/css/custom.css b/assets/css/custom.css index e69de29..965d143 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -0,0 +1,3 @@ +.highlight-file .chroma { + padding-bottom: 2rem; +} \ No newline at end of file diff --git a/content/posts/04-build-your-own-docker-swarm-cluster-part-3/index.md b/content/posts/04-build-your-own-docker-swarm-cluster-part-3/index.md index 44e2f0b..8c73440 100644 --- a/content/posts/04-build-your-own-docker-swarm-cluster-part-3/index.md +++ b/content/posts/04-build-your-own-docker-swarm-cluster-part-3/index.md @@ -47,6 +47,37 @@ When done use `docker node ls` on manager node in order to confirm the presence Yeah, cluster is already properly configured. Far less overwhelming than Kubernetes, I should say. +#### Hetzner & MTU + +{{< alert >}} +Just one last important thing before continue, specific to Hetzner. Their private network is set to **1450 MTU** by default, which is **not compatible with Docker Swarm overlay network**. You must change it to 1450 MTU in order to avoid any further dysfunctions between node swarm communication. Many thanks to [DcapCode](https://github.com/DcapCode) to reported it ❤️. [See here](https://www.reddit.com/r/portainer/comments/qt1mne/swarm_deployment_woes/) for further explanation. +{{< /alert >}} + +Recreate the `ingress` network with the correct MTU : + +```sh +docker network rm ingress +docker network create -d overlay --ingress --opt com.docker.network.driver.mtu=1450 ingress +``` + +The trade-off is that you will have to specify this MTU for every further networks that we'll create inside further docker-compose (stacks). Example for traefik stack : + +{{< highlight host="manager-01" file="~/traefik-stack.yml" >}} + +```yml +version: "3.8" + +services: + # ... + +networks: + public: + driver_opts: + com.docker.network.driver.mtu: 1450 +``` + +{{< /highlight >}} + ### CLI tools & environment labels [`ctop`](https://github.com/bcicen/ctop) is a very useful CLI tools that works like `htop` but dedicated for docker containers. Install it on every docker hosts : diff --git a/layouts/shortcodes/highlight.html b/layouts/shortcodes/highlight.html index 5df59d7..28ae952 100644 --- a/layouts/shortcodes/highlight.html +++ b/layouts/shortcodes/highlight.html @@ -1,4 +1,4 @@ -
+
{{ if .Get "host" }}{{ .Get "host" }}{{ end }}{{ if and (.Get "host") (.Get "file") }} - {{ end }}{{ if .Get "file" }}{{ .Get "file" }}{{ end }} {{- .Inner | markdownify -}}