Miljö

WSL Docker DDEV

Del 1: Översikt – Hur hänger allt ihop?

Innan vi börjar klicka och skriva kommandon är det viktigt att förstå varför vi gör detta och vad de olika delarna faktiskt gör.

  • WSL 2 (Windows Subsystem for Linux): Tänk dig detta som en "dator i datorn". Eftersom nästan alla webbservrar i världen körs på operativsystemet Linux, ger WSL oss en riktig Linux-miljö (Ubuntu) direkt inuti Windows. Vi kommer att skriva de flesta av våra kommandon här.

  • Docker Desktop: Det här är motorn. Docker låter oss köra "containrar" – små, isolerade, virtuella minidatorer som innehåller exakt det vi behöver för ett projekt (t.ex. en webbserver och en databas).

  • DDEV: Docker är kraftfullt men kan vara krångligt att konfigurera från grunden. DDEV är vår assistent. Vi säger till DDEV: "Ge mig en standardmiljö för webbutveckling", och DDEV pratar med Docker för att sätta upp allt åt oss på några sekunder.

Del 2: Steg-för-steg-guide

Steg 1: Installera WSL 2 och Ubuntu

Detta steg aktiverar Linux-motorn i Windows och installerar operativsystemet Ubuntu.

Öppna PowerShell som administratör:

  • Klicka på Windows-startmenyn och skriv PowerShell.

Viktigt: Vänsterklicka inte direkt! Högerklicka på "Windows PowerShell" och välj Kör som administratör.

  • Klicka "Ja" om Windows frågar om du vill tillåta att appen gör ändringar.

Kör installationskommandot:

  • I den blå rutan som dyker upp, skriv in följande exakt och tryck Enter:

wsl --install

Vad händer nu? Datorn laddar automatiskt ner WSL-kärnan, aktiverar nödvändiga Windows-funktioner och laddar ner Ubuntu. Detta tar några minuter.

Starta om datorn:

  • När kommandot har jobbat klart kommer det stå att datorn måste startas om. Gör det direkt.

Steg 2: Konfigurera Ubuntu (Efter omstart)

När datorn har startat om igen fortsätter processen.

  • Vänta på terminalen: * Någon minut efter att du loggat in i Windows bör en svart terminalruta märkt "Ubuntu" öppnas helt av sig själv. (Om den inte gör det, sök på "Ubuntu" i startmenyn och öppna den).

  • Den kommer att stå och "packa upp" filerna en liten stund.

Skapa en Linux-användare:

  • Den kommer att be dig om ett UNIX username. Skriv ett enkelt namn (t.ex. ditt förnamn, inga mellanslag eller stora bokstäver) och tryck Enter.

  • Den ber sedan om ett New password.

Lärarfälla/Viktigt för elever: När du skriver ditt lösenord här kommer ingenting att synas på skärmen. Inga stjärnor, inga prickar. Detta är en säkerhetsfunktion i Linux. Skriv lösenordet, tryck Enter, och skriv det igen för att bekräfta. Välj något du absolut inte glömmer!

Nu är Linux igång! Men vi ska göra gränssnittet snyggare och lättare att jobba i. Stäng den svarta Ubuntu-rutan.

Steg 3: Installera och ställ in Windows Terminal

Windows Terminal är Microsofts moderna program för att hantera kommandorader. Den har flikar, färgkodning och är mycket smidigare för utveckling. (Har eleverna Windows 11 är den redan förinstallerad, men i Windows 10 måste den ofta hämtas).

Ladda ner Terminalen:

  • Öppna Microsoft Store (sök i startmenyn).

  • Sök efter Windows Terminal och klicka på "Hämta" eller "Installera".

Gör Ubuntu till standard:

  • Öppna Windows Terminal. Den startar troligen med Windows PowerShell (en blå bakgrund eller prompt som slutar på >).

  • Klicka på den lilla pilen som pekar nedåt uppe i namnlisten (bredvid plus-tecknet för ny flik) och välj Inställningar (Settings).

  • Högst upp under fliken "Start", leta upp Standardprofil (Default profile).

  • Klicka på rullgardinsmenyn och ändra från PowerShell till Ubuntu.

  • Klicka på Spara längst ner till höger.

Testa!

  • Stäng hela Windows Terminal och öppna den igen.

Om du nu möts av grön och vit text som slutar med ett dollartecken ($), grattis! Du är inne i din nya Linux-miljö och är redo för DDEV och Docker.

Steg 4: Installera Docker Desktop (I Windows)

Här installerar vi själva "motorn". Den bor i Windows, men vi ska beordra den att prata med Linux.

Ladda ner installationsfilen:

Viktigt: Den kommer visa en ruta med inställningar. Se till att alternativet "Use WSL 2 instead of Hyper-V" (eller Use WSL 2 based engine) är ikryssat. Klicka Ok.

  • Starta om datorn (Ja, igen. Docker gräver djupt i Windows nätverksinställningar).

Första starten av Docker:

  • Öppna programmet Docker Desktop från startmenyn.

  • Godkänn användaravtalet.

  • Nu kommer en jättestor skärm som uppmanar eleven att logga in eller skapa konto. Gör inte det. Längst ner till höger finns en liten, grå, diskret länk som heter "Continue without signing in". Klicka på den! (Elever behöver inget Docker-konto för att koda lokalt).

  • Klicka "Skip" på enkäten som dyker upp.

Verifiera kopplingen till Linux:

  • Klicka på Kugghjulet (Settings) uppe till höger i Docker Desktop.

  • Klicka på fliken Resources ute till vänster, och välj sedan WSL integration.

Kontrollera två saker:

  • Högst upp ska "Enable integration with my default WSL distro" vara ikryssad.

  • Längre ner ser du en lista på dina Linux-system. Ser du Ubuntu där? Slå på "switchen" bredvid den så den blir blå.

  • Klicka på Apply & restart längst ner till höger.

Minimera Docker Desktop. Från och med nu ska detta program bara ligga och rulla i bakgrunden när de jobbar.

Steg 5: Installera DDEV (I Ubuntu)

Nu lämnar vi Windows.

  • Nu öppnar vi Windows Terminal (fliken Ubuntu) – resten av kursen bor vi här inne.

OBS Klistra in i Linux:

  • I Windows brukar man klistra in med Ctrl + V. Om en elev gör det i Linux-terminalen dyker det ibland bara upp ett konstigt tecken (^V). I terminalen klistrar man in genom att högerklicka med musen, eller använda Ctrl + Shift + V.

Skapa en säker mapp för DDEV:s digitala nyckel:

sudo install -m 0755 -d /etc/apt/keyrings

Här kommer Ubuntu be om lösenordet de skapade i förra guiden. OBS: Det syns inte när man skriver!

Ladda ner DDEV:s nyckel:

   curl -fsSL https://apt.fury.io/ddev/gpg.key | gpg --dearmor | sudo tee /etc/apt/keyrings/ddev.gpg > /dev/null

Lägg till DDEV i Ubuntus "App-butik":

echo "deb [signed-by=/etc/apt/keyrings/ddev.gpg] https://apt.fury.io/ddev/ * *" | sudo tee /etc/apt/sources.list.d/ddev.list

Uppdatera listan och installera:

   sudo apt update && sudo apt install -y ddev

(Detta tar 1–2 minuter, det kommer rulla väldigt mycket text)

Testa att det lever:

ddev --version

Svarar den med en version (t.ex. ddev version v1.23.0)?

Magiskt, installationen är klar.

Del 3: Eldprovet

Vi litar inte på att det fungerar förrän vi sett en webbsida. Vi skall bygga en "slit-och-släng"-sida direkt.

  • Skapa en mapp och gå in i den:

    mkdir testprojekt && cd testprojekt

  • Be DDEV förbereda projektet:

ddev config --project-type=php
  • Starta maskineriet:
    ddev start

    ⚠️ VIKTIGT: Första gången du kör detta kastar Windows upp en sköld: "Vill du tillåta att mkcert/ddev gör ändringar?". Du måste klicka JA. DDEV skapar ett lokalt säkerhetscertifikat (https). Klickar du nej kommer din webbläsare blockera dina sidor.

Öppna i webbläsaren:

ddev launch

Din standardwebbläsare i Windows ska nu hoppa igång och visa en vit sida med texten "403 Forbidden" (eftersom vi inte skapat någon index.html än, men webbservern svarar!).

Börjar skapa lite html i projektet

Eftersom Ubuntu bor inuti Windows hittar du inte dina Linux-filer under "Mina Dokument". Men det finns ett magiskt kommando för att trolla fram dem.

  • Öppna Ubuntu-terminalen och se till att du står i ditt projekt:

    cd testprojekt

  • Skriv följande kommando (märk väl punkten på slutet, den betyder "här"):

    explorer.exe .

    Windows Utforskare poppar nu upp. Högerklicka på mappen "home" i vänsterspalten och välj Fäst i Snabbåtkomst, så hittar du alltid hit i framtiden.

Den Gyllene Regeln för VS Code

🛑 DU FÅR ALDRIG starta VS Code i Windows, klicka "Arkiv -> Öppna mapp" och leta upp Linux-mappen. Då kraschar sökfunktionerna och datorn blir stans långsammaste. VS Code måste öppnas inifrån Linux.

Öppna VS Code i Windows. Klicka på Extensions (klossarna till vänster), sök efter tillägget WSL (från Microsoft) och klicka Install. Stäng koden.

  • Gå tillbaka till din Ubuntu-terminal (där du står i testprojekt) och skriv: (Återigen: Glöm inte mellanslaget och punkten!)
    code .
  • VS Code öppnas. Titta längst ner i vänstra hörnet: Står det WSL: Ubuntu i den lilla färgade rutan? Godkänt! (Står det inget där? Då har du gjort fel. Stäng koden och kör code . i terminalen igen).

Koda

Nu knyter vi ihop förra lektionen med den här:

I VS Code (som nu visar testprojekt), klicka på ikonen för "Ny fil" ute i fil-trädet.

Döp filen till index.html.

<!DOCTYPE html>
   <html>
   <head>
       <title>Eldprovet</title>
   </head>
   <body>
       <h1 style="color: #2e7d32;">DDEV lever! Kodat i Linux, visat i Windows.</h1>
   </body>
   </html>

Grattis. Din professionella utvecklingsmiljö är därmed färdigbyggd.