#왜 VSCode와 우분투 서버를 원격으로 연결했는가?

CI/CD 파이프라인을 구축하기 전에 테스트 프로젝트를 설정하는 과정에서 몇 가지 문제를 겪었습니다. 특히 로컬 환경과 서버 환경의 차이로 인해 코드 실행 결과나 환경 설정이 다르게 나오거나 간단한 코드를 수정하기 위해, 실제 배포될 서버 환경에서 직접 작업할 필요성을 느꼈습니다.

저의 짧은 지식으로 서버 내 테스트 프로젝트 폴더의 클래스를 nano로 수정하거나 로컬에서 깃허브에 푸쉬하고 서버에서 풀 받는 방법을 사용했습니다. 그러나 저는 VSCode와 서버가 연결하는 방법이 있다는 것을 작게나마 기억이 났습니다. 저는 그 방법을 구글링과 다양한 자료를 통해서 VSCode와 원격 서버(우분투)를 연결해보았습니다.

장점

1. 서버 환경과 동일한 개발 환경에서 작업: 로컬 환경과 서버 환경이 다를 때, 원격 서버에 직접 연결하여 개발함으로써 발생할 수 있는 환경 차이를 줄일 수 있었습니다. 이는 특히 배포 전 서버에서 실제로 실행되는 코드를 테스트하는 데 매우 유용했습니다.

2. 효율적인 CI/CD 테스트: 서버에서 직접 코드를 작성하고 수정하면서 CI/CD 파이프라인이 정상적으로 작동하는지 확인할 수 있었습니다. 이를 통해 코드를 로컬에서 서버로 전송하는 과정을 생략하고, 실시간으로 코드 변경 사항을 반영할 수 있었습니다.

3. 리소스 절약: 로컬에서 실행하기 힘든 리소스가 많은 작업도 원격 서버를 통해 수행할 수 있어, 로컬 자원을 절약하면서도 작업 속도를 높일 수 있었습니다.

이러한 이유들로 인해 VSCode와 원격 서버를 연결하는 방법을 사용했고, 이는 CI/CD 파이프라인을 구축하기 전에 필요한 테스트를 서버에서 직접 진행할 수 있게 도와주었습니다.

Remote-SSH

VScode의 extension탭에서 ssh를 검색하여 Remote - SSH를 설치합니다.

SSH Config

맥북 유저이기 때문에 Cmd + Shift + P를 눌러 명령 팔레트를 열고, Remote-SSH: Open SSH Configuration File...을 선택합니다.

SSH 구성 파일 설정

myserver라는 이름으로 서버에 접속이 가능합니다.

Host myserver
    HostName  <IP> # 서버의 퍼블릭 IP 주소
    User ubuntu               # SSH 접속 사용자 이름
    IdentityFile /awsKey.pem  # PEM 파일의 경로

VSCode에서 서버에 SSH로 접속

1. 위와 동일하게 명령 팔레트 (Ctrl + Shift + P 또는 Cmd + Shift + P)를 열고, Remote-SSH: Connect to Host...를 선택합니다.

2. 방금 설정한 myserver(또는 다른 Host 이름)를 선택합니다.
   
   myserver를 확인할 수 있습니다.

3. 접속이 완료되면, VSCode의 상태 표시줄에서 연결된 서버의 이름이 보일 것입니다. 이제 원격 서버의 파일을 편집하고, 원격 서버에서 실행되는 터미널을 사용할 수 있습니다.

접속하기 전 우분투 폴더 확인하기

• 우분투 서버 내 폴더 확인
  

서버 내 폴더들이 동일하게 VScode에서 나오는지 확인합니다.
1. Remote-SSH: Connect to Host...를 선택 -> myserver를 선택합니다.

이렇게 myserver를 선택하면 새로운 VScode창이 나옵니다.

2.Open Folder 클릭
Open Folder를 클릭하면 위 입력창에 /home/ubuntu/ 이렇게 실제 우분투 서버 내 폴더경로를 입력할 수 있습니다.

/home/ubuntu/를 입력하면

좌측 우분투 서버 내의 폴더와 동일한 것을 확인할 수 있습니다. 즉,한VSCode에서 Ubuntu 서버로 원격 SSH 접속한 것을 확인할 수 있습니다.