메인 콘텐츠로 건너뛰기

VSCode를 통해 사이트 파일에 연결하기

SSH 및 FTP/SFTP를 통해 연결하기 위해 Visual Studio Code는 원격 파일에 편리하게 접근할 수 있도록 해주는 확장을 사용합니다.

SSH

확장 설치

Visual Studio Code를 엽니다. 사이드바에서 "Extensions" 아이콘(정사각형 아이콘)을 클릭하고, Extensions 보기에서 SSH를 검색합니다.
Microsoft의 "Remote - SSH"라는 이름의 확장에서 "Install"을 클릭합니다.

확장 설치

SSH 키 설정

비밀번호 없이 SSH로 연결하려면 이 문서를 사용하여 FASTPANEL에서 SSH 키를 설정하세요.

참고

사이트 카드를 열고 "Site user" 필드에서 사이트 사용자를 확인할 수 있습니다. 사이트 사용자 비밀번호를 변경하려면 FASTPANEL®의 "Management" → "Users" 섹션으로 이동하세요.

VSCode에서 SSH 구성

Windows/Linux에서는 F1, Mac에서는 Cmd+Shift+P를 눌러 Command Palette를 열고, Remote-SSH: Add New SSH Host를 입력하여 선택한 다음, 다음 형식으로 SSH 연결 문자열을 입력합니다:

ssh site_user@11.22.33.44

새 SSH 호스트 추가

site_user11.22.33.44를 적절한 값으로 바꾸세요. site_user 대신 사이트 사용자를 지정해야 하며, 11.22.33.44 대신 서버의 IP 주소를 지정해야 합니다. 명령을 입력한 후 SSH 구성을 저장할 구성 파일(일반적으로 ~/.ssh/config)을 선택하세요.

원격 서버에 연결

Windows/Linux에서는 F1, Mac에서는 Cmd+Shift+P를 눌러 Command Palette를 열고, Remote-SSH: Connect to Host를 입력하여 선택한 다음, 이전에 추가한 호스트를 선택하고 서버의 fingerprint를 수락한 후 처음 연결하는 경우 SSH 키의 passphrase를 입력하며, 메시지가 표시되면 비밀번호를 입력합니다.

연결되면 "Explorer" → "Open Folder"로 이동하여 호스트의 폴더를 엽니다.
예: /var/www/site_user/data/www/example.com.

원격 서버에 연결

파일 열기 및 코딩 시작

연결되면 VSCode가 다시 로드되고, VSCode에서 직접 원격 서버의 파일을 탐색할 수 있게 됩니다. 로컬 컴퓨터에서 하듯이 파일을 열고, 편집하고, 저장할 수 있습니다.

자세한 내용은 확장 문서를 참조하세요.

FTP/SFTP

확장 설치

Visual Studio Code를 엽니다. 사이드바에서 "Extensions" 아이콘(정사각형 아이콘)을 클릭합니다. 검색창에 SFTP를 입력합니다. 선택한 확장을 설치하려면 "Install"을 클릭합니다.

확장 설치

연결 구성

Windows/Linux에서는 F1, Mac에서는 Cmd+Shift+P를 눌러 Command Palette를 열고, SFTP: Config를 입력한 다음, .vscode 디렉터리 아래의 sftp.json 파일에서 원격 서버 정보에 맞게 구성 매개변수를 편집합니다. 예:

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

FASTPANEL®에서 FTP 계정을 만드는 방법은 이 문서에서, SFTP 계정에 대해서는 이 문서에서 확인할 수 있습니다.

  • "host": 서버의 IP 주소.
  • "protocol": ftp 또는 sftp를 지정합니다.
  • "port": FTP는 21, SFTP는 2222.
  • "username""password": FTP/SFTP 계정의 로그인 및 비밀번호.
  • "remotePath": 작업하려는 서버의 디렉터리를 지정합니다.
  • "uploadOnSave": 파일 저장 시 자동 업로드를 위한 옵션입니다.

sftp.json의 password 매개변수는 선택 사항이며, 이를 생략하면 동기화 시 비밀번호 입력을 요청받게 됩니다. sftp.json 파일을 저장하고 닫습니다.

파일 작업

Command Palette를 열고 Windows/Linux에서는 F1, Mac에서는 Cmd+Shift+P를 누릅니다. 그런 다음 SFTP를 입력하면 사용 가능한 여러 명령을 볼 수 있으며, 이러한 명령은 프로젝트 파일 탐색기의 컨텍스트 메뉴에서도 접근할 수 있습니다.
원격 폴더와 동기화하려면 SFTP: Download Project 명령을 사용하세요. 그러면 sftp.json의 remotePath 설정에 지정된 디렉터리가 로컬에서 열려 있는 디렉터리로 다운로드됩니다.

원격 탐색기

원격 탐색기를 사용하면 원격 파일을 탐색할 수 있습니다. View: Show SFTP 명령을 실행하여 원격 탐색기를 열 수 있습니다. 그 후 Activity Bar에서 SFTP 보기를 클릭합니다.

원격 탐색기에서는 파일의 내용만 볼 수 있습니다. 로컬에서 편집하려면 SFTP: Edit in Local를 사용하세요.

확장 설치