ข้ามไปยังเนื้อหาหลัก

การเชื่อมต่อกับไฟล์เว็บไซต์ผ่าน 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 เพื่อเปิด Command Palette จากนั้นพิมพ์และเลือก 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 ของเซิร์ฟเวอร์ของคุณ หลังจากป้อนคำสั่งแล้ว ให้เลือกไฟล์ config เพื่อบันทึกการกำหนดค่า SSH (โดยปกติคือ ~/.ssh/config)

เชื่อมต่อกับเซิร์ฟเวอร์ระยะไกล​

กด F1 บน Windows/Linux หรือ Cmd+Shift+P บน Mac เพื่อเปิด Command Palette พิมพ์และเลือก Remote-SSH: Connect to Host เลือกโฮสต์ที่เพิ่มไว้ก่อนหน้านี้ ยอมรับ fingerprint ของเซิร์ฟเวอร์ และป้อน passphrase สำหรับคีย์ SSH ของคุณหากนี่เป็นการเชื่อมต่อครั้งแรก และหากระบบร้องขอ ให้ป้อนรหัสผ่านของคุณ

หลังจากที่คุณเชื่อมต่อแล้ว ให้ไปที่ "Explorer" → "Open Folder" เพื่อเปิดโฟลเดอร์บนโฮสต์
ตัวอย่างเช่น /var/www/site_user/data/www/example.com

เชื่อมต่อไปยังเซิร์ฟเวอร์ระยะไกล

เปิดไฟล์และเริ่มเขียนโค้ด​

เมื่อเชื่อมต่อแล้ว VSCode จะโหลดใหม่ และคุณจะสามารถเรียกดูไฟล์บนเซิร์ฟเวอร์ระยะไกลได้โดยตรงใน VSCode คุณสามารถเปิด แก้ไข และบันทึกไฟล์ได้เช่นเดียวกับที่ทำบนเครื่องของคุณ

สำหรับข้อมูลเพิ่มเติม โปรดดู เอกสารประกอบส่วนขยาย

FTP/SFTP​

ติดตั้งส่วนขยาย​

เปิด Visual Studio Code คลิกไอคอน "Extensions" ในแถบด้านข้าง (ไอคอนรูปสี่เหลี่ยม) พิมพ์ SFTP ในแถบค้นหา คลิก "Install" เพื่อติดตั้งส่วนขยายที่เลือก

ติดตั้งส่วนขยาย

กำหนดค่าการเชื่อมต่อ​

เปิด Command Palette โดยกด 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": ตัวเลือกสำหรับอัปโหลดอัตโนมัติเมื่อบันทึกไฟล์

พารามิเตอร์รหัสผ่านใน sftp.json เป็นตัวเลือก; หากไม่ระบุ คุณจะได้รับพร้อมท์ให้ป้อนรหัสผ่านระหว่างการซิงค์ บันทึกและปิดไฟล์ sftp.json

การทำงานกับไฟล์​

เปิด command palette โดยกด F1 บน Windows/Linux หรือ Cmd+Shift+P บน Mac จากนั้นพิมพ์ SFTP เพื่อดูคำสั่งที่พร้อมใช้งานจำนวนหนึ่ง ซึ่งคุณยังสามารถเข้าถึงได้จากเมนูคลิกขวาในตัวสำรวจไฟล์ของโปรเจกต์
หากต้องการซิงค์กับโฟลเดอร์ระยะไกล ให้ใช้คำสั่ง SFTP: Download Project ซึ่งจะดาวน์โหลดไดเรกทอรีที่ระบุไว้ในการตั้งค่า remotePath ใน sftp.json มายังไดเรกทอรีภายในเครื่องที่คุณเปิดอยู่

Remote Explorer​

Remote Explorer ช่วยให้คุณเรียกดูไฟล์ระยะไกลได้ คุณสามารถเปิด Remote Explorer ได้โดยเรียกใช้คำสั่ง View: Show SFTP หลังจากนั้น ให้คลิกมุมมอง SFTP ใน Activity Bar

คุณสามารถดูได้เฉพาะเนื้อหาของไฟล์ด้วย Remote Explorer ใช้ SFTP: Edit in Local เพื่อแก้ไขในเครื่อง

ติดตั้งส่วนขยาย