Apache Guacamole을 사용하여 원격 데스크톱에 접근하는 방법

JavaScript

어서 Apache Guacamole이란?

Apache Guacamole은 Apache Foundation에 의해 개발된 오픈 소스 프레임워크로, HTML5 애플리케이션을 제공하여 RDP, SSH, 그리고 VNC 프로토콜을 통해 원격 데스크톱에 접근할 수 있도록 원격 데스크톱 게이트웨이로 기능합니다. 다른 세드파티 소프트웨어 없이도 접근이 가능합니다.

Guacamole 솔루션은 libguac, guacamole-common, 그리고 guacamole-ext와 같은 많은 개별 구성 요소를 포함합니다. 이러한 프로젝트들은 이 기사의 범위를 벗어납니다만, Guacamole 생태계 내에서 guacamole-common-js에 집중해보겠습니다.

guacamole-common-js란?

Guacamole 프로젝트는 Guacamole 사양을 만족시키기 위해 설계된 구성 요소와 상호작용하기 위한 JavaScript API를 제공합니다. guacamole-common-js API는 Guacamole 클라이언트와 터널링 메커니즘을 JavaScript에서 서버 측 애플리케이션으로 프로토콜 데이터를 전송하기 위한 JavaScript 구현을 제공합니다. 서버 측은 일반적으로 guacd 또는 Guacamole 데몬이 실행되는 머신입니다. guacamole-common-js 라이브러리는 마우스와 키보드 압둘레이션 오브젝트를 제공하여 JavaScript 마우스와 키보드 이벤트를 Guacamole이 쉽게 소화할 수 있는 데이터로 변환합니다.

guacamole-common-js를 사용하여 커스텀 Guacamole 클라이언트 생성하기

prerequisites: 원하는 패키지 매니저를 통해 guacamole-common-js를 설치합니다. 이 예제에서는 npm을 사용하겠습니다.

Shell

npm i guacamole-common-js

단계 1: Guacamole 터널 생성하기

Guacamole 터널을 생성하면 서버와 클라이언트 간의 데이터를 수월하게 스트리밍할 수 있습니다.

JavaScript

const Guacamole = require('guacamole-common-js')

​

let tunnel = new Guacamole.Tunnel("path/to/your/tunnel");

터널 URL을 통해 서버에 추가 매개변수를 전달할 수 있습니다. 예를 들어, 터널 URL은 path/to/your/tunnel?param1=value1&param2=value2와 같을 수 있습니다.

단계 2: 터널 오브젝트를 사용하여 Guacamole 클라이언트 생성

만들어진 터널 오브젝트를 Guacamole.Client 생성자에 전달하여 Guacamole 클라이언트 오브젝트를 생성할 수 있습니다.

JavaScript

let guacClient = new Guacamole.Client(tunnel)

단계 3: 연결 함수를 호출하여 연결 설정

따라서 Guacamole 터널 인스턴스와 Guacamole 클라이언트 인스턴스를 가지고 있습니다. 이 것들은 원격机器에 연결하기 위해 필요한 것입니다.

JavaScript

guacClient.connect()

기억해야 할 한 가지는: Guacamole.Client 생성자에 전달된 Guacamole.Tunnel 오브젝트는 이미 연결되지 않아야 합니다. 이这是因为 내부적으로 guacClient.connect() 메서드는 tunnel.connect() 메서드를 호출하고, 터널이 이미 연결되어 있다면 이 작업이 실패할 것입니다.

이제 관찰력 있는 여러분은 여전히 클라이언트에 원격机器의 내용을 볼 수 없다는 것을 발견할 것입니다. 그 이유는 여전히 중요한 단계를 빠뜨렸기 때문입니다.

단계 4: Guacamole 디스플레이를 가져와 DOM에 연결

guacClient.connect()를 호출하여 연결을 설정한 후, Guacamole 디스플레이(HTMLDivElement)를 DOM에 연결하여 원격机器의 디스플레이를 확인할 수 있습니다. 이를 어떻게 할 수 있는지 보겠습니다.

상상해봅시다. 원격机器의 디스플레이를 표시하고 싶은 HTML 페이지가 있다.

HTML

<html>  

  <body id="guacCanvas">

  </body>

</html>

다음으로, 사용자에게 표시되어야 하는 HTMLDivElement을 guacClient에서 가져와보겠습니다.

JavaScript

// Get the display element from the guacClient

let displayElement = guacClient.getDisplay().getElement(); 

// Get the element from the DOM and attach the displayElement to it

let guacCanvas = document.getElementById('guacCanvas'); 

// Attach the displayElement to the canvas

guacCanvas.appendChild(displayElement);

그러면! 지금 원격机器의 내용이 당신의 DOM에서 보이고 있습니다. 하지만 기다리세요, 무언가가 틀렸습니다. 키보드 입력이 반응하지 않고, 마우스도 동일합니다. 이를 어떻게 해결할까요?

단계 5: 키보드와 마우스 이벤트 구성

키보드와 마우스 이벤트를 구성하려면 guacamole-common-js가 제공하는 입력 처리기를 설정해야 합니다.

먼저 마우스 이벤트를 어떻게 구성할 수 있는지 살펴보겠습니다.

JavaScript

let mouse = new Guacamole.Mouse(guacElement)

​

// Primarily you need to handle 3 events. onmousedown, onmouseup, onmousemove.

// The high level idea is to send the current state of the mouse to guacamole

// whenever the mouse moves, the mouse gets clicked or unclicked.

const sendMouseState = (mouseState) => {

    guacClient.sendMouseState(mouseState);

}

​

// Essentially sending mouse state for all the individual events

mouse.onmousedown = mouse.onmouseup = mouse.onmousemove = sendMouseState;

키보드 구성은 더 간단합니다. 두 가지 이벤트만 설정하면 됩니다.

JavaScript

let keyboard = new Guacamole.Keyboard(guacElement); 

// you need to pass in the HTMLElement here where you want the keyboard events to 

// be passed into Guacamole. For example, if you pass in the document object instead

// of guacElement, you'll send all the events in the entire DOM to Guacamole, which may

// or may not be something you want. If you don't have any other UI elements in your

// DOM, you should be fine sending document, but if you have other UI elements in addition

// to your guacCanvas, you'd be better off passing just the guacCanvas.

​

​

// You need to configure 2 events. onkeyup and onkeydown

 keyboard.onkeydown = (keysym: number) => {

    guacClient.sendKeyEvent(1, keysym); // Send keydown event to the remote server

  };

​

  keyboard.onkeyup = (keysym: number) => {

    guacClient.sendKeyEvent(0, keysym); // Send keyup event to the remote server

  };

단계 6: 터치 이벤트 구성 (선택 사항)

선택 사항으로, 터치 입력을 클라이언트에도 구성할 수 있지만, 이는 Guacamole.Mouse 이벤트로 변환됩니다.

JavaScript

let touch = new Guacamole.Touch(guacCanvas);

​

// You need to configure 3 events here ontouchstart, ontouchend, ontouchmove

touch.onmousedown = touch.onmouseup = touch.onmousemove = 

  (touchState) => guacClient.sendMouseState(touchState);

​

const handleTouchEvent = (event) => {

  event.preventDefault();

  let touchState = touch.getMouseState(event);

  guacClient.sendMouseState(touchState);
}
​
touch.ontouchstart = touch.ontouchend = touch.ontouchmove = handleTouchEvent;

보시다시피, 터치 이벤트를 Guacamole 마우스 이벤트로 변환하며, 이 단계는 완전히 선택 사항입니다. 터치屏 기기에서 사용할 의도가 있다면 터치 이벤트를 구성해야 합니다.

단계 7: 원격机器에서 분리

마지막 단계에 도달했습니다. 원격机器에서 분리하는 것은 클라이언트에서 메서드를 호출하는 것만큼 간단합니다.

JavaScript

guacClient.disconnect();

결론

일단 요약하자, Apache Guacamole은 RDP, SSH, 또는 VNC 프로토콜을 통해 원격 데스크톱에 원활하게 접근할 수 있는 강력하고 다양한 오픈 소스 프레임워크입니다. guacamole-common-js 라이브러리는 개발자가 다른 Guacamole 컴포넌트인 guacamole-common, guaclib, 그리고 guacamole-ext와 상호작용할 수 있는 커스텀 Guacamole 클라이언트를 만들 수 있게 합니다.

이 글에 나열된 단계를 따라, 원격 서버에 접속하고 키보드, 마우스, 그리고 터치 이벤트를 처리할 수 있는 기본 커스텀 guacamole 클라이언트를 설정할 수 있습니다.

Source:
https://dzone.com/articles/access-remote-desktops-using-apache-guacamole-a-ba