Lewati ke konten utama

Menghubungkan ke file situs melalui VSCode

Untuk terhubung melalui SSH dan FTP/SFTP, Visual Studio Code menggunakan ekstensi yang menyediakan akses yang nyaman ke file jarak jauh.

SSH​

Instal ekstensi​

Buka Visual Studio Code. Klik ikon "Extensions" di bilah sisi (ikon persegi), lalu pada tampilan Extensions, cari SSH.
Klik "Install" pada ekstensi bernama "Remote - SSH" dari Microsoft.

Instal ekstensi

Siapkan Kunci SSH​

Untuk terhubung melalui SSH tanpa kata sandi, silakan siapkan kunci SSH Anda di FASTPANEL menggunakan artikel ini.

catatan

Anda dapat menemukan pengguna situs di kartu situs, pada kolom "Site user". Untuk mengubah kata sandi pengguna situs, buka bagian "Management" → "Users" di FASTPANEL®.

Konfigurasikan SSH di VSCode​

Tekan F1 di Windows/Linux atau Cmd+Shift+P di Mac untuk membuka Command Palette, ketik dan pilih Remote-SSH: Add New SSH Host, lalu masukkan string koneksi SSH dalam format:

ssh site_user@11.22.33.44

Tambahkan Host SSH Baru

Ganti site_user dan 11.22.33.44 dengan nilai yang sesuai. Alih-alih site_user Anda perlu menentukan pengguna situs, dan alih-alih 11.22.33.44 alamat IP server Anda. Setelah memasukkan perintah, pilih file konfigurasi untuk menyimpan konfigurasi SSH (biasanya ~/.ssh/config).

Terhubung ke Server Jarak Jauh​

Tekan F1 di Windows/Linux atau Cmd+Shift+P di Mac untuk membuka Command Palette, ketik dan pilih Remote-SSH: Connect to Host, pilih host yang sebelumnya ditambahkan, terima fingerprint server dan masukkan frasa sandi untuk kunci SSH Anda jika ini adalah kali pertama terhubung, dan, jika diminta, masukkan kata sandi Anda.

Setelah Anda terhubung, buka "Explorer" → "Open Folder" untuk membuka folder pada host.
Misalnya, /var/www/site_user/data/www/example.com.

Hubungkan ke Server Jarak Jauh

Buka File dan Mulai Coding​

Setelah terhubung, VSCode akan dimuat ulang, dan Anda akan dapat menelusuri file di server jarak jauh langsung di VSCode. Anda dapat membuka, mengedit, dan menyimpan file seperti yang Anda lakukan di mesin lokal Anda.

Untuk informasi selengkapnya, silakan lihat dokumentasi ekstensi.

FTP/SFTP​

Instal Ekstensi​

Buka Visual Studio Code. Klik ikon "Extensions" di bilah sisi (ikon persegi). Ketik SFTP di bilah pencarian. Klik "Install" untuk menginstal ekstensi yang dipilih.

Instal ekstensi

Konfigurasikan Koneksi​

Buka Command Palette dengan menekan F1 di Windows/Linux atau Cmd+Shift+P di Mac, ketik SFTP: Config, lalu edit parameter konfigurasi dengan informasi server jarak jauh Anda di file sftp.json di dalam direktori .vscode. Sebagai contoh:

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

Anda dapat mempelajari tentang membuat akun FTP di FASTPANEL® dalam artikel ini dan tentang akun SFTP di artikel ini.

  • "host": alamat IP server Anda.
  • "protocol": Tentukan ftp atau sftp.
  • "port": 21 untuk FTP atau 2222 untuk SFTP.
  • "username" dan "password": Login dan kata sandi untuk akun FTP/SFTP.
  • "remotePath": Tentukan direktori di server yang ingin Anda gunakan untuk bekerja.
  • "uploadOnSave": Opsi untuk unggah otomatis saat menyimpan file.

Parameter password dalam sftp.json bersifat opsional; jika dikosongkan, Anda akan diminta memasukkan password saat sinkronisasi. Simpan dan tutup file sftp.json .

Bekerja dengan File​

Buka command palette, tekan F1 di Windows/Linux atau Cmd+Shift+P di Mac. Lalu, ketik SFTP untuk melihat sejumlah perintah yang tersedia, yang juga dapat Anda akses dari menu konteks penjelajah file proyek.
Untuk menyinkronkan dengan folder jarak jauh, gunakan perintah SFTP: Download Project, yang akan mengunduh direktori yang ditentukan dalam pengaturan remotePath di sftp.json ke direktori lokal yang sedang Anda buka.

Remote Explorer​

Remote Explorer memungkinkan Anda menelusuri file jarak jauh. Anda dapat membuka Remote Explorer dengan menjalankan Command View: Show SFTP. Setelah itu klik tampilan SFTP di Activity Bar.

Anda hanya dapat melihat isi file dengan Remote Explorer. Gunakan SFTP: Edit in Local untuk mengeditnya secara lokal.

Instal ekstensi