Przejdź do głównej treści

Łączenie się z plikami witryny przez VSCode

Do łączenia przez SSH i FTP/SFTP Visual Studio Code używa rozszerzeń, które zapewniają wygodny dostęp do plików zdalnych.

SSH

Zainstaluj rozszerzenie

Otwórz Visual Studio Code. Kliknij ikonę "Extensions" na pasku bocznym (ikona kwadratu), a w widoku Extensions wyszukaj SSH.
Kliknij "Install" przy rozszerzeniu o nazwie "Remote - SSH" od Microsoft.

Instalacja rozszerzenia

Skonfiguruj klucze SSH

Aby łączyć się przez SSH bez hasła, skonfiguruj swój klucz SSH w FASTPANEL, korzystając z tego artykułu.

uwaga

Użytkownika witryny możesz znaleźć na karcie witryny, w polu "Site user". Aby zmienić hasło użytkownika witryny, przejdź do sekcji "Management" → "Users" w FASTPANEL®.

Skonfiguruj SSH w VSCode

Naciśnij F1 w systemie Windows/Linux lub Cmd+Shift+P na Macu, aby otworzyć Paletę poleceń, wpisz i wybierz Remote-SSH: Add New SSH Host, a następnie wprowadź ciąg połączenia SSH w formacie:

ssh site_user@11.22.33.44

Dodaj nowy host SSH

Zastąp site_user i 11.22.33.44 odpowiednimi wartościami. Zamiast site_user należy podać użytkownika witryny, a zamiast 11.22.33.44 adres IP serwera. Po wprowadzeniu polecenia wybierz plik konfiguracyjny, w którym zostanie zapisana konfiguracja SSH (zwykle ~/.ssh/config).

Połącz się ze zdalnym serwerem

Naciśnij F1 w systemie Windows/Linux lub Cmd+Shift+P na Macu, aby otworzyć Paletę poleceń, wpisz i wybierz Remote-SSH: Connect to Host, wybierz wcześniej dodany host, zaakceptuj odcisk palca serwera i wprowadź hasło do klucza SSH, jeśli łączysz się po raz pierwszy, a jeśli pojawi się monit, wpisz swoje hasło.

Po połączeniu przejdź do "Explorer" → "Open Folder" , aby otworzyć folder na hoście.
Na przykład /var/www/site_user/data/www/example.com.

Połącz z serwerem zdalnym

Otwórz pliki i zacznij kodować

Po nawiązaniu połączenia VSCode przeładuje się i będzie można przeglądać pliki na zdalnym serwerze bezpośrednio w VSCode. Możesz otwierać, edytować i zapisywać pliki tak samo jak na komputerze lokalnym.

Aby uzyskać więcej informacji, zobacz dokumentację rozszerzenia.

FTP/SFTP

Zainstaluj rozszerzenie

Otwórz Visual Studio Code. Kliknij ikonę "Extensions" na pasku bocznym (ikona kwadratu). Wpisz SFTP w pasku wyszukiwania. Kliknij "Install", aby zainstalować wybrane rozszerzenie.

Instalacja rozszerzenia

Skonfiguruj połączenie

Otwórz Paletę poleceń, naciskając F1 w systemie Windows/Linux lub Cmd+Shift+P na Macu, wpisz SFTP: Config, a następnie edytuj parametry konfiguracji, podając informacje o swoim zdalnym serwerze w pliku sftp.json w katalogu .vscode. Na przykład:

{  
"name": "My Server",
"host": "11.22.33.44",
"protocol": "ftp",
"password": "password",
"port": 21,
"username": "ftp_user",
"remotePath": "/",
"uploadOnSave": false,
"useTempFile": false,
"openSsh": false
}
uwaga

Informacje o tworzeniu kont FTP w FASTPANEL® znajdziesz w tym artykule, a o kontach SFTP w tym.

  • "host": adres IP serwera.
  • "protocol": podaj ftp lub sftp.
  • "port": 21 dla FTP lub 2222 dla SFTP.
  • "username" i "password": login i hasło do konta FTP/SFTP.
  • "remotePath": podaj katalog na serwerze, z którym chcesz pracować.
  • "uploadOnSave": opcja automatycznego przesyłania przy zapisywaniu pliku.

Parametr hasła w sftp.json jest opcjonalny; jeśli go pominiesz, podczas synchronizacji pojawi się monit o hasło. Zapisz i zamknij plik sftp.json .

Praca z plikami

Otwórz Paletę poleceń, naciskając F1 w systemie Windows/Linux lub Cmd+Shift+P na Macu. Następnie wpisz SFTP, aby zobaczyć wiele dostępnych poleceń, do których można również uzyskać dostęp z menu kontekstowych eksploratora plików projektu.
Aby zsynchronizować ze zdalnym folderem, użyj polecenia SFTP: Download Project, które pobierze katalog określony w ustawieniu remotePath w sftp.json do lokalnie otwartego katalogu.

Eksplorator zdalny

Remote Explorer pozwala przeglądać pliki zdalne. Możesz otworzyć Remote Explorer, uruchamiając polecenie View: Show SFTP. Następnie kliknij widok SFTP na pasku aktywności.

W Remote Explorer możesz tylko wyświetlać zawartość pliku. Użyj SFTP: Edit in Local, aby edytować go lokalnie.

Instalacja rozszerzenia