• Voorbereiding van de workshop
• Aanpassing aan het niveau van de groep
• Workshopbronnen
• Voordat we beginnen - Wat hebben we nodig?
• Een smartphone
• Alternatieven
• Je telefoon terugzetten naar fabrieksinstellingen + Google’s FRP (optioneel)
• Smartphone instellen
• Workshop Kick-Off
• Teken het internet voor mij!
• De (echte) vorm van het internet
• Wat is een server?
• “Server” praten tegen mijn telefoon: de terminal
• WTF is een terminal?
• Termux installeren
• Mijn telefoon als webserver
• Een webserver installeren
• NGINX downloaden en uitvoeren
• Werkt mijn server?
• Een eigen webpagina
• Onze aangepaste webpagina
• Waar staat mijn server?
• Wat is een IP-adres?
• Lokaal versus wereldwijd netwerk
• Het lokale netwerk verkennen
• Online gaan op het grote internet?
• Hoe zit het met de naam van mijn website?
• Oefening: Waar staat Wikipedia?
• URL - Het volledige adres van een webpagina
• Reverse-Proxy
• Configuraties voor reverse proxy’s
• Conclusie
• Verder gaan

Voorbereiding van de workshop

Ben je bezig met de voorbereiding van een workshop over mobiele webservers? Zo ja, dan vind je hieronder een aantal tips en trucs die tijdens eerdere workshops zijn verzameld. Om je zo goed mogelijk voor te bereiden op de workshop, raden wij je sterk aan om de tutorial van tevoren een paar keer door te nemen, bij voorkeur op verschillende Android-modellen. Op die manier zul je je meer op je gemak voelen bij het oplossen van problemen.

Aanpassing aan het niveau van de groep

Afhankelijk van het technologische kennisniveau van je deelnemers, kun je de workshop aanpassen om deze toegankelijker te maken. In plaats van dat iedereen een webserver op zijn of haar (oude) smartphone bouwt, kun je bijvoorbeeld groepen maken met deelnemers van verschillende niveaus, zodat ze elkaar kunnen helpen. Je kunt er ook voor kiezen om de server op slechts één telefoon te bouwen, vooral als je publiek niet vertrouwd is met touchscreens.

Ten slotte is er ook een webserver-app die kan worden gedownload via F-Droid en die ook html-bestanden kan weergeven. Hierdoor kun je zich meer concentreren op het theoretische gedeelte en het aanpassen van een HTML-bestand in plaats van de terminal. In dat geval is Termux niet nodig. Download IWS Lightweight webserver

Workshopbronnen

Naast de online tutorial op deze website hebben we verschillende aanvullende documenten voor de workshop opgesteld. Ten eerste is er een geannoteerde versie van de tutorial voor de facilitator om de workshop zo goed mogelijk te begeleiden:

• De geannoteerde presentatie, met de theoretische presentatie over internet, servers en de terminal (zie opmerkingen voor de facilitator).

• De geannoteerde tutorial, met praktische stapsgewijze instructies, inclusief tips en trucs, begeleiding van de workshop, pauzes, enz.

• De geannoteerde afdrukbare versie. De volledige tutorial in afdrukbare versie (`ctrl + P’ om af te drukken). Ten tweede is er een afdrukbare hand-out voor deelnemers, zodat ze geen aantekeningen hoeven te maken en in hun eigen tempo kunnen volgen.

Opbouw van de workshop

De workshop is bedoeld om door één of twee facilitators te worden gegeven aan een publiek van ongeveer 10 personen. De online tutorial kan op een beamer worden geprojecteerd, terwijl de deelnemers meekijken op hun telefoon en met hun eigen hand-outs. De facilitator(s) kunnen de geannoteerde versie op hun eigen laptop bewaren.

Benodigde materialen

• Oude Android-smartphones meegebracht door deelnemers
• Beamer/scherm
• Laptop voor facilitator Optioneel, maar beter:
• Externe toetsenborden met bluetooth, micro-USB- of USC-C-aansluiting, zoda je deze op je telefoon kunt aansluiten om gemakkelijker te kunnen typen.
• Een paar oude Android-telefoons waarop Termux en Nginx al zijn geïnstalleerd: in geval van problemen met de telefoon van een deelnemer, kunnen ze deze als back-up gebruiken.

Voordat we beginnen - Wat hebben we nodig?

Een smartphone

Deze tutorial is gemaakt voor Android smartphones en tablets van de laatste 10 yaar (2015-2025). Als je telefoon ouder is dan 10 jaar, geen Android telefoon is, of als je met een laptop werkt, kijk beneden voor de alternatieven.

Je kunt je dagelijkse telefoon gebruiken of een ouder apparaat dat met “pensioen” is. Het kan een beetje beschadigd zijn maar de volgende functies zijn nodig:

• Android 5 of hoger (Het liefst Android 7 of hoger) (kijk in Instellingen > Over dit Apparaat)
• De Wi-Fi werkt.
• De oplaadpoort werkt. 

Optioneel maar beter:

• Het touchscreen werkt, ook al is het misschien gebarsten. Als je geen werkend scherm hebt, bekijk dan deze oplossingen.
• De batterij werkt, of je hebt een externe batterij.

Alternatieven

iPhones en iPads

Termux — de app die we in deze tutorial gebruiken — is niet beschikbaar op iOS, maar er is een alternatieve app genaamd iSH beschikbaar op iOS 11 en @hoger. Er zijn online enkele tutorials over webservers beschikbaar (met iSH en python webserver).

PostMarketOS

Als je Android-telefoon gewoon te oud is, niet kan worden bijgewerkt of als je op zoek bent naar een andere (radicale) aanpak, kijk dan eens naar PostMarketOS.

PostMarketOS is een alternatief Linux-besturingssysteem dat gratis, open source en door de gemeenschap wordt onderhouden. Je kunt het installeren als vervanging voor Android en zo de levensduur van je telefoon verlengen tot voorbij de geprogrammeerde veroudering van de software (gebrek aan updates). Je kunt dan eenvoudig de webserversoftware van jouw keuze installeren door een Linux-webserverhandleiding te volgen.

meer informatie wordt hier later toegevoegd.

Laptops

Als je geen reserve-telefoon hebt, maar wel een reserve-laptop, kun je daar Linux op installeren en ook een webserver op draaien. Zoek naar een handleiding “nginx installeren op Linux”.

Je telefoon terugzetten naar fabrieksinstellingen + Google’s FRP (optioneel)

Deze stap is optioneel, maar het kan handig zijn om je telefoon op te schonen voordat je die als webserver gaat gebruiken. Zo krijg je meer opslagruimte en voorkom je dat andere apps te veel rekenkracht gebruiken.

Zoek hiervoor online naar apparaatmodel + fabrieksinstellingen herstellen. Je vindt dan instructies hoe je bij de opstartmodus van je smartphone komt, waar je telefoon wissen of fabrieksinstellingen herstellen kunt selecteren. Een goede website is Hard Reset.

Voordat je je telefoon reset:

• Maak een back-up van de inhoud die je wil bewaren, deze wordt namelijk gewist.
• Zorg ervoor dat je alle Google-accounts loskoppelt in Instellingen > Accounts. Anders loop je het risico dat de FRP-beveiliging van Google je vraagt om opnieuw in te loggen op het vorige Google-account, waardoor je telefoon (bijna) onbruikbaar wordt. Dit maakt het moeilijker om te beginnen met een telefoon die je hebt gekocht of van iemand anders hebt gekregen.

Smartphone instellen

Zorg ervoor dat je telefoon:

• Toegankelijk is (je hebt het wachtwoord)
• Verbonden is met internet via een wifi-netwerk
• Is uitgerust met een webbrowser (bijvoorbeeld Mozilla Firefox of Chromium).

Workshop Kick-Off

Teken het internet voor mij!

We beginnen de workshop met een korte gezamenlijke oefening: “Teken het internet voor mij”.

• (5 min) We vragen de deelnemers om in 3 minuten snel op een stuk papier te tekenen hoe zij denken dat het internet eruitziet. Het idee is om snel te werken en hun eerste indruk vast te leggen, ook al weten ze het niet of zijn ze bang om het verkeerd te doen.

• (10 min) Daarna maken we een korte ronde waarin iedereen laat zien wat hij of zij heeft getekend, terwijl de workshopbegeleider de woorden/ideeën die vaak terugkomen op een whiteboard/papier noteert (bijv. cloud, server, Instagram, Meta, computer, netwerk, enz.).

Als we klaar zijn, neemt de begeleider de tijd om de vorm van het internet uit te leggen met een presentatie (zie: De echte vorm van het internet).

De (echte) vorm van het internet

De volgende reeks afbeeldingen geeft een introductie van hoe het internet er werkelijk uitziet, buiten de gebruikelijke diagrammen en pictogrammen die we vaak zien.

Een kunstenaar genaamd Noah Veltman vat dit heel goed samen in deze tekeningencollectie: internet is blijkbaar een ‘boon’ of een “wolk”. Maar hoewel het internet een netwerk is (dat klopt), is het zeker niet “licht” of “schoon”, maar eerder zwaar en vies. Laten we eens kijken waarom.

Hoe het web er echt uitziet: A/ Abstract gezien – zoals in deze illustratie – is het een netwerk van computernetwerken. Verschillende soorten computers: 1-Servers, om inhoud te leveren 2-Cliënten: computers die inhoud ophalen (telefoons, laptops, spelconsoles, tv's, maar ook bankkaartmachines, slimme koelkasten, bewakingscamera's, verkeersradars, enz.) 3-DNS (ook bekend als domeinnaamservers): om cliënten naar servers te leiden, maar ook switches, uitwisselingspunten, enz. 4-Alle infrastructuren die deze verbindingen ondersteunen: elektriciteitscentrales, kabels, antennes, enz.

Al deze infrastructuren: ze zijn heel tastbaar en bevinden zich om ons heen. De meeste van deze computers/servers staan in datacenters. Datacenters zijn gebouwen waarin computers staan, uitgerust met koelsystemen, energiesystemen, enz.

Deze datacenters zijn niet alleen in de VS te vinden. Ze zijn overal en worden steeds talrijker, vooral nu AI zo belangrijk wordt. De afbeelding hierboven is afkomstig uit het datacentercluster ten noorden van Amsterdam, in Agriport. Buren van industriële boerderijen, waar het hele jaar door tomaten en paprika's worden geproduceerd.  Datacenters zijn net zo groot en invloedrijk als elke andere fabriek.

Binnen: ziet er zo uit: rack servers (planken vol computers), allemaal met elkaar verbonden om hun kracht/snelheid te vergroten. Die rekenprocessen produceren veel warmte.

Al deze computers in datacenters moeten worden aangesloten op onze apparaten thuis/op kantoor. Internet bestaat ook uit een heleboel enorme kabels die het mogelijk maken om gegevens met de snelheid van het licht onder de oceaan te versturen.

Deze kabels bevinden zich ook in onze steden. Dit is een internetknooppuntkast in Parijs, Frankrijk. Elke kabel komt overeen met 1 router, waarschijnlijk elk in een appartement. Bedenk eens hoeveel er alleen al in jouw straat/buurt zijn. Als je het zo bekijkt, lijkt het internet ineens ook heel kwetsbaar.

Internet bestaat ook uit een heleboel satellieten en antennes om overal verbindingen mogelijk te maken, met alle soorten apparaten. Deze infrastructuur groeit ook met de opkomst van draadloze apparaten (autonome auto's, slimme CCTV, enz.). Afbeelding: 5G-antenne in Keulen, Duitsland.

Hoewel internet voor ons in het mondiale noorden er grotendeels uitziet zoals op de vorige afbeeldingen, is dat niet overal hetzelfde. In Cuba is internet nog steeds niet altijd beschikbaar, wordt het streng gecensureerd en is de bandbreedte laag. Er zijn veel zelfgemaakte verbindingen en doe-het-zelfantennes, zoals de stroommeters op de foto hierboven.

Al deze datacenters, satellieten, antennes, uitwisselingspunten, telefoons, laptops en andere apparaten moeten worden gevoed met echte (niet virtuele) energie. Soms zijn dat windturbines zoals in Agriport (hoewel deze groene energiebron wordt gemonopoliseerd, waardoor nabijgelegen dorpen ervan worden beroofd). Soms wordt het rechtstreeks aangedreven door fossiele brandstoffen: kolencentrales, enz. In elk geval: het is een enorme en groeiende voetafdruk van energieverbruik. Vooral omdat het altijd AAN staat!

Last but not least, laten we niet vergeten: Al die computers, kabels, antennes, enz. zijn gemaakt van zeer fysieke materialen. Materialen die moeilijk te verkrijgen zijn, zoals metalen die we overal ter wereld winnen, vaak met schending van de mensenrechten (zoals in Congo, zie afbeelding, maar ook in Chili, Australië en Indonesië) en met enorme vervuiling tot gevolg.

Nu we een beter beeld hebben van de verschillende soorten infrastructuur waaruit het internet bestaat, vragen we ons af: wat is een server precies?

Wat is een server?

Nu we een beetje hebben gezien waaruit het internet bestaat, gaan we inzoomen op het onderdeel dat ons vandaag interesseert: servers

“We hebben het woord ‘server’ gehoord in de bovenstaande presentatie, maar wat is volgens jou een server, in je eigen woorden?”

Het internet bestaat uit computers met verschillende vormen en functies. Materieel gezien zijn servers meestal computers die op rekken staan, zonder schermen, en met kabels zijn verbonden met andere computers. In deze afbeelding is elk “rek” een server.

In wezen is een server gewoon een computer die is geconfigureerd om met andere computers te communiceren. Hij hoeft niet per se in een datacenter te staan, dat is vooral om redenen van snelheid en energie-efficiëntie. Vroeger hadden de meeste bedrijven en universiteiten hun eigen servers in hun IT-afdeling, waarop hun eigen software draaide. Ze hadden ook een intranet voor het beheer van hun professionele bestanden (een lokaal netwerk).

Kunnen we iets soortgelijks doen om zelf tekst en afbeeldingen te hosten? Ja, met onze telefoons: in wezen een gratis, krachtige, batterijgeoptimaliseerde computer. Dat is wat we nu gaan doen!

“Server” praten tegen mijn telefoon: de terminal

Om onze telefoon in een server te veranderen (dat wil zeggen een computer die informatie kan terugsturen wanneer daarom wordt gevraagd), moeten we een aantal apps installeren. De belangrijkste app heet Termux. Je kunt de technische documentatie ervan raadplegen op deze wiki. Termux is een terminalemulator en een verzameling pakketten. Met deze app kunnen we directe opdrachten geven aan de computer (of telefoon) en andere software (stukjes code verpakt in mappen) downloaden.

In dit deel leggen we uit wat een opdrachtregelinterface (terminal) is en downloaden we Termux.

WTF is een terminal?

Dit theoretische deel (hieronder) kan parallel aan het downloaden van Termux worden gedaan (zie volgende stap). Bijvoorbeeld terwijl we wachten tot de APK (installatiebestand) is gedownload. In dat geval kun je misschien wat sneller werken en enkele afbeeldingen overslaan.

Voordat we verdergaan met de instructies voor het downloaden van Termux, nemen we even de tijd om te begrijpen wat we aan het doen zijn. Zoals we al zeiden, is Termux een terminalemulator, maar wat is een terminal eigenlijk?

Een CLI, Command Line Interface, ook wel terminal genoemd, is een manier om met de computer te communiceren met behulp van tekst, in plaats van knoppen of spraak. Het werkt als volgt:

1. Een gebruiker typt een opdrachtregel met zijn toetsenbord en drukt op Enter
2. De computer antwoordt met een andere regel die overeenkomt met de opdracht: een taak uitvoeren, informatie verstrekken, een pakket (pkg) downloaden Bijvoorbeeld:

pkg update 
...
[Pakket installeren......99%]
Pakket succesvol bijgewerkt.

Elke computer is toegankelijk via de CLI in plaats van de meer bekende GUI, de Grafische User Interface die we gewend zijn, met knoppen, afbeeldingen, een muis, een touchscreen, enz. Op Linux en MacOS kunnen we de standaard Terminal-app gebruiken, op Windows is er Windows Powershell of PUTTY.

De “command prompt” is ook de manier waarop we communiceren met computers die geen scherm hebben en/of ver weg staan, zoals servers!

Vóór de democratisering van thuiscomputers en de daaropvolgende uitvinding van de grafische interface werden alle taken op de computer uitgevoerd via tekstopdrachten. Het klikken op knoppen, menu’s en mappen is eigenlijk slechts een “gebruiksvriendelijke” laag die verbergt wat er werkelijk gebeurt. Elke “klik/tik” activeert ook een opdracht of een reeks opdrachten aan de computer, maar we zien de tekst niet meer.

Termux is ook een opdrachtregelinterface, maar dan voor Android-telefoons. Omdat we onze telefoon willen omvormen tot een server, wat niet de hoofdfunctie ervan is, moeten we dit rechtstreeks doen door een opdracht in een terminalvenster te typen. Daarom installeren we Termux.

Termux installeren

    Dit is het praktische gedeelte. Afhankelijk van hun technologische vaardigheden moeten alle deelnemers/groepen deelnemers hun eigen Android-smartphone hebben om de instructies te kunnen volgen. Ze moeten verbonden zijn met wifi. Het is gemakkelijker als ze de volgende QR-code kunnen scannen/de url kunnen intypen om toegang te krijgen tot de pagina. Op die manier kunnen ze ook enkele commando's kopiëren en plakken en de links volgen.

Wat is mijn Android-versie?

Om de juiste versie van Termux te installeren, willen we eerst de Android-versie van onze telefoon bepalen (het besturingssysteem waarop een smartphone draait).

1. Ga naar de instellingen van je telefoon, scroll helemaal naar beneden en kijk bij Over de telefoon.
2. Je zou een regel met de Android-versie moeten vinden.

Ga naar F-DROID

We downloaden Termux via F-Droid. F-Droid is een app store met alleen open-source apps. Dat betekent dat hun code voor iedereen zichtbaar is, zodat er geen verborgen trackers zijn die je gegevens verzamelen.

1. Ga naar Termux | F-Droid - Gratis en open source Android-app-repository of download F-droid en download de app vervolgens vanaf daar.

2. Scroll helemaal naar beneden: download de stabiele (aanbevolen) versie (niet de bètaversie) door Download APK te selecteren. !!! waarschuwing “Android 5 of 6” Als je telefoon op Android 5 of 6 draait, download dan het universele pakket van hier (selecteer [termux-app_v0.119.0-beta.3+apt-android-5-github-debug_universal.apk] (https://github.com/termux/termux-app/releases/download/v0.119.0-beta.3/termux-app_v0.119.0-beta.3+apt-android-5-github-debug_universal.apk))

3. Tik na het downloaden op de APK op uw apparaat. Als u het niet kunt vinden, ga dan naar uw Bestanden-app, onder Downloads.

4. Klik op ‘Installeren’ en accepteer.
5. Tik op installatie van apps van onbekende bronnen toestaan (u hebt dit later nodig) of ga naar de instellingen van de telefoon om apps van derden te kunnen starten en ga terug.
6. Na de installatie ziet u de Termux-launcher op uw startscherm en in uw App-bibliotheek.

Termux API installeren (optioneel)

Voor meer geavanceerde toepassingen werkt Termux het beste in combinatie met zijn zusterapp, Termux API. Met Termux API kunt u enkele hardwarefuncties van de telefoon bedienen, zoals trillen, de camera, enz. De documentatie vindt u hier.

Als u Termux API wilt installeren, volgt u de instructies hier voordat u doorgaat naar de volgende stap.

Laatste configuratie

Voordat we commando’s kunnen geven aan onze telefoon via de Termux Terminal, maken we een laatste configuratie voor opslag. Het instellen van Termux-opslag helpt u uw bestanden en mappen bij te houden (meer informatie hier).

1. Zorg ervoor dat alles up-to-date is (pakketupdate en pakketupgrade)

pkg update && pkg upgrade -y

2. Sla opslag op:

termux-setup-storage -y

3. Geef Termux toegang tot de opslag van de telefoon, foto’s, enz.

Mijn telefoon als webserver

Een webserver installeren

Nu Termux is geïnstalleerd, kunnen we instructies/opdrachten geven aan onze telefoon buiten de bestaande apps om. Om een server te maken, hebben we webserver-software nodig, een pakket code dat verzoeken van clients (andere computers) kan ontvangen en webcontent kan terugsturen. We gebruiken NGINX {‘Engine X’}, dat veel wordt gebruikt.

NGINX downloaden en uitvoeren

Open Termux op je telefoon, typ + voer het volgende in en wacht:

1. Installeer nginx

pkg install nginx -y

2. Start NGINX op met dit commando.

nginx

Hoewel er niets op je telefoon verschijnt (behalve als je een foutmelding krijgt), zou je server nu op de achtergrond moeten draaien!

Werkt mijn server?

Om te controleren of je server draait, open je je browserapp en typ je het volgende in de zoekbalk: <http://localhost:8080> en druk je op Enter. Je zou de standaardpagina van NGINX moeten zien verschijnen met de tekst “Welcome to nginx!”

Laten we nu deze standaardwebpagina aanpassen.

• Ik heb https gebruikt in plaats van http
• http://127.0.0.1:8080 werkt ook!

Een eigen webpagina

Nu onze server live is, gaan we eens kijken wat we zien. Wanneer we een website openen in de browser, halen we eigenlijk een bestand op uit de map van de webserver op die computer.

In wezen is een website gewoon een map met verschillende bestandstypen op een externe computer.

Meestal heet het hoofdbestand van een webpagina index.html. index omdat het een lijst is van alle inhoud van de pagina, maar ook van alle externe bronnen die nodig zijn om de pagina weer te geven, zoals afbeeldingen, video’s, lettertypen, enz. HTML (Hypertext Mark-up Language) is de programmeertaal die wordt gebruikt voor webpagina’s en het belangrijkste bestandsformaat. Er zijn ook andere talen:

• HTML is bedoeld om inhoud te structureren en een hiërarchie aan te brengen.
• CSS is voor stijlen: de lay-out van onze webpagina (kleur, grootte, kolommen maken, enz.).
• Javascript (.js) is voor interactiviteit: knoppen animeren en omschakelen, dropdown, externe inhoud ophalen, enz.

Onze aangepaste webpagina

Onze webpagina vinden

Laten we onze webpagina op onze telefoon zoeken. We navigeren door mappen met behulp van Termux. We gebruiken het commando cd pad/naar/map/ om naar onze websitemap te gaan, die door onze webserver is aangemaakt. cd staat voor “change directory” (directory is een ander woord voor map).

1. Typ + enter

cd $PREFIX/share/nginx/html  

2. Nu wil je weergeven wat er in deze map staat, met behulp van ls, wat staat voor “list”.

ls

3. U zou 2 bestanden moeten zien: index.html en 50x.html. index.html is de hoofdpagina, terwijl 50x.html wordt weergegeven als er een specifieke fout is.

Onze webpagina bekijken.

index.html is de webpagina die we in de browser van onze telefoon zien. Laten we deze openen.

1. We gebruiken het commando nano bestandsnaam.extensie. “nano” is een zeer eenvoudige teksteditor in de terminal.

nano index.html

2. We hebben het html-bestand in de terminal geopend. Dit is vergelijkbaar met het openen van een .docx-bestand in Office.

   <!DOCTYPE html>
   <html>
   <head>
   <title>Welkom bij nginx!</title>
   <style>
   html { color: dark; }
   body { width: 35em; margin: 0 auto;
   font-family: Tahoma, Verdana, Arial, sans-serif; }
   </style>
   </head>
   <body>
      <h1>Welkom bij nginx!</h1>
      <p>Als u deze pagina ziet, is de nginx-webserver succesvol geïnstalleerd en
      werkt deze. Verdere configuratie is vereist.</p>

      <p>Raadpleeg voor online documentatie en ondersteuning
          <a href="http://nginx.org/">nginx.org</a>.<br/>
      Commerciële ondersteuning is beschikbaar op
          <a href="http://nginx.com/">nginx.com</a>.</p>
   </body>
   </html>

HTML structureert informatie met verschillende waarden binnen “elementen” die worden omgeven door <tags>: de openingstag <p> en de sluitingstag </p>. Hier zien we verschillende elementen die we terugvinden op de weergegeven browserpagina. Binnen het <body>-element bevindt zich een <h1>-tag met een koptekst, enkele <p>-alinea’s en enkele <a>-links.

Binnen de <head> vinden we informatie over de pagina, maar dat is niet de inhoud:

• <title>...de titel hier...</title>: is de titel die in het browsertabblad wordt weergegeven.
• <style>color: blue;<style> is waar we CSS-code plaatsen om informatie te geven over de lay-out, kleur, enz.

Onze webpagina bewerken.

Laten we wat tekst op de pagina veranderen.

1. Gebruik de pijltjes < > in nano om te navigeren en wat tekst te veranderen.

<h1>Deze webpagina staat op de telefoon van mijn oude vader</h1>
   <p>Als je deze pagina ziet, ben je OP MIJN TELEFOON!</p>

2. Wijzig de tekstkleur in <style>

<style>
html { color: orange; 
background: limegreen;
}
</style>

Opslaan, afsluiten en opnieuw laden

Laten we nu opslaan en onze update bekijken:

1. Druk op CTRL en typ x op het toetsenbord van Termux.
2. Je krijgt de vraag “Save modified buffer? [Y/n]” (Gewijzigde buffer opslaan? [J/n])
3. Typ y voor ja en druk op enter. (Typ no om af te sluiten zonder op te slaan).
4. Ga naar je browser en vernieuw de pagina [http://localhost:8080/index.html].

Oké, geweldig! Maar dat is niet zo spannend, toch? Ik kan mijn webpagina bekijken op mijn eigen webserver. Ik zou dat bestand ook gewoon in de bestandsbeheerder kunnen openen, daar heb ik geen internet voor nodig. Eigenlijk is uw webpagina al toegankelijk voor andere clients (andere computers), u hoeft hen alleen uw IP-adres te geven.

Waar staat mijn server?

Voordat we daadwerkelijk webpagina’s van andere deelnemers bezoeken, introduceren we het concept van het IP-adres door een vergelijking te maken tussen een IP-adres/webadres en een straatadres. Dit helpt om de fysieke aard van het web te benadrukken: websites staan op servers die zich ergens in een gebouw in de fysieke wereld bevinden.

Wat is een IP-adres?

IP-adres staat voor Internet Protocol-adres, de communicatiemethode die door alle soorten computers/servers op het internet wordt gebruikt (webservers, e-mails, bestandsoverdrachten, enz.). Aangezien het internet een enorm netwerk van computers is, hebben we een unieke manier nodig om elke server te identificeren, zodat we verzoeken naar de server kunnen sturen en de server informatie terug kan sturen naar het juiste apparaat.

Zie het als een straatadres: elk IP-adres is uniek en geeft aan waar die server zich bevindt en hoe je daar kunt komen.

Traditioneel bestaan IP-adressen uit een reeks van vier sets getallen (0 tot 255) gescheiden door een punt. Daarom zijn er adressen variërend van 0.0.0.0 tot 255.255.255.255, dat zijn meer dan 4,3 miljard unieke adressen! Door de exponentiële toename van het aantal apparaten dat online is aangesloten, raken we echter bijna door onze adressen heen. Daarom gebruiken sommige apparaten nu een nieuw, langer IP-adresformaat, IPv6 genaamd (dat er zo uitziet: 2600:1f1c:446:4900::259).

Lokaal versus wereldwijd netwerk

Terugkomend op de tutorial, gaan we het IP-adres van elke telefoon achterhalen, maar eerst moeten we weten wat een privé-IP-adres is en wat een openbaar IP-adres is.

Wat is het IP-adres van mijn server?

In Termux is er een commando om het huidige IP-adres van mijn apparaat te bepalen. We gebruiken het commando ifconfig om de bereikbaarheid van een server te testen. 1. Typ en voer in:

curl ifconfig.me

2. We krijgen iets als dit:

200.300.304.304

Door iedereen te vragen dit IP-adres op te schrijven en voor te lezen, zien we dat iedereen hetzelfde adres heeft. We leggen uit waarom (hieronder): Nu zou elke telefoon die met dezelfde wifi is verbonden hetzelfde adres moeten krijgen. Waarom is dat zo? Dit is eigenlijk het openbare IP-adres van de wifi-router, het unieke adres dat de router gebruikt om toegang te krijgen tot het internet. Alle verzoeken die we (via het internet) naar externe servers sturen, gaan via onze wifi-router, die de toegangspoort is tot het grote internet, het wereldwijde netwerk. Alle apparaten die via wifi of kabel met de router zijn verbonden, vormen echter ook een netwerk: het lokale netwerk. Als je multiplayer-videogames in LAN (Local Area Network) hebt gespeeld, bijvoorbeeld met een Minecraft-server met je vrienden thuis, is dit je wellicht bekend. Via dit lokale netwerk kunnen we ook op afstand met onze printer communiceren, terwijl we met hetzelfde wifi-netwerk zijn verbonden. In dit lokale netwerk heeft elk aangesloten apparaat ook een uniek IP-adres, zodat de router weet wie verzoeken verstuurt (naar het internet of naar andere apparaten) en het verkeer kan sturen. Dit lokale IP-adres wordt het privé-IP-adres* genoemd. Kort gezegd is het openbare IP-adres het adres van onze router wanneer deze op het internet surft, terwijl een privé-IP-adres** het lokale adres is van elk apparaat in ons thuisnetwerk.

Wat is het privé-IP-adres van mijn telefoon?

In de terminal gebruiken we ifconfig om het privé-adres van ons apparaat te achterhalen: 1. Typ en druk op Enter:

ifconfig

2. In de uitvoer zoeken we naar de regel die begint met wlan0....inet, dit heeft betrekking op de wifi-interface. Na inet staat een IP-adres dat er als volgt uitziet:

192.168.1.255 

3. Noteer dit adres. Dit is het IP-adres van uw apparaat zolang u verbonden blijft. (Het kan veranderen als u de verbinding verbreekt en vervolgens opnieuw verbinding maakt).

Het lokale netwerk verkennen

Nu we het lokale (privé) IP-adres van onze webserver kennen (waar onze server zich bevindt), kunnen we andere apparaten op het netwerk onze webpagina laten bezoeken!

Nu kunnen we de aangepaste webpagina van elke deelnemer bezoeken. Met een laptop die is verbonden met wifi en een beamer kunnen we elke deelnemer om zijn of haar “adres” (IP-adres) vragen, dit invoeren en aan iedereen laten zien! 1. Gebruik een ander apparaat dan uw telefoonserver om de servers van uw telefoon via het lokale netwerk te bezoeken. 2. Typ in de browser + enter: http:// + 192.168.XX.XX+ :8080 3. Zorg ervoor dat u http:// gebruikt en niet https:// (we hebben nog geen secure SSL-certificaat). 4. U kunt nu uw aangepaste webpagina bekijken.

We kunnen nu nauwkeuriger uitleggen wat er gebeurt. Onze client (telefoon of laptop) vraagt de index.html op bij een bepaald adres. De router stuurt dit verzoek door naar de telefoonserver (met zijn lokale IP). De server “serveert” het index.html-bestand.

Online gaan op het grote internet?

Hoewel een lokaal netwerk al potentieel heeft, is het uiteindelijke (althans het oorspronkelijke) doel van het internet om afgelegen plaatsen met elkaar te verbinden en gebruikers toegang te geven tot informatie over de hele wereld.

Er zijn verschillende manieren om een lokale server via het internet open te stellen voor het publiek. In wezen komt het erop neer dat je aan andere servers uitlegt op welk openbaar IP-adres je website te vinden is, zodat bezoekers daar naartoe kunnen worden geleid.

Hoe zit het met de naam van mijn website?

Wacht even! Als ik online ga, gebruik ik nooit een IP-adres. Ik typ gewoon een adres in de zoekbalk of zoek het op met een zoekmachine. Omdat IP-adressen moeilijk te onthouden en te wijzigen zijn (om veiligheidsredenen of omdat een site van de ene server naar de andere verhuist), gebruiken we domeinnamen in webadressen.

Een domeinnaam bestaat uit ten minste twee delen: de domeinnaam, zoals Wikipedia, en de extensie, zoals .org, of (.com, .net, .nl, .fr, enz.). Soms is er ook een subdomein, zoals in of . Een subdomein verwijst meestal naar een onderdeel van een website.

Oefening: IP-adres van bekende websites

In de terminal (Termux) kunnen we een eenvoudig commando gebruiken om het IP-adres van een website (de server) te achterhalen. We gebruiken het commando ping om de bereikbaarheid van een server te testen.

1. Typ en druk op Enter:

ping wikipedia.org 

2. Als we online zijn, zouden we nu binnen enkele milliseconden informatie terug moeten krijgen! We zien ook het IP-adres van wikipedia.org, dus 185.15.58.224 (de laatste keer dat we dit controleerden). Als u dit IP-adres in uw browser invoert, komt u ook op Wikipedia terecht: http://185.15.58.224

3. Om ping af te sluiten, drukt u op CTRL en c op het toetsenbord.

Oefening: Waar staat Wikipedia?

Met behulp van een dienst als IP-location kunnen we een IP-adres koppelen aan een locatie en zien waar bekende websites hun servers hebben staan.

1. Ga naar IP-location
2. Typ een IP-adres in (zoals 185.15.58.224 voor Wikipedia)
3. Kijk op de kaart waar het zich bevindt :)

URL - Het volledige adres van een webpagina

Een url is de naam van het volledige webadres. Het bestaat uit 3 delen. We hebben bijvoorbeeld https://en.wikipedia.org/wiki/Internet/index.html

• https:// is het communicatieprotocol van het web (webpagina’s op websites, op webservers)
• en.wikipedia.org is het domein en subdomein
• /wiki/Internet/ is het pad, de mappen en submappen die we moeten doorlopen om bij de locatie te komen waar ons bestand zich bevindt.
• index.html is het bestand dat we opvragen, het bestand dat de inhoud van deze pagina bevat en de lijst met alle bronnen die nodig zijn om deze pagina weer te geven (lettertypen, afbeeldingen, stylesheets, databases, enz.). Standaard is dit index.html, dus u hoeft dit niet te schrijven.

!!! opmerking “http VS http’s protocol” http:// staat voor het communicatieprotocol dat we gebruiken. http of (https) is het protocol voor het browsen op websites, terwijl SMTP bedoeld is voor het verzenden van e-mails, enz. :8080 is onze poort, de “plaats” die we proberen te bereiken op onze server. Als ons IP-adres het adres van ons servergebouw was, zou de poort de verdieping zijn waar “NGINX” zijn kantoor heeft.

Er zijn verschillende manieren om “openbaar” te gaan: door een vast openbaar IP-adres te gebruiken en de poorten open te stellen voor het publiek (poortdoorsturing), door een dynamische DNS-tool te gebruiken of door een reverse proxyserver te gebruiken.

Reverse-Proxy

We gaan een reverse proxy gebruiken. Een reverse proxy is een tussenliggende server die al openbaar is en fungeert als tussenpersoon tussen onze lokale webserver en potentiële klanten (andere apparaten).

In deze tutorial gebruiken we de reverse proxy-server van comphost.club in Nederland, zodat we dit enigszins lokaal kunnen houden.

Aan de hand van bovenstaande afbeelding kunnen we uitleggen hoe onze reverse proxy werkt. 1. We maken een “tunnel”-verbinding tussen onze server-telefoon en de proxyserver. 2. Een klant probeert een verbinding te maken en wordt via de DNS (3-4) doorgestuurd naar het IP-adres van de proxyserver. 5. De proxyserver geeft de verbinding door aan de server en stuurt vervolgens het antwoord door naar de klant (6). Dit is vergelijkbaar met hoe een VPN werkt, maar dan zonder de versleuteling.

Configuraties voor reverse proxy’s

Hieronder worden verschillende manieren beschreven om een reverse proxy te maken:

1. SirTunnel gebruiken op comphost.club, onze zelfgehoste methode.
2. Localhost.run gebruiken, een freemium online tool waarvoor geen registratie nodig is.
3. Met behulp van Ngrok, een freemium en krachtige tool waarvoor registratie vereist is.

Er zijn veel (commerciële) reverse proxy-tools, waarvan er een aantal worden vermeld in deze uitgebreide lijst.

1. SirTunnel op comphost.club

Comphost.club draait de reverse-proxy-software SirTunnel, die werkt met het communicatieprotocol SSH.

!!! protip “SSH-protocol” Het Secure Shell Protocol (SSH) wordt doorgaans gebruikt om veilig in te loggen op de command-line interface (CLI) van een externe computer en om opdrachten uit te voeren op een externe server. We kunnen ssh ook gebruiken om onze telefoon op afstand te bedienen via een laptop, zodat we gemakkelijker kunnen typen.

1. We installeren SSH-software op onze telefoon: OpenSSH:

pkg install openssh -y

2. We passen onze eigen SirTunnel-opdracht aan op basis van het volgende:

ssh -tR XXXX:localhost:8080 comphost@comphost.club ./sirtunnel.py xx-my-subdomain-name-xx.comphost.club XXXX

3. We vervangen XXXX door een uniek poortnummer (elke deelnemer moet zijn eigen nummer hebben), bijvoorbeeld 4567

4. We vervangen xx-my-subdomain-name-xx door een origineel subdomeinadres, bijvoorbeeld brokensamsung

5. Typ + voer de aangepaste opdracht in Termux in:

ssh -tR 4567:localhost:8080 comphost@comphost.club ./sirtunnel.py brokensamsung.comphost.club 4567

6. Als je voor het eerst verbinding maakt, bevestig dan de authenticiteit van de host door “yes” te typen en op Enter te drukken.

7. Voer het wachtwoord in en druk op Enter.

8. Andere apparaten kunnen nu uw webpagina bezoeken op brokensamsung.comphost.club

Alle mobiele servers die momenteel actief zijn, staan vermeld op de indexpagina van comphost.club.

localhost.run gebruiken

1. Typ in Termux het volgende en druk op Enter:

ssh -R 80:localhost:8080 localhost.run

2. Typ yes + enter om verbinding te maken.

3. U krijgt een tijdelijke domeinnaam die er ongeveer zo uitziet: https://46dd096d0d85c2.lhr.life. Als u een aangepast domein wilt toevoegen, moet u betalen.

ngrok gebruiken

Ngrok is een Amerikaanse commerciële reverse proxy-tool, dus u moet deze installeren en een account aanmaken.

1. Installeer ngrok in Termux, typ elke opdracht, druk op enter en ga verder

pkg update -y
pkg install git -y
git clone https://github.com/Yisus7u7/termux-ngrok
cd termux-ngrok
bash install.sh

2. Meld u aan bij ngrok:

• Ga naar
• Meld u aan en verifieer uw e-mailadres.

3. Kopieer uw auth-token in het relevante gedeelte en voeg het toe aan de configuratie: - Voer de volgende opdracht in en vervang [auth-token] door het auth-token dat u zojuist hebt gekopieerd en geplakt.

ngrok config add-authtoken [auth-token]

4. Kopieer en plak de opdracht onder statisch domein en verander poort 80 in poort 8080

ngrok http --url=gorilla-champion-tomcat.ngrok-free.app 8080

Controleer de ngrok-configuratie en betaalde abonnementen voor meer geavanceerde configuratie. Bijvoorbeeld om een aangepast domein in te stellen.

Conclusie

De tutorial over mobiele webservers eindigt hier! Bedankt voor het volgen. Als je feedback of vragen hebt, aarzel dan niet om contact op te nemen (zie de pagina Over voor contactgegevens).

Verder gaan

Er zijn aanvullende bronnen te vinden in de sectie Verder gaan. Je kunt ook de Git-repository van Comphost raadplegen voor extra code en voorbeelden.

We zullen enkele updates plaatsen naarmate we de documentatie verder ontwikkelen.