• 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

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.