Visual Studio Code에서 EC2 인스턴스 내에서 편집하는 단계

지금까지 EC2 인스턴스의 파일을 편집 할 때 SSH 연결하고 Vim에서 편집했습니다.
Vim을 사용하는 것이 싫다는 것은 아니지만, VisualStudioCode에서도 편집, 디버깅을 할 수 있는 것 같기 때문에 순서를 정리합니다.

절차로서
1. VisualStudioCode에 플러그인 추가
2.~/.ssh/config 편집
3. 연결, 편집

전제 조건

· macOS
· VisualStudioCode가 설치됨
· EC2 인스턴스가 생성됨
· EC2 인스턴스에는 Apache가 설치됨
· 로컬 PC에서 EC2 인스턴스에 SSH 연결할 수 있는 환경 구축

1. VisualStudioCode에 플러그인 추가

VisualStudioCode를 열고 플러그인인 Remote Development를 설치합니다.
사용하도록 설정한 후 VisualStudioCode를 닫았다가 다시 엽니다.

다시 열고 사이드바 아이콘을 클릭합니다.

그러면 SSH 연결 가능한 원격 환경이 표시됩니다.
여기에 EC2 인스턴스를 추가합시다.

2.~/.ssh/config 편집

연결 가능 목록에 표시하려면 ~/.ssh/config에 EC2 인스턴스 정보를 추가해야 합니다.
터미널에서 다음 명령을 실행합니다.

% cd ~/.ssh
% vi config

~/.ssh/config에 다음 EC2 인스턴스에 대한 정보를 추가합니다.

.
.
.
Host 任意の接続名(例：ec2-user)
 User ユーザー名(例：ec2-user)
 HostName ホスト名(例：XX.XXX.XX.XXX)
 IdentityFile .pemファイルのパス(例：~/.ssh/XXX.pem)

덮어쓰기 저장 후 VisualStudioCode를 한 번 닫았다가 다시 엽니다.
추가한 연결 대상이 표시되어야 합니다.

3. 연결, 편집

그럼 조속히 접속해 보겠습니다.
표시된 연결 대상 이름의 오른쪽에 있는 아이콘을 클릭합니다.
자동으로 새 창이 열리고 SSH 연결을 해줍니다.
즉시 코드를 작성합시다.
Apache의 기본 문서 루트는/var/www/html이 되어 있을까 생각하므로 그쪽 바로 아래에 파일을 만듭니다.
왼쪽의 파란색 버튼 "폴더 열기"를 클릭하고/var/www/html을 지정하십시오.

/var/www/html을 열 수 있다면 index.html을 만들고 적절한 코드를 작성하십시오.
방문하여 확인해 봅시다.

무사히 반영되었습니다!
이제 원격 디버깅 등도 VisualStudioCode에서 할 수 있습니다.

덧붙여서 원래 인스턴스내에 놓여져 있는 파일에 관해서는 기입 권한이 없는 경우도 있습니다.
적절히 권한 변경 등하여 대응해 주십시오.