Главная > Блог > Web-разработка > Разное >

Расширение «Remote — SSH» для VS Code

20.07.2022

Теги: IDE • SSH • Web-разработка • Директория • Настройка • Плагин • Сервер • Установка

Расширение «Remote — SSH» позволяет открыть директорию в VS Code на удаленном сервере, виртуальной машине или контейнере с работающим ssh-сервером. После подключения к серверу можно вести разработку в этой директории, используя все возможности VS Code. При этом весь процесс разбивается на две части — клиентская часть приложения запускается на локальном компьютере, а серверная часть — на удаленном сервере (виртуалке, контейнере).

Многие из установленных ранее расширений надо будет установить повторно. Потому что часть из них предназначена для работы локально, а другая часть — для работы на удаленном сервере. Если устанавливать расширения из интерфейса VS Code — оно сразу будет установлено в правильном месте. Если расширение было установлено ранее — будет предложено установить его на сервере с помощью ссылки «Установить на SSH: hostname».

Расширение, установленное локально:

Расширение, установленное на сервере:

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

Вообще, мы могли бы подключаться к серверу по паролю — но это небезопасно, да и хлопотно каждый раз вводить пароль. Так что создаем пару ключей в директории ~/.ssh и копируем публичный ключ на сервер.

$ cd ~/.ssh
$ ssh-keygen
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/Evgeniy/.ssh/id_rsa): timeweb-vds
Enter passphrase (empty for no passphrase): Enter
Enter same passphrase again: Enter
Your identification has been saved in timeweb-vds
Your public key has been saved in timeweb-vds.pub
The key fingerprint is:
SHA256:/Qa/nDNzleWO28KS1K3O2FOw5VF0eN1ylev7ONRE2tA Evgeniy@TKMCOMP
The key's randomart image is:
+---[RSA 3072]----+
|               o*|
|              +.E|
|               Xo|
|         .    o.=|
|        S o  ..O+|
|           +. ++B|
|           .++ Bo|
|           o**O+o|
|            =B*=+|
+----[SHA256]-----+

$ ssh-copy-id -i ~/.ssh/timeweb-vds.pub evgeniy@111.111.111.111

Для удобства отредактируем файл конфигурации ssh-клиента ~/.ssh/config:

Host timeweb-vds
  User evgeniy
  HostName 111.111.111.111
  Port 22
  IdentityFile ~/.ssh/timeweb-vds

Host spaceweb-vds
  User evgeniy
  HostName 222.222.222.222
  Port 22
  IdentityFile ~/.ssh/spaceweb-vds

Host github.com
  IdentityFile ~/.ssh/github

Теперь подключиться к серверу можно простой командой:

$ ssh timeweb-vds

Подготовка к удаленной разработке

Подключимся к удаленному серверу, создадим в домашнем каталоге директорию projects, клонируем репозиторий:

$ ssh timeweb-vds
$ mkdir ~/projects
$ cd ~/projects
$ git clone https://github.com/tokmakov/react-router-recipes.git react-router-recipes-one

Мы здесь работаем с GitHub по протоколу https, но мне удобнее работать по протоколу ssh. Так что давайте создадим на сервере пару ключей, файл конфигурации ssh-клиента ~/.ssh/config и скопируем публичный ключ на github.com.

$ cd ~/.ssh
$ ssh-keygen
Generating public/private rsa key pair.
Enter file in which to save the key (/home/evgeniy/.ssh/id_rsa): github
Enter passphrase (empty for no passphrase): Enter
Enter same passphrase again: Enter 
Your identification has been saved in github
Your public key has been saved in github.pub
The key fingerprint is:
SHA256:bfAJjtWVSD1v1XSheCKVgeI2CRf2c230qey0xjQB/7E evgeniy@111.111.111.111
The key's randomart image is:
+---[RSA 3072]----+
|       o. .*=+ o=|
|     ..o.o.oO = =|
|      + *+.+ B *.|
|       O =+.= + =|
|      o S =  * E |
|         .  = o  |
|             =   |
|            .    |
|                 |
+----[SHA256]-----+

$ cat github.pub 
ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAADgQBCre0XGAEKukCqLsxv6Pkl/rC5uZatqxjOPqbQmHZoLqZU2sgRHo0uBBrgQBy
rI8NI+UjExSE9gGO/X9/z54v9N9wGZ/+KpVUWrr5qo+ApZD5Ml2C8Cc4FMqJymmgULtBWkJ08yj39VeCJKk6qoHW0A09r2mV+JK
xTpcaf3wei+Ag/V/m3RolQJjzXJyqJlyaO8X4c3PQnoRepBpPxt9ULGaPZyaxtpKlS1IQpSAlYX9JatJEcfIgtxhW1eYoaMWhBA
W2Ko7wyg7FYGWcMFcLZmQoAoBzQA7eBuVrR8fDdRpQy7mxl0k+IdjbOvvrQOmhb23XBgmZXcI/CdauXSmHbYFq6+lo3IYYFIOrx
s2GfIUnO8VgbOvPMqejb+WCUQMQcPh9Km80n//WCL5/qb9YBsa7FZChJu4rLZ5aes/XgCLaU16a8G3SbI9fONRA2MBPew3R+9ya
hP1xm8YeBqrrABs9BxRawbP+9AiwLExeaB9xQKtjJSiZk5/1v5kLbR7k= evgeniy@111.111.111.111

Копируем публичный ключ в буфер обмена, идем на github.com в настройки профиля, слева выбираем «SSH and GPG keys», добавляем новый ключ из буфера обмена.

$ nano ~/.ssh/config

Host github.com
  IdentityFile ~/.ssh/github

$ cd ~/projects
$ git clone git@github.com:tokmakov/react-router-recipes.git react-router-recipes-two

Разработка на удаленном сервере

После установки расширения «Remote — SSH» в левом нижнем углу появится иконка «Открыть удаленное окно». При клике по нему откроется палитра команд с подсказкой «Подключиться к узлу…». При выборе этой подсказки — будет показана новая подсказка, к какому узлу подключаться. У нас в файле ~/.ssh/config два узла — выбираем нужный. После этого будет запущен еще один экземпляр VS Code, где нужно будет открыть нужную директорию — например, react-router-recipes-one.

Здесь все уже готово к запуску, так что просто установим пакеты, соберем проект в директорию build и запустим веб-сервер LiveServer, чтобы он обслуживал директорию build.

$ npm ci # установка пакетов из package-lock.json
$ npm run build # сборка проекта в директорию build

LiveServer по умолчанию обслуживает директорию dist, так что надо изменить это в файле настроек VS Code settings.json.

{
  ..........
  // расширение «Live Server», веб-сервер для разработки
  "liveServer.settings.root": "/build",
  "liveServer.settings.host": "localhost",
  "liveServer.settings.fullReload": false,
  "liveServer.settings.port": 5555,
  ..........
}

После запуска сервера откроется окно браузера с нашим приложением. Это возможно, потому что VS Code выполнил перенаправление портов.

Это можно увидеть на вкладке «Порты» — при обращении к localhost:5555 локально будет перенаправление к localhost:5555 на сервере.

Чтобы VS Code восстанавливал переадресованные порты при следующем сеансе, нужно добавить опцию в файл настроек settings.json.

{
  ..........
  // расширение «Remote — SSH» для удаленной разработки
  "remote.SSH.remotePlatform": {
    "timeweb-vds": "linux",
    "spaceweb-vds": "linux"
  },
  "remote.restoreForwardedPorts": true,
  ..........
}

Кроме того, можно добавить в файл конфигурации ssh-клиента директивы LocalForward:

Host timeweb-vds
  User evgeniy
  HostName 111.111.111.111
  Port 22
  IdentityFile ~/.ssh/timeweb-vds
  LocalForward 3000 127.0.0.1:3000
  LocalForward 4444 127.0.0.1:5555

Host spaceweb-vds
  User evgeniy
  HostName 222.222.222.222
  Port 22
  IdentityFile ~/.ssh/spaceweb-vds

Host github.com
  IdentityFile ~/.ssh/github

Поиск: IDE • SSH • Web-разработка • Директория • Настройка • Плагин • Сервер • Remote • Local • Установка