Удаленная разработка с помощью кода Visual Studio на Amazon EC2 — Chrome World по-русски

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

Подготовительные шаги дольше, чем фактическая настройка для удаленной разработки. Я предполагаю, что вы работаете на 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 на Amazon EC2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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