Zadanie 1000: Konfiguracja Visual Studio Code i SFTP do Pracy Zdalnej

Wprowadzenie

W pracy developera rzadko pracujemy tylko na lokalnym komputerze. Często musimy edytować pliki bezpośrednio na serwerze testowym lub produkcyjnym. Visual Studio Code (VS Code) dzięki rozszerzeniom pozwala na wygodną pracę ze zdalnymi plikami, jakby znajdowały się na twoim dysku.

W tym zadaniu nauczysz się konfigurować środowisko pracy, tworzyć prostą stronę i zarządzać nią na zdalnym serwerze Linux przy użyciu protokołu SFTP (SSH File Transfer Protocol).

Cel zadania

Twoim celem jest skonfigurowanie VS Code, zainstalowanie rozszerzenia SFTP, nawiązanie połączenia z serwerem zdalnym i przesłanie na niego prostej strony internetowej. Nauczysz się również diagnozować typowe problemy z połączeniem i uprawnieniami.

Instrukcja Krok po Kroku

Krok 1: Przygotowanie Projektu w VS Code

Uruchom Visual Studio Code.
Utwórz nowy folder na swoim komputerze o nazwie MojaStronaWWW i otwórz go w VS Code (File -> Open Folder...).
Utwórz nowy plik index.html.

Wpisz podstawową strukturę HTML5 (możesz wpisać ! i nacisnąć Tab):

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zadanie 1000 - SFTP</title>
</head>
<body>
    <h1>Witaj na zdalnym serwerze!</h1>
    <p>Ta strona została przesłana przez SFTP.</p>
</body>
</html>

Krok 2: Instalacja Rozszerzenia SFTP

W VS Code przejdź do zakładki rozszerzeń (ikona klocków po lewej lub Ctrl+Shift+X).
Wyszukaj "SFTP" (popularne rozszerzenie to np. liximomo.sftp lub Natizyskunk.sftp - wybierz to, które jest aktualnie wspierane/polecane).
Kliknij Install.

Krok 3: Konfiguracja Połączenia SFTP

Naciśnij F1 (lub Ctrl+Shift+P) aby otworzyć paletę komend.
Wpisz SFTP: Config i wybierz tę opcję.
W folderze .vscode zostanie utworzony plik sftp.json. Skonfiguruj go, podając dane do swojego serwera Linux (hostingowego lub lokalnej maszyny wirtualnej).

Pamiętah by na serwerze była dostępna usługa ssh !!!!

Przykładowa konfiguracja:

{
    "name": "MojSerwer",
    "host": "192.168.1.X",  // Adres IP twojego serwera
    "protocol": "sftp",
    "port": 22,
    "username": "twoj_login", // login do konta na serwerz
    "remotePath": "/var/www/mojastrona.local/public_html", // Ścieżka na serwerze
    "uploadOnSave": true, // Automatyczny upload po zapisaniu pliku
    "useTempFile": false,
    "openSsh": false
}

Uwaga: Hasło możesz podać w polu "password", ale bezpieczniej jest być pytanym o nie przy połączeniu lub używać kluczy SSH ("privateKeyPath").

Krok 4: Pierwsze Połączenie i Upload

Zapisz plik sftp.json.
W panelu plików po lewej stronie, kliknij prawym przyciskiem myszy na pusty obszar lub na plik index.html.
Wybierz opcję SFTP: Upload Project (aby wysłać wszystko) lub SFTP: Upload This File.
Obserwuj pasek statusu na dole VS Code. Powinieneś zobaczyć komunikaty o łączeniu i sukcesie przesyłania.

Krok 5: Edycja na Żywo

Dzięki opcji "uploadOnSave": true, każda zmiana w index.html po naciśnięciu Ctrl+S zostanie automatycznie wysłana na serwer.

Zmień nagłówek <h1> na coś innego.
Zapisz plik.
Odśwież stronę w przeglądarce pod adresem IP serwera, aby zobaczyć zmiany.

Rozwiązywanie Problemów (Troubleshooting)

1. Jak ustalić czy jest połączenie z serwerem?

Jeśli upload nie działa, sprawdź połączenie podstawowymi narzędziami:

Ping: Otwórz terminal na swoim komputerze i wpisz ping ADRES_IP_SERWERA. Jeśli nie ma odpowiedzi, problem leży w sieci (brak połączenia, zły adres IP).
SSH w terminalu: Spróbuj połączyć się ręcznie: ssh user@ADRES_IP. Jeśli tu zadziała, a w VS Code nie, problem leży w konfiguracji sftp.json (literówka w haśle, zły port).
Logi SFTP: W VS Code otwórz panel Output (View -> Output) i z dropdownu wybierz sftp. Tam znajdziesz szczegóły błędów.

2. Jak ustawić lokalizację i użytkownika SSH?

Te dane definiujesz w pliku sftp.json:

"host": To adres IP lub domena serwera.
"username": To nazwa użytkownika, na którego się logujesz (np. student, root).
"remotePath": To jest kluczowe! Musisz podać ścieżkę absolutną do katalogu, w którym mają znaleźć się pliki strony.
- Aby sprawdzić ścieżkę, zaloguj się przez terminal na serwer, wejdź do docelowego folderu i wpisz pwd. Skopiuj wynik do sftp.json.

3. Problemy z uprawnieniami (Permission Denied)

Częsty błąd: Upload failed: Permission denied. Oznacza to, że użytkownik zdefiniowany w username nie ma prawa zapisu w katalogu remotePath.

Rozwiązanie:

Zaloguj się na serwer przez terminal (SSH).
Sprawdź uprawnienia katalogu: ls -ld /ścieżka/do/katalogu.
Nadaj uprawnienia użytkownikowi. Najprościej (jeśli to twój serwer developerski) przejąć katalog na własność:
```
sudo chown -R twoj_login:twoj_login /var/www/html/mojastrona
```
Lub nadać prawa zapisu dla wszystkich (tylko testowo!):
```
# Nie zalecane na produkcji!
sudo chmod -R 777 /var/www/html/mojastrona
```
Spróbuj wysłać plik ponownie w VS Code.

Weryfikacja

Zrób zrzut ekranu działającego VS Code z widocznym panelem Output (sukces uploadu) oraz otwartą stroną w przeglądarce i zapisz go jako `dowod.pn

VS Code i Zdalna Praca (SFTP)