[처음부터 시작하는 EC2] 에디터로 원격접속

(20.06.22) vscode에서 사용법을 업데이트 했습니다. -> vscode ftp로 원격접속, 코드 동기화

이번 글에서는 SFTP를 사용하여 ec2에 원격접속 및 코드 업로드 방법을 알아보겠습니다.

사용할 에디터는 Atom과 Visual Studio Code입니다.

1. Atom으로 원격접속하기

Atom 에디터는 이 곳에서 설치할 수 있습니다.

우선 아톰 에디터를 실행시키면 상단에 메뉴가 나오는데, 이중에 Preferences를 선택합니다.

[Preferences 메뉴 선택]

그러면 Settings라는 탭이 열립니다.

여기서 install 항목으로 이동한 뒤 remote ftp를 검색합니다.

[remote ftp 설치]

항목 중 icetee가 작성한 항목을 install 합니다.

저는 이미 설치했기 때문에 위 이미지와 상이할 수 있습니다.

설치가 완료되었다면 Add Project Folder 메뉴를 클릭하여 ftp 연결 정보를 저장할 프로젝트를 하나 추가해줍니다.

[FTP 연결 정보를 저장할 프로젝트 추가]

저는 FtpTest라는 임의의 폴더를 추가했습니다.

이제 프로젝트 폴더를 활성화(클릭) 한 뒤 Pakages - Remote FTP - Create SFTP config file을 선택합니다.

[config file 생성]

config file이 생성되면 아래와 같은 항목이 나옵니다.

{
    "protocol": "sftp",
    "host": "example.com",
    "port": 22,
    "user": "user",
    "pass": "pass",
    "promptForPass": false,
    "remote": "/",
    "local": "",
    "agent": "",
    "privatekey": "",
    "passphrase": "",
    "hosthash": "",
    "ignorehost": true,
    "connTimeout": 10000,
    "keepalive": 10000,
    "keyboardInteractive": false,
    "keyboardInteractiveForPass": false,
    "remoteCommand": "",
    "remoteShell": "",
    "watch": [],
    "watchTimeout": 500
}

이 중, 우리가 수정할 항목은 host, user, pass, remote, privatekey,입니다.

대부분 ssh로 접속할 때 사용했던 정보입니다.

protocol - secure ftp인 sftp를 입력합니다.

host - ec2의 public ip 혹은 public dns

user - 접속할 계정(ubuntu로 생성한 ec2의 기본 계정 이름은 ubuntu입니다.)

pass - 계정의 비밀번호 입니다. 별도 설정을 하지 않으면 기본 계정에 비밀번호가 없어서 접속되지 않습니다. 비밀번호 설정 방법은 글 하단에 언급하겠습니다.

remote - 에디터 작업이 필요한 ec2의 경로를 입력합니다.

privatekey - ec2를 개설할때 생성한 인증키(.pem 파일)의 경로입니다.

[.ftpconfig 작성]

작성을 완료했다면 .ftpconfig를 저장하고 Pakages - Remote FTP - Toggle을 선택합니다.

[Toogle 메뉴 활성화]

Toogle을 선택하면 네비게이션에 Remote라는 항목이 생깁니다.

[연결하기]

마지막으로 Connect 버튼을 누르면 remote에 설정한 경로 하위의 파일들을 수정할 수 있게 됩니다.

[연결 완료된 모습]

이제 Atom에서 ec2에 위치한 코드들을 수정할 수 있습니다.

수정 후 저장 시 자동으로 업로드 됩니다.

2. Visual Studio Code로 원격접속하기

Visual Studio Code는 이 곳에서 설치할 수 있습니다.

우선 상단 메뉴의 Preferences - Extensions를 선택합니다.

[Extensions 메뉴 선택]

다음은 remote ftp를 검색합니다.

여러 항목 중 ftp-kr을 설치합니다.

[ftp-kr 설치]

설치가 완료되면 Add Folder to Workspace를 선택하여 서버와 동기화 할 폴더를 추가합니다.

실수로 전체 동기화를 진행하면 코드가 꼬일 수 있기 때문에 빈 폴더를 권장합니다.

[폴더 추가]

다음은 접속 정보를 생성합니다.

F1 키를 눌러서 상단 검색 창을 활성화 한 다음 init 키워드를 입력하면 ftp-kr에서 제공하는 init 명령어를 선택할 수 있습니다.

[init 명령 선택]

init 명령을 선택하면 현재 등록된 프로젝트 폴더 경로를 선택할 수 있습니다.

저는 임의로 생성한 aws_yuddomack을 선택하겠습니다.

[workspace 선택]

workspace를 선택하면 연결 정보를 입력하는 ftp-kr.json 파일이 아래와 같이 생성됩니다.

{
    "host": "",
    "username": "",
    "password": "",
    "remotePath": "",
    "protocol": "sftp",
    "port": 0,
    "privateKey": "",
    "fileNameEncoding": "utf8",
    "autoUpload": true,
    "autoDelete": false,
    "autoDownload": false,
    "ignore": [
        ".git",
        "/.vscode"
    ]
}

이 중 privateKey 항목은 기본적으로 제공하지 않기 때문에 직접 추가해주셔야 합니다.

수정해야할 항목은 아래와 같습니다.

host - ec2의 public ip 혹은 public dns

username - 접속할 계정(ubuntu로 생성한 ec2의 기본 계정 이름은 ubuntu입니다.)

password - 계정의 비밀번호 입니다. 별도 설정을 하지 않으면 기본 계정에 비밀번호가 없어서 접속되지 않습니다. 비밀번호 설정 방법은 글 하단에 언급하겠습니다.

remotePath - 에디터 작업이 필요한 ec2의 경로를 입력합니다.

protocol - secure ftp인 sftp를 입력합니다.

port - 기본 포트는 22번을 사용합니다.

privateKey - ec2를 개설할때 생성한 인증키(.pem 파일)의 경로입니다.

autoUpload - 수정된 코드를 자동으로 업로드할지 선택하는 옵션입니다. 자칫 비어있는 프로젝트 폴더가 그대로 서버에 동기화 될 수 있으니 false로 설정해주세요.

[ftp-kr.json 저장]

작성을 완료했다면 ftp-kr.json을 저장하고 동기화 할 프로젝트를 오른쪽 클릭해서 Download This 명령을 실행합니다.

[로컬 폴더에 remotePath 동기화]

명령을 실행하면 remotePath에 입력했던 경로를 루트로하여, 하위 경로에 있는 데이터를 로컬 프로젝트 경로에 모두 동기화 합니다.

(때문에 remotePath를 /로 지정하면 무시무시한 일이 생겨버립니다.)

동기화 할 데이터가 많다면 프로젝트 경로에 표시되기까지 시간이 소요될 수 있습니다.

동기화가 완료되면 아래 이미지처럼 서버에 있던 코드를 수정할 수 있게 됩니다.

[동기화가 완료된 모습]

autoUpload를 false로 지정했기 때문에 서버 코드를 수정한 뒤에는 Upload This를 사용하여 서버에 동기화 할 수 있습니다.

3. ubuntu 계정 비밀번호 설정

sftp를 연결하기 위해 계정에 비밀번호를 설정해야합니다.

ubunt는 passwd 명령어를 사용하여 비밀번호를 설정할 수 있습니다.

> sudo passwd ubuntu