[AWS] AWS EC2와 비주얼 스튜디오 코드 연동하기

※ 이 글은 AWS EC2 우분투 18.04 버전 설치 기준으로 기록됨

※ 이 글에서 비주얼 스튜디오 코드 설치는 다루지 않음

 

 

AWS EC2 인스턴스를 만들었으니 개발 환경을 만들어야 했다. 아톰은 윈도우 10에서 발생하는 에러 때문에 자꾸 흰색 화면 나오고 깨지는 현상이 발생해서 비주얼 스튜디오 코드를 써서 연동했다.

 

비주얼 스튜디오 코드와 AWS를 연동하기 전에 EC2 인스턴스가 running 중인지를 먼저 확인해야 한다.

녹색 불로 running 중이라는 것이 보인다면 사전 준비는 대강 끝났다.

 

확인했다면 비주얼 스튜디오 코드를 열고 확장 프로그램 검색 창을 켜서 "ftp-simple"을 검색한다.

 

 

난 이미 설치됐기 때문에 사용 안 함이라는 문구가 보이지만, 처음 검색했다면 설치라는 버튼이 대신 있을 것이다. 눌러서 설치한다.

설치됐다면 F1을 누른다. F1을 누르면 상단 가운데에 텍스트 박스가 생기고 뭔가를 입력할 수 있게 된다.

여기에 ftp simple config을 치면 이런 탭이 나온다.

 

 

이걸 선택하면 JSON 형태로 된 설정 파일이 열린다.

 

 

name : 이름이다. 별명같은 거니까 꼴리는 거 아무거나 적어준다. 귀찮아서 aws 3글자만 띡 적어줬다.

host : AWS EC2의 IPv4 퍼블릭 IP나 퍼블릭 DNS(IPv4) 중 하나를 적어준다. 난 IPv4 퍼블릭 IP를 적었다. 이게 더 짧으니까

port, type : 원래는 21과 ftp라고 써져 있지만 22와 sftp라고 각각 바꿔 적어준다.

username : 우분투 18.04 버전의 EC2를 설치해서 처음에 root인 줄 알았지만 연결되지 않았다. ubuntu로 바꾸니 됐다.

password : AWS에 로그인할 때 입력하는 비밀번호를 쳐주면 된다.

path : 웹 루트 디렉토리를 적어준다. index.html 혹은 index.php가 위치한 경로를 적어주면 된다.

autosave, confirm : 기본값인 true 그대로 건드리지 않는다.

privateKey : 구글링하다 보면 privateKeyPath로 쓰라고 하는 곳도 있는데 다 필요없고 privateKey 적어줘야 된다. .pem 확장자 파일이 있는 경로를 입력해주면 된다.

이거 입력할 때 주의할 것은 경로를 "C:\\Users\\...\\AAA.pem" 식으로 사이사이마다 역슬래시를 2번 넣어줘야 한다.

 

전부 입력해줬다면 F1을 눌러서 텍스트 박스를 다시 연 다음, ftp simple remote 까지 입력해주면 이런 탭이 나온다.

 

 

눌러준다. 그리고 잠시 기다리면 이런 화면이 나온다.

 

 

index.php 파일과 파일의 내용이 보인다. 저렇게 입력한 후 EC2 인스턴스의 퍼블릭 DNS(IPv4) 주소 또는 IPv4 퍼블릭 IP 주소를 입력해 웹 사이트로 들어가면, php 코드내용이 반영된 웹 페이지가 나타난다.

내 경우 Ctrl + S를 눌러 저장하면 우측 하단에 이런 상자가 나오고 OK를 눌러야 변동사항이 반영됐다.

 

 

지금 당장 급한 문제는 아니니 일단 내비뒀다가 나중에 정 신경쓰이면 그 때 가서 수정해도 될 듯하다.

웹 페이지 왼쪽 상단에 아래의 문구가 나온다면 비주얼 스튜디오 코드와 AWS EC2 인스턴스가 정상적으로 연결된 것이다.

 

정말로 제대로 반영됐는지 확인하기 위해서 XShell을 이용해 EC2 인스턴스로 SSH 접속해서 index.php 파일의 내용을 확인해봤다.

 

 

웹 페이지에 나오는 문구와 XShell에서 확인한 문구들이 정확히 일치하는 걸 확인했다.

이걸로 AWS EC2와 비주얼 스튜디오 코드 연동 끝