🛠 Ekstern wordpress-utvikling med VS Code på Amazon EC2

Har du noen gang kastet bort en dag på å prøve å sette opp en lokal WordPress-stack som likevel oppfører seg annerledes enn produksjonsserveren din? XAMPP, Docker, virtuelle maskiner: hvert alternativ svikter på verst tenkelige tidspunkt. PHP-versjonen er feil, en utvidelse mangler, eller kunden åpner en side og ser en hvit skjerm som du aldri opplevde lokalt.

Visual Studio Code kan koble seg til en ekstern server via SSH like enkelt som du åpner en mappe på laptopen din. Ingen magi involvert: koden din går rett til en Amazon EC2-instans der en full webserver med WordPress allerede kjører.

Nedenfor finner du en trinnvis veiledning for å sette opp VS Code + AWS EC2 for utvikling av WordPress-plugins og -temaer. Fra å opprette en Linux-bruker til å lagre arbeidsområdet ditt, uten hull og med en forklaring av hvert trinn.

💡 Rask oversikt:

• Opprett en sudo-bruker på en Ubuntu-server og konfigurer SSH-nøkler
• Forbered Windows-klienten din: OpenSSH, konfigurasjonsfil og privat nøkkel
• Koble VS Code til serveren via Remote-SSH og åpne WordPress-mappen din
• Lagre arbeidsområdet for rask tilgang til prosjektet ditt

Forutsetninger

Før du setter opp ekstern utvikling, må du sørge for at serversiden er klar. Jeg antar at du er på Windows 10 eller nyere og akkurat har begynt å lære om skyinfrastruktur. Hopp over trinnene du allerede har fullført.

Amazon EC2-instans med Ubuntu og OpenLiteSpeed

Vi bruker et Amazon Machine Image basert på Ubuntu med OpenLiteSpeed-webserveren og en full LAMP-stack optimalisert for WordPress. Hvis du ikke har satt opp serveren ennå, er minimumskravene Ubuntu 20.04 eller 22.04 LTS og minst 2 GB RAM. Med mindre enn 2 GB vil composer og wp-cli krasje med minnefeil på mellomstore prosjekter.

Linux-bruker med sudo

Root-tilgang er unødvendig og farlig for daglig arbeid. Opprett en vanlig bruker med sudo-rettigheter. DigitalOcean forklarer prosessen i veiledningen sin. Kort fortalt, to kommandoer fra root eller med sudo-prefikset:

1
adduser example

Skriv inn passordet to ganger; for de resterende spørsmålene kan du bare trykke Enter. Legg deretter brukeren til i sudo-gruppen:

1
usermod -aG sudo example

SSH-nøkkelpar

SSH-tilgang er bygget på et nøkkelpar. Den private nøkkelen (en fil uten filendelse eller .pem) lagres på Windows-maskinen din. Den offentlige nøkkelen (en .pub-fil) plasseres på serveren i listen over autoriserte nøkler. La oss generere et par direkte på serveren:

1
su - example
2
mkdir .ssh
3
chmod 700 .ssh
4
touch .ssh/authorized_keys
5
chmod 600 .ssh/authorized_keys
6
ssh-keygen

Når ssh-keygen spør deg, trykk Enter tre ganger (la passfrasen være tom; i vårt scenario er den ikke nødvendig). Legg nå den offentlige nøkkelen til i den autoriserte listen og vis den private nøkkelen på skjermen:

1
cat .ssh/id_rsa.pub >> .ssh/authorized_keys
2
cat .ssh/id_rsa

Du vil se en blokk som denne:

1
-----BEGIN RSA PRIVATE KEY-----
2
...
3
-----END RSA PRIVATE KEY-----

Kopier hele innholdet (inkludert skillelinjene) og lagre det som en tekstfil på datamaskinen din. Filbanen kan se omtrent slik ut:

1
C:\Users\Example\.ssh\aws-example-user.pem

Filnavnet er valgfritt. Opprett .ssh-mappen inne i Windows-profilen din, på samme sted som konfigurasjonsfilen fra neste trinn.

SSH-konfigurasjonsfil for Visual Studio Code

VS Code leser tilkoblingsinnstillinger fra standard SSH-konfigurasjon. Opprett en tekstfil med navnet config uten filendelse i mappen C:\Users\Example\.ssh\ med følgende innhold (for mer detaljer om formatet, se man ssh_config):

1
Host aws-ec2
2
    HostName your-server-ip-or-domain.com
3
    User example
4
    IdentityFile C:\Users\Example\.ssh\aws-example-user.pem

Forklaring av direktiver:

• Host: et valgfritt navn som vises i VS Code (vindustittel og tilkoblingsindikator nederst til venstre);
• HostName: IP-adressen eller domenet til EC2-instansen din;
• User: Ubuntu-brukernavnet du opprettet ovenfor;
• IdentityFile: den absolutte filbanen til privatnøkkelen på Windows-maskinen din.

OpenSSH-klient på Windows

Windows 10 og 11 har en innebygd SSH-klient, men den kan være deaktivert som standard. Åpne Innstillinger → Apper → Valgfrie funksjoner → Legg til en funksjon. Finn OpenSSH-klient i listen og klikk Installer.

Visual Studio Code og Remote Development-utvidelsen

Last ned VS Code: enten den stabile versjonen (blått ikon) eller Insiders-utgaven (grønt ikon, hyppigere oppdateringer). Det er ingen forskjell for ekstern utvikling.

Rett etter installasjon legger du til utvidelsespakken Remote Development fra Microsoft. Pakken inneholder tre utvidelser. To av dem (Remote, Containers og WSL) kan deaktiveres; de trengs ikke for vår oppgave. Behold kun Remote, SSH.

Konfigurering av ekstern utvikling

Koble til serveren

• Trykk F1 eller klikk på den mørke oransje knappen nederst til venstre i vinduet.
• Begynn å skrive Remote-SSH; autofullføringsforslaget Remote-SSH: Connect to Host… vil dukke opp. Velg det og trykk Enter.
• Fra nedtrekkslisten velger du navnet som er angitt i Host-direktivet i konfigurasjonsfilen din, for eksempel SSH: aws-ec2. VS Code henter listen over verter direkte fra config-filen din.
• Ferdig, du er tilkoblet. Et nytt vindu åpnes; du kan lukke det gamle.

Tilkoblingen er rask og redigeringsverktøyet føles responsivt fordi kun fildiffer sendes over nettverket, ikke hele brukergrensesnittet.

Opprette et arbeidsområde

• Åpne Fil → Åpne mappe… (eller trykk Ctrl+K, deretter Ctrl+O; trykk dem sekvensielt, ikke samtidig).
• I filutforskeren som dukker opp, naviger til WordPress-roten, for eksempel /var/www/example.com/. Du kan lime inn stien manuelt og klikke OK.

Alle WordPress-filer vil vises i Utforsker-panelet til venstre. For å legge til andre servermapper i arbeidsområdet (for eksempel katalogen til en annen plugin eller et tema), bruk Fil → Legg til mappe i arbeidsområde….

Lagre nå denne visningen som et arbeidsområde slik at du kan gå tilbake til prosjektet med ett enkelt klikk:

• Trykk F1, begynn å skrive save work, og velg Arbeidsområder: Lagre arbeidsområde som….
• Lagre filen med navnet wp.code-workspace på et praktisk sted på serveren (filendelsen .code-workspace legges til automatisk).
• Lukk og åpne VS Code på nytt; arbeidsområdet vil vises i Fil → Nylig eller lastes automatisk hvis det var det siste som var åpent.

For å bytte mellom flere arbeidsområder, bruk F1 → open work → velg fra listen.

Symbolsk lenke (valgfritt)

Hvis du utvikler en spesifikk plugin, er det praktisk å plassere kildefilene i brukerens hjemmekatalog og opprette symbolske lenker til dem i WordPress:

1
ln -s /home/example/wp /var/www/dev.example.com/wp-content/plugins/my-plugin

Den venstre stien er den faktiske prosjektmappen; den høyre stien er den symbolske lenken inne i wp-content/plugins. Dette isolerer plugin-koden fra WordPress-kjernen og forenkler versjonskontroll.

⁉️🤔 Ofte stilte spørsmål

Må jeg bruke Amazon EC2, eller vil en annen VPS fungere?

Enhver server med Ubuntu og SSH-tilgang vil fungere. DigitalOcean, Linode, Vultr, Hetzner: oppsettprosessen er identisk. Det eneste kravet er minst 2 GB RAM for komfortabel WordPress-utvikling med debugging. Denne tilnærmingen vil ikke fungere på delt hosting; du trenger root-tilgang eller sudo. VS Code Remote SSH er ikke knyttet til en bestemt skyleverandør: du kan koble til hvilken som helst maskin som kjører sshd, til og med en Raspberry Pi på ditt lokale nettverk. Den eneste forskjellen er ventetid; jo nærmere datasenteret, desto mer responsiv blir editoren.

Må jeg betale for trafikk når jeg jobber via VS Code Remote SSH?

Trafikken er minimal. VS Code sender kun filendringer og terminalkommandoer over SSH; ingen UI-piksler eller utvidelsesbinærfiler overføres frem og tilbake. En typisk utviklingsdag holder seg innenfor titalls megabyte. Utvidelser (inkludert Remote-SSH selv) installeres på serveren én gang under første tilkobling, noe som utgjør et par hundre megabyte som en engangskostnad. Hvis du har en streng trafikkgrense, deaktiver automatiske oppdateringer for utvidelser på den eksterne verten via F1 → Preferences: Configure Runtime Arguments og legg til "remote.extensionDownloader.enabled": false. Men for de aller fleste brukere er dette unødvendig.

Kan jeg jobbe fra en ekstern server på et nettbrett eller en telefon?

Teknisk sett, ja, via VS Code for the Web i en nettleser, men med forbehold. Nettleserversjonen støtter ikke Remote SSH direkte. En løsning: sett opp VS Code Server på instansen (et separat produkt, ikke forveksle det med Remote SSH) og koble til det fra nettleseren din. For et nettbrett med tastatur er dette et brukbart scenario; for en telefon er det mer en kuriositet. Et mer praktisk alternativ er å bære med seg en lett bærbar PC eller Chromebook med et Linux-delsystem: all beregningslasten forblir på serveren, og klienten bruker minimale ressurser.

Hva bør jeg gjøre hvis tilkoblingen faller ned under lange perioder med inaktivitet?

Konfigurer keepalive i SSH-konfigurasjonen din. Legg til to linjer i vertsseksjonen din i filen C:\Users\Example\.ssh\config: ServerAliveInterval 60 og ServerAliveCountMax 5. Klienten vil sende en keepalive-pakke hvert 60. sekund og opprettholde tilkoblingen gjennom opptil fem påfølgende tapte pakker, slik at tilkoblingen kan overleve opptil 5 minutter med fullstendig nettverksstillhet. Et alternativ: kjør tmux eller screen på serveren for langvarige prosesser for å unngå å miste terminaløkten hvis tilkoblingen faller ned.

Er det trygt å lagre en privat nøkkel i klartekst på en Windows-maskin?

En .pem-fil uten passordfrase er, ja, en ren streng som alle med tilgang til Windows-kontoen din kan lese. Beskyttelsestiltak i stigende sikkerhetsrekkefølge: (1) angi en passordfrase når du oppretter nøkkelen (ssh-keygen vil spørre; ikke trykk Enter, angi en passordfrase i stedet); (2) lagre nøkkelen på en kryptert partisjon (BitLocker er aktivert som standard i Windows 11 Pro); (3) for produksjonsmiljøer, bruk en SSH-agent med en maskinvarenøkkel (YubiKey). For et utviklingsmiljø er et kompromissalternativ en nøkkel med passordfrase: VS Code vil huske den for øktens varighet, du trenger bare å angi den én gang om dagen, men nøkkelen blir ubrukelig uten passordfrasen, selv om filen lekker.

Hva du bør velge for daglig arbeid: Remote SSH eller en lokal stack

Remote SSH via VS Code er ingen universalløsning. Hvis du skriver en plugin som bare trenger wp-cli og enhetstester, vil et lokalt Docker-oppsett med wordpress-develop bygge på et minutt og krever ikke internettilgang. Men hvis du feilsøker integrasjon med et eksternt API, tester kompatibilitet på tvers av nettlesere eller viser fremgang til en kunde, vinner en ekstern server med et produksjonsmiljø.

For en kombinert tilnærming, hold en dev EC2-instans kjørende kontinuerlig (en reservert t3.small er rimelig priset) og koble til den når som helst fra hvor som helst. Koden lever på serveren, automatiske sikkerhetskopier er aktivert, og du er ikke bundet til en bestemt maskin. Prøv det: etter en uke med ekstern utvikling vil du ikke ønske å gå tilbake til XAMPP.