WordPressПанели управления

Удаленная разработка с помощью кода Visual Studio на Amazon EC2

Удаленная разработка с помощью кода Visual Studio на Amazon EC2

Давайте начнем разработку в облаке! Давно прошли времена установки локального стека XAMPP и написания кода в Sublime Text. Итак, каковы мои настройки для кодирования плагинов WordPress? Я научу вас, как начать удаленную разработку с Visual Studio на Amazon EC2. Использование AWS улучшило мой стиль работы. Почему это полезно?

  • Весь ваш код будет существовать в среде, которая может близко соответствовать производству.
  • Все очень быстро, когда вы выбираете физическое местоположение сервера, сохраняя низкую задержку (по крайней мере, в AWS).
  • Вы сможете работать с разных компьютеров, поскольку все настройки рабочего пространства VS Code хранятся удаленно.
  • Вы можете указать домен разработки на сервере, так что больше нет локального хоста, динамического IP-адреса вашего интернет-провайдера или проблем с переадресацией портов, чтобы показать ваш прогресс клиентам и коллегам.
  • Серверы Amazon, вероятно, более надежны, чем ваш компьютер.
  • Команды Bash из учебников или GitHub неожиданно станут более понятными и хорошо работают на сервере. У вас будет терминал и доступ к экземпляру AWS EC2 через SSH.
  • Если вы беспокоитесь о том, что код не будет у вас под рукой … Регулярные автоматические резервные копии обеспечивают душевное спокойствие (вы все равно должны делать это при локальной разработке).

Предпосылки

Подготовительные шаги дольше, чем фактическая настройка для удаленной разработки. Я предполагаю, что вы работаете на 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:\Users\Example\.sshпапке, такой же, как указано выше. Объяснение:

  • Host (aws-ec2) – это просто имя, которое будет отображаться в VS Code (как заголовок окна и индикатор соединения в левом нижнем углу).
  • HostName – это хост или IP-адрес сервера.
  • User – это имя пользователя Ubuntu.
  • IdentityFile – это путь к закрытому ключу.

Windows 10 OpenSSH клиент

Есть встроенный SSH-клиент, но он по умолчанию скрыт. Найдите в меню «Пуск» пункт « Управление дополнительными функциями». Если вы не видите OpenSSH Client в списке, нажмите кнопку Добавить функцию. Найдите его среди дополнительных функций и нажмите « Установить» .

Windows 10 установить OpenSSH Client

Visual Studio Code (Инсайдеры)

Если вы еще этого не сделали, загрузите VS Code (один из их установщиков). Я выбрал редакцию Visual Studio Code Insiders, которая является передовой с более частыми обновлениями и зеленым значком. Удаленная разработка отлично работает с обычной версией, которая идет с синим значком.

Пакет расширений для удаленной разработки

Получив VS Code, также установите пакет расширений Remote Development (от Microsoft). После этого вы увидите, что он поставляется с другими, которые вы можете счастливо удалить: Remote – Containers и WSL. Это не нужно. Если вы застряли, более подробная информация находится в деталях расширения.

Удаленная разработка с кодом Visual Studio

Подключиться к серверу

Подключение к хосту в VS Code

  1. Нажмите F1клавишу или нажмите темно-оранжевую кнопку в углу.
  2. Начните вводить слово поэтому появится автоматическое предложение Remote-SSH: Connect to Host… и нажмитеEnter
  3. Выберите имя, которое вы указали в качестве Host, например, SSH: aws-ec2 Код VS получает это из файла конфигурации без расширения, который вы создали.
  4. Все! Вы подключены. Не волнуйся; это происходит в новом окне… закройте старое.

 Удаленная разработка с использованием кода Visual Studio совсем не медленная. 

Удаленная разработка с кодом Visual Studio, подключение к удаленному хосту

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

В VS Code одного и того же можно достичь несколькими способами.

  1. Откройте панель « Открыть папку… » в меню «Файл», в разделе «Пуск» на главном экране или нажмите « Ctrl+», K а затем  Ctrl +O. Всякий раз, когда вы видите эти сочетания клавиш друг за другом, это означает, что вы должны нажимать их последовательно.
  2. Перейдите на эту панель в папку WordPress (или непосредственно на ваш плагин / тему, которую вы разрабатываете). Вы можете щелкнуть, ввести или вставить путь, например /var/www/example.com/нажать « ОК» .

Наконец, посмотрите файлы WordPress, загруженные в Проводнике слева.

Удаленная разработка WordPress с кодом Visual Studio на Amazon EC2

Чтобы создать ярлык для других папок на вашем сервере, используйте функцию « Добавить папку в рабочую область …» . Мне нравится иметь доступ ко всему дереву WordPress на случай, если я захочу извлечь уроки из основных файлов или осмотреть другие плагины.

Теперь остается только сохранить это представление в виде рабочего пространства, поэтому вернуться к нему легко.

  1. Чтобы открыть панель сохранения, выберите или нажмите F1 и введите сохранить работу.
  2. Сохраните его как wp.code-workspaceили подобное в месте вашего проекта (расширение не является обязательным, будет добавлено в любом случае).
  3. Закройте и снова откройте VS Code, и он либо автоматически загрузит его, либо сделает рабочее пространство вашего проекта доступным в разделе Recent !

Если у вас есть другие рабочие пространства и вам нужно переключаться между ними, перейдите к или F1 введите open work и выберите то, что вам нужно оттуда. Я предпочитаю хранить эти файлы вне WordPress.

Открыть сохраненное удаленное рабочее пространство в VS Code

Необязательная доп., символическая ссылка

Если это плагин WordPress, я обычно символически связываю папку проекта (или, лучше, сборку разработки / производства). Левый путь – это настоящая папка, правая – это символическая ссылка.

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

Удивитесь своему творчеству и начните кодировать

Рабочая установка завершает мое руководство по настройке удаленной разработки с помощью кода Visual Studio. Я использовал для кодирования в Cloud9, который теперь также принадлежит Amazon, но  так быстро и круто. Огромное сообщество разработчиков создает расширения, которые помогут вам настроить все по своему вкусу. 

Источник записи: https://letswp.io

Похожие сообщения
ElementorWordPressПлагины

Elementor - Как создать мега меню с помощью дополнений Elementor и Plus

WordPressWordPress темы

20+ лучших женских тем WordPress 2020

WordPress

Как исправить ошибку загрузки изображения WordPress

WordPress

Как узнать какую тему использует сайт на WordPress? (3 быстрых способа)