🛠 Fjärrutveckling av WordPress med VS Code på Amazon EC2

Har du någonsin slösat bort en dag på att försöka få igång en lokal WordPress-miljö som ändå beter sig annorlunda än din produktionsserver? XAMPP, Docker, virtuella maskiner: varje alternativ fallerar vid sämsta möjliga tillfälle. PHP-versionen är fel, ett tillägg saknas, eller så öppnar kunden en sida och möts av en vit skärm som du aldrig såg lokalt.

Visual Studio Code kan ansluta till en fjärrserver via SSH lika enkelt som du öppnar en mapp på din laptop. Ingen magi inblandad: din kod hamnar direkt på en Amazon EC2-instans där en fullständig webbserver med WordPress redan körs.

Här följer en steg-för-steg-guide för att sätta upp VS Code + AWS EC2 för utveckling av WordPress-plugins och teman. Från att skapa en Linux-användare till att spara din arbetsyta, utan luckor och med en förklaring av varje steg.

💡 Snabb översikt:

• Skapa en sudo-användare på en Ubuntu-server och konfigurera SSH-nycklar
• Förbered din Windows-klient: OpenSSH, konfigurationsfil och privat nyckel
• Anslut VS Code till servern via Remote-SSH och öppna din WordPress-mapp
• Spara arbetsytan för snabb åtkomst till ditt projekt

Förutsättningar

Innan du sätter upp fjärrutveckling, se till att serversidan är redo. Jag utgår från att du kör Windows 10 eller senare och precis har börjat lära dig om molninfrastruktur. Hoppa över de steg du redan har genomfört.

Amazon EC2-instans med Ubuntu och OpenLiteSpeed

Vi använder en Amazon Machine Image baserad på Ubuntu med webbservern OpenLiteSpeed och en fullständig LAMP-stack optimerad för WordPress. Om du inte har satt upp servern ännu är minimikraven Ubuntu 20.04 eller 22.04 LTS och minst 2 GB RAM. Med mindre än 2 GB kommer composer och wp-cli att krascha med minnesfel på medelstora projekt.

Linux-användare med sudo

Root-åtkomst är onödigt och farligt för dagligt arbete. Skapa en vanlig användare med sudo-behörighet. DigitalOcean förklarar processen i sin guide. Kortfattat, två kommandon från root eller med prefixet sudo:

1
adduser example

Ange lösenordet två gånger; för resterande frågor kan du bara trycka Enter. Lägg sedan till användaren i sudo-gruppen:

1
usermod -aG sudo example

SSH-nyckelpar

SSH-åtkomst bygger på ett nyckelpar. Den privata nyckeln (en fil utan filändelse eller .pem) lagras på din Windows-maskin. Den publika nyckeln (en .pub-fil) placeras på servern i listan över auktoriserade nycklar. Låt oss generera ett par direkt på servern:

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 frågar, tryck Enter tre gånger (lämna lösenfrasen tom; i vårt scenario behövs den inte). Lägg nu till den publika nyckeln i den auktoriserade listan och visa den privata nyckeln på skärmen:

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

Du kommer att se ett block som ser ut så här:

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

Kopiera hela innehållet (inklusive avgränsningsraderna) och spara det i en textfil på din dator. Sökvägen kan se ut ungefär så här:

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

Filnamnet är valfritt. Skapa mappen .ssh i din Windows-profil, på samma plats som konfigurationsfilen från nästa steg.

SSH-konfigurationsfil för Visual Studio Code

VS Code läser anslutningsinställningar från standardfilen för SSH-konfiguration. Skapa en textfil med namnet config utan filändelse i mappen C:\Users\Example\.ssh\ med följande innehåll (för mer information 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

Förklaring av direktiven:

• Host: ett valfritt namn som visas i VS Code (fönstertitel och anslutningsindikator i nedre vänstra hörnet);
• HostName: IP-adressen eller domänen till din EC2-instans;
• User: Ubuntu-användarnamnet som skapades ovan;
• IdentityFile: den absoluta sökvägen till den privata nyckeln på din Windows-dator.

OpenSSH-klient på Windows

Windows 10 och 11 har en inbyggd SSH-klient, men den kan vara inaktiverad som standard. Öppna Inställningar → Appar → Valfria funktioner → Lägg till en funktion. Hitta OpenSSH Client i listan och klicka på Installera.

Visual Studio Code och Remote Development-tillägget

Ladda ner VS Code: antingen den stabila versionen (blå ikon) eller Insiders-utgåvan (grön ikon, tätare uppdateringar). Det är ingen skillnad för fjärrutveckling.

Direkt efter installationen lägger du till Remote Development-tilläggspaketet från Microsoft. Paketet innehåller tre tillägg. Två av dem (Remote, Containers och WSL) kan inaktiveras; de behövs inte för vår uppgift. Behåll endast Remote, SSH.

Konfigurera fjärrutveckling

Ansluta till servern

• Tryck på F1 eller klicka på den mörkorange knappen i nedre vänstra hörnet av fönstret.
• Börja skriva Remote-SSH; autocomplete-förslaget Remote-SSH: Connect to Host… visas. Välj det och tryck på Enter.
• Välj namnet som angavs i Host-direktivet i din konfigurationsfil från rullgardinslistan, till exempel SSH: aws-ec2. VS Code hämtar värdlistan direkt från din config.
• Klart, du är ansluten. Ett nytt fönster öppnas; du kan stänga det gamla.

Anslutningen är snabb och redigeraren känns responsiv eftersom endast filskillnader skickas över nätverket, inte hela användargränssnittet.

Skapa en arbetsyta

• Öppna Arkiv → Öppna mapp… (eller tryck Ctrl+K, sedan Ctrl+O; tryck dem i följd, inte samtidigt).
• I filhanteraren som visas, navigera till WordPress-rotmappen, till exempel /var/www/example.com/. Du kan klistra in sökvägen manuellt och klicka OK.

Alla WordPress-filer visas i Utforskaren-panelen till vänster. För att lägga till andra servermappar i arbetsytan (till exempel katalogen för ett annat plugin eller tema), använd Arkiv → Lägg till mapp i arbetsyta….

Spara nu denna vy som en arbetsyta så att du kan återvända till projektet med ett enda klick:

• Tryck F1, börja skriva save work och välj Arbetsytor: Spara arbetsyta som….
• Spara filen med namnet wp.code-workspace på en lämplig plats på servern (filändelsen .code-workspace läggs till automatiskt).
• Stäng och öppna VS Code igen; arbetsytan visas i Arkiv → Senaste eller laddas automatiskt om det var den senast öppnade.

För att växla mellan flera arbetsytor, använd F1 → open work → välj från listan.

Symbolisk länk (valfritt)

Om du utvecklar ett specifikt plugin är det praktiskt att placera dess källfiler i användarens hemkatalog och skapa en symbolisk länk till dem i WordPress:

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

Den vänstra sökvägen är den faktiska projektmappen; den högra sökvägen är den symboliska länken inuti wp-content/plugins. Detta isolerar pluginkoden från WordPress-kärnan och förenklar versionshantering.

⁉️🤔 Vanliga frågor

Måste jag använda Amazon EC2, eller fungerar en annan VPS?

Vilken server som helst med Ubuntu och SSH-åtkomst fungerar. DigitalOcean, Linode, Vultr, Hetzner: installationsprocessen är identisk. Det enda kravet är minst 2 GB RAM för bekväm WordPress-utveckling med debugging. Den här metoden fungerar inte på shared hosting; du behöver root-åtkomst eller sudo. VS Code Remote SSH är inte knutet till en specifik molnleverantör: du kan ansluta till vilken maskin som helst som kör sshd, till och med en Raspberry Pi i ditt lokala nätverk. Den enda skillnaden är latens; ju närmare datacentret ligger, desto mer responsiv blir editorn.

Måste jag betala för trafik när jag arbetar via VS Code Remote SSH?

Trafiken är minimal. VS Code skickar bara filändringar och terminalkommandon över SSH; inga UI-pixlar eller tilläggsbinärer skickas fram och tillbaka. En typisk utvecklingsdag ryms inom några tiotals megabyte. Tillägg (inklusive Remote-SSH självt) installeras på servern en gång vid första anslutningen, vilket är en engångskostnad på några hundra megabyte. Om du har en strikt trafikgräns, stäng av automatiska uppdateringar för tillägg på fjärrvärden via F1 → Preferences: Configure Runtime Arguments och lägg till "remote.extensionDownloader.enabled": false. Men för de allra flesta användare är detta onödigt.

Kan jag arbeta från en fjärrserver på en surfplatta eller telefon?

Tekniskt sett ja, via VS Code for the Web i en webbläsare, men med begränsningar. Webbläsarversionen stöder inte Remote SSH direkt. En lösning: sätt upp VS Code Server på instansen (en separat produkt, blanda inte ihop den med Remote SSH) och anslut till den från din webbläsare. För en surfplatta med tangentbord är detta ett fungerande scenario; för en telefon är det mer av en kuriositet. Ett mer praktiskt alternativ är att bära med sig en lätt laptop eller Chromebook med ett Linux-undersystem: all beräkningslast ligger kvar på servern, och klienten använder minimalt med resurser.

Vad ska jag göra om anslutningen bryts under långa perioder av inaktivitet?

Konfigurera keepalive i din SSH-konfiguration. Lägg till två rader i din värdsektion i filen C:\Users\Example\.ssh\config: ServerAliveInterval 60 och ServerAliveCountMax 5. Klienten skickar ett keepalive-paket var 60:e sekund och håller anslutningen vid liv genom upp till fem förlorade paket i rad, så anslutningen kan överleva upp till 5 minuters fullständig nätverkstystnad. Ett alternativ: kör tmux eller screen på servern för långvariga processer för att undvika att förlora terminalsessionen om anslutningen bryts.

Är det säkert att lagra en privat nyckel i klartext på en Windows-maskin?

En .pem-fil utan lösenfras är, ja, en ren textsträng som alla med åtkomst till ditt Windows-konto kan läsa. Skyddsåtgärder i stigande säkerhetsordning: (1) sätt en lösenfras när du skapar nyckeln (ssh-keygen frågar; tryck inte på Enter, ange en lösenfras istället); (2) lagra nyckeln på en krypterad partition (BitLocker är aktiverat som standard i Windows 11 Pro); (3) för produktionsmiljöer, använd en SSH-agent med en hårdvarunyckel (YubiKey). För en utvecklingsmiljö är en kompromiss en nyckel med lösenfras: VS Code kommer ihåg den under sessionens varaktighet, du behöver bara ange den en gång om dagen, men nyckeln blir oanvändbar utan lösenfrasen, även om filen läcker ut.

Vad ska man välja för dagligt arbete: Remote SSH eller en lokal stack

Remote SSH via VS Code är ingen silverkula. Om du skriver ett plugin som bara behöver wp-cli och enhetstester, kommer en lokal Docker-setup med wordpress-develop att byggas på en minut och kräver ingen internetanslutning. Men om du felsöker integration med ett externt API, testar webbläsarkompatibilitet eller visar framsteg för en kund, vinner en fjärrserver med en produktionsmiljö.

För ett kombinerat tillvägagångssätt, håll en dev-EC2-instans igång kontinuerligt (en reserverad t3.small är rimligt prissatt) och anslut till den när som helst från var som helst. Koden finns på servern, automatiska säkerhetskopior är aktiverade och du är inte bunden till en specifik maskin. Testa det: efter en veckas fjärrutveckling kommer du inte att vilja gå tillbaka till XAMPP.