Перейти до основного вмісту

Підключення до файлів сайту через VSCode

Для підключення через SSH і FTP/SFTP Visual Studio Code використовує розширення, яке забезпечує зручний доступ до віддалених файлів.

SSH​

Встановіть розширення​

Відкрийте Visual Studio Code. Натисніть значок "Extensions" на бічній панелі (значок квадрата), у вікні Extensions знайдіть SSH.
Натисніть "Install" на розширенні з назвою "Remote - SSH" від Microsoft.

Встановлення розширення

Налаштуйте SSH-ключі​

Щоб підключатися через SSH без пароля, налаштуйте свій SSH-ключ у FASTPANEL за допомогою цієї статті.

примітка

Дізнатися користувача сайту можна в картці сайту, у полі "Site user". Щоб змінити пароль користувача сайту, перейдіть до розділу "Management" → "Users" у FASTPANEL®.

Налаштуйте SSH у VSCode​

Натисніть F1 у Windows/Linux або Cmd+Shift+P на Mac, щоб відкрити палітру команд, введіть і виберіть Remote-SSH: Add New SSH Host, а потім введіть рядок SSH-підключення у форматі:

ssh site_user@11.22.33.44

Додавання нового SSH-хоста

Замініть site_user і 11.22.33.44 відповідними значеннями. Замість site_user потрібно вказати користувача сайту, а замість 11.22.33.44 — IP-адресу вашого сервера. Після введення команди виберіть конфігураційний файл для збереження конфігурації SSH (зазвичай ~/.ssh/config).

Підключіться до віддаленого сервера​

Натисніть F1 у Windows/Linux або Cmd+Shift+P на Mac, щоб відкрити палітру команд, введіть і виберіть Remote-SSH: Connect to Host, виберіть раніше доданий хост, прийміть відбиток сервера і введіть парольну фразу для вашого SSH-ключа, якщо це перше підключення, а також, якщо буде запропоновано, введіть пароль.

Після підключення перейдіть до "Explorer" → "Open Folder" , щоб відкрити папку на хості.
Наприклад, /var/www/site_user/data/www/example.com.

Підключення до віддаленого сервера

Відкрийте файли та почніть програмувати​

Після підключення VSCode перезавантажиться, і ви зможете переглядати файли на віддаленому сервері безпосередньо у VSCode. Ви можете відкривати, редагувати та зберігати файли так само, як і на локальному комп’ютері.

Докладніше дивіться в документації розширення.

FTP/SFTP​

Встановіть розширення​

Відкрийте Visual Studio Code. Натисніть значок "Extensions" на бічній панелі (значок квадрата). Введіть SFTP у рядку пошуку. Натисніть "Install", щоб встановити вибране розширення.

Встановлення розширення

Налаштуйте підключення​

Відкрийте палітру команд, натиснувши F1 у Windows/Linux або Cmd+Shift+P на Mac, введіть SFTP: Config, а потім відредагуйте параметри конфігурації з інформацією про ваш віддалений сервер у файлі sftp.json у каталозі .vscode. Наприклад:

{  
    "name": "My Server",  
    "host": "11.22.33.44",  
    "protocol": "ftp",  
    "password": "password",  
    "port": 21,  
    "username": "ftp_user",  
    "remotePath": "/",  
    "uploadOnSave": false,  
    "useTempFile": false,  
    "openSsh": false  
}
примітка

Ви можете дізнатися про створення FTP-облікових записів у FASTPANEL® у цій статті, а про SFTP-облікові записи — у цій.

  • "host": IP-адреса вашого сервера.
  • "protocol": Вкажіть ftp або sftp.
  • "port": 21 для FTP або 2222 для SFTP.
  • "username" і "password": Логін і пароль для облікового запису FTP/SFTP.
  • "remotePath": Вкажіть каталог на сервері, з яким ви хочете працювати.
  • "uploadOnSave": Опція для автоматичного вивантаження під час збереження файлу.

Параметр password у sftp.json є необов’язковим; якщо його не вказати, під час синхронізації буде запропоновано ввести пароль. Збережіть і закрийте файл sftp.json.

Робота з файлами​

Відкрийте палітру команд, натиснувши F1 у Windows/Linux або Cmd+Shift+P на Mac. Потім введіть SFTP, щоб побачити низку доступних команд, до яких також можна отримати доступ із контекстних меню файлового провідника проєкту.
Щоб синхронізуватися з віддаленою папкою, використайте команду SFTP: Download Project, яка завантажить каталог, вказаний у параметрі remotePath у sftp.json, до вашого локального відкритого каталогу.

Remote Explorer​

Remote Explorer дає змогу переглядати віддалені файли. Ви можете відкрити Remote Explorer, виконавши команду View: Show SFTP. Після цього натисніть подання SFTP у панелі активності.

У Remote Explorer можна лише переглядати вміст файлу. Використовуйте SFTP: Edit in Local, щоб редагувати його локально.

Встановлення розширення