Spring Boot, WebSocket, Vue, Docker 로 Raspberry Pi 실시간 모니터링 프로젝트 만들기 - 1편

Spring Boot를 공부하면서 Controller, Service, Repository, JPA 개념은 배우기 했지만, 따로 공부하다 보니 실제 서비스에서는 이 기술들이 어떻게 연결되는지 감이 잘 안 온다... ㅇㅇ

그리고 REST API 를 공부하고 나서는 더더욱 의문을 갖게 되었다..

REST API 만으로 실시간으로 서비스를 개발이 가능한가?
WebSocket은 REST API랑 뭐가 다른거임?
스프링부트에서 받은 데이터를 실제 DB에서는 어떻게 저장하는거임?
Vue랑 스프링부트는 도대체 어떻게 통신하는 거임?
Raspberry Pi 같은 외부 장치는 서버와 어떻게 연결하는 거임?

이 프로젝트에서는 내가 배운 것들은 종합해보면서, 하나의 작은 시스템 안에서 연결해보려 한다.

1. 프로젝트 목표

Raspberry Pi의 시스템 상태를 Spring boot의 서버로 전송하고, 데이터를 DB에 저장하고 Vue 대시보드에 WebSocket을 통해 실시간으로 확인하는 것
최종적으로는 Spring Boot, Vue, PostgreSQL을 Docker Compose를 통해서 한 번에 실행할 수 있게 구성하는 것

Raspberry Pi
    ↓
REST API
    ↓
Spring Boot
    ↓
Service
    ↓
Repository
    ↓
JPA
    ↓
PostgreSQL

Spring Boot
    ↓
WebSocket
    ↓
Vue
    ↓
실시간 Dashboard

2. 센서 데이터

Raspberry Pi에서는 일정 주기로 자신의 상태를 수집한다

CPU temperature
CPU Usage
Memory Usage
Disk Usage
Network Traffic
Timestamp

Raspberry Pi는 수집한 데이터를 Spring BOOT REST API로 전송

이후에 Spring Boot는 해당 데이터를 DB에 저장한 후 WebSocket을 이용해 Vue Frontend에 전달한다.

Vue에서는 새로고침 없이 데이터를 받아 실시간으로 화면을 갱신

3. 이번 프로젝트를 통해서 학습할 기술

이번 프로젝트에서는 다음 기술을 익힐 예정

Backend

Java
Spring Boot
Spring MVC
Spring Data JPA
WebSocket
STOMP
PostgreSQL
Gradle

Frontend

Vue3
Compositon API
Axios
STOMP.js
Chart Library

Infrastructure

Docker
Dockerfile
Docker Compose
Nginx

Device & Network

Raspberry Pi
Python
HTTP Request

4. 전체 시스템 Architecture

전체 Architecture를 먼저 간략하게 정리해보자, 구조는 아래와 같다. (기술 상세는 일단 아래에서 적자)

┌───────────────────────┐
│     Raspberry Pi      │
│                       │
│ CPU Temperature       │
│ CPU Usage             │
│ Memory Usage          │
└───────────┬───────────┘
            │
            │ HTTP POST
            ▼
┌───────────────────────┐
│     Spring Boot       │
│                       │
│ REST Controller       │
│ Service               │
│ Repository            │
└───────┬─────────┬─────┘
        │         │
        │         │ WebSocket
        ▼         ▼
┌────────────┐  ┌─────────────────┐
│ PostgreSQL │  │ Vue Frontend    │
│            │  │                 │
│ SensorData │  │ Dashboard       │
└────────────┘  └─────────────────┘

5. REST API의 역할

Raspberry Pi가 Spring Boot로 데이터를 보내는 데에는 REST API를 사용

예시

{
  "temperature": 52.3,
  "cpuUsage": 18.5,
  "memoryUsage": 41.2
}

이를 API로 전송한다.

POST /api/sensors

그래서 전체흐름은 다음과 같아진다.

Raspberry Pi
    ↓
POST /api/sensors
    ↓
Controller
    ↓
Service
    ↓
Repository
    ↓
JPA
    ↓
PostgreSQL

REST API는 기본적으로 Client가 Server에게 요청하는 구조 Raspberry Pi가 Spring Boot에게

현재 내 상태는 이거야

라고 데이터를 보내는 역할을 한다. (동시에 데이터를 생성하기도 한다. Raspberry Pi의 Status를 전송하기 때문에)

6. WebSocket의 역할

근데 우리가 데이터를 Vue를 통해서 보여줄거잖슴?

Vue에서 Raspberry Pi 데이터를 실시간으로 표시하려면 데이터가 변경되었는지 계속 확인해야 한다.

WebSocket이 없다면 다음과 같은 Polling 구조를 가져야 한다.

Polling(폴링): 클라이언트가 일정한 간격으로 서버에 반복 요청을 보내 새 데이터가 있는지 확인하는 방식.

Vue
 ↓
데이터 있어?
 ↓
Spring

Vue
 ↓
새 데이터 있어?
 ↓
Spring

Vue
 ↓
또 데이터 있어?
 ↓
Spring

예를 들어 2초마다 API를 호출하면

setInterval(() => {
  axios.get("/api/sensors/latest")
}, 2000)

와 같이 API 세팅을 해줘야 한다.

하지만 WebSocket을 사용하면 방향을 반대로 만들 수 있다.

즉 서버가 클라이언트에게 먼저 데이터를 전달할 수 있다. (굳이 프론트에서 세팅을 할 필요가 없다.)

Spring Boot
     ↓
새 데이터가 들어왔음
     ↓
WebSocket Push
     ↓
Vue

이번 프로젝트에서는 다음 구조를 사용한다.

Raspberry Pi
      ↓
POST /api/sensors
      ↓
Spring Boot
      ↓
DB 저장
      ↓
WebSocket
      ↓
/topic/sensors
      ↓
Vue

이 흐름이 프로젝트 전반적인 구조이므로 잘 알고 있다면 좋을 것 같다.

7. REST API 와 WebSocket을 동시에 사용하는 이유

전부 WebSocket으로 구현하면 되는 것 아닌가? 라는 좋은 생각이 들 수도 있다.

기술을 분리해서 사용하는 것은 역할이 달라서다.

일단 기술의 역할을 알아보자.

REST API는 주로 요청과 응답에 사용한다.

Client → Server

WebSocket은 연결을 유지한채로 양방향 통신을 할 수 있다.

Client ↔ Server

이번 프로젝트에서는 다음과 같이 역할을 나눈다.

Raspberry Pi → Spring Boot: REST
Spring Boot → Vue: WebSocket

즉 데이터 수집에는 REST를 사용하고, 실시간 화면 갱신에는 WebSocket을 사용할 예정이다.