vscode ftp로 원격접속, 코드 동기화

이전 글에 사용한 ftp-kr이 이래저래 사용성이 좋지 않아서 다른 플러그인을 사용하게됐는데,

이번 글에서는 vscode에서 SFTP 플러그인을 사용하여 서버와 코드를 동기화 할 수 있도록 하는 방법을 알아보겠습니다.

1. SFTP 플러그인 설치

vscode의 extensions 메뉴에서 sftp를 검색하여 설치합니다.

[extensions 검색]

2. 설정파일 생성

다음으로 서버와 동기화 할 폴더를 workspace에 추가해줍니다.

이 글에서는 sftp-test라는 이름으로 진행하겠습니다.

[workspace 추가]

다음으로 F1 키를 눌러서 상단 검색창을 활성화 한 뒤, sftp 키워드를 입력하면 설정파일을 생성해주는 Config 명령을 선택할 수 있습니다.

[sftp config]

위 Config를 클릭하면 설정파일을 생성할 workspace를 선택할 수 있는데, 위에서 추가한 sftp-test를 선택하겠습니다.

여기까지 잘 진행됐으면 아래 이미지처럼 sftp-test에 sftp.json이라는 설정 파일이 생성된 것을 보실 수 있습니다.

[sftp 설정파일 생성]

크게 어려운 항목은 없지만 그래도 주요 항목을 살펴보겠습니다.

host - 접속할 서버의 url

username - 서버에 접속하기 위한 계정명 (예: root)

remotePath -  동기화 하려는 파일/폴더 경로

uploadOnSave - 로컬에서 파일 저장이 일어나면 서버에서 동기화 되는 옵션입니다.

또한 기본으로 생성된 파일에는 없지만 계정 비밀번호가 필요하다면, password 항목을 추가해주시면 됩니다.

3. 설정파일 옵션

설정파일 옵션에 대한 정보는 vscode marketplace 혹은 github에서 참고하실 수 있습니다.

참고용으로, 저는 아래와 같은 옵션들로 구성하여 사용하고 있습니다.

{
  "name": "",
  "host": "",
  "protocol": "sftp",
  "port": 22,
  "username": "",
  "password": "",
  "remotePath": "/home/yuddomack/mnemosyne-solutions/back2",
  "privateKeyPath": "/Users/yuddomack/xxx.pem",
  "watcher": {
    "files": "**/*",
    "autoUpload": true,
    "autoDelete": true
  },
  "ignore": [".vscode"],
  "uploadOnSave": true
}

기본 설정파일과 다른 소개할만한 항목을 살펴보겠습니다. (보안상 위험성이 있는 값은 ""으로 치환했습니다.)

privateKeyPath - 서버 접속에 필요한 private key 등의 경로를 지정하는 옵션입니다.

watcher - 항목 내의 files에 해당하는 파일, 폴더를 감지하여 서버와 동기화 여부를 설정할 수 있는 옵션입니다. 위에 작성한 옵션의 경우로는 workspace내 모든 파일이 변경(생성, 삭제 등)될 경우 원격 서버에 동기화 되도록 합니다.

ignore - 서버와 동기화되지 않도록 하는 파일/폴더를 정의하는 옵션입니다. gitignore와 같다고 생각하시면 됩니다.

4. 동기화

이제 설정파일을 저장하면, workspace에서 우클릭을 하여 Sync로 시작하는 메뉴를 통해 서버와 로컬 간 동기화를 사용할 수 있습니다.

[Sync 항목들]

저는 Remote -> Local을 사용하여 서버에 세팅된 코드를 로컬로 동기화 시켜보겠습니다.

잠시 기다리면 아래 화면처럼 서버 코드가 동기화 된것을 볼 수 있습니다.

[동기화 된 서버 코드]

이제 로컬에서 파일을 수정한 뒤 저장하면 서버에 있는 파일이 동기화되는 것을 볼 수 있습니다.

5. 마무리

이번 글에서는 vscode에서 ftp를 사용하여 코드를 동기화하는 방법을 살펴봤습니다.

크게 어려운 사항이 없으니 이 정도로 마무리하도록 하겠습니다.