외부 HMI 임베드

많은 산업용 기계는 로컬 웹 서버를 통해 자체 HMI(Human-Machine Interface)를 노출합니다. 이 가이드는 Embed 위젯, nginx 리버스 프록시, 원격 접근 터널을 사용하여 IronFlock UI에서 이러한 HMI에 접근하는 방법을 설명합니다.

기본 예시: 단일 기계

가장 간단한 경우는 엣지 디바이스의 로컬 네트워크에서 접근 가능한 단일 CNC 기계(또는 PLC, 카메라 등)의 HMI 웹 서버 — 예를 들어 192.168.1.50:8080 — 입니다.

1. 기계 주소를 앱 파라미터로 구성

앱 파라미터를 사용하여 사용자가 기계의 로컬 HMI 주소(예: 192.168.1.50:8080)를 구성할 수 있도록 합니다. 이렇게 하면 주소가 하드코딩되지 않으며 디바이스 설치별로 설정할 수 있습니다.

2. 엣지 코드에 nginx 리버스 프록시 추가

앱의 Docker 설정에 구성된 기계 주소를 읽고 엣지 디바이스의 고정 포트(예: localhost:3000)로 전달하는 간단한 nginx 컨테이너를 포함합니다. 엣지 코드가 앱 파라미터를 읽고 그에 따라 nginx를 구성합니다.

3. 포트 템플릿에 고정 포트 정의

포트 템플릿에서 nginx가 수신 대기하는 포트를 선언합니다:

# .ironflock/port-template.yml
ports:
  - name: CNC 기계 HMI
    port: 3000
    main: false

포트는 고정되어야 합니다(동적으로 할당되지 않음). 원격 접근 포트는 런타임에 추가할 수 없기 때문입니다 — 릴리스 시점에 정의되고 설치별로 구성됩니다.

port-template.yml에 포트를 선언함으로써 프로젝트 관리자가 앱 설정에서 CNC 기계에 대한 원격 접근을 활성화하거나 비활성화할 수 있습니다. 앱이 디바이스에 처음 설치될 때 사용자는 설치 설정에서 이 포트에 대한 원격 접근을 명시적으로 허용해야 합니다. 이는 보안 기능 — 원격 접근은 기본적으로 활성화되지 않습니다.

여기서 원격 접근이 필요한 이유는 HMI에 접근하는 사용자가 로컬 노트북에 있고 엣지 디바이스의 네트워크에는 없기 때문입니다. IronFlock의 터널 기술은 사용자의 브라우저에서 엣지 디바이스의 전달된 포트까지 안전한 연결을 생성합니다.

4. 보드에 Embed 위젯 추가

UI Builder에서 포트 3000의 디바이스 원격 접근 터널 주소를 가리키는 Embed 위젯을 추가합니다. CNC 기계의 원래 HMI가 이제 IronFlock 보드 내에 직접 표시됩니다.

이 기본 설정은 디바이스당 단일 기계 HMI에 대한 원격 접근을 제공합니다 — VPN 없이, 방화벽 변경 없이.

고급: 디바이스당 여러 기계

엣지 디바이스가 여러 기계에 연결된 경우 경로 기반 라우팅을 사용하여 단일 전달 포트를 통해 모든 HMI를 제공하도록 패턴을 확장할 수 있습니다.

1. 데이터 백엔드 테이블에 기계 주소 저장

각 기계의 세부 정보(로컬 웹 서버 주소 및 전달된 경로 포함)를 추적하는 테이블을 데이터 백엔드에 추가합니다:

# .ironflock/data-template.yml
data:
  tables:
    - tablename: machines
      maintainLatestFlagFor: ['machine_id']
      columns:
        - id: tsp
          dataType: timestamp
        - id: machine_id
          dataType: string
        - id: name
          dataType: string
        - id: local_hmi_address
          dataType: string
        - id: forwarded_hmi_path
          dataType: string

2. nginx를 통해 여러 기계 라우팅

nginx를 구성하여 같은 고정 포트 아래의 별도 경로에서 각 기계를 리버스 프록시합니다. 예를 들어 192.168.1.50:8080을 localhost:3000/cnc1/로, 192.168.1.51:8080을 localhost:3000/cnc2/로 전달합니다. 이 전달된 경로를 machines 테이블에 다시 저장하여 보드가 각 HMI를 찾을 수 있도록 합니다.

기본 예시와 동일한 고정 포트와 포트 템플릿이 적용됩니다 — 하나의 포트가 다른 경로를 통해 모든 기계를 제공합니다.

3. 페이지 기반 내비게이션으로 Embed 위젯 추가

UI Builder에서 각 기계 HMI를 위한 별도의 보드 페이지를 만들고 각 페이지에 machines 테이블에서 forwarded_hmi_path를 읽어 임베드 URL로 사용하는 Embed 위젯을 추가합니다.

사용자가 HMI 간에 전환할 수 있도록 페이지 및 내비게이션 기능을 사용합니다. 연결된 모든 기계를 수직 사이드바 메뉴로 나열하는 Side Navigation 위젯을 추가합니다. 사이드바 항목은 새 기계가 자동으로 나타나도록 machines 테이블에서 동적으로 생성될 수 있습니다. 사용자가 기계 이름을 클릭하면 보드가 해당 페이지로 이동하고 해당 페이지의 Embed 위젯이 올바른 HMI를 로드합니다.

결과

사용자는 보드에서 연결된 모든 기계를 탐색하고 하나를 선택하여 IronFlock 내에서 직접 원래 HMI와 상호작용할 수 있습니다 — VPN 없이, 별도 브라우저 탭 없이, 방화벽 구성 없이. Embed 위젯, 데이터 백엔드, 원격 접근 터널이 함께 작동하여 전체 기계 플릿을 위한 통합되고 안전한 제어 화면을 만듭니다.