Doel
Ik wil beginnen met de aanmaak van een applicatie-development-en-deployment server-omgeving op mijn home-server (“nas-devdepserver” genoemd).
Voorlopig wil ik hierop enkel een repository voor source code, een build server en een registry voor binaries als centrale tools voorzien.
Daarnaast wil ik 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 (“nas-appserver” genoemd).
De aangemaakte containerized applicatie en database dient op deze server-omgeving vervolgens gedeployed te worden.
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.
Naast het afwerken van de openstaande werken op mijn publieke website,
wil ik mijn site ook een meer professionele look-en-feel geven.
Met dit project werk ik de realisatie van al mijn ideeën voor de publieke website volledig af.
In volgend project wil ik starten met de verdere uitwerking van mijn ideeën
over development tools, testing, security, CI/CD, Kubernetes en app/infra-monitoring.
Resultaat
1 - Upgrade van publieke website naar professionele look-en-feel
Ik begon met de layout van vele bestaande websites te bekijken en vergelijken.
Ook las ik vele reviews die website-layouts bespreken en vergelijken,
en leerde ik de in gebruik zijnde presentatie-standaarden voor publieke sites op pc en mobile.
De 2 belangrijke eigenschappen voor publieke layouts zijn volgens mij:
- makkelijk bruikbare functionaliteit (easy usable)
- visuele attractiviteit (beautiful)
Ik opteerde voor een layout zoals die van de VRT NWS 👆 website.
Deze layout heeft een frisse, niet te beladen look en is tevens gemakkelijk te bedienen op desktop en mobile.
Vervolgens zocht ik informatie om deze look-en-feel te implementeren.
Vooral op het vlak van visuele attractiviteit moest ik nog veel bijleren:
- een meer gevorderd gebruik van css en tailwind css:
responsive positionering en dimensionering van elementen,
gebruik van absolute, relatieve en flexbox layout,
dynamische styling met calc() in css,
gebruik van clipping, overflow en aspect ratio voor images en videos - gebruik van daisyUI:
dit is een tailwind css plugin die de designer voorziet in bruikbare component class namen - het beschikken over royalty-free video’s, foto’s, illustraties en backgrounds:
ik heb nu een lijst van gratis sites die deze bruikbare elementen verzamelen - betere organisatie-mogelijkheden van Hugo layouts en shortcodes
(het onderhoud van mijn site werd hierdoor veel eenvoudiger)
Ten slotte heb ik ook beschikbare services bekeken om het bezoek van websites te kunnen analyseren en opvolgen.
Dikwijls wordt voor “Google Analytics” of “Umami” gekozen als gratis oplossing.
Omdat ik mijn website reeds heb gehost op Cloudflare,
koos ik uiteindelijk voor de gratis “Web Analytics” service van Cloudflare.
Na configuratie van deze service kan ik nu volgende metrieken gemakkelijk opvolgen via een dashboard:
historiek van aantal page-views, toestel-os-browser gebruikt door bezoekers, enz.
2 - Server tools voor development en deployment van web apps
Op mijn windows development pc werd ook reeds “Git”, “VSCode” met “Git Graph” en “MSEdit” geïnstalleerd.
Ik installeerde nu bijkomend “Docker”, “Podman” en “Portainer” op mijn windows pc.
In vorige projecten maakte ik reeds gebruik van de publieke github.com site.
Voor de development en deployment van eigen applicaties wil gebruik maken van git repository manager.
Omdat ik deze git repository manager zelf wil hosten op mijn eigen home server,
vergeleek ik hiervoor populaire softwares: “GitLab - Community Edition” en “Gitea - Free Edition”.
Ik leerde eerst de gitlab-basis op de publieke gitlab.com site.
Ik leerde hier niet enkel de basis Git-commando’s, maar ook de bijkomende Gitlab functionaliteit.
Een eenvoudige HelloWorld-applicatie werd aangemaakt en opgeslagen, gebruikmakend van een Gitlab CI pipeline.
Via Docker werd voor deze voorbeeld-applicatie een container image aangemaakt,
die dan werd opgeslagen in de Gitlab Container Registry.
Omdat deze GitLab software veel resources vergt en voor mij te uitgebreide functionaliteit bevat,
koos ik uiteindelijk voor de “Gitea” software.
Gitea is een lightweight GitHub alternatief, speciaal gemaakt voor self-hosting en bevat:
- “Gitea” (vs “GitLab”, “GitHub”) als repository voor source code
- “Gitea Actions” (“GitHub Actions” alternatief, vs “Gitlab CI & Runners”, “Jenkins”) als build server
- “Gitea Package Registry” (vs “Gitlab Registry”, “Nexus”) als registry voor binaries en oci images
In mijn “nas-devdepserver” omgeving op mijn home-server heb ik “MSEdit”, “Docker”, “Podman” en “Portainer” geïnstalleerd.
Ik installeerde nu hier bijkomend de laatste free versie van Gitea.
Op de lokale Gitea-server heb ik eerst één groep “robertthecoder” (mijn “bedrijf”) op rootniveau aangemaakt.
In deze hoofdgroep heb ik drie subgroepen aangemaakt: “app”, “util” en “example”.
Projecten zullen voortaan altijd in een van deze subgroepen aangemaakt worden.
3 - Eenvoudige referentie van services en applicaties op thuisnetwerk
Om op een eenvoudige manier toegang te hebben tot al mijn services en applicaties,
maakte ik een eigen home dashboard/portal met links er naar toe in groepen ingedeeld.
Voor de implementatie koos ik voor de populaire “Homarr” software
(vs Homer, Heimdall, Glance, Homepage, Dashy).
De meeste services en applicaties vereisen een paswoord om toegang te hebben.
Om deze paswoorden te beheren, gebruikte ik tot nog toe de gratis versie van “Bitwarden” (vs “KeePassXC”).
Ik ga nu echter volledig overstappen naar de gratis community-versie van “Passbolt”.
Passbolt installeerde op mijn eigen home-server in mijn thuisnetwerk.
4 - Vereenvoudig beheer van kennis en documentatie over HomeLab technologie
Bij het uitvoeren van deze projecten leer ik zeer veel bij over computer-technology.
De meeste informatie vind ik door te zoeken via google search en via youtube video’s.
Al de referenties voor de goede informatiebronnen houd ik bij en eigen documentatie maak ik aan via markdown files.
Doordat de informatie-hoeveelheid erg groot wordt en tevens moeilijk te structureren is in files,
is het onderhouden/uitbreiden ervan en het terugvinden van info erg moeilijk geworden.
Ik zocht daarom een andere aanpak met software ondersteuning om kennis-beheer en documentatie-aanmaak te vereenvoudigen.
Na grondig ondezoek opteerde ik voor de “Obsidian” software (vs Notion, Capacities).
De meest gebruikte standaard-aanpak door onderzoekers is de “Zettelkasten” methode.
Echter developers en devops gebruiken eerder een persoonlijke aanpak met eigen structuur in Obsidian.
Voor mij is dit kennisbeheer volledig nieuw en kies ik om te starten met een eigen aanpak.
Ik maakte daarom 2 Obsidian kennisbanken of “vaults” (afgekort “OV”):
- “OV-ComputerTech”:
bevat algemene info over computer-technology die ik kan delen met anderen - “OV-MyHomeLab”:
bevat specifieke info over eigen software, computers en netwerk-configuratie die enkel voor mij toegankelijk is
Om deze Obsidian Vaults overal toegankelijk te maken en ook backups te hebben,
heb ik git repositories in gitea van deze vaults gemaakt.
Nieuwe kennis zal voortaan daarom in deze Obsidian vaults bijgehouden worden,
en reeds bestaande informatie zal gradueel ook opgenomen worden in deze vaults.
5 - Ontwikkeling van minimale demo web-applicatie in Go
??? TODO ???
Aanmaak template project bruikbaar voor al mijn go applications:
- gitea configuratie:
prevent loosing work results => protect shared branches;
prevent blocking other developers => isolate ongoing work per person;
catch conflicts early => often rebase & test localy before merge;
make change history easy => untangle merges in linear history;
improve code quality => code review & feedback before merge - local git configuratie:
identify author for each change => user.name, user.email;
local repo must follow shared repo => pull.ff;
easy access to shared repo => SSH keys;
adapt stored line endings to local os standard => core.autocrlf - golang setup:
go.mod, folder structure, makefile, license file - default CI pipeline:
een pipeline wordt opgedeeld in orchestration en uit te voeren delen met logica;
een pipeline deel met logica moet ook lokaal en geisoleerd kunnen uitgevoerd en getest worden - implementatie van pipeline logic:
maakt gebruik van makefile en bash scripts (later via “Dagger” ?);
linters = static code analysers for source code quality checking;
build van container image (via Docker of Podman)
Aanmaak eenvoudige “Todo” web applicatie, gebruik makend van volgend framework:
- Golang als back-end core technology
- Templ & stdlib net/http als back-end web libraries
(vs Chi, Gin, Fiber, Echo) - Tailwind CSS & Alpine.js als front-end web technology
(vs Htmx, Datastar) - DaisyUI als (Tailwind CSS based) UI component library
(vs Shadcn UI, Tailwind UI, Pines UI, TailGrids, etc) - LibSQL als relationele database
(vs SQLite, MySQL, PostgreSQL) - SQLc als Object-Relational Mapper library
(vs Raw, SQLx, GORM)
??? TODO ???
Gebruik CDN en server-side caching voor internet applicaties
6 - Deployment van containerized web-applicatie op applicatie-server
??? TODO ???
7 - Maak zelf gehoste web-applicatie publiek toegankelijk
??? TODO ???
??? TODO ???
8 - Automatische backup van zelf gehoste Gitea Repo’s en Registry
??? TODO ???
