VSCode 에서 SFTP 사용하기

이 글은 VS Code 에서 SFTP를 사용하는 방법에 대해 작성되었다.
SFTP 설정파일(sftp.json) 에서 개인키(privateKeyPath) 를 이용해서 서버에 접속하는 방식을 이용했다.

| VS Code 에서 SFTP 를 사용하는 이유

Visual Studio Code (이하 VS Code) 로컬 디렉토리를 원격 서버 디렉토리와 동기화가 가능하다. 필요에 따라 파일을 로컬에 저장한 후 원격 디렉토리에 업로드 할 수 있다.

| 순서

| VS Code 에 SFTP 확장 프로그램 설치

SFTP를 이용하기 위해서는 먼저 SFTP를 VS Code 에 설치해야한다.
좌측 아이콘 중에서 가장 아래에 있는 네모 4개 아이콘을 선택하거나 “Command + Shift + X” 키를 눌러서 검색창에 “ftp” 로 검색해서 SFTP 를 설치한다.

* 윈도우의 경우 “Ctrl + Shift + X” 키를 눌러서 검색창을 열 수 있다.

| SFTP 설정

F1 키를 눌러 상단 검색창에 “ftp”를 입력하고, 검색결과에서 “SFTP:Config” 를 선택한다.

그렇게 하면 좌측 경로에서는 sftp.json 파일이 선택되고 우측에는 sftp.json 내용이 표시가 되는데, 이 부분을 여러분이 사용하는 서버의 정보로 변경하면 된다.

필자는 개인키(privateKeyPath) 를 이용해서 서버에 접속하도록 설정파일을 수정했다.
수정후에 저장을 하면 설정이 적용된다. 각 값의 용도는 아래 간단하게 설명해두었다.
name : 접속리스트에 보이게 될 이름
host : 고정IP
username : 서버접속 계정
remotePath : “/” 으로 둘 경우에 홈디렉토리로 연결
privateKeyPath : 개인키 경로 (개인키 사용을 통해 서버에 접속할때 이용)

{
 "name": "chailmon02",
 "host": "123.123.123.123",
 "protocol": "sftp",
 "port": 22,
 "username": "ubuntu",
 "remotePath": "/",
 "uploadOnSave": true,
 "privateKeyPath": "/Users/chail/Developer/OracleCloud/sshkey/ssh-key-2022-02-20.key" 
}

| SFTP 접속

F1 키를 눌러 상단 검색창에 “ftp”를 입력하고, 검색결과에서 “SFTP: List All” 을 선택한다.
현재는 설정해둔 서버가 chailmon02 하나여서 하나만 표시가되는데, 본인이 설정한 이름을 선택한다.

| 경로이동

필자는 오라클 클라우드 서버 워드프레스 경로에 접근하는 예시를 보여줄 생각이다.
한가지 아쉬운 점은 전체 경로를 알고 있어도 전체경로 입력을 통한 이동은 안되고 순차적으로 이동을 해야한다는 점이다.
아래 경로로 하나씩 이동해서 최종적으로는 wp-content 폴더 까지 이동하고 “. choose current folder” 를 선택한다.

var/
www/
html/
wp-content/

| 파일 열기 및 편집

접속한 경로부터 하위폴더 파일을 로딩하기 시작하고, 어느정도 로딩이 완료되면 VS Code 우측하단에 파일 리스트에 밑줄 표시가 생긴다. 밑줄표시가 생긴 파일은 “Cmd+클릭” 을 이용해서 파일을 열어서 바로 수정도 가능하다.

필자는 워드프레서 oceanwp 테마를 사용중인데, oceanwp 테마의 readme.txt 파일을 열어보려고 하면 아래이미지처럼 themes 아래 oceanwp 를 찾고 거기에서 readme.txt 파일을 찾아서 “Cmd+클릭” 을 통해 열 수있다.

VS Code 이용에 도움이 되길 바랍니다.
감사합니다.