SFTP 연결 : Visual Studio Code에서 작업한 내용 웹 서버로 옮기기

SFTP란

FTP는 'File Transfer Protocol'의 약자입니다. 파일을 전송할 때 쓰이는 규약이라는 뜻이지요. 여기 앞에 S는 SSH를 의미하기도 하고 Secure라는 뜻으로 해석해도 결과적으로 같은 의미입니다. SSH를 써서 안전하게 FTP 통신을 할 수 있는 프로토콜이 바로 SFTP라고 할 수 있습니다.

SFTP의 필요성

우리에게는 HTTP가 익숙하고, 파일도 HTTP로 많이 받아서 크게 FTP의 필요성을 느끼지 않습니다. 하지만, 때로는 다른 것 없이 파일만 간단하게 주고받는 기능을 구현하고 싶을 때가 있습니다. 이럴 때 쓰는 것이 FTP입니다. 그리고 안전한 통신을 위해서 SFTP를 사용하는 것입니다. HTTP와 마찬가지로 평문으로 데이터를 전송하면 스니핑과 같은 공격에 취약해지기 때문입니다. 이번에는 SFTP를 통해서 Visual Studio Code에서 작성한 내용을 웹서버로 옮기고 동기화하는 방법을 알아보도록 하겠습니다.

절차

Step. 1 : Visual Studio Code와 웹 서버 준비하기

우선 웹 서버와 연결이 되는지 확인해야 합니다. Ping으로 서로의 ip를 찍어서 연결이 되어있는지 확인해야 합니다. 또한, 여기서는 Visual Studio Code의 확장기능을 이용해서 SFTP를 연결해 보도록 하겠습니다.

Step. 2 : Visual Studio Code에서 SFTP 확장기능 설치

Visual Studio Code의 왼쪽 탭에서 확장탭(ctrl + shift + x)을 들어가서 SFTP를 검색합니다. 

다양한 게시자들이 SFTP 확장 기능을 제공하지만 Natizyskunk가 관리하는 버전을 사용해보록 하겠습니다. 다른 확장 기능들도 비슷한 원리로 작동할 수 있습니다.

설치가 완료되면 왼쪽에 탭이 새로 생깁니다. 여기는 서버에 있는 파일들을 보여줍니다.

(아직 설치만 했다면 아무것도 나오지 않습니다.)

Step. 3 : SFTP configuration

키보드의 F1 버튼을 누르고 'sftp'를 쳐서 SFTP:Config을 클릭합니다.

해당 config파일은 현재 작업중인 폴더에 대해서만 적용됩니다. 다른 폴더를 작업하기 위해서 작업폴더를 바꾼다면 config의 내용이 해당 폴더의 설정으로 바뀝니다. (별도로 설정한 적 없는 경우 기본값, .vscode 폴더에 config이 저장됨)

이름은 편하게 설정하면 되고 host는 ip주소를, username은 로그인 해야하는 유저이름을 입력해 준 뒤, 파일을 전송하여 받을 위치를 적어주면 됩니다. 저는 웹서버가 실행되고 있는 디렉터리로 설정해 두었습니다. 또한, uploadOnSave를 True로 하면 로컬(호스트, Visual Studio Code를 실행하고 있는 컴퓨터)에서 작업하고 있는 파일을 저장할 때 바로 업로드가 되도록 할 수 있습니다. 포트와 프로토콜은 따로 건들 필요는 없습니다.

Step. 4 : Password 입력

작업을 저장하거나 SFTP 탭에 들어가면 이렇게 password를 입력하라고 합니다. SFTP로 연결하려고 하는 계정의 암호를 입력하면 됩니다. 

Step. 5 : 파일 전송 여부 확인 + 웹서버에서 파일 업로드/삭제

로컬에서 작업하고 저장하면 해당 파일이 웹서버에 생성되는 것을 확인할 수 있습니다. 단, 이미 업로드된 파일이나 웹서버에 있는 내용을 전송/삭제하고 싶다면 다음과 같은 방법을 쓸 수 있습니다.

• 웹서버의 파일을 로컬로 옮기고 싶은 경우 - 웹서버 파일을 열고 오른쪽 클릭 - 'Edit in Local'
• 웹서버의 파일을 삭제하고 싶은 경우 - 해당 웹서버에서 직접 찾아서 삭제하거나, SFTP 탭에서 해당 파일을 오른쪽 클릭 - Delete 선택 - 확인 메시지가 뜨면 확인(delete) 클릭