제가 개발경험이 그리 많진 않지만 이 Visiual Studio Code는 정말 물건이더군요. Editplus 같은 에디터도 조금은 써봤지만 저는 요게 제 입맛대로 개조 가능하고 다양하게 응용가능한 측면에서 애용하게 되더라고요.
그런데 이걸 통해서 FTP 접속을 해서 라이브로 코딩을 반영할 수 있다면 좋겠다라는 생각을 했는데, 방법이 생각보다 널리 퍼져있어서 이렇게 공유하고자 합니다.
1. (당연하지만) VScode 설치.
- 이게 있어야 당연히 VScode를 통해 코딩을 하겠죠?
2. ftp-simple 설치
- ftp-simple은 vscode 내에서 돌아가는 확장 프로그램입니다. 이걸 통해서 접속을 시도해 볼 예정입니다.
- 왼쪽 맨 밑에 아이콘을 클릭하고 ftp-simple을 검색하면 다음과 같이 나옵니다. ftp-simple을 눌러주고 install이라 쓰여진 녹색 버튼을 눌러 설치해줍니다. (저는 다 설치를 해서 이렇게 찍혔습니다.)
- 그 다음, F1을 눌러 ftp-simple : Config - FTP connection setting을 눌러줘서 접속 설정을 해줍니다.
- 그러면 ftp-simple-temp.json이 접속이 되는데 다음과 같이 설정해주면 됩니다.
[
{
"name": "localhost", // 접속할 이름. 뭐 아무렇게나 입력해도 됩니다.
"host": "", // 접속할 IP주소를 적어주세요.
"port": 21, // 포트번호를 적습니다. ftp접속은 21, sftp는 22번이 기본 포트 번호입니다.
// 그런데 왠만해선 보안상 이유로 sftp로 해야 접속됩니다.
"type": "ftp", // 접속 방식을 적습니다. 마찬가지로 왠만해선 sftp로 적으시면 됩니다.
"username": "", // 서버 이름입니다. 이건 맞게 적어주셔야 합니다.
// 아마존 ubuntu 기준으론 ubuntu 인 것 처럼 말이죠.
"password": "", // 서버 비밀번호입니다. 필수로 입력해주세요.
"privateKey": "" // 인증키를 보관한 경로를 적으시면 됩니다.
// 키 접속을 설정해주셨으면 반드시 적어주세요.
"path": "/", // 접속할 서버내 경로를 적어주세요.
"autosave": true, // 파일을 업데이트 및 수정하는 등 서버 자동 저장여부를 묻습니다.
// true면 자동 저장, false는 자동 저장 사용하지 않습니다.
"confirm": true // 이미 있는 파일을 덮어쓰기 하는 등의 작업시 확인 여부를 묻습니다.
}
]- 간혹 서버에 접속하고 비밀번호를 또 묻는 경우가 있어서 접속 불가되는 경우가 있는데 그럴 경우 비밀번호("password": " ")를 한 번 더 입력해주시면 해결됩니다.
- 자세한 설명은 이곳에 접속해서 보시면 됩니다.
- 설정을 모두 입력하셨으면 저장하시면 됩니다.
- F1을 다시 누르시고 Remote directory open to workspace를 누르셔서 계속 엔터 누르시고 진행하시면 됩니다.
- 만약 성공하셨으면 옆에 서버에 위치한 파일들이 출력될 것입니다.