[8주차 - Day36] VSCode에서 로컬과 원격서버 동기화하기

이번글은 VSCode에서 로컬 폴더와 원격서버 폴더를 동기화하는 방법에 대해 정리하겠습니다.

 

이를 생각하게 된 계기는 미니프로젝트를 해보려고 하는데 갑자기 아래와 같은 생각이 들었기 때문입니다.

(접은글로 작성했습니다.)

'저번에 원격서버의 파일들을 백업해놓지 않은 상태에서

원격서버가 접속이 되지 않아 당황했는데,

원격서버와 로컬서버를 동기화하는 방법은 없을까.

 

원격서버에서 파일을 수정하여 저장하면

자동적으로 로컬에도 해당 파일이 저장되면 좋을텐데.

 

아니면 그 반대(로컬에서 파일을 수정하여 저장하면 원격에 자동적으로 저장됨)도

괜찮을 듯 하다.

 

이렇게 된다면 자동적으로 로컬에 원격서버 파일들이 백업되어

불가피하게 서버가 다운되었을 때를 대비할 수 있을 것 같다.'

 

그 후 구글링을 하여 동기화하는 방법을 찾아 적용했습니다.

 

아래부터는 이 방법에 대해 소개한 글입니다. 

---

저는 로컬에서 파일을 작성(신규, 수정, 삭제)하면

자동적으로 원격서버에 반영해줄 수 있게끔 설정하였습니다.

 

* 동기화된 원격서버 폴더안에 이미 작성된 파일들이 있어서

해당 파일들을 동기화된 로컬 폴더에 당겨와야 한다면

아래절차를 수행한 뒤 '* 참고'을 수행하길 바랍니다.

 

1. 로컬에 SFTP extention 설치

 

2. 원격서버와 동기화할 로컬 workspace에서 ctrl + shift + p 입력후 'sftp:config' 검색

 

3. 위의 과정을 수행하게 되면 아래와 같이 로컬 workspace 안에 '.vscode/sftp.json'이 생성
(참고로 저의 경우는 경로에 한글이 있을 때는 동기화가 잘 이뤄지지 않았으니

미리 로컬 폴더의 경로를 확인하시길 바랍니다.)

 

4. sftp.json 파일을 아래와 같이 수정

이때 흰 박스 친 부분에서 port부분을 제외하고 모두 "" 큰 따옴표로 표기해야 합니다.

(예시로 ip주소가 000.00.000.000이라면 "000.00.000.000"으로 표기해야 합니다.) 

 

5. 환경 설정 후 테스트

5-1) local workspace에서 'test.txt' 생성하고 저장하기

아래와 같이 원격서버에도 'test.txt'가 생성되었음을 확인 가능

 

 

5-2) local worspace에서 'test.txt' 파일내용 수정하고 저장하기

아래와 같이 원격서버의 'test.txt'파일내용이 수정되었음을 확인 가능

 

5-3) local workspace에서 'test.txt' 파일 삭제하기

아래와 같이 원격서버의 'test.txt'파일도 삭제되었음을 확인 가능

 

* 참고)

만약 기존에 작성된 원격서버 폴더(config 파일에서 설정한 경로)안의 파일들을 로컬로 가져오고 싶다고 가정하자.

아래 예시는 원격서버 폴더에는 기존에 작성된 'remote_test.txt'파일이 있지만,

로컬 폴더(config 파일에서 설정한 경로)는 빈 폴더인 상황이다.

이를 해결하기 위해서는

아래처럼 EXPLRORER 안의 빈공간에서 오른쪽 클릭을 한뒤 'Sync Remote -> Local'을 클릭해야 한다.

그러면 아래와 같이 로컬 workspace에 'remote_test.txt'가 당겨졌음을 확인할 수 있다.