Cloud9 Visual Studio Code와 연결하기

현업에서 X-Ray를 사용해보고자 미리 PoC겸 Workshop을 해보기로 했다.

https://awsworkshop.io/tags/x-ray/

AWS Workshops

시작하자마자 Cloud9을 사용하는데 이것을 매번 AWS Console에서 하기는 좀 귀찮기도 하고...뭔가 컴퓨터에서 아름답게 해보고 싶은 마음에 VS Code와 연동해서 사용하기로 했다.(추후에는 Session Manager 플러그인을 사용해보자)

https://github.com/gjbae1212/gossm

GitHub - gjbae1212/gossm: 💻Interactive CLI tool that you can connect to ec2 using commands same as start-session, ssh in AWS

이런놈이 있더라..

일단 지금 만들고자 하는 구성은 이렇다

아무튼, Cloud9을 만들자! Cloud9은 SSM으로 접근할 수 있도록 Environment를 지정할거다. Instance Type은 각자의 지갑 사정에 맞게 만들면 된다. 아래의 CloudFormation Tamplate를 활용해도 된다. Aamzon에서 셈플로 제공해준다. 그리고 Type은 용도에 맞게 변경하면 된다

---
AWSTemplateFormatVersion: "2010-09-09"

Description: >
  Creates an AWS Cloud9 EC2 environment within the default VPC with
  a no-ingress EC2 instance. This is to be used in conjunction with 
  Visual Studio Code and the Remote SSH extension. This relies on 
  AWS Systems Manager in order to run properly.

Resources:
  DefaultVPCCloud9Instance:
    Type: AWS::Cloud9::EnvironmentEC2
    Properties:
      InstanceType: t3.micro
      ConnectionType: CONNECT_SSM
      Description: Cloud9 instance for use with VS Code Remote SSH
      Name: VS Code Remote SSH Demo

Outputs:
  Cloud9Instance:
    Description: The EC2 instance powering this AWS CLoud9 environment
    Value: !Join
      - ""
      - - "https://"
        - !Ref AWS::Region
        - ".console.aws.amazon.com/ec2/v2/home?region="
        - !Ref AWS::Region
        - "#Instances:search="
        - !Ref DefaultVPCCloud9Instance
        - ";sort=tag:Name"

 

그리고 사전준비 작업을 하나하나 해보자

1. VS Code에 Remote - SSH플러그인을 설치

2. OpenSSH 설치

3. AWS CLI설정(Configure)

4. SSM Plugin 설치(로컬컴퓨터)

- https://docs.aws.amazon.com/systems-manager/latest/userguide/session-manager-working-with-install-plugin.html

(Optional) Install the Session Manager plugin for the AWS CLI - AWS Systems Manager

 

위의 준비가 되었으면 ssh키를 만들어주자.

ssh-keygen -b 4096 -C 'VS Code Remote SSH user' -t rsa

키가 만들어졌다면 해당 키의 공개키를 Cloud9에 등록해 주어야 한다.

바로 저 파일에 .pub파일 내용을 그대로 추가해주자.

그 다음 Cloud9은 비용 절감을 위해 일정 시간이 지나면 자동으로 종료된다. 만약 문서 편집이 길어졌는데 종료되면 아주 큰 맨붕이 오니 해당 설정을 해줄것이다.

참고로, 과거에는 해당 shell이 등록되어 있지 않아 설치후 실행해 주어야 했다. 이제는 이미 .c9폴더 내에 있으니 실행시켜주기만 하면 된다.

sudo .c9/stop-if-inactive.sh

그 다음 로컬 컴퓨터에서 ssm을 사용하여 접근할 것이기에 proxy설정을 해주어야 한다.

 

로컬 머신에 아래의 쉘을 다운로드 받고 권한 설정을 해주자!

$ curl https://raw.githubusercontent.com/aws-samples/cloud9-to-power-vscode-blog/main/scripts/ssm-proxy.sh -o ~/.ssh/ssm-proxy.sh
$ chmod +x ~/.ssh/ssm-proxy.sh

저 쉘 파일을 뜯어보면 상단에 4개의 변수가 있다

• AWS_PROFILE –  AWS CLI Profile 이름 입니다. 따로 설정한 경우 여기에 적절한 프로필을 지정합니다. 명명된 프로필을 사용하지 않는 경우 여기에 기본값을 지정합니다.
• AWS_REGION – AWS Cloud9 환경을 시작한 리전입니다.
• MAX_ITERATION – 이 스크립트가 환경의 전원이 성공적으로 켜졌는지 확인하는 횟수입니다.
• SLEEP_DURATION – MAX_ITERATION 확인 사이에 대기할 시간(초)입니다.

나는 Default를 사용하고 us-east-1리전을 사용할거다.

위의 설정이 되었으면 https://github.com/aws-samples/cloud9-to-power-vscode-blog/blob/main/config/ssh-config

GitHub - aws-samples/cloud9-to-power-vscode-blog: Artifacts used in the blog post Use AWS Cloud9 to Power your Visual Studio Cod

이 깃의 파일을 참고하여 vs code의 config파일을 생성해 주면 된다.

 

생성이 완료된후 해당 파일을 이용하여 접근하면 vs code로 cloud9에 접근하여 코딩및 설정을 할 수 있다!!

WOW!!!

 

이제 컴터에서 편하게 문서 편집이나 소스를 업로드 다운로드 할수 있게 되었다!! 야호