VSCode ftp-simple

gangnam-americano.tistory.com/26

[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코드가 있을것이다.

[
	{
		"name": "flato.kr",
		"host": "flato.kr",
		"port": 21,
		"type": "ftp",
		"username": "ftp 아이디",
		"password": "ftp 비밀번호",
		"path": "/html",
		"autosave": true,
		"confirm": false
	},
	{
		"name": "flato.co.kr",
		"host": "flato.co.kr",
		"port": 21,
		"type": "ftp",
		"username": "ftp 아이디",
		"password": "ftp 비밀번호",
		"path": "/html",
		"autosave": true,
		"confirm": false
	},
	{
		"name": "고도몰",
		"host": "oddshop.co.kr",
		"port": 21,
		"type": "ftp",
		"username": "ftp 아이디",
		"password": "ftp 비밀번호",
		"path": "/",
		"autosave": true,
		"confirm": false
	}
]

 

저장을 했으면 다시 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로 연결하여 개발하기 위한 준비를 해보았다.