Installera en egen webbserver för utveckling
Se till att du har en egen lokal utvecklingsmiljö för dina webbsidor. I dbwebb-kurserna så använder vi alltid en driftsserver dit vi laddar upp resultatet när vi är klara. Men det underlättar om man har en egen utvecklingsmiljö så att man inte är beroende av studentservern.
#Förutsättning
Innan du börjar med denna artikel måste du ha klonat ditt kursrepo. De symboliska länkarna i slutet av artikeln förutsätter det. Läs i labbmiljön om kommandot dbwebb-cli och om hur du klonar ett kursrepo, innan du fortsätter med denna artikel.
#Webbserver Apache httpd med PHP och databas
Som rekommenderad miljö på Windows och Mac OS används XAMPP. På Linux kan du välja XAMPP eller hellre installera Apache och PHP med pakethanteraren.
Vi har valt att använda XAMPP eftersom den är open source och fungerar bra. XAMPP är lätt att installera och komma igång med och den har ett trevligt och enkelt gränssnitt. Dessutom finns den både till Windows, Mac OS och Linux.
#Videoserie
Det finns en videoserie som kompletterar denna artikel och vissa saker som händer efter denna artikeln, den kompletta videoserien kan nås på “Installera en egen webbserver (XAMPP) för utveckling (på Windows/Mac)”.
Ett par av dessa videor är även inkluderade i själva dokumentet nedan. Kika gärna i videorna om du får bekymmer, eller om du tycker det är lättare att följa dem.
#Kom igång med XAMPP
Följ mina steg för att komma igång.
#1. Installera
Gå till hemsidan för XAMPP och ladda ned det paketet du vill ha (Windows, Mac).
Kör en ren installation, se till att du är Administratör på din Windows-maskin (för att undvika problem).
När du väljer miljö på Mac så välj den som inte heter VM i namnet. VM står för virtual machine. Du kan läsa mer om detta i forumet.
#2. Konfigurera
Ändra så att Apache kör på 8080 (för att undvika problem när någon annan redan kör på port 80, typ Skype eller befintlig webserver).
I Mac klickar du på “Configure” och ändrar port i rutan som poppar upp.
I Windows är det lite krångligare, du gör så här.
1) Öppna Apaches konfigfil httpd.conf genom att klicka på knappen “Config” och väljer sedan “Apache (httpd.conf)” i den menyn som kommer upp.
Öppna konfigfilen till Apache.
2) En texteditor öppnar filen httpd.conf. Leta reda på raden som säger:
Listen 80
Ändra den raden så att Apache lyssnar på port 8080 istället för port 80.
Listen 8080
Byt port som Apache kör på för att undvika krockar med andra program.
Klart.
#3. Starta Apache
Starta Apache.
Starta Apache webbserver.
Apache har startat.
Nu snurrar Apache webbserver på din lokala maskin.
#4. Öppna webbläsaren mot Apache
Peka webbläsaren till http://localhost:8080/ eller http://127.0.0.1:8080 (kopiera in länkarna till din webbläsare).
Så här kan det se ut när XAMPPs standard hemsida visas.
XAMPPs hemsida på din lokala maskin visas.
#5. Skapa en webbsida
Xampp installeras i C:\xampp och webrooten ligger i C:\xampp\htdocs på Windows och i Mac OS gäller /Applications/XAMPP/htdocs.
Gör följande steg för att testa din installation genom att skapa en HTML-sida och en PHP-sida.
1) Skapa en katalog test i din htdocs-katalog (din webroot).
Katalogen test skapas i filväljaren.
2) Öppna samma katalog i din webbläsare. Länken dit är http://localhost:8080/test eller http://127.0.0.1:8080/test. Katalogen är tom för tillfället.
Katalogen test öppnad i webbläsaren via webbservern.
3) Skapa två filer i katalogen och döp dem till test.html (en HTML-sida) och test.php (en HTML -sida med PHP-kod).
Två filer skapade i katalogen test via filväljaren.
Kontrollera att du även ser filerna i din webbläsare genom att ladda om sidan (ctrl-r eller F5).
De nyskapade filerna är synliga via webbservern.
4) Öppna de båda filerna i din texteditor och lägg in följande kod i dem.
Kod till HTML-sidan test.html.
<!doctype html>
<meta charset="utf-8">
<title>My test page</title>
<h1>My nice test page for HTML</h1>
Filen test.html skapas i texteditorn.
Kod till PHP-sidan test.php.
<!doctype html>
<meta charset="utf-8">
<title>My test page</title>
<h1>My nice test page for PHP</h1>
<p>
<?php echo "Hello Wold from PHP!"; ?>
</p>
Filen test.php skapas i texteditorn.
5) Öppna de båda filerna i din webbläsare för att se hur de ser ut.
http://127.0.0.1:8080/test
Filerna ligger i katalogen och är synliga via webbläsaren.
http://127.0.0.1:8080/test/test.html
Visa filen test.html i webbläsaren.
http://127.0.0.1:8080/test/test.php
Visa filen test.php i webbläsaren.
Nu fungerar din installation av XAMPP tillsammans med HTML- och PHP-sidor.
#Länka från webbkatalogen till andra kataloger
I exemplet ovan sparade du alla webbfilerna direkt under webbserverns webbrot, den katalog som webbservern börjar leta i. Men hur gör du om du vill visa filer som till exempel ligger i din hemmakatalog under till exempel katalogen dbwebb-kurser?
Låt oss skapa en symbolisk länk från webbroten och pekar på en katalog under din hemmakatalog. Vi skapar en länk dbwebb som vi placerar i webbroten, och vi låter den peka till katalogen $HOME/dbwebb-kurser där $HOME representerar din hemmakatalog i Windows eller Mac.
När vi har lyckats med detta så kan du nå webbfilerna via xampp om du öppnar länken http://localhost:8080/dbwebb.
Följ nedan instruktioner för att skapa länken på Windows (WSL/Bash eller Cygwin) eller på Mac OS.
#Skapa länk på Windows (WSL/Bash)
Detta stycket gäller enbart om du har din katalog dbwebb-kurser i WSL/Bash. Detta är på Windows det rekommenderade sättet.
I Windows ligger din webbkatalog ofta under c:\xampp\htdocs. Du kan öppna en “Command Prompt” CMD terminal i Windows (som Administratör) och börja att flytta till den katalogen. Det är här vi skall skapa länken.
cd c:\xampp\htdocs dir dir dbwebb
För tillfället finns ingen länk till dbwebb i XAMPP katalogen.
Nu behöver vi ta reda på vilken katalog du har i WSL/Bash. Öppna din Bash-terminal och gå till din hemmakatalog. Starta sedan explorer.exe och se vilken katalog som applikationen upplever det som.
# I WSL/Bash gå till din hemmakatalog cd # Flytta till katalogen dbwebb-kurser cd dbwebb-kurser # Starta explorer mot nuvarande katalog som representeras av . explorer.exe .
Starta explorer.exe i katalogen dbwebb-kurser.
Markera sökvägen till katalogen och kopiera den.
Nu kan du i explorer markera och kopiera sökvägen till din hemmakatalog i WSL/Bash. I mitt fall var sökvägen följande.
# Path till min katalog \\wsl.localhost\Ubuntu-20.04\home\mos\dbwebb-kurser # Generell path in i en WSL instance \\host\instance\path
Du kan nu gå tillbaka till CMD och där skall vi nu skapa länken.
Skapa länken enligt nedan men byt sökvägen till katalogen till din egen som du fick via explorer ovan.
mklink /D .\dbwebb "sökvägen"
Så här blev det för mig.
mklink /D .\dbwebb "\\wsl.localhost\Ubuntu-20.04\home\mos\dbwebb-kurser"
Nu är länken skapad och vi kan se att den ligger i katalogen och innehållet i den katalog dit den pekar.
# Se alla filer som börjar på dbwebb i katalogen dir dbwebb* # Visa innehållet i den katalog dit symlänken pekar dir dbwebb
Så här kan det se ut när man gör det.
Skapa en symbolisk länk till en annan katalog i Windows.
Om något går fel så kan du radera den symboliska länken så här, och sedan starta om igen.
rmdir dbwebb
#Skapa länk på Windows (Cygwin)
Detta stycket gäller enbart om du har din katalog dbwebb-kurser någonstans i ditt windows filsystem, till exempel under din Windows hemmakatalog. Om du har terminalen Cygwin kan det vara bra att göra på detta sättet.
I Windows ligger din webbkatalog ofta under c:\xampp\htdocs. Du kan länka till en katalog med kommandot mklink i kommandoprompten. Öppna “Command Prompt” som administratör och kör följande kommando.
Börja med att gå till din webroot och kolla om du har någon fil som heter dbwebb där, troligen inte.
cd c:\xampp\htdocs dir dbwebb
Skapa länken.
mklink /D .\dbwebb "%USERPROFILE%\dbwebb-kurser"
Konstruktionen %USERPROFILE% motsvarar din hemmakatalog. Du kan även ange hela sökvägen till din hemmakatalog. I mitt fall hade det varit c:\Users\Mikael\dbwebb-kurser.
Nu är länken skapad och vi kan se att den ligger i katalogen och innehållet i den katalog dit den pekar.
# Se alla filer som börjar på dbwebb i katalogen dir dbwebb* # Visa innehållet i den katalog dit symlänken pekar dir dbwebb
Så här kan det se ut när man gör det.
Skapa en symbolisk länk till en annan katalog i Windows.
Om något går fel så kan du radera den symboliska länken så här, och sedan starta om igen.
rmdir dbwebb
#Skapa länk på Mac OS
I Mac OS heter kommandot ln och en vanlig plats för webbkatalogen är /Applications/XAMPP/htdocs. Öppna din terminal och skapa länken på följande sätt.
cd /Applications/XAMPP/htdocs ln -s $HOME/dbwebb-kurser dbwebb
Kontrollera länken och vart den pekar.
# Se detaljer om länken ls -l dbwebb # Se katalogen dit länken pekar ls -l dbwebb/
Blir något fel kan du ta bort länken och börja om.
rm dbwebb
Så kan du skapa länken och testa att den skapades.
Det kan hända att länken ser bra ut men du får problem när du visar den i webbläsaren, du får troligen en 403 som felmeddelande i webbläsaren. Det kan bero på rättigheter på katalogerna. Webbservern behöver ha rättigheter att läsa din katalog $HOME/dbwebb-kurser. Du kan lösa det så här.
chmod 755 $HOME chmod 755 $HOME/dbwebb-kurser
Prova nu att ladda om filen i webbläsaren och se om det löste problemet.
#Apache på Linux och andra plattformar?
Det finns många andra plattformar att köra webbserver med PHP och databas på. Använder du Linux kan du köra XAMPP eller installera Apache och PHP på egen hand med en pakethanterare.
#Revision history
- 2022-08-24: (H, mos) Lade till h3 och ny länk till wsl bash samt videor.
- 2022-08-17: (G, mos) Uppdaterade hur länkarna skapas.
- 2018-08-21: (F, mos) Information om Mac och inte VM.
- 2015-08-17: (E, mos) La till info om symboliska länkar.
- 2015-04-10: (D, mos) Tog bort referens till jEdit.
- 2015-01-21: (C, mos) Ändrade hur man byter port på Apache i Windows.
- 2014-09-15: (B, mos) Bytte till XAMPP och lade hit instruktionen från forumtråd.
- 2012-08-29: (A, mos) Första versionen, flyttad från annat dokument och uppdaterad.
