diff --git a/components/mdx/MermaidDiagram.tsx b/components/mdx/MermaidDiagram.tsx new file mode 100644 index 0000000..5a0d82e --- /dev/null +++ b/components/mdx/MermaidDiagram.tsx @@ -0,0 +1,46 @@ +"use client"; + +import { useEffect, useId, useState } from "react"; + +export function MermaidDiagram({ code }: { code: string }) { + const id = useId().replace(/:/g, ""); + const [svg, setSvg] = useState(""); + const [error, setError] = useState(""); + + useEffect(() => { + let cancelled = false; + + async function render() { + try { + const mermaid = (await import("mermaid")).default; + mermaid.initialize({ startOnLoad: false, theme: "neutral" }); + const { svg: rendered } = await mermaid.render(`mermaid-${id}`, code); + if (!cancelled) setSvg(rendered); + } catch (e) { + if (!cancelled) setError(e instanceof Error ? e.message : String(e)); + } + } + + render(); + return () => { cancelled = true; }; + }, [code, id]); + + if (error) { + return ( + 
+                {error}
+
+ ); + } + + if (!svg) { + return
; + } + + return ( +
+ ); +} diff --git a/content/.obsidian/graph.json b/content/.obsidian/graph.json new file mode 100644 index 0000000..e21a18d --- /dev/null +++ b/content/.obsidian/graph.json @@ -0,0 +1,22 @@ +{ + "collapse-filter": true, + "search": "", + "showTags": false, + "showAttachments": false, + "hideUnresolved": false, + "showOrphans": true, + "collapse-color-groups": true, + "colorGroups": [], + "collapse-display": true, + "showArrow": false, + "textFadeMultiplier": 0, + "nodeSizeMultiplier": 1, + "lineSizeMultiplier": 1, + "collapse-forces": true, + "centerStrength": 0.518713248970312, + "repelStrength": 10, + "linkStrength": 1, + "linkDistance": 250, + "scale": 1, + "close": false +} \ No newline at end of file diff --git a/content/blog/en/03-Deploying-an-infrastructure-for-a-macos-app-distribution.mdx b/content/blog/en/03-Deploying-an-infrastructure-for-a-macos-app-distribution.mdx new file mode 100644 index 0000000..eaba7d6 --- /dev/null +++ b/content/blog/en/03-Deploying-an-infrastructure-for-a-macos-app-distribution.mdx @@ -0,0 +1,134 @@ +--- +ready: true +translationKey: deploying-an-infrastructure-for-a-macos-app-distribution +title: Deploying a macOS app distribution infrastructure for the price of a monthly dinner +description: Long live self-hosting! +date: 2026-05-21 +category: Architecture +tags: + - Experience + - TechStack +readTime: 5 min +summary: +cover: /images/blog/3.png +--- + +## Introduction + +A few weeks ago at the time I am writing this article, I launched into the development of Thence, a macOS application that memorizes a developer's project context to save them time and energy when they resume it after a break. + +The code of the application as such is only the tip of the iceberg. Very quickly, the reality of the field catches up with you: to make a product live, you need an entire ecosystem around it. A space for the community, a software license management system, and internal tools to pilot everything and make the right decisions for the evolution of the product. + +If we turn to SaaS of all kinds, each specialized in one task in particular, with the versatility of the necessary systems, you quickly end up with a salty bill. Being a student at that time, and having much better projects for my money, I took a radical decision: self-host as much as possible. + +In this article, I propose to go through the architecture of my VPS (Virtual Private Server). We will see how I managed to make public and private tools coexist on one and the same machine, the technical choices behind each brick and how this "system D" approach allowed me to build a reliable, scalable and available architecture, for not too expensive. + +## The specifications: Exploit Open Source + +The objective was not to host services for the pleasure of testing them, but bel and bien to respond to a real business need for Thence. For each need I searched and selected the best free solution, self-hostable in the best of cases, capable of running efficiently in Docker containers, without however making me collapse under technical debt. + +### Distribution and licenses: Keygen + +For a paid desktop application, software license management is the nerve of the war. I needed a system capable of generating keys, managing activations and ensuring that a user does not deploy the application on 10 different machines with a single subscription. I deployed the self-hosted version of Keygen for that. + +### Support and community: Discourse + +Rather than opening a Discord server difficultly indexable by Google, or managing a quantity of support client emails intractable and visible only by me, I chose Discourse. It is a forum, exposed on the Internet, which allows me to structure discussions with users, publish roadmaps, exchange with the community around the application in a general way. + +More precisely, I use it for several things at the same time: +* **Pre-register users:** It is by inviting them to this forum in a dedicated group that I was able to find the beta users of the application, those with whom I am building the MVP (Minimum Viable Product), still at the moment I am writing the article. +* **Create a public knowledge base self-fueled by users:** This is the second strong point of this kind of tool. People ask questions, I answer them, and other people who ask themselves the same questions read the discussions to find their answers. It is a self-fueled FAQ that responds to the questions of the users directly, and not to the questions that I think the users are going to ask themselves. + +### Deployment and monitoring: Komodo + +Deploying applications galore in Docker containers is good. But being able to do it graphically, monitor their health state, perform their updates in a few clicks is better! Not that typing commands by hand annoys me particularly, on the contrary, but it is especially tiring, longer. This is where Komodo intervenes, my control center to pilot the vast majority of my self-hosted applications serenely. + +--- + +## The core of the problem: making public and private coexist + +You will have perhaps noticed it, I spoke of services accessible to the public like Discourse, but also of services that must imperatively remain private like Komodo or Keygen. This is why a good cloisonnement of the two (public and private) is needed so as not to expose me, myself and the data of the users, to obvious and important flaws. + +Here is how I secured and organized this traffic. + +### Who orchestrates the traffic? The duo Vercel and Caddy + +One of the challenges when making several services cohabit on a single server is the management of traffic and SSL certificates (HTTPS). In my architecture, I set up a cascading proxy system. + +#### The Public traffic: Vercel in first line, Caddy at the switching + +For everything that is accessible by users (like the Discourse forum) the path is the following: + +Vercel handles the entry. My public domain names point to Vercel. It is its infrastructure that takes the connection first. Vercel handles the public SSL certificate, ensures that the connection is secure, then cleanly redirects the traffic to the IP of my VPS. + +Once the request arrives on my VPS, it is Caddy that takes the relay. It inspects the subdomain received: if the request targets `forum.thence.app`, Caddy sends it to the Discourse container. + +This approach allows me to benefit from the power and security of Vercel in frontal, while keeping total flexibility on my VPS thanks to Caddy to dispatch the traffic to my different Docker containers. + +#### The Private traffic: The Caddy + Tailscale safe + +For services that never need to be exposed on the public Web (like my Komodo administration interface), I applied the principle of Zero Trust by combining Caddy and Tailscale. Out of the question that these flows pass through the Internet or through Vercel. + +Tailscale is a secure mesh VPN based on the WireGuard protocol. By installing Tailscale on my VPS and on my computers, my server obtains a unique private IP address within my secure network (my tailnet), as well as a private domain name. + +Here, Caddy adopts a totally different behavior: +* I ask it to listen only on the private network interface of Tailscale for these sensitive services. +* Caddy will directly ask for an SSL certificate from the local Tailscale daemon to secure access in HTTPS. + +#### The result + +If a user or a robot tries to type the URL of my Komodo from the public Web, he runs into a wall: the domain does not exist and the port is closed. For me to be able to administer my infrastructure, I must obligatorily activate Tailscale on my computer. As soon as I am part of the private network, Caddy recognizes my machine, validates the Tailscale HTTPS, and gives me access to my private containers. + +--- + +## Overview: How it runs day-to-day? + +To completely understand how all these bricks cohabit without stepping on each other's feet, nothing beats a good diagram. + +```mermaid +graph TD + %% Flux Public + Internet([Le Web Public]) --> Vercel[Vercel] + Vercel --> Caddy + + %% Flux Privé + MonMac([Mon Mac]) --> Tailscale[Tailscale VPN] + Tailscale --> Caddy + + %% Le VPS et Caddy + subgraph Mon VPS + Caddy[Reverse Proxy: Caddy] + + %% Dispatching vers Docker + Caddy -->|Public| Discourse[Discourse Forum] + Caddy -->|Public| Keygen[Keygen Licences] + Caddy -->|Privé| Keygen2[Keygen Admin] + Caddy -->|Privé| Komodo[Komodo Admin] + end +``` + +--- + +## The monitoring and the backups + +An infrastructure is only viable if it is monitored and backed up. + +* **The administration:** This is where Komodo takes all its meaning. Since my PC (via Tailscale), I have access to a dashboard that allows me to see the health state of each container, to consult the logs in one click and to restart a service if necessary. + +* **The Backup strategy:** The trap of self-hosting is to lose everything if the server crashes. I have therefore automated the backup of Docker volumes. Each night, a script encrypts these data and sends them to an S3 compatible object storage. + +--- + +## The costs in all that + +* For the server itself, I went through OVH, it is quite reliable and not too expensive. I pay around **10.20€ per month**. + +* For the public domain name of Thence, I went through Vercel, with which I host the website. I pay 14.99€ per year.**. + +* For the S3 storage, I have 1 To with the premium plan of Next.ink, a French and independent tech journal. I pay 8€ per month.**. + +That makes a total of 33.19€ per month, it is a quite low amount for the resource I have with that. It will take a lot of traffic on Thence to arrive at saturation, and at that moment, I do not believe that the financial side will be a real break. + +On this, thank you for having read until here and to the next one in another article. + +**Mathéo G** \ No newline at end of file diff --git a/content/blog/fr/03-Deploying-an-infrastructure-for-a-macos-app-distribution.mdx b/content/blog/fr/03-Deploying-an-infrastructure-for-a-macos-app-distribution.mdx new file mode 100644 index 0000000..831fbac --- /dev/null +++ b/content/blog/fr/03-Deploying-an-infrastructure-for-a-macos-app-distribution.mdx @@ -0,0 +1,134 @@ +--- +ready: true +translationKey: deploying-an-infrastructure-for-a-macos-app-distribution +title: Déployer une infrastructure pour la distribution d'une app macOS pour le prix d'un resto par mois +description: Vive le self-hosting ! +date: 2026-05-21 +category: Architecture +tags: + - Expérience + - Technologies +readTime: 5 min +summary: +cover: /images/blog/3.png +--- + +## Introduction + +Il y a quelques semaines au moment où j'écris cet article, je me suis lancé dans le développement de Thence, une application macOS qui mémorise le contexte projet d'un développeur pour lui faire gagner du temps et de l'énergie quand il le reprend après une pause. + +Le code de l'application en tant que tel n'est que la partie émergée de l'iceberg. Très vite, la réalité du terrain vous rattrape : pour faire vivre un produit, il faut tout un écosystème autour. Un espace pour la communauté, un système de gestion des licences logicielles, et des outils internes pour piloter le tout et prendre les bonnes décisions pour l'évolution du produit. + +Si on se tourne vers des SaaS en tout genre, chacun spécialiste d'une tâche en particulier, avec la polyvalence des systèmes nécessaires, on a vite fait de se retrouver avec une facture salée. Étant étudiant à ce moment-là, et ayant de bien meilleurs projets pour mon argent, j'ai pris une décision radicale : auto-héberger au maximum. + +Dans cet article, je vous propose de parcourir l'architecture de mon VPS (Serveur Virtuel Privé). Nous verrons comment j'ai réussi à faire coexister des outils publics et privés sur une seule et même machine, les choix techniques derrière chaque brique et comment cette approche "système D" m'a permis de construire une architecture fiable, scalable et disponible, pour pas trop cher. + +## Le cahier des charges : Exploiter l'Open Source + +L'objectif n'était pas d'héberger des services pour le plaisir de les tester, mais bel et bien de répondre à un vrai besoin métier pour Thence. Pour chaque besoin, j'ai cherché et sélectionné la meilleure solution gratuite, auto-hébergeable dans le meilleur des cas, capable de tourner efficacement dans des conteneurs Docker, sans pour autant me faire crouler sous la dette technique. + +### Distribution et licences : Keygen + +Pour une application de bureau payante, la gestion des licences logicielles est le nerf de la guerre. Il me fallait un système capable de générer des clés, de gérer les activations et de s'assurer qu'un utilisateur ne déploie pas l'application sur 10 machines différentes avec un seul abonnement. J'ai déployé la version auto-hébergée de Keygen pour cela. + +### Support et communauté : Discourse + +Plutôt que d'ouvrir un serveur Discord difficilement indexable par Google, ou de gérer une quantité de mails de support client intraitable et visible uniquement par moi, j'ai choisi Discourse. C'est un forum, exposé sur Internet, qui me permet de structurer les discussions avec les utilisateurs, de publier les roadmaps, d'échanger avec la communauté autour de l'application de manière générale. + +Plus précisément, je l'utilise pour plusieurs choses à la fois : +* **Préinscrire les utilisateurs :** C'est en les invitant sur ce forum dans un groupe dédié que j'ai pu trouver les bêta-utilisateurs de l'application, ceux avec qui je construis le MVP (Produit Minimum Viable), encore au moment où j'écris l'article. +* **Créer une base de connaissances publique auto-alimentée par les utilisateurs :** C'est le deuxième point fort de ce genre d'outil. Les gens posent des questions, j'y réponds, et d'autres personnes qui se posent les mêmes questions lisent les discussions pour y trouver leurs réponses. C'est une FAQ auto-alimentée qui répond aux questions des utilisateurs directement, et non aux questions que je pense que les utilisateurs vont se poser. + +### Déploiement et monitoring : Komodo + +Déployer des applications à gogo dans des conteneurs Docker, c'est bien. Mais pouvoir le faire graphiquement, surveiller leur état de santé, effectuer leurs mises à jour en quelques clics, c'est mieux ! Non pas que taper les commandes à la main m'agace particulièrement, au contraire, mais c'est surtout fatiguant, plus long. C'est là que Komodo intervient, mon centre de contrôle pour piloter la grande majorité de mes applications auto-hébergées sereinement. + +--- + +## Le cœur du problème : faire coexister public et privé + +Vous l'aurez peut-être remarqué, j'ai parlé de services accessibles au public comme Discourse, mais aussi de services qui doivent impérativement rester privés comme Komodo ou Keygen. C'est pourquoi il faut un bon cloisonnement des deux (public et privé) de sorte à ne pas m'exposer, moi et les données des utilisateurs, à des failles évidentes et importantes. + +Voici comment j'ai sécurisé et organisé ce trafic. + +### Qui orchestre le trafic ? Le duo Vercel et Caddy + +L'un des défis quand on fait cohabiter plusieurs services sur un seul serveur, c'est la gestion du trafic et des certificats SSL (le HTTPS). Dans mon architecture, j'ai mis en place un système de proxy en cascade. + +#### Le trafic Public : Vercel en première ligne, Caddy à l'aiguillage + +Pour tout ce qui est accessible par les utilisateurs (comme le forum Discourse), le chemin est le suivant : + +Vercel gère l'entrée. Mes noms de domaine publics pointent vers Vercel. C'est son infrastructure qui encaisse la connexion en premier. Vercel gère le certificat SSL public, s'assure que la connexion est sécurisée, puis redirige proprement le trafic vers l'IP de mon VPS. + +Une fois la requête arrivée sur mon VPS, c'est Caddy qui prend le relais. Il inspecte le sous-domaine reçu : si la requête cible `forum.thence.app`, Caddy la renvoie vers le conteneur Discourse. + +Cette approche me permet de bénéficier de la puissance et de la sécurité de Vercel en frontal, tout en gardant une flexibilité totale sur mon VPS grâce à Caddy pour dispatcher le trafic vers mes différents conteneurs Docker. + +#### Le trafic Privé : Le coffre-fort Caddy + Tailscale + +Pour les services qui n'ont jamais besoin d'être exposés sur le Web public (comme mon interface d'administration Komodo), j'ai appliqué le principe du *Zero Trust* en combinant Caddy et Tailscale. Hors de question que ces flux passent par Internet ou par Vercel. + +Tailscale est un VPN maillé sécurisé basé sur le protocole WireGuard. En installant Tailscale sur mon VPS et sur mes ordinateurs, mon serveur obtient une adresse IP privée unique au sein de mon réseau sécurisé (mon *tailnet*), ainsi qu'un nom de domaine privé. + +Ici, Caddy adopte un comportement totalement différent : +* Je lui demande d'écouter uniquement sur l'interface réseau privée de Tailscale pour ces services sensibles. +* Caddy va directement demander un certificat SSL au démon Tailscale local pour sécuriser l'accès en HTTPS. + +#### Le résultat + +Si un utilisateur ou un robot tente de taper l'URL de mon Komodo depuis le Web public, il se heurte à un mur : le domaine n'existe pas et le port est fermé. Pour que je puisse administrer mon infrastructure, je dois obligatoirement activer Tailscale sur mon ordinateur. Dès que je fais partie du réseau privé, Caddy reconnaît ma machine, valide le HTTPS Tailscale, et me donne accès à mes conteneurs privés. + +--- + +## Vue d'ensemble : Comment ça tourne au quotidien ? + +Pour bien comprendre comment toutes ces briques cohabitent sans se marcher sur les pieds, rien ne vaut un bon schéma. + +```mermaid +graph TD + %% Flux Public + Internet([Le Web Public]) --> Vercel[Vercel] + Vercel --> Caddy + + %% Flux Privé + MonMac([Mon Mac]) --> Tailscale[Tailscale VPN] + Tailscale --> Caddy + + %% Le VPS et Caddy + subgraph Mon VPS + Caddy[Reverse Proxy: Caddy] + + %% Dispatching vers Docker + Caddy -->|Public| Discourse[Discourse Forum] + Caddy -->|Public| Keygen[Keygen Licences] + Caddy -->|Privé| Keygen2[Keygen Admin] + Caddy -->|Privé| Komodo[Komodo Admin] + end +``` + +--- + +## Le Monitoring et les Sauvegardes + +Une infrastructure n'est viable que si elle est surveillée et sauvegardée. + +* **L'administration :** C'est là que Komodo prend tout son sens. Depuis mon PC (via Tailscale), j'ai accès à un tableau de bord qui me permet de voir l'état de santé de chaque conteneur, de consulter les logs en un clic et de redémarrer un service si nécessaire. + +* **La stratégie de Backup :** Le piège du *self-hosting*, c'est de tout perdre si le serveur crash. J'ai donc automatisé la sauvegarde des volumes Docker. Chaque nuit, un script chiffre ces données et les envoie vers un stockage objet compatible S3. + +--- + +## Les coûts dans tout ça + +* Pour le serveur lui-même, je suis passé par OVH, c'est assez fiable et pas trop cher. Je paye environ **10.20€ par mois**. + +* Pour le nom de domaine public de Thence, je suis passé par Vercel, ce avec quoi j'héberge le site Web. Je paye **14.99€ par an**. + +* Pour le stockage S3, je dispose d'1 To avec le plan premium de Next.ink, un journal tech français et indépendant. Je paye **8€ par mois**. + +Cela fait un total de **33.19€ par mois**, c'est un montant assez faible pour la ressource que j'ai avec cela. Il va falloir beaucoup de trafic sur Thence pour arriver à saturation, et à ce moment-là, je ne crois pas que le côté financier soit un vrai frein. + +Sur ce, merci d'avoir lu jusqu'ici et à la prochaine dans un autre article. + +**Mathéo G** \ No newline at end of file