RTC
nl en
🌟Ontwikkeling van een eenvoudige publieke ToDo web-applicatie
[ Nog niet afgewerkt ]
First app

Doel

In vorige post implementeerde ik verschillende logische servers op mijn proxmox home-server machine:
“templ-ubuntu”, “home-devdepserver” en “home-utilityserver”.
Zie Architecture of my home server .

Ik wil nu een eerste minimale demonstratie web-applicatie in Golang met een SQLite database ontwikkelen,
gebruikmakend van de centrale repository voor source code opslag.
De applicatie dient daarna als OCI container opgeleverd te worden en in de centrale registry voor binaries opgeslagen te worden.

Daarna dient een applicatie-execution server-omgeving op mijn home-server aangemaakt te worden.
De aangemaakte containerized applicatie en database dient op deze server-omgeving vervolgens gedeployed te worden.
Hiervoor zal ik “home-testappserver” en “home-prodappserver” als logische servers installeren.

Als laatste wil ik deze gedeployde web-applicatie publiek toegankelijk maken via tunneling.
De applicatie moet kunnen opgeroepen worden via een link in de “Demo” pagina van mijn website op Cloudflare.
In deze post wil ik hiervoor mijn “virtueel datacenter” vervolledigen met communicatie middleware.
Het opruimen van bestaande “home-pve” en “home-backupserver” zal later volgen.
Na deze post krijgen we dan volgende situatie:

Servers

Met dit project werk ik de realisatie van al mijn ideeën voor de publieke website en een klein virtueel datacenter volledig af.
In volgend project wil ik starten met de verdere uitwerking van mijn ideeën over een moderne software-fabriek:
applicatie development tools, testing, security, CI/CD, OCI & Kubernetes en app/infra-monitoring.


Resultaat

1 - Aankoop en installatie van laptop

Laptop

Ik kocht mijn eerste laptop en installeerde er Linux Mint als OS op.
Ik koos voor een gereviseerde business laptop, die geschikt is voor web development, aan een budget prijs.
Zie Architecture of my laptop .
Deze Linux Laptop gebruikte ik om alle nieuwe software uit te testen en aan te leren.
In de toekomst ga ik volledig overstappen van Windows desktops naar enkel Linux desktops.

2 - Beveiliging van thuis-netwerk, servers, werkstations en software

Laptop

Omdat ik applicaties in mijn thuisnetwerk toegankelijk wil maken vanuit het internet,
dien ik de toegang tot lokale resources beter te beveiligen.
Bezoekers bij mij thuis geef ik ook toegang tot mijn wifi-netwerk,
en ik wil hier tevens voorkomen dat deze toegang krijgen tot andere lokale resources dan het internet.
Ik bouwde daarom mijn toegangsbeveiliging uit en dit gebeurde op verschillende niveau’s.

Op netwerk-niveau probeerde ik firewall’s op routers en VLAN’s (virtuele LAN) te gebruiken.
Door gescheiden virtuele netwerken op 1 fysiek netwerk te voorzien,
kan ik internet bezoekers en wifi bezoekers thuis gescheiden houden van interne gebruikers.
Ik gebruik echter een router geleverd door mijn ISP die geen VLAN’s ondersteunt,
en dien daarom te wachten op een upgrade van mijn ISP.
De firewall-regels op mijn router laten nu alle uitgaand verkeer naar het internet toe,
maar blokkeren alle inkomend verkeer (dit zal ik later in deze post heel beperkt moeten wijzigen).

Op machine/OS-niveau heb ik voor alle machines firewall’s geinstalleerd en geconfigureerd.
Op mijn Windows desktop is dit de ingebouwde Windows firewall,
en op mijn Linux Mint laptop is dit de UFW firewall software.
Deze workstations laten alle uitgaand verkeer toe, maar blokkeren alle inkomend verkeer bij default.
Op mijn NAS/home-server werd proxmox als hypervisor OS geinstalleerd en die voorziet in een hierarchy van firewall’s.
Proxmox implementeert software-matig op de machine een eigen intern netwerk met een virtuele switch,
die alle lxc’s en vm’s verbindt met het home netwerk.
Op het node-niveau en elk lxc/vm-niveau voorziet proxmox een aparte firewall die geconfigureerd dient te worden.

Zie “Network and Firewall organization” sectie in Architecture of my home server .

Beveiliging voor iedere toegankelijke service/applicatie dient ook voorzien te worden.
Voor de ssh-service en gitea server software werd reeds beveiliging via ssh-keys geimplementeerd.
Desktop en Laptop workstation beschikken daarom over mijn persoonlijke private ssh-key,
en alle servers beschikken over mijn persoonlijke public ssh-key om gemakkelijk toegang te verlenen.
Voor zelfontwikkelde applicaties die publiek toegangelijk zijn,
voorzie ik enkel beveiligde https of vpn toegang na (paswoord) authenticatie door de gebruiker.
Meer uitleg over de gekozen authenticatie-software volgt later in deze post.

3 - Ontwikkeling van minimale demo web-applicaties in Go

Develop app

3.1 - Ontwikkel demo_hello applicatie

Als eerste maakte ik een HelloWorld applicatie “demo_hello” aan in Golang (met prefix “example-” in Gitea).
Voor de implementatie werd de standaard http library en de templ library in go gebruikt.
Ik koos Golang als programmeertaal omdat het een eenvoudige, performante taal is,
en echt geschikt om in containers/cloud te draaien.
Deze HelloWorld repo kan hierna gebruikt worden om de development van alle nieuwe golang projecten gemakkelijk te kunnen opstarten.
De repo bevat de te gebruiken github/gitea configuraties, local git configuraties, en de golang setup.
Het bevat ook een eenvoudige makefile om een compile, linter-ing en test workflow door automatisatie te vereenvoudigen.
Later zal ook andere pipeline-logica toegevoegd worden.
Op deze manier werd onmiddelijk bij de start een goede development workflow afgedwongen.
Zie Cheatsheet for golang beginners voor meer uitleg.

Deze en alle volgende repositories voor applicatie-development zijn publiek toegankelijk in mijn GitHub / RobertTC32 account.

3.2 - Ontwikkel demo_todo applicatie

Daarna werd de “demo_todo” repo (met prefix “app-” in Gitea) aangemaakt met demo_hello repo als starter.
De repo-structuur werd voorzien om niet enkel golang source code te bevatten,
maar ook golang test code, sql script files, pipeline specificaties, etc.
Vervolgens heb ik dan een sqlite database aangemaakt met sql scripts voor creatie van db-objecten en testdata.
Sqlite is de meest gebruikte database ter wereld en draait op alle OS’s.
Het is een sql database die alle ACID eigenschappen (zoals transacties) ondersteunt.
Ze is gratis, uiterst performant (in-process) en eenvoudig te gebruiken/beheren (alle data weggeschreven in 1 file).
Sqlite readers blokkeren nooit andere readers of writers, en writers blokkeren nooit readers maar wel andere writers.
Een sqlite database zal ik in latere projecten ook in kubernetes gebruiken (met horizontal scaling en backup),
en er dan performantietesten op uitvoeren.

Na de aanmaak van de databank werd een eerste versie van de demo_todo web applicatie ontwikkeld.
Deze toonde enkel de database-inhoud als todo-rijen in een tabel op het scherm.

3.3 - Deploy containerized web-applicaties op applicatie-server

Voor beide web applicaties maakte ik een zo klein mogelijke OCI-image,
en installeerde deze daarna op mijn test- en prod- applicatie servers.
Containerizatie en deployment gebeurden handmatig,
maar in volgende posts zullen we dit automatiseren (ansible).

Na het opstarten op de applicatie-servers, werden de web applicaties uitgetest binnen het thuisnetwerk.

4 - Maak web-applicatie publiek toegankelijk via tunneling

networking

4.1 - Maak demo_todo applicatie toegankelijk

De ToDo web-applicatie is gehost in mijn thuis-netwerk en niet zonder meer toegankelijk over het internet.
Om publieke toegang te voorzien, heb ik eerst veel bijgeleerd over networking en hiervan een overzicht gemaakt.
Zie Overview of network technology voor meer uitleg.

In dit overzicht vind je:

  • Netwerk-technologieën
  • Netwerk-middleware om websites en web applicaties te ondersteunen
  • Producten om vanuit internet toegang te hebben tot applicaties in je thuis-netwerk
Access app

Under construction

Ik koos er uiteindelijk voor om gebruik te maken van Cloudflare Tunneling,
omdat ik al beschikte over een domein-naam en een (gratis) Cloudflare account.
Ik diende dus enkel nog een Cloudflare connector aan te maken en te configureren in mijn LAN.
Ik maakte voor de installatie van de connector gebruik van docker.
Mijn ToDo applicatie is nu bereikbaar via mijn publieke website op Cloudflare.
In deze sectie installeerde ik dus software Cloudflare-Agent op “home-testappserver” en “home-prodappserver”.

4.2 - Vervolledig implementatie van demo_todo applicatie

Voor de web presentatie gebruikte ik de reeds gekende tailwind css technologie.
Zie Cheatsheet for golang advanced voor meer uitleg.

Als laatste werden web-schermen aangemaakt om een todo-lijn toe te voegen, te verwijderen, of todo-details te wijzigen.
Hiervoor maakte ik gebruik van AlpineJs en DaisyUI als extra frontend-technologieën.
AlpineJS is een kleine Javascript library die nieuwe attributes aan bestaande HTML elementen toevoegt.
Hiermee kan code in de browser uitgevoerd worden zonder javascript programmatie,
bijvoorbeeld voor form validaties of communicatie met backend server code.
DaisyUI is een UI componenten bibliotheek volledig gebaseerd op Tailwind css,
die toelaat om sneller mooiere web interfaces te maken.

Voor de toegang tot de databank gebruikte ik de sqlc tool,
die vanuit een tekst file met sql en specificaties de db-access code in golang genereert.

4.3 - Voeg CDN toe aan demo_todo applicatie

Voor het ophalen van static web resources voor web applicaties kan gebruik gemaakt worden van de CDN functionaliteit van Cloudflare.
Hierdoor kan dit veel efficienter en on the Edge gebeuren.

CDN

Voor de ToDo applicatie gebruikte ik daarom deze CDN mogelijklheid wat resulteert in volgende architectuur:

Arch

Dit plaatje werd gemaakt met “Mermaid” software.
Ik gebruikte hiervoor “Markdown Preview Mermaid Support” en “markdownlint” als VSCode extensies.
In vorige projecten gebruikte ik reeds “PlantUML” en “Drawio” in VSCode om diagramma’s aan te maken.
Mermaid kan enkel eenvoudigere diagram’s dan PlantUML aanmaken,
maar de renderer is standaard reeds voorzien in GitLab, GitHub en Gitea.

5 - Maak web-applicaties publiek toegankelijk zonder tunneling

5.1 - Installeer port forwarding en reverse proxy

ArchAlt

Ik ga later ook zelf-gehoste web applicaties publiek maken via https en port forwarding.
Een client kan dan mijn web applicatie bereiken via mijn wan-router thuis,
die via port forwarding de request doorgeeft aan een reverse proxy (zoals Nginx, Traefik, Caddy).
Deze reverse proxy zal de https request omvormen naar een http request,
en forwarden naar mijn zelf-gehoste web applicatie.
Dit vereist wel een statisch publiek IP-adres, wat zou kunnen opgelost worden via DDNS.
Het vereist ook een geldig SSL certificaat, wat gratis zou kunnen opgelost worden met DNS Challenge.
De reverse proxy moet dit wel ondersteunen.
Dit resulteert dan in bovenstaande architectuur.

Vervolgens installeerde ik de Cloudflare-DDNS software op de proxmox node,
en de Traefik software naast Cloudflare-Agent op “home-testappserver” en “home-prodappserver”.

5.2 - Maak demo_hello applicatie toegankelijk

Om dit uit te testen, maakte ik op deze manier de “HelloWorld” applicatie publiek toegankelijk.
Ik installeerde en gebruikte hiervoor Traefik als reverse proxy.
Omdat ik zo veilig mogelijk wil werken, maakte ik gebruik van Cloudflare om mijn eigen publiek IP-adres verborgen te houden.
Op deze manier kan ik applicaties ook tijdelijk beschikbaar stellen,
zodat andere developers deze bijvoorbeeld gemakkelijk kunnen testen.

Under construction

6 - Voeg toegangsbeveiliging toe aan web-applicatie

6.1 - Installeer authenticatie en authorisatie middleware

Under construction

keuze “OAuth2/OIDC” (OpenID Connect) als Authentication en Authorization technology;
“Authelia” software (vs Microsoft ADFS, Keycloak, Authentik) wordt gebruikt als SSO-implementatie (met MFA support),
omdat het open source en meer lightweight is.

installeer “Authelia” software naast Cloudflare-DDNS op “home-testappserver” en “home-prodappserver” linux container

6.2 - Vervolledig implementatie van demo_hello applicatie

Meertaligheid (nl, en) werd voorzien en de te gebruiken taal kan worden gekozen in de URL van de request.
ontwikkel beveiligingslogica en voeg deze aan de applicatie en services toe