Visual Studio Code로 AWS EC2 붙어서 작업하기

가급적 git이나 svn같은 형상관리 도구를 쓰는게 좋습니다. 다만, 소규모 프로젝트거나 개인 프로젝트의 경우, 또는 긴급을 요하는 작업을 할 경우에는 아래처럼 작업해도 무방합니다.

요즘 저는 비주얼 스튜디오 코드를 주력 IDE로 사용하고 있습니다. 가볍고, 빠르고, 강력합니다. 무료이고요. VSC로 EC2에 붙어서 작업할 수 있는 환경설정 방법을 간단하게 기록으로 남겨두겠습니다. 개발자라면 별거 아닌 것이지만, 이제 막 코딩을 배우는 주변분들이 힘들어 하시는 것 같아서 아예 글로 남겨두겠습니다. 참고하시면 좋을 것 같습니다.

1. 마켓플레이스에서 ftp-simple 설치

마켓플레이스 메뉴를 선택합니다. 'ftp-simple'을 검색해서 설치합니다. 설치가 완료되면 화면 가운데에 뜨는 '새로고침' 버튼을 눌러서 에디터를 새로고침 해줍니다.

2. ftp-simple 설정

F1키를 누르고 'ftp'라고 검색합니다. 아래에 'ftp-simple : CONFIG ..' 메뉴를 선택합니다. 그러면 아래 화면과 같은 JSON파일이 나옵니다.

서버당 제이슨 객체 한덩어리입니다. 위의 그림대로 FTP서버 정보를 입력하시면 됩니다. FTP의 포트번호는 통상 21번입니다.

이런식으로 개발을 진행할 서비스 별로 여러대의 서버를 추가할 수 있습니다.

3. AWS EC2 접속 설정

SSH기반이므로 접속 타입을 sftp로 설정해줍니다. 그리고 AWS콘솔에서 내려받아서 내 컴퓨터 어딘가에 놔둔 privateKey 파일의 경로를 privateKeyPath에 써줍니다. 위의 설정은 Ubuntu 기준이고, 별다른 손을 대지 않은 케이스입니다. 접속 후 기본 경로는 /var/www이고 sftp이므로 기본 포트는 22번입니다.

4. EC2 접속 확인

F1키를 눌러서 검색창이 뜨면 'ftp'를 입력합니다. 하단에 'ftp-simple : Remote directory open to workspace'를 선택합니다.

설정해 둔 EC2 인스턴스에 원격 접속합니다. 아까 저는 이름을 'AWS for my apps'라고 지어뒀습니다.

잠깐 기다리면 저의 비주얼 스튜디오 코드가 EC2 인스턴스에 접속이 완료됩니다. 지정해 둔 루트 경로의 디렉토리명이 뜹니다. 그걸 선택해줍니다.

서버에 있는 파일들을 전부 다운로드 받을때까지 기다려주세요. 시간이 좀 걸릴수도 있습니다. 서버측 파일을 다 내려받아 동기화가 완료될때까지 기다려주세요.

서버에 있는 파일들이 동기화가 완료되었습니다. 파일과 디렉토리 구조들을 볼 수 있습니다. 루트 디렉토리에 있는 index.html파일을 수정하고 파일을 저장해보겠습니다.

서버상에서 수정한 index.html 파일이 제대로 반영된 것을 확인할 수 있습니다.

네트워크 환경에 따라 파일 업/다운로드 속도가 매우 느릴 수 있습니다. 비주얼 스튜디오 코드는 별로 친절한 도구가 아닙니다. 상황이 어떻게 진행되는건지 멈춘건지 알 수 없기 때문에, 콘솔을 띄워서 상황을 확인해야 합니다. '보기' - '디버그 콘솔' 메뉴를 선택해서 콘솔을 띄우시고 콘솔 메뉴에 '출력' - 'ftp-simple'을 선택해서 ftp 통신 상황을 체크하시면 됩니다.

ATOM이나 다른 IDE들도 설정 방법은 다 비슷합니다. 다음에는 생산성을 극적으로 향상 시켜주는 라이브리로드 환경 세팅에 대해서 한번 써 보겠습니다.

즐프하세요!

2017년 12월 11일
송종식 드림