Oletko koskaan tuhlannut päivää yrittäessäsi pystyttää paikallista WordPress-ympäristöä, joka käyttäytyy silti eri tavalla kuin tuotantopalvelimesi? XAMPP, Docker, virtuaalikoneet: jokainen vaihtoehto hajoaa pahimmalla mahdollisella hetkellä. PHP-versio on väärä, jokin laajennus puuttuu tai asiakas avaa sivun ja näkee valkoisen ruudun, jota et koskaan kohdannut paikallisesti.

Visual Studio Code osaa yhdistää etäpalvelimeen SSH:n kautta yhtä helposti kuin avaat kansion läppärilläsi. Ei mitään taikuutta: koodisi menee suoraan Amazon EC2 -instanssille, jossa täysi verkkopalvelin ja WordPress ovat jo käynnissä.

Alla on vaiheittainen opas VS Coden ja AWS EC2:n käyttöönottoon WordPress-liitännäisten ja teemojen kehitystä varten. Linux-käyttäjän luomisesta työtilan tallentamiseen, ilman aukkoja ja jokaisen vaiheen selityksellä.

💡 Pikaopas:

• Luo sudo-käyttäjä Ubuntu-palvelimelle ja määritä SSH-avaimet
• Valmistele Windows-työasemasi: OpenSSH, asetustiedosto ja yksityinen avain
• Yhdistä VS Code palvelimeen Remote-SSH:n kautta ja avaa WordPress-kansiosi
• Tallenna työtila projektin nopeaa käyttöä varten

Edellytykset

Ennen etäkehityksen käyttöönottoa varmista, että palvelinpuoli on valmis. Oletan, että käytät Windows 10:tä tai uudempaa ja olet vasta aloittelemassa pilvi-infrastruktuurin opettelua. Ohita ne vaiheet, jotka olet jo tehnyt.

Amazon EC2 -instanssi, jossa Ubuntu ja OpenLiteSpeed

Käytämme Ubuntu-pohjaista Amazon Machine Imagea, jossa on OpenLiteSpeed-verkkopalvelin ja täysi WordPressille optimoitu LAMP-pino. Jos et ole vielä pystyttänyt palvelinta, vähimmäisvaatimukset ovat Ubuntu 20.04 tai 22.04 LTS ja vähintään 2 Gt RAM-muistia. Alle 2 Gt:n muistilla composer ja wp-cli kaatuvat muistin loppumisen virheisiin keskikokoisissa projekteissa.

Linux-käyttäjä, jolla on sudo-oikeudet

Pääkäyttäjän (root) oikeudet ovat tarpeettomat ja vaaralliset jokapäiväisessä työssä. Luo tavallinen käyttäjä, jolla on sudo-oikeudet. DigitalOcean selittää prosessin oppaassaan. Lyhyesti: kaksi komentoa root-käyttäjänä tai sudo-etuliitteellä:

1
adduser example

Syötä salasana kahdesti; lopuissa kysymyksissä voit vain painaa Enteriä. Lisää sitten käyttäjä sudo-ryhmään:

1
usermod -aG sudo example

SSH-avainpari

SSH-yhteys perustuu avainpariin. Yksityinen avain (tiedosto ilman päätettä tai .pem-päätteellä) säilytetään Windows-koneellasi. Julkinen avain (.pub-tiedosto) sijoitetaan palvelimelle sallittujen avainten listaan. Luodaan avainpari suoraan palvelimella:

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

Kun ssh-keygen kysyy tietoja, paina Enter kolme kertaa (jätä salalause tyhjäksi; tässä skenaariossa sitä ei tarvita). Lisää nyt julkinen avain sallittujen listaan ja näytä yksityinen avain ruudulla:

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

Näet tällaisen lohkon:

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

Kopioi koko sisältö (mukaan lukien erotinrivit) ja tallenna se tekstitiedostoksi tietokoneellesi. Polku voi näyttää esimerkiksi tältä:

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

Tiedostonimi on vapaa. Luo .ssh-kansio Windows-profiilisi sisälle, samaan paikkaan kuin seuraavan vaiheen asetustiedosto.

SSH-asetustiedosto Visual Studio Codea varten

VS Code lukee yhteysasetukset tavallisesta SSH config -tiedostosta. Luo tekstitiedosto nimeltä config (ilman tiedostopäätettä) kansioon C:\Users\Example\.ssh\ ja lisää siihen seuraava sisältö (tarkemmat tiedot muodosta löydät kohdasta 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

Direktiivien selitykset:

• Host: vapaavalintainen nimi, joka näkyy VS Codessa (ikkunan otsikossa ja vasemman alareunan yhteysilmaisimessa);
• HostName: EC2-instanssisi IP-osoite tai verkkotunnus;
• User: edellä luotu Ubuntu-käyttäjätunnus;
• IdentityFile: absoluuttinen polku yksityiseen avaimeen Windows-koneellasi.

OpenSSH-asiakas Windowsissa

Windows 10 ja 11 sisältävät sisäänrakennetun SSH-asiakkaan, mutta se voi olla oletuksena pois käytöstä. Avaa Asetukset → Sovellukset → Valinnaiset toiminnot → Lisää toiminto. Etsi luettelosta OpenSSH Client ja napsauta Asenna.

Visual Studio Code ja Remote Development -laajennus

Lataa VS Code: joko vakaa versio (sininen kuvake) tai Insiders-versio (vihreä kuvake, tiheämmät päivitykset). Etäkehityksen kannalta niillä ei ole eroa.

Asenna heti asennuksen jälkeen Microsoftin Remote Development -laajennuspaketti. Paketti sisältää kolme laajennusta. Kaksi niistä (Remote, Containers ja WSL) voidaan poistaa käytöstä; niitä ei tarvita meidän tehtävässämme. Pidä vain Remote, SSH käytössä.

Etäkehityksen määrittäminen

Palvelimeen yhdistäminen

• Paina F1 tai napsauta ikkunan vasemmassa alareunassa olevaa tummanoranssia painiketta.
• Ala kirjoittaa Remote-SSH; automaattinen täydennys Remote-SSH: Connect to Host… tulee näkyviin. Valitse se ja paina Enter.
• Valitse avattavasta luettelosta asetustiedostosi Host-direktiivissä määritetty nimi, esimerkiksi SSH: aws-ec2. VS Code hakee isäntäluettelon suoraan config-tiedostostasi.
• Valmista, olet yhteydessä. Uusi ikkuna avautuu; voit sulkea vanhan.

Yhteys on nopea ja editori tuntuu responsiiviselta, koska verkon yli lähetetään vain tiedostojen erot, ei koko käyttöliittymää.

Työtilan luominen

• Avaa File → Open Folder… (tai paina Ctrl+K, sitten Ctrl+O; paina ne peräkkäin, ei yhtä aikaa).
• Siirry avautuvassa tiedostoselaimessa WordPressin juurihakemistoon, esimerkiksi /var/www/example.com/. Voit liittää polun käsin ja klikata OK.

Kaikki WordPress-tiedostot tulevat näkyviin vasemmalla olevaan Explorer-paneeliin. Jos haluat lisätä työtilaan muita palvelimen kansioita (esimerkiksi toisen liitännäisen tai teeman hakemiston), käytä File → Add Folder to Workspace….

Tallenna tämä näkymä nyt työtilana, jotta voit palata projektiin yhdellä klikkauksella:

• Paina F1, ala kirjoittaa save work ja valitse Workspaces: Save Workspace As….
• Tallenna tiedosto nimellä wp.code-workspace sopivaan paikkaan palvelimella (.code-workspace-pääte lisätään automaattisesti).
• Sulje VS Code ja avaa se uudelleen; työtila näkyy kohdassa File → Recent tai latautuu automaattisesti, jos se oli viimeksi auki.

Voit vaihtaa työtilojen välillä komennolla F1 → open work → valitse listalta.

Symbolinen linkki (valinnainen)

Jos kehität tiettyä liitännäistä, on kätevää sijoittaa sen lähdetiedostot käyttäjän kotihakemistoon ja luoda niistä symbolinen linkki WordPressiin:

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

Vasemmanpuoleinen polku on varsinainen projektikansio; oikeanpuoleinen polku on symbolinen linkki hakemistossa wp-content/plugins. Tämä eristää liitännäiskoodin WordPressin ytimestä ja yksinkertaistaa versionhallintaa.

⁉️🤔 Usein kysytyt kysymykset

Pitääkö minun käyttää Amazon EC2:ta, vai toimiiko jokin muu VPS?

Mikä tahansa palvelin, jossa on Ubuntu ja SSH-yhteys, toimii. DigitalOcean, Linode, Vultr, Hetzner: asennusprosessi on identtinen. Ainoa vaatimus on vähintään 2 Gt RAM-muistia mukavaa WordPress-kehitystä ja debuggausta varten. Tämä lähestymistapa ei toimi jaetulla hostingilla; tarvitset root-oikeudet tai sudon. VS Code Remote SSH ei ole sidottu tiettyyn pilvipalveluntarjoajaan: voit yhdistää mihin tahansa koneeseen, jossa pyörii sshd, jopa Raspberry Pihin paikallisverkossasi. Ainoa ero on viive; mitä lähempänä datakeskus on, sitä responsiivisempi editori on.

Täytyykö minun maksaa liikenteestä, kun työskentelen VS Code Remote SSH:n kautta?

Liikenne on minimaalista. VS Code lähettää SSH:n yli vain tiedostomuutoksia ja terminaalikomentoja; käyttöliittymän pikseleitä tai laajennusten binäärejä ei siirretä edestakaisin. Tyypillinen kehityspäivä pysyy kymmenissä megatavuissa. Laajennukset (mukaan lukien Remote-SSH itse) asennetaan palvelimelle kerran ensimmäisen yhteyden aikana, mikä on kertaluonteinen muutaman sadan megatavun kustannus. Jos sinulla on tiukka liikennerajoitus, poista laajennusten automaattiset päivitykset käytöstä etäpalvelimella asetuksella F1 → Preferences: Configure Runtime Arguments ja lisää "remote.extensionDownloader.enabled": false. Suurimmalle osalle käyttäjistä tämä on kuitenkin tarpeetonta.

Voinko työskennellä etäpalvelimelta tabletilla tai puhelimella?

Teknisesti kyllä, VS Code for the Webin kautta selaimessa, mutta tietyin varauksin. Selainversio ei tue Remote SSH:ta suoraan. Kiertotapa: asenna VS Code Server instanssille (erillinen tuote, älä sekoita sitä Remote SSH:hon) ja yhdistä siihen selaimestasi. Tabletille, jossa on näppäimistö, tämä on toimiva skenaario; puhelimelle se on enemmänkin kuriositeetti. Käytännöllisempi vaihtoehto on kantaa mukana kevyttä kannettavaa tai Chromebookia, jossa on Linux-alijärjestelmä: kaikki laskentakuorma pysyy palvelimella, ja asiakasohjelma käyttää minimaalisesti resursseja.

Mitä minun pitäisi tehdä, jos yhteys katkeaa pitkien käyttämättömyysjaksojen aikana?

Määritä keepalive SSH-asetuksiisi. Lisää kaksi riviä host-osioon tiedostossa C:\Users\Example\.ssh\config: ServerAliveInterval 60 ja ServerAliveCountMax 5. Asiakasohjelma lähettää keepalive-paketin 60 sekunnin välein ja ylläpitää yhteyttä jopa viiden peräkkäisen kadonneen paketin ajan, joten yhteys voi selvitä jopa 5 minuutin täydellisestä verkkohiljaisuudesta. Vaihtoehto: aja tmux tai screen palvelimella pitkäkestoisia prosesseja varten, jotta et menetä terminaali-istuntoa, jos yhteys katkeaa.

Onko turvallista säilyttää yksityistä avainta selkokielisenä Windows-koneella?

.pem-tiedosto ilman salasanaa on kyllä, pelkkä merkkijono, jonka kuka tahansa, jolla on pääsy Windows-tilillesi, voi lukea. Suojatoimenpiteet turvallisuuden kasvavassa järjestyksessä: (1) aseta salasana avainta luodessasi (ssh-keygen kysyy sitä; älä paina Enteriä, vaan syötä salasana); (2) säilytä avain salatulla osiolla (BitLocker on oletuksena käytössä Windows 11 Prossa); (3) tuotantoympäristöissä käytä SSH-agenttia laitteistoavaimen (YubiKey) kanssa. Kehitysympäristöön kompromissivaihtoehto on salasanalla suojattu avain: VS Code muistaa sen istunnon ajaksi, sinun tarvitsee syöttää se vain kerran päivässä, mutta avain on hyödytön ilman salasanaa, vaikka tiedosto vuotaisi.

Mitä valita jokapäiväiseen työhön: Remote SSH vai paikallinen pino

Remote SSH VS Coden kautta ei ole hopealuoti. Jos kirjoitat lisäosaa, joka tarvitsee vain wp-cli:n ja yksikkötestejä, paikallinen Docker-asetus wordpress-developilla kääntyy minuutissa eikä vaadi internetyhteyttä. Mutta jos debuggaut integraatiota ulkoisen API:n kanssa, testaat selainyhteensopivuutta tai näytät edistymistä asiakkaalle, etäpalvelin tuotantoympäristöllä voittaa.

Yhdistettyä lähestymistapaa varten pidä kehitys-EC2-instanssi jatkuvasti käynnissä (varattu t3.small on kohtuuhintainen) ja yhdistä siihen milloin tahansa mistä tahansa. Koodi asuu palvelimella, automaattiset varmuuskopiot ovat käytössä, etkä ole sidottu tiettyyn koneeseen. Kokeile: viikon etäkehityksen jälkeen et halua palata XAMPPiin.