[오픈소스] 브라우저 터미널 직접 만들기: node-pty로 bash 연결하는 실시간 터미널

WebTerminal

브라우저에서 바로 bash 터미널을 실행해보자

안녕하세요 👋  
이번 글에서는 제가 개발한 WebTerminal 프로젝트를 소개하려고 합니다.  
WebTerminal은 브라우저에서 bash 셸을 실시간으로 사용할 수 있는 웹 기반 터미널로,  
`Node.js`, `WebSocket`, `node-pty`, 그리고 `xterm.js`를 활용하여 구현했습니다.

---

📌 주요 특징

- 브라우저에서 bash 터미널을 직접 실행
- `node-pty`를 사용하여 실제 터미널처럼 동작
- WebSocket을 통한 실시간 명령어 입출력
- `cd`, `vim`, `docker exec -ti` 같은 대화형 명령어도 정상 지원
- 프롬프트, 커서, 키입력이 실제 터미널처럼 자연스럽게 작동
- 연결 끊김/에러 시 상태 출력 지원

---

 🛠️ 사용 기술 스택

역할	기술스택
터미널 UI	xterm.js
가상 터미널 실행	node-pty
통신 방식	WebSocket
백엔드 런타임	Node.js
프론트엔드	HTML, JavaScript(Vanilla)

---

 🧱 전체 구조

---

⚙️ 설치 및 실행 방법

1. 프로젝트 디렉토리 구성 예시

education-container.7z

0.00MB

education-container/
├── index.html (로컬에서 실행)
├── education-container-server.js (서버에서 실행)

 

2. 의존성 설치

[root@]$ npm install ws node-pty

 

3. 서버 실행

[root@]$ node education-container-server.js

 

4. 클라이언트 열기

index.html을 로컬 브라우저에서 열면 바로 사용 가능!

---

🖥️ 실제 동작 화면(GIF)

 

🔧 추후 개선 방향

- 로그인 API를 통해 접근 가능한 사용자를 식별

- 로그인 API를 통해 가져온 도커 컨테이너명/쿠버네티스 파드명으로 컨테이너에 직접 접근

- 관리자 페이지를 통해 새로 들어온 직원이나 교육 인원 개별로 교육용 컨테이너 또는 파드를 제공

 

로고 및 설명은 chatgpt의 도움을 받아 제작했습니다.