Подготовительные шаги дольше, чем фактическая настройка для удаленной разработки. Я предполагаю, что вы работаете на Windows 10, и вы немного новичок во всем этом. Не стесняйтесь переходить на части, которые имеют отношение к вам.
Экземпляр Amazon EC2 с OLS AMI
В предыдущей статье я указывал, что мы используем образ машины Amazon на основе Ubuntu для WordPress, который включает в себя веб-сервер OpenLiteSpeed и все другие необходимые вещи. Хотя шаги этой статьи работают в другом месте, теперь вы знаете, какова наша исходная среда. Впредь я предполагаю, что у вас уже есть сервер Ubuntu с минимум 2 ГБ ОЗУ.
Пользователь Linux
Вам понадобится не-root, но пользователь sudo на сервере. DigitalOcean хорошо объясняет, как его создать. В двух словах, следующие команды создают пользователя. Как пользователь root или с префиксом sudo:
adduser example
Пароль дважды, Enter кучу раз, потом Y. После того:
usermod -aG sudo example
Ключевая пара для SSH
Одна часть – это закрытый ключ, который находится в файле без расширений или .pem, который содержит много строк. Клиент (ваше программное обеспечение SSH или сам код VS) использует его для входа в систему, а сервер проверяет его по своему аналогу. Это более короткий однострочный открытый ключ, найденный в файле .pub, который входит в список авторизованных ключей, который мы инициируем следующим образом:
su - example
mkdir .ssh
chmod 700 .ssh
touch .ssh/authorized_keys
chmod 600 .ssh/authorized_keys
ssh-keygen
Разбейте Enter3 раза за последний. Продолжать…
cat .ssh/id_rsa.pub >> .ssh/authorized_keys
cat .ssh/id_rsa
Вот и все. Теперь вам нужно сохранить содержимое закрытого ключа в виде файла в Windows 10. Выберите все, что выглядит следующим образом:
-----BEGIN RSA PRIVATE KEY-----
...
-----END RSA PRIVATE KEY-----
Скопируйте и вставьте его в текстовый файл и сохраните его примерно так:
C:UsersExample.sshaws-example-user.pem
Назовите это как хотите. Не забудьте создать папку в вашем профиле, путь к которой включает в себя имя пользователя Windows.
Конфигурационный файл SSH для Visual Studio
Создайте текстовый файл с содержимым, похожим на это:
# Read more about SSH config files: https://linux.die.net/man/5/ssh_config
Host aws-ec2
HostName example.com
User example
IdentityFile C:UsersExample.sshaws-example-user.pem
Сохраните его как файл без расширения с именем в C:UsersExample.ssh
папке, такой же, как указано выше. Объяснение:
- Host (aws-ec2) – это просто имя, которое будет отображаться в VS Code (как заголовок окна и индикатор соединения в левом нижнем углу).
- HostName – это хост или IP-адрес сервера.
- User – это имя пользователя Ubuntu.
- IdentityFile – это путь к закрытому ключу.
Windows 10 OpenSSH клиент
Есть встроенный SSH-клиент, но он по умолчанию скрыт. Найдите в меню «Пуск» пункт « Управление дополнительными функциями». Если вы не видите OpenSSH Client в списке, нажмите кнопку Добавить функцию. Найдите его среди дополнительных функций и нажмите « Установить» .
Visual Studio Code (Инсайдеры)
Если вы еще этого не сделали, загрузите VS Code (один из их установщиков). Я выбрал редакцию Visual Studio Code Insiders, которая является передовой с более частыми обновлениями и зеленым значком. Удаленная разработка отлично работает с обычной версией, которая идет с синим значком.
Пакет расширений для удаленной разработки
Получив VS Code, также установите пакет расширений Remote Development (от Microsoft). После этого вы увидите, что он поставляется с другими, которые вы можете счастливо удалить: Remote – Containers и WSL. Это не нужно. Если вы застряли, более подробная информация находится в деталях расширения.
Удаленная разработка с кодом Visual Studio
Подключиться к серверу
- Нажмите F1клавишу или нажмите темно-оранжевую кнопку в углу.
- Начните вводить слово поэтому появится автоматическое предложение Remote-SSH: Connect to Host… и нажмитеEnter
- Выберите имя, которое вы указали в качестве Host, например, SSH: aws-ec2 Код VS получает это из файла конфигурации без расширения, который вы создали.
- Все! Вы подключены. Не волнуйся; это происходит в новом окне… закройте старое.
Удаленная разработка с использованием кода Visual Studio совсем не медленная.
Создать рабочее пространство
В VS Code одного и того же можно достичь несколькими способами.
- Откройте панель « Открыть папку… » в меню «Файл», в разделе «Пуск» на главном экране или нажмите « Ctrl+», K а затем Ctrl +O. Всякий раз, когда вы видите эти сочетания клавиш друг за другом, это означает, что вы должны нажимать их последовательно.
- Перейдите на эту панель в папку WordPress (или непосредственно на ваш плагин / тему, которую вы разрабатываете). Вы можете щелкнуть, ввести или вставить путь, например
/var/www/example.com/
нажать « ОК» .
Наконец, посмотрите файлы WordPress, загруженные в Проводнике слева.
Чтобы создать ярлык для других папок на вашем сервере, используйте функцию « Добавить папку в рабочую область …» . Мне нравится иметь доступ ко всему дереву WordPress на случай, если я захочу извлечь уроки из основных файлов или осмотреть другие плагины.
Теперь остается только сохранить это представление в виде рабочего пространства, поэтому вернуться к нему легко.
- Чтобы открыть панель сохранения, выберите или нажмите F1 и введите сохранить работу.
- Сохраните его как
wp.code-workspace
или подобное в месте вашего проекта (расширение не является обязательным, будет добавлено в любом случае). - Закройте и снова откройте VS Code, и он либо автоматически загрузит его, либо сделает рабочее пространство вашего проекта доступным в разделе Recent !
Если у вас есть другие рабочие пространства и вам нужно переключаться между ними, перейдите к или F1 введите open work и выберите то, что вам нужно оттуда. Я предпочитаю хранить эти файлы вне WordPress.
Необязательная доп., символическая ссылка
Если это плагин WordPress, я обычно символически связываю папку проекта (или, лучше, сборку разработки / производства). Левый путь – это настоящая папка, правая – это символическая ссылка.
ln -s /home/example/wp /var/www/dev.example.com/wp-content/plugins/my-plugin
Удивитесь своему творчеству и начните кодировать
Рабочая установка завершает мое руководство по настройке удаленной разработки с помощью кода Visual Studio. Я использовал для кодирования в Cloud9, который теперь также принадлежит Amazon, но так быстро и круто. Огромное сообщество разработчиков создает расширения, которые помогут вам настроить все по своему вкусу.