로컬 VS Code 편집기를 사용하여 코드 개발

로컬 머신에서 워크스테이션으로 SSH 터널을 열고 VS Code 원격 개발 지원을 사용하여 로컬 VS Code 편집기에서 Cloud Workstations에 연결하는 방법을 알아봅니다.

시작하기 전에

시작하기 전에 다음 작업의 단계를 따르세요.

  1. 팀원이 워크스테이션 구성을 만들었는지 확인합니다.
  2. 워크스테이션을 만들고 시작합니다.
  3. Google Cloud 콘솔에서 동안 다음 정보를 복사합니다.

    1. 프로젝트 이름 및 ID: Google Cloud 메뉴 바에서 프로젝트 이름을 클릭하고 열리는 프로젝트 이름 및 ID 대화상자에서 ID를 복사합니다.
    2. 리전
    3. 클러스터 이름
    4. 구성 이름
  4. 로컬 머신에서 gcloud CLI를 설치합니다.

    gcloud CLI를 처음 실행하는 경우 gcloud auth login을 실행하여 사용자 인증 정보를 가져오고 gcloud config set project PROJECT_ID를 실행하여 현재 프로젝트를 이전 단계에서 복사한 프로젝트 ID로 설정해야 할 수 있습니다.

  5. ssh를 처음 사용할 때 Extension Marketplace 또는 명령어 팔레트를 통해 VS Code 편집기에서 워크스테이션에 연결할 수 있도록 원격 SSH 확장 프로그램을 설치합니다.

    Extension Marketplace

    1. 로컬 VS Code 편집기 애플리케이션을 열고 작업 표시줄에서
      확장 프로그램을 선택하여 Extension Marketplace를 엽니다.

    2. 설치를 클릭하여 원격 - SSH 확장 프로그램을 설치합니다.

    3. 검색창에 remote ssh를 입력하면 원격 - SSH의 확장 프로그램 페이지가 열립니다.

      원격 SSH 확장 프로그램 설치

    명령어 팔레트

    1. 명령어 팔레트를 열려면 Control+Shift+P(macOS의 경우Command+Shift+P)를 누르거나 보기 > 명령어 팔레트를 클릭합니다.

    2. ext install ms-vscode-remote.remote-ssh를 입력하여 확장 프로그램을 설치합니다.

SSH 터널 열기

gcloud workstations start-tcp-tunnel 명령어를 사용하여 로컬 머신에서 워크스테이션으로 SSH 터널을 엽니다.

  1. Google Cloud 콘솔에서 Cloud Workstations > 워크스테이션 페이지로 이동합니다.

    워크스테이션으로 이동

  2. 워크스테이션 이름을 클릭하여 워크스테이션 세부정보 페이지를 엽니다.

  3. 다음 예시에서는 워크스테이션 이름, 리전(위치), 워크스테이션 클러스터 이름, 워크스테이션 구성 이름의 자리표시자를 바꿉니다. 워크스테이션 세부정보 패널의 값을 수정 수정 아이콘으로 표시된 자리표시자로 복사합니다.

    gcloud workstations start-tcp-tunnel \
      --project=PROJECT_ID \
      --region=REGION \
      --cluster=CLUSTER_NAME \
      --config=CONFIG_NAME \
      --local-host-port=:LOCAL_PORT \
      WORKSTATION_NAME 22
    

    프로젝트 ID를 찾으려면 시작하기 전에 섹션을 참조하세요.

    --local-host-port=:LOCAL_PORT 플래그는 선택사항입니다. 로컬 포트를 지정하려면 LOCAL_PORT를 사용하려는 로컬 포트 번호로 바꿉니다. 로컬 포트를 지정하지 않으면 시스템에서 사용되지 않는 임의의 로컬 포트를 선택하고 포트 번호가 포함된 메시지를 출력하여 사용되는 로컬 포트를 확인합니다.

  4. 자시표시자에 입력한 후 content_copy코드 샘플 복사를 클릭하여 gcloud CLI 명령어를 복사합니다.

  5. 로컬 터미널 창에 명령어를 붙여넣고 Enter 키를 눌러 터널을 만듭니다.

    명령어가 성공하면 Listening on port 메시지가 표시된 후 로컬 포트 번호가 표시됩니다.

각 구성 플래그에 대한 자세한 내용은 SSH 터널 또는 start-tcp-tunnel을 참조하세요.

Cloud Workstations 호스트에 연결

Cloud Workstations 호스트에 연결하려면 다음 단계를 따르세요.

  1. VS Code 애플리케이션을 열거나 VS Code 애플리케이션으로 돌아갑니다.
  2. 원격 - SSH를 실행하려면 상태 표시줄에서 원격 창 열기를 클릭합니다.

  3. 명령어 팔레트가 열리면 호스트에 연결 옵션을 선택합니다.

    호스트에 연결

  4. user@localhost:LOCAL_PORT를 입력하고 LOCAL_PORT를 로컬 포트 번호로 바꿉니다.

    다음 예시에서는 user@localhost:1025를 지정하여 로컬 포트 1025에 연결합니다.

    SSH 호스트 추가

  5. 호스트 추가됨 확인 메시지가 표시된 후 연결하라는 메시지가 표시되면 연결을 클릭합니다.

    시스템에서 해시를 확인하라는 메시지가 표시될 수도 있습니다. 메시지가 표시되면 계속을 클릭합니다.

  6. 새 VS Code 편집기가 열리고 VS Code 상태 표시줄에 SSH: localhost:와 포트 번호가 표시됩니다.

    이제 원격 워크스테이션의 파일 및 언어 서버에 액세스할 수 있으며 워크스테이션 내에서 실행되는 프로세스를 빌드하고 실행할 수 있습니다.

    다음 예시는 SSH: localhost: 1025를 통해 Cloud Workstations에 연결된 VS Code 편집기 창을 보여줍니다.

    워크스테이션에 연결됨

    또한 Extensions Marketplace로 돌아가서 Cloud Code 및 기타 로컬 VS Code 확장 프로그램을 설치하여 코드를 빌드, 실행, 테스트할 수 있습니다.