Ви коли-небудь витрачали день на те, щоб підняти локальний WordPress-стек, який однаково поводиться інакше, ніж бойовий сервер? XAMPP, Docker, віртуалки, кожен варіант ламається в найневідповідніший момент: то версія PHP не та, то розширення не підключено, то клієнт відкриває сторінку й бачить білий екран, якого у вас локально немає.

Visual Studio Code вміє підключатися до віддаленого сервера через SSH так само легко, як ви відкриваєте папку на своєму ноутбуці. Жодної магії, просто код летить прямо на інстанс Amazon EC2, де вже крутиться повноцінний вебсервер із WordPress.

Нижче, покрокове налаштування зв'язки VS Code + AWS EC2 для розробки плагінів і тем WordPress. Від створення користувача Linux до збереження робочого простору, без пропусків і з поясненням кожного кроку.

💡 Швидкий огляд:

• Створюємо sudo-користувача на Ubuntu-сервері та налаштовуємо SSH-ключі
• Готуємо Windows-клієнт: OpenSSH, конфігураційний файл і закритий ключ
• Підключаємо VS Code до сервера через Remote-SSH і відкриваємо папку WordPress
• Зберігаємо робочий простір для швидкого повернення до проєкту

Передумови

Перш ніж налаштовувати віддалену розробку, переконайтеся, що серверна частина готова. Я виходжу з того, що ви на Windows 10 або новішій і тільки починаєте розбиратися з хмарною інфраструктурою. Перестрибуйте ті пункти, які у вас уже виконано.

Інстанс Amazon EC2 з Ubuntu та OpenLiteSpeed

Ми використовуємо образ Amazon Machine Image на базі Ubuntu з вебсервером OpenLiteSpeed і повним LAMP-стеком, заточеним під WordPress. Якщо сервер ще не піднято, мінімальні вимоги: Ubuntu 20.04 або 22.04 LTS і не менше 2 ГБ оперативної пам'яті. Менше ніж 2 ГБ, composer і wp-cli падатимуть із out of memory на середніх проєктах.

Користувач Linux із sudo

Root-доступ для повсякденної роботи не потрібен і небезпечний. Створіть звичайного користувача з правами sudo. DigitalOcean пояснює процес у своєму посібнику. Якщо коротко, дві команди від root або з префіксом sudo:

1
adduser example

Введіть пароль двічі, на решту запитань можна просто натиснути Enter. Потім додайте користувача до групи sudo:

1
usermod -aG sudo example

Ключова пара для SSH

SSH-доступ будується на парі ключів. Закритий ключ (файл без розширення або .pem) зберігається у вас на Windows-машині. Відкритий ключ (файл .pub) лежить на сервері в списку авторизованих. Згенеруємо пару прямо на сервері:

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

На запити ssh-keygen тричі натисніть Enter (порожня парольна фраза для ключа, у нашому сценарії вона не потрібна). Тепер додайте відкритий ключ до списку авторизованих і виведіть закритий на екран:

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

Ви побачите блок такого вигляду:

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

Скопіюйте весь вміст (включно з рядками-обмежувачами) і збережіть у текстовий файл на своєму комп’ютері. Шлях може бути таким:

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

Назва файлу довільна. Папку .ssh створіть усередині свого профілю Windows, там само, де лежить конфігураційний файл із наступного кроку.

Конфігураційний файл SSH для Visual Studio Code

VS Code зчитує налаштування підключення зі стандартного конфігу SSH. Створіть текстовий файл без розширення config у папці C:\Users\Example\.ssh\ із таким вмістом (докладніше про формат читайте в 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

Розбір директив:

• Host, довільна назва для відображення у VS Code (заголовок вікна та індикатор з’єднання в лівому нижньому куті);
• HostName, IP-адреса або домен вашого інстансу EC2;
• User, ім’я користувача Ubuntu, створеного вище;
• IdentityFile, абсолютний шлях до закритого ключа на Windows-машині.

OpenSSH-клієнт у Windows

У Windows 10 і 11 є вбудований SSH-клієнт, але за замовчуванням він може бути неактивним. Відкрийте «Параметри» → «Програми» → «Додаткові компоненти» → «Додати компонент». Знайдіть у списку OpenSSH Client і натисніть «Установити».

Visual Studio Code і розширення Remote Development

Завантажте VS Code, підійде як стабільна версія (синій значок), так і редакція Insiders (зелений значок, частіші оновлення). Різниці для віддаленої розробки немає.

Одразу після встановлення додайте пакет розширень Remote Development від Microsoft. До складу пакета входять три розширення. Два з них, Remote, Containers і WSL, можна вимкнути, для нашого завдання вони не потрібні. Залиште тільки Remote, SSH.

Налаштування віддаленої розробки

Підключення до сервера

• Натисніть F1 або клацніть по темно-помаранчевій кнопці в лівому нижньому куті вікна.
• Почніть вводити Remote-SSH, з’явиться автопідказка Remote-SSH: Connect to Host…. Виберіть її та натисніть Enter.
• З випадного списку виберіть назву, задану в директиві Host конфігураційного файлу, наприклад, SSH: aws-ec2. VS Code отримує список хостів безпосередньо з вашого config.
• Готово, ви підключені. Відкриється нове вікно; старе можна закрити.

З’єднання не гальмує, редактор працює швидко, тому що мережею передаються лише зміни файлів, а не весь UI.

Створення робочого простору

• Відкрийте панель File → Open Folder… (або натисніть Ctrl+K, потім Ctrl+O, натискаються послідовно, не одночасно).
• У вікні провідника перейдіть до кореня WordPress, наприклад, /var/www/example.com/. Можна вставити шлях вручну та натиснути OK.

У лівій панелі «Explorer» з’являться всі файли WordPress. Щоб додати до робочої області інші теки сервера (наприклад, каталог іншого плагіна чи теми), скористайтеся командою File → Add Folder to Workspace….

Залишилося зберегти це подання як робочий простір, щоб повертатися до проєкту одним клацанням:

• Натисніть F1, почніть вводити save work і виберіть Workspaces: Save Workspace As….
• Збережіть файл з іменем wp.code-workspace у зручному місці на сервері (розширення .code-workspace додасться автоматично).
• Закрийте та знову відкрийте VS Code, робочий простір з’явиться в розділі File → Recent або завантажиться автоматично, якщо він був останнім.

Для перемикання між кількома просторами використовуйте F1 → open work → вибір зі списку.

Символічне посилання (опціонально)

Якщо ви розробляєте конкретний плагін, зручно винести його вихідні файли в домашню директорію користувача та прилінкувати всередину WordPress:

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

Лівий шлях, реальна тека з проєктом, правий, символічне посилання всередині wp-content/plugins. Це ізолює код плагіна від ядра WordPress і спрощує версіонування.

⁉️🤔 Часті запитання

Чи обов’язково використовувати саме Amazon EC2, чи підійде інший VPS?

Підійде будь-який сервер з Ubuntu та SSH-доступом. DigitalOcean, Linode, Vultr, Hetzner, принцип налаштування ідентичний. Єдина вимога: щонайменше 2 ГБ ОЗП для комфортної роботи WordPress із налагодженням. На shared-хостингу цей підхід не спрацює, потрібен root-доступ або sudo. VS Code Remote SSH не прив’язаний до конкретного хмарного провайдера: можете підключитися до будь-якої машини, де запущено sshd, хоч до Raspberry Pi в локальній мережі. Різниця лише в затримці: що ближчий дата-центр, то чуйніший редактор.

Чи потрібно мені платити за трафік під час роботи через VS Code Remote SSH?

Трафік мінімальний. VS Code передає через SSH лише зміни файлів і команди термінала, ані пікселі інтерфейсу, ані бінарники розширень туди-сюди не ганяються. Типовий день розробки вкладається в десятки мегабайтів. Розширення (зокрема сам Remote-SSH) встановлюються на сервер один раз під час першого підключення — це пара сотень мегабайтів одноразово. Якщо у вас жорсткий ліміт трафіку, вимкніть автооновлення розширень на віддаленому хості через F1 → Preferences: Configure Runtime Arguments і додайте "remote.extensionDownloader.enabled": false. Але для абсолютної більшості користувачів це зайве.

Чи можна працювати з віддаленого сервера на планшеті або телефоні?

Формально так, через VS Code for the Web у браузері, але із застереженнями. Браузерна версія не підтримує Remote SSH безпосередньо. Обхідний шлях: підняти VS Code Server на інстансі (окремий продукт, не плутайте з Remote SSH) і підключатися до нього з браузера. Для планшета з клавіатурою це робочий сценарій, для телефона, радше екзотика. Практичніше носити легкий ноутбук або Chromebook із Linux-підсистемою: усе обчислювальне навантаження залишається на сервері, клієнт споживає мінімум ресурсів.

Що робити, якщо з’єднання рветься під час тривалої бездіяльності?

Налаштуйте keepalive у своєму SSH-конфігу. Додайте у файл C:\Users\Example\.ssh\config два рядки в секцію вашого хоста: ServerAliveInterval 60 і ServerAliveCountMax 5. Клієнт надсилатиме keepalive-пакет кожні 60 секунд і триматиме з’єднання до п’яти втрачених пакетів поспіль, з’єднання переживе до 5 хвилин повної тиші в мережі. Альтернатива: запустити tmux або screen на сервері для довготривалих процесів, щоб не втрачати сесію термінала під час обриву.

Чи безпечно зберігати закритий ключ у відкритому вигляді на Windows-машині?

Файл .pem без парольної фрази, так, це плаский рядок, який може прочитати будь-хто з доступом до вашого облікового запису Windows. Заходи захисту за зростанням: (1) встановіть парольну фразу під час створення ключа (ssh-keygen запитає, не тисніть Enter, а введіть фразу); (2) зберігайте ключ у зашифрованому розділі (BitLocker увімкнено за замовчуванням у Windows 11 Pro); (3) для продакшен-середовища використовуйте SSH-агент з апаратним ключем (YubiKey). Для dev-середовища компромісний варіант, ключ із парольною фразою: VS Code запам’ятає її на час сесії, вводити доведеться раз на день, зате ключ марний без парольної фрази, навіть якщо файл витече.

Що обрати для повсякденної роботи: Remote SSH чи локальний стек

Remote SSH через VS Code, не срібна куля. Якщо ви пишете плагін, якому потрібен лише wp-cli і юніт-тести, локальний Docker із wordpress-develop збереться за хвилину і не потребує інтернету. Але якщо ви налагоджуєте інтеграцію із зовнішнім API, перевіряєте кросбраузерність або показуєте прогрес клієнту, віддалений сервер із бойовим оточенням рулить.

Для комбінованого підходу тримайте dev-інстанс EC2 увімкненим постійно (t3.small із резервуванням коштує прийнятно) і підключайтеся до нього коли завгодно і звідки завгодно. Код живе на сервері, автоматичні бекапи ввімкнено, а ви не прив’язані до конкретної машини. Спробуйте: після тижня віддаленої розробки повертатися до XAMPP вам не захочеться.