Up & Daun

클라우드 서버에 PuTTY, FileZillra 등을 사용해서 SSH, SFTP를 사용한다.

vscode에서 Remote - SSH extension을 설치하면 원격으로 코드를 수정하고 실행할 수 있다.

1. vscode extension 설치

좌측에서 extensions 탭을 클릭한다.

remote 라는 검색어를 입력하면 Remote - SSH 가 나오는데, Microsoft에서 제작한 것을 설치하면 된다.

2. 비밀키 위치 이동

서버에서 제공한 key 파일을 C:\Users\사용자이름\.ssh 폴더에 넣습니다. 

3. Command Palette 실행 ( 단축키 : Ctrl + Shift + P )

Remote라고 입력하면 Remote-SSH가 검색된다.

4. Remote-SSH: Add New SSH Host... ( 새로운 원격 호스트 추가 )

명령어 본인의 정보를 한줄로 넣어준다.

ssh -i {key 파일 경로} {사용자}@{ip주소} -p {port번호}

(또는 애초에 -i 명령어 입력 시 key파일의 절대주소 값 입력)

[예시]

ssh -i ~/.ssh/key root@118.67.133.181 -p 2223

5. Remote-SSH: Connect to Host...

명령 팔레트를 통해 실행시키면 등록된 호스트 리스트들이 나오고, 그 중 연결하고자 하는 호스트를 선택한다.

연결하고 나서 좌측 Explorer 탭을 클릭하면 Connected to remote 에서 "Open Folder" 를 클릭한다.

원하는 원격지의 디렉토리를 클릭하면. 그것이 Work Directory로 IDE가 시작된다.

filezilla를 활용하여 클라우드 서버에서 파일을 업로드 하거나 다운로드 할 수 있는 SFTP에 대해 알아보자.

1. filezilla install

google에 filezilla를 검색해본다.

Quick download에 filezilla client를 클릭한다.

윈도우 os 전용으로 다운로드 버튼을 클릭한다.

다운로드.exe 파일로 설치를 시작한다.

brave 라는 브라우저를 설치할 것을 물어보는데, 나는 거절한다.

설치가 완료되고 실행하면, 다음과 같은 화면이 나온다.

2. 사이트 관리자에 사이트 추가하기

좌측 상단의 아이콘을 클릭하여 사이트 관리자를 접속하여 클라우드 서버 정보를 저장한다.

New site를 클릭하여 새로운 cloud site를 추가한다.

프로토콜을 SFTP로 변경해준다. (SSH를 활용해서 파일을 업로드 및 다운로드하기 때문)

ip주소와 port 번호를 입력해준다. (port 번호는 ssh는 기본적으로 22번을 사용)

하지만, 클라우드 서버의 방화벽에서 특정 포트를 허용하였다면, 그 포트를 사용해야한다. (ex. 2223)

사용자는 어디에서 알 수 있나요?

ssh -i ./key root@118.67.133.181 -p 2223

-> 클라우드 서버에서 SSH 접속을 위해 제공한 명령어를 살펴보면, @앞에 명시된 이름이 사용자가 된다. AWS의 경우 Linux에서 ubuntu EC2 설치시 ubuntu로 사용할 때가 많다.

로그온 유형을 "키 파일" 로 변경한다.

키를 로드하는데, All files를 선택하여 key 파일을 불러온다.

정보가 모두 입력되었다면, 사이트 이름을 변경한다.

이름 바꾸기 버튼을 클릭하여 변경하고, 확인 버튼을 눌러준다.

3. 연결하기

이제 원하는 사이트를 클릭하고 연결 버튼으로 SFTP 접속 하면 된다.

접속이 성공했다면, 다음과 같은 화면이 나온다.

좌측이 내 로컬 PC가 되며, 우측이 클라우드 서버가 된다.

4. file upload 및 download

좌측 내 로컬 PC에서 원하는 파일을 찾는다.

우측 클라우드 서버에 넣을 장소를 찾는다. (우측에는 파일 쓰기 권한이 있어야 한다. 예시의 경우 root 이므로 권한상 문제는 발생하지 않는다.)

원하는 파일을 더블 클릭하거나, 우클릭 후 업로드를 클릭하면 된다!

upload가 되면, 우측에서 파일을 확인할 수 있다.

다운로드는 반대로 클라우드 서버측에서 원하는 파일은 더블 클릭 혹은 우클릭 및 다운로드 하면된다.

오늘은 filezillra 설치와 사용법을 알아보았다.

FileZillra의 SFTP는 서버에 작업물을 올리는 작업에 사용할 수 있을 것이다.

클라우드 서버에서 작업 후, 결과물을 가져와야할 때 편하게 사용할 수 있을 것이다.

putty를 사용해서 ssh 접속을 많이 사용한다.

클라우드 서버에서 제공한 key를 활용한 putty 접속에 대해 알아보자.

클라우드 서버를 AWS에서 생성하거나 다른 사이트(ex. aistages)에서 제공받을 경우, key file을 제공 받게 된다.

이 key는 RSA방식으로 암호화 된 key이며 확장자가 없거나 .pem 등으로 끝나게 된다.

클라우드 서버에 인증 절차에 사용하는 키이며 키가 없다면 로그인 할 수 없고, 서버를 사용할 수 없다.

[기본 cmd 에서 ssh 접속]

cmd에서 key가 있는 디렉토리로 이동 후 ip주소와 허용된 포트번호(대게는 ssh의 경우 22번을 사용)를 활용하여 접속

ssh -i ./key root@118.67.133.181 -p 2223

접속할 때마다 이렇게 접속하는 것이 번거로울 수 있다.

putty를 활용하면 조금 더 빠르고 쉽게 접속할 수 있다.

1. putty install

google에서 putty를 검색하여 해당 링크에 접속한다.

 Download PuTTY 에 here 을 클릭하여 접속한다.

윈도우 os의 경우 msi 설치 파일을 다운로드 받는다.

Next를 눌러 설치를 진행한다.

2. key 변환(putty 전용 키 .ppk로 변환)

key를 활용한 로그인 방식이 아닌 라즈베리파이 같은 password 방식이라면 바로 PuTTY를 활용해 접속할 수 있다.

클라우드 서버라면 서버에서 제공한 키를 PuTTY 전용으로 변경해야한다.

PuTTYgen을 실행시켜 준다.

load 버튼을 눌러 key를 불러온다.

기본적으로 .ppk 파일만 보이므로 키를 찾기 위해서는 All Files를 선택해준다.

성공적으로 불어왔다면 해당 메세지가 나온다.

가려진 곳에 본인의 key 정보가 나오게 된다.

key passphrase에 비밀번호를 입력하면, 접속할 때 사용하는 비밀번호를 설정할 수 있다.

보안상의 특별한 문제가 없다면, 빠른 로그인을 위해서는 생략해도 좋다. (보안을 위해서는 사용하는 것이 좋다.)

Save private key 를 눌러 .ppk 파일로 저장한다.

3. putty에서 key로 접속하기

먼저 putty를 실행하면 다음과 같은 화면이 나온다.

좌측 탭에서 SSH -> Auth 탭을 누르면 key를 불러올 수 있는데, 

전에 변환한 .ppk 파일을 불러온다.

Session 탭에서 ip 주소와 포트, 해당 정보를 저장하기 위한 Saved Sessions에 이름을 적고 Save로 정보를 저장한다.

다음부터는 이미 저장되어있는 세션만 더블클릭하면, 바로 클라우드 서버에 SSH 접속이 가능하다.

다소 번거로운 작업일 수 있지만,  한번 설정해 놓으면 편하게 사용할 수 있으니 추천한다! ㅎ

이제 본격적으로 사용하는 방법에 대해서 알아보자.

우리가 주로 다룰 탭은 'Source Control' 탭이다.

내 'Repository'에 소스가 변경되면 'Source Control'에 띄워지게 된다.

'Explorer' 탭에서도 수정된 파일을 확인해 볼 수 있다. M이라고 표시되는 것을 보면 Modify의 줄인말인듯 하다.

[git add]

스테이징 상태로 올리기 위해서는 버튼 하나만 클릭하면 된다!

수정한 파일 옆의 + 버튼을 누르면  git add가 된다!

[git reset]

만약 git add를 취소하고 싶다면?? git reset을 해야하는데!

Staged Changes 폴더에 있다면, ADD가 된 것들이고,

' - ' 버튼을 누르면 스테이징 취소가 되어 우측 상태로 원상 복구가 된다.

[check changes]

이전 소스에서 어떤 것이 변경되었는지 표시되어 확인할 수 있다.

[git discard changes]

다음은 테스트를 위해 주석을 한줄 추가 했다.

그랬더니 변경사항으로 해당 주석을 안내하고 있다.

왼쪽이 이전 소스이며, 우측이 최신 소스인데, 

최신 소스를 이전소스로 다시 되돌리는 방법으로 discard changes를 사용한다.

화살표 버튼을 누르면 다시 되돌릴 것인지를 정확히 물어보고, 

최종적으로 Discard Changes를 누르면 이전 소스로 원복해 버리고, source control 목록에서 제거되어 버린다.

이전 소스와 같이 되어 변경된 사항이 없어지게 된다.

[git commit]

이제 커밋을 해보자! 역시 버튼 하나와 메세지만 입력하면 된다!

스테이징 된 파일이 있다면, 'SOURCE CONTROL' 우측에 체크 버튼이 COMMIT 버튼이다!

클릭하고, 이제 코멘트를 달아주도록 하자.

메세지 입력란에 특징이 될만한 내용을 입력하고 엔터를 치면! COMMIT이 된다!

혹시 소스가 충돌이 되는 문제는 다음에 다루도록 하자.

충돌이 나서 커밋이 안된다면, 일단 작업한 소스를 백업을 하고, Pull로 받은 뒤에, 작업한 소스를 추가하여 add 후 commit 해주도록 하자!

[git push]

이제 Push를 하면 오늘의 잔디밭을 심을 수 있다!!

SOURCE CONTROL 우측 끝에 확장 버튼을 누르면 Push 가 나오는데,

클릭 한번으로 푸시 할 수 있어서 매우 간편하다.

[git pull]

pull도 마찬가지로 확장 버튼에서 pull 을 클릭하면 끝!

기존에 git bash로 하다가 GUI를 하게 되니 편한 부분이 있다.

하지만 branch나 세부적인 작업들은 bash가 더 나을 것이다.

결국은 TOOL은 그 상황에 맞게 잘 사용하는 것이 좋겠다!

기존에 리눅스 명령어로 깃허브를 사용했는데, 스테이징 하는 것이 눈에 잘 들어오지 않았다.

그래서 상태를 그래픽으로 확인할 수 있는 GUI를 찾다가 발견하게 된 것이

visual studio code 의 "GitHub Pull Requests and Issues" extension 이다!

오늘은 그 사용법을 알아보자.

지난 블로그에서 했지만, extension을 먼저 설치해 준다.

그렇게하면, 좌측 메뉴 바에 못보던 깃허브 버튼이 추가되고, 

설정 위에 있는 사람 아이콘에서 알림이 하나 발생하게 된다.

사람 아이콘을 클릭하면, 상세 내용을 확인할 수 있는데, 깃허브에 로그인을 해달라는 내용이다.

깃허브와 연동해보자.

해당 화면이 나오고 계속하기 버튼을 클릭한다.

아이디와 패스워드를 입력하여 로그인 해준다. 성공하였다면 Success! 라고 나온다!

크롬에서 'Visual Studio Code 열기' 를 물어볼 것이고, vscode 에서는 깃허브 연동에 대한 허용을 물어볼 것이다.

열기하여 연동해주면 된다.

누구나 무료로 쉽게 사용할 수 있는 IDE인 Visual Studio Code를 설치해보자.

먼저, Google에 'visual studio code' 라고 입력하여 검색하거나 아래의 링크로 이동한다.

https://code.visualstudio.com/

해당 사이트로 들어가게 되면, 다운로드 버튼이 있다.

다운로드 버튼을 누르고, 조금 기다리면 "VSCodeUserSetup-x64.exe" 가 다운로드 된다.

이제 설치를 시작해보자. 

동의하고 다음을 클릭한다.

본인이 설치하고 싶은 경로로 변경하여 설치해도 무방하다.

이름은 웬만하면 그대로 유지하고 다음을 눌러준다.

이번 블로그에 핵심인데, "Code(으)로 열기"를 꼭 선택하고 다음을 클릭한다. 저것을 선택하게 되면~

향후 손쉽게 디렉토리나 소스파일을 vscode로 열어 작업할 수 있게 된다.

저것을 체크하지 않으면 따로 별도의 작업을 해야만 해당 기능을 사용할 수 있게 된다.

기타에 3가지 항목이 들어 갔는지 확인하고 설치를 한다.

이렇게 하면 설치가 완료 되었고, VScode를 실행해보자.

vscode에서 python을 실행해 보기 위해서는 Extension을 설치해 주어야 한다.

블록 모양 버튼(Extension) 버튼을 클릭하고, 검색바에 'python'을 검색하여

'Microsoft' 사에서 제작한 Python을 설치해 준다. 다른 것을 사용하기 보다 해당을 추천한다.

깃허브 유저는 해당 Extension도 추가적으로 설치하여 쉽게 깃허브를 사용해보자.

다음 블로그에는 깃허브 익스텐션에 대해 작성할 예정이다.