Zadanie 1301: VS Code i SFTP (Edycja Zdalna)

Wstęp

Edytowanie plików konfiguracyjnych i kodu bezpośrednio w terminalu (vim/nano) jest przydatne, ale przy większych projektach (jak strony z Zadania 1303) pracy jest dużo wygodniej używać pełnego IDE. Visual Studio Code posiada świetny dodatek SFTP, który pozwala podmontować zdalny folder i edytować go tak, jakby był na twoim dysku. Każdy "Zapis" (Ctrl+S) automatycznie wysyła plik na serwer.

Wymagania

Zainstalowany Visual Studio Code na twoim komputerze (nie na serwerze).
Dostęp SSH do serwera (zrealizowane w Zadaniach 100+).
Wykonane Zadanie 1303 (mamy tam foldery /var/www/strona1 i /var/www/strona2).

Część 1: Instalacja Rozszerzenia

Zadanie 1: Market VS Code

Otwórz VS Code.
Przejdź do zakładki "Extensions" (ikona klocków po lewej lub Ctrl+Shift+X).
Wpisz SFTP.
Zainstaluj dodatek SFTP (autor: Natizyskunk lub liximomo - oba działają podobnie).

Część 2: Konfiguracja Projektu

Zadanie 2: Otwarcie Folderu

Stwórz na swoim komputerze (lokalnie) pusty folder, np. MojaStrona1_Projekt. Otwórz go w VS Code (File -> Open Folder).

Zadanie 3: Inicjalizacja SFTP

Wciśnij Ctrl+Shift+P (Paleta Komend).
Wpisz SFTP: Config i wybierz tę opcję.
W folderze powstanie podkatalog .vscode i plik sftp.json.

Część 3: Konfiguracja Połączenia

Zadanie 4: Edycja sftp.json

To najważniejszy moment. Musisz skonfigurować połączenie tak, by edytować pliki z Zadania 1303. Zastąp treść pliku sftp.json poniższym szablonem, uzupełniając swoje dane:

{
    "name": "Moj Serwer Linux",
    "host": "ADRES_IP_SERWERA",
    "protocol": "sftp",
    "port": 22,
    "username": "TWOJ_UZYTKOWNIK",
    "remotePath": "/var/www/strona1",
    "uploadOnSave": true,
    "useTempFile": false,
    "openSsh": false
}

[!IMPORTANT] remotePath: Ustawiliśmy to na /var/www/strona1. Dzięki temu, gdy otworzysz ten projekt w VS Code, będziesz widział pliki dokładnie z tego katalogu na serwerze (np. index.php stworzony w Zadaniu 1303).

Zadanie 5: Hasło / Klucz

Po zapisaniu pliku i próbie pobrania danych, VS Code zapyta cię o hasło do serwera. Alternatywnie możesz dodać linię "privateKeyPath": "ścieżka/do/id_rsa" jeśli używasz kluczy SSH.

Część 4: Praca z plikami

Zadanie 6: Pobieranie (Download)

W panelu plików (Explorer) po lewej kliknij prawym przyciskiem myszy na pustym obszarze i wybierz SFTP: Download Project (lub kliknij na nazwę folderu). Powinieneś zobaczyć, jak pojawia się plik index.php który stworzyłeś w poprzednim zadaniu.

Zadanie 7: Edycja

Otwórz index.php.
Zmień nagłówek na: <h1>Edycja przez VS Code i SFTP!</h1>.
Zapisz plik (Ctrl+S).
Spójrz na dolny pasek VS Code - powinieneś zobaczyć komunikat o wysyłaniu (upload).

Zadanie 8: Weryfikacja

Wejdź w przeglądarce na http://strona1.local. Zmiany powinny być widoczne natychmiast!

Część 5: Drugi VHost (Opcjonalnie)

Jeśli chcesz edytować drugą stronę (strona2), najlepiej stwórz nowy, osobny folder na swoim komputerze, ponownie uruchom SFTP: Config i w remotePath wpisz /var/www/strona2.

Commit

Tego zadania nie commitujemy na serwerze w standardowy sposób, bo konfiguracja .vscode jest lokalna na twoim komputerze (kliencie). Możesz jednak zrobić zrzut ekranu działającego połączenia jako dowód.

# Brak komend do wykonania na serwerze (poza ew. instalacją VS Code u siebie)

VS Code: Praca Zdalna (SFTP)