Skip to content

Всё для WordPress, веб-разработки — и не только

🛠 Удаленная разработка WordPress с VS Code на Amazon EC2

🛠 Удаленная разработка WordPress с VS Code на Amazon EC2

Вы когда-нибудь теряли день на то, чтобы поднять локальный 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:

1adduser example

Введите пароль дважды, на остальные вопросы можно просто нажать Enter. Затем добавьте пользователя в группу sudo:

1usermod -aG sudo example

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

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

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

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

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

Вы увидите блок такого вида:

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

Скопируйте всё содержимое (включая строки-ограничители) и сохраните в текстовый файл на своём компьютере. Путь может быть таким:

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

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

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

VS Code читает настройки подключения из стандартного SSH-конфига. Создайте текстовый файл без расширения config в папке C:\Users\Example\.ssh\ с таким содержимым (подробнее о формате читайте в man ssh_config):

1Host 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 и нажмите «Установить».

Установка OpenSSH клиента в дополнительных компонентах Windows

Visual Studio Code и расширение Remote Development

Скачайте VS Code, подойдёт как стабильная версия (синий значок), так и редакция Insiders (зелёный значок, более частые обновления). Разницы для удалённой разработки нет.

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

Настройка удалённой разработки

Подключение к серверу

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

Соединение не тормозит, редактор работает шустро, потому что по сети гоняются только диффы файлов, а не весь UI.

Индикатор подключения SSH aws-ec2 в левом нижнем углу окна VS Code

Создание рабочего пространства

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

В левой панели «Explorer» появятся все файлы WordPress. Чтобы добавить в рабочую область другие папки сервера (например, каталог другого плагина или темы), используйте команду File → Add Folder to Workspace….

Дерево файлов WordPress в боковой панели VS Code после подключения к серверу

Осталось сохранить это представление как рабочее пространство, чтобы возвращаться к проекту одним кликом:

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

Для переключения между несколькими пространствами используйте F1open work → выбор из списка.

Сохранённое рабочее пространство wp.code-workspace в списке недавних проектов VS Code

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

Если вы разрабатываете конкретный плагин, удобно вынести его исходники в домашнюю директорию пользователя и прилинковать внутрь WordPress:

1ln -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 вам не захочется.