Dev.GA

[VSC] Visual Studio Code에서 FTP로 remote(원격)서버 연동하기 본문

Dev.GA/tool

[VSC] Visual Studio Code에서 FTP로 remote(원격)서버 연동하기

Dev.GA 2018. 3. 7. 10:10



[VSC] Visual Studio Code에서 FTP로 remote(원격)서버 연동하기



오늘은 Visual Studio Code로 Reactjs를 개발하는데 있어 remote서버에 FTP로 연동하여 바로 코딩하는 방법에 대해 알아보겠다.


우선, Visual Studio Code를 켜고 좌측 메뉴중 제일 밑에있는 확장버턴을 눌러준다. F1키를 눌러서 검색해도 된다.


검색창에 ftp-simple이라고 검색해본다.



나는 이미 설치를 했기에 설치버튼이 나오지 않는데, 설치가 안되어 있을것이다.


설치버튼을 클릭하여 설치를 진행한다.


설치가 완료되면 다시 F1키를 눌러 ftp-simple을 검색한다.



여러 항목이 검색되는데 이중 Config-FTP connection setting이란 항목을 선택한다.


remote(원격)서버에 ftp연결을 위한 sample코드가 있을것이다.



host에 remote(원격)서버 ip를 입력해주고, port는 22번(sftp), 아이디와 패스워드를 입력하고


가장 중요한 path에 해당 디렉토리 경로를 적어준다.


우리는 지난번에 생성한 /my-app이란 디렉토리를 설정해주겠다.


입력을 마쳤으면 저장해준다.


저장을 했으면 다시 F1키를 눌러 ftp-simple을 검색해준다.



이번엔 Remote directory open to workspace라는 항목을 선택해준다.


선택하면 아까 만들었던 설정파일에 적은 name명(이것이 서버를 구분하는것 같다)이 뜰것이다.



해당 서버를 선택하면


설정한 경로 및 하위경로를 탐색할수 있게 나온다.



검색창에 써있는것처럼 해당 디렉토리에서 원하는 경로를 또 설정할 수 있다.


우리는 my-app을 전부 설정할 것이니 제일 상단에 있는 현재 디렉토리를 선택한다.




그럼 바로 상단에 알림으로 Remote info downloading이라고 리모트 서버에서 다운받아 올 것이다.


조금 기다리면........



이렇게 my-app 디렉토리가 내 workspace에 자리잡게 된다.


visual studio code를 이용해 개발을 하면 좋은게 여기서 소스를 수정/개발하고 저장을 하면 바로 서버에 적용된다는 것이다.


remote서버를 바로 연결해 개발하니 수정된 소스파일을 ftp로 귀찮게 경로찾아가서 업로드 할 필요없고 얼마나 좋은가!!!


이상 visual studio code를 활용해 remote서버에 ftp로 연결하여 개발하기 위한 준비를 해보았다.

2 Comments
  • 프로필사진 2018.07.10 11:41 이확장자를 제가 사용중인데 편집기가 적용이 안되는것 같습니다 ㅠ
    winSCP 같은 툴로 파일의 이름을 바꾸거나 이동하게 되면 비주얼코드에서
    리스트 변화가 없습니다 ...
    삭제를 해도 아직 헤더 파일이 있는지 파일은 있는데 삭제를 했기때문에 열어도 아무것도 나오지 않아요...
    새로고침을 눌러봐도 묵묵 부답이고.. 좀 답답한데 혹시 이 문제에 대해 해결방안을 알고 계시나요?
  • 프로필사진 일리단사오육칠 2019.12.17 17:41 ftp simple 연습용이나 테스트용으로는 문제없지만.. 실무에서 사용하려하면 엄~ 청나게 느려서 사용하기 힘드네요..
    ftp로 작업해야 할 때는 어쩔 수 없이 editplus 켜서 사용하는데 vscode에서 그만큼의 속도가 나오는 날이 오길... ㅠ
댓글쓰기 폼