VSCode를 통해 작성된 코드를 원격 서버의 계정에 접속하여 파일을 올리거나 내려받는 확장 프로그램들이 매우 많이 존재한다. 더 유용한 다른 확장 프로그램이 있을 수도 있겠지만 그중에서 SFTP라는 확장 프로그램을 소개하고자 한다.
SFTP 확장 프로그램은 원격 서버 계정에 접속하여 작업중인 프로젝트 파일을 업로드 및 다운로드를 가능하게 해준다. 접속 정보를 미리 설정해 두고 VSCode를 실행할 때 마다 서버 접속을 간편하게 할 수 있으며 다양한 단축키 설정을 지원하여 작업 중인 파일을 쉽고 빠르게 서버에 업로드할 수 있다. 또한 원격 서버 계정의 파일을 탐색할 수 있는 기능도 지원한다.
이미 워크스페이스(workspace)가 셋팅되었고 프로젝트 디렉터리가 활성된 상태에서 다음 순서를 진행하기 바란다.
VSCode를 실행하고 확장 프로그램 관리 탭으로 이동하여 'SFTP' 키워드로 검색한다.
검색 결과로 비슷한 이름을 갖는 다양한 확장 프로그램들이 보여질 것이다. 그 중에서 'liximomo'라는 개발자 아이디를 가지고 있는 확장 프로그램을 설치할 것이다.
※ 아래의 캡처 이미지에서는 이미 설치된 상태이므로 ' Uninstall'로 표시되었다.
설치가 완료 된 후 탐색기(Explorer)로 돌아간다. 그리고 F1
키를 눌러 나오는 명령어 선택 창에서 'SFTP' 키워드를 입력하여 SFTP:Config
명령을 찾아 선택한다.
만약에 하나의 워크스페이스(workspace)에서 셋팅된 프로젝트가 두 개 이상이라면 어떤 프로젝트에서 사용할 것인지를 선택하는 단계가 나온다. 원하는 프로젝트를 선택한다.
이후 선택한 프로젝트의 탐색기(Explorer)를 잘 보면 .vscode
폴더가 생성되었고 그 안에 sftp.json
파일이 생성되어 있을 것이다.
sftp.json
파일을 열어 아래의 내용을 참고하여 필요한 값을 작성한다.
21
이며 다르다면 맞는 포트 값을 설정/
'이나 자신에게 맞는 경로 확인이 필요true
인 경우 저장시 즉시 업로드를 하지만 현재 서비스중인 경우에는 위험할 수도 있다. 항상 개발자가 최종적으로 확인 후 업로드를 직접 하는 것을 권장한다.
{
"name": "",
"host": "",
"protocol": "",
"port": 21,
"username": "",
"password": "",
"remotePath": "/",
"uploadOnSave": false,
"ignore": [".vscode", ".git", ".DS_Store" ]
}
작성이 끝났으면 저장하여 SFTP를 사용하기 위한 설정을 마친다. 다른 프로젝트도 동일한 방법으로 sftp.json
파일을 생성하고 맞는 정보를 설정한다.
sftp.json
파일에서 uploadOnSave
옵션을 false
로 설정하여 직접 업로드를 하고자 할 때는 컨텍스트 메뉴 또는 단축키로 업로드하는 방법이 있다.
컨텍스트 메뉴를 이용하는 경우에는 탐색기(Explorer)에서 업로드를 하고자 하는 파일 또는 폴더를 마우스 우측 버튼을 눌러 메뉴를 열고 Upload
항목을 선택하면 된다.
단축키를 이용하는 방법은 VSCode에서 관련 명령의 단축키 설정을 먼저 해야 한다. SFTP는 다양한 상황에서 업로드가 가능하도록 지원하지만 가장 좋은 시나리오는 에디터에 열려 있고 저장후 단축키로 업로드를 하는 경우이다.
VSCode 좌측 하단에 있는 아이콘(1번 캡처 이미지 참고)을 눌러 Keybord Shortcuts
메뉴를 선택해 단축키를 설정하는 창을 연다.
다음 열린 창에서 'sftp'라는 키워드로 검색하면 관련 단축키 설정 항목들이 보인다.
에디터에서 활성된 파일만 업로드를 할 예정이므로 아래 캡처 이미지를 참고하여 해당 위치를 더블클릭(double click)한다. 다음 단축키 조합을 누를도록 안내하며 원하는 단축키 조합을 눌러주고 Enter
키를 누르면 된다.
※ 캡처 이미지의 예시는 맥(Mac) 환경이며 이미 단축키 설정이 완료된 상태이므로 참고할 때 주의한다.
실제로 업로드를 했는가를 확인하고자 할 때는 VSCode의 Output 창에 출력된 로고를 확인하면 된다.