Dev.log

pi-kvm을 구축한지 오래되었지만 드디어 블로그에 정리글을 작성한다.

PI-KVM란? 

pikvm 홈페이지

pi-kvm은 값비싼 장비인 ipkvm을 라즈베리파이를 사용하여 저렴하게 제작하며 웹을 통한 물리적인 컴퓨터의 제어가 가능하다.

서버와 떨어지게 되면서 구성 4port hdmi kvm스위치를 이용하여 구성하였다.

1. 필요 부품

- 라즈베리파이 4 (+  sd 카드, 어댑터)

- hdmi2csi

- 4port kvm(알리발)

- ft232 - 제품링크 (알리에서 파는 ft232는 작동하지 않는다....  정품칩을 사용하는 것으로 구매!!)

- c type 케이블 2개

- 납땜 도구

2. 장치 준비

4포트 PI-KVM을 만들기 위해서는 2가지의 DIY가 필요하다

2-1. 전원 및 OTG케이블 만들기

pi-kvm에서 키보드, 마우스, ISO마운트등 USB를 PC에 연결하기위한 케이블을 제작해야 한다.

알리에서 별도 젠더도 팔지만 제작하여 사용중이다.

어댑터에서는 전원 단자 케이블 만 나머지 케이블은 USB-A 수 커넥터에 USB-C 의 데이터 +,- 케이블에 연결하여 사용한다.

2-2. KVM스위치 제어 케이블 만들기

다포트  kvm을 구현하기 위해 공식문서를 보던중 발견한 알리 hdmi 4port kvm

이걸 처음 구매할떈 단순히 케이블만 연결하여 pi-kvm을 통해 제어 할수있을줄 알았다...

알리에서 구매한 4포트 kvm 스위치를 Pi-KVM에서 제어하기 위한 장치가 필요하다.

https://docs.pikvm.org/xh_hk4401/#linux-instructions

해당 kvm스위치를 제어하기 위해선 정품 ft232칩을 사용한 보드가 필요하다고 한다.

알리에서 비슷한 짭이 많아서 구매해봤지만 번번히 실패하고 결국 직배 되는 곳을 찾아서 주문하였다.

ft_prog 프로그램을 이용하여

Inver RS232 Signals -> Invert TXD
                                    -> Invert RXD

 두 항목을 활성화만 하면 세팅은 끝이 난다. 단지 정품칩이 아닐 경우 재연결 하면 설정이 사라진다..

KVM스위치와 연결을 위한 납땜 또한 필요하다.

ft232의 마이크로5핀 단자에는 라즈베리파이와 케이블로 연결하면되고 아래 4개의 단자 중 전원(3.3v)를 제외하고 KVM스위치와 연결을 위한 마이크로5핀 수 단자를 납땜하여 연결한다.(D+ -> Tx / D- -> Rx / GND -> GND로 납땜)

3. 설치

제작한 케이블, 캡처보드 등을 연결

SD카드에 PI-KVM OS 다운로드 및 설치

다양한 usb 플래싱 툴 이용해서 부팅 sd 카드 제작 및 부팅

4. 세팅

1. 로그인

2.메뉴바에 4port 지원 추가

ft232를 이용하여 kvm컨트롤러에 연결했기때문에 해당 부분을 활성화 시켜줘야한다.

https://docs.pikvm.org/xh_hk4401/#an-inverter-circuit-the-cheap-way

FT-232  /dev/ttyUSB0

pi-kvm은 sd카드를 읽기 모드로 두고 사용한다 따라서 터미널에서 수정모드로 변경한다

rw

/etc/kvmd/override.yaml 를 아래와 같이  추가한다.

kvmd:
    gpio:
        drivers:
            hk:
                type: xh_hk4401
                device: /dev/ttyUSB0
        scheme:
            ch0_led:
                driver: hk
                pin: 0
                mode: input
            ch1_led:
                driver: hk
                pin: 1
                mode: input
            ch2_led:
                driver: hk
                pin: 2
                mode: input
            ch3_led:
                driver: hk
                pin: 3
                mode: input
            ch0_button:
                driver: hk
                pin: 0
                mode: output
                switch: false
            ch1_button:
                driver: hk
                pin: 1
                mode: output
                switch: false
            ch2_button:
                driver: hk
                pin: 2
                mode: output
                switch: false
            ch3_button:
                driver: hk
                pin: 3
                mode: output
                switch: false
        view:
            table:
                - ["#Input 1", ch0_led, ch0_button]
                - ["#Input 2", ch1_led, ch1_button]
                - ["#Input 3", ch2_led, ch2_button]
                - ["#Input 4", ch3_led, ch3_button]

3. (옵션)VNC 활성화

/etc/kvmd/override.yaml 에 아래와 같이 추가하면 활성화 된다.

vnc:
    # See https://github.com/pikvm/pikvm/blob/master/pages/vnc.md
    keymap: /usr/share/kvmd/keymaps/ru # Set russian keymap
    auth:
        vncauth:
            enabled: true # Enable auth via /etc/kvmd/vncpasswd#

5. 사용

6. 추가 전원제어

PI-KVM은 GPIO단자를 통한 전원제어를 제공해주는 것같다 하지만 4포트 제어를 사용하기에 필자는 별도의 wifi 기반의 컴퓨터용 릴레이 스위치(tyua)를 별도로 구매하여 사용하고있다.

각종 프로젝트를 도커로 빌드 하다가 까먹어서 작성

Dockerfile을 통하여 추후 젠킨스 등 으로 배포 자동화를 시도해볼 수 있다.

Dockerfile 

스프링부트 프로젝트dockrfile

# FROM azul/zulu-openjdk:11-latest
FROM azul/zulu-openjdk-alpine:11-latest
ARG JAR_FILE=build/libs/*.jar
COPY ${JAR_FILE} app.jar

# EXPOSE 8080 #npm으로 연결
ENTRYPOINT ["java","-jar","/app.jar"]

FROM 이미지이름

베이스가 되는 원하는 이미지를 기입한다.

Dockerfile을 통한 빌드

터미널에서 도커로 이미지 빌드

해당 폴더의 dockerfile을 참조하여 빌드해준다.

대문자가 이미지 이름에 포함될경우 빌드 불가능하다!!

docker build --tag 이미지이름:latest .

도커 이미지 Tar로 저장, 로드

이미지를 DockerHub나 개인 Harbor같은걸 쓰면 좋겠지만 귀찮을땐 파일째 옮기는것이 편할때가 있다.

도커이미지 저장

docker save -o tar파일이름 이미지이름:latest

도커이미지 로드

docker load -i tar파일명

학교 수업간 유니티를 이용하여 간단한 게임을 만들어보던 중 랭킹서버용으로 랭킹API 장고로 아주 간단하게 제작하기로 생각하여 제작하였습니다.

해당 글에서는 장고를 통한 reat-api, JWT, 도커를 통한 배포 등을 다루었습니다

저는 API통신을 위한 부분을 만들기 위해 rest api를 제작할수 있는  rest framework를 이용하여 제작하였습니다.

https://www.django-rest-framework.org/

장고 앱의 모델 구성

#프레임워크
from django.shortcuts import render
from rest_framework.response import Response
from rest_framework.views import APIView
from rest_framework import status
from django.http import Http404
#데어터 처리
from .models import GameRank
from .serializers import GameRankSerializer


# Create your views here.
#GET,POST 부분
class GameRankAPI(APIView):
    
    #list
    def get(self, request):
        gameRankList = GameRank.objects.all() #질의할 쿼리생성
        print(gameRankList)
        serializer = GameRankSerializer(gameRankList, many=True)
        return Response(serializer.data)
    
    #새로운 랭킹 작성
    def post(self, request):
        serializer = GameRankSerializer(data = request.data)
        if serializer.is_valid(): #유효성 검사
            serializer.save() #저장
            return Response(serializer.data, status=status.HTTP_201_CREATED)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)


#하나씩 조회
class GameRankDetail(APIView):
    #해당 객체 가져오기
    def get_object(self, pk):
        try:
            return GameRank.objects.get(pk=pk)
        except GameRank.DoesNotExist:
            raise Http404

    #가저온 객체를 이용 출력
    def get(self, request, pk, format=None):
        gameRankObject = self.get_object(pk)
        serializer = GameRankSerializer(gameRankObject)
        return Response(serializer.data)

    #수정
    def put(self, request, pk, format=None):
        gameRankObject = self.get_object(pk)
        serializer = GameRankSerializer(gameRankObject, data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
    
    #삭제
    def delete(self, request, pk, format= None):
        gameRankObject =  self.get_object(pk)
        gameRankObject.delete()
        return Response(status=status.HTTP_204_NO_CONTENT)

장고에는 Viewset이 있어 이를 활용하여 구현하였다.

유니티에서 로그인을 하기위해 rest api를 통한 로그인을 구현해야한다.

따라서 토큰방식을  사용하기로 결정 하고 진행하였다.

https://ssungkang.tistory.com/entry/Django-Token-%EC%9D%B8%EC%A6%9D-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-TokenAuthentication

외부 DB 연결

pip install mysqlclient

연결 어댑터 설치

DB연결에 연결후 DB생성을 manager.py를 통해 진행

도커를 통한 서비스 배포

도커 데스트탑 설치, 프로젝트에 Dockerfile 제작

docker build -t name .

빌드 후 

도커 허브 업로드 하여 공개 할수없으므로 별도 tar로 제작 

docker save dfdf

https://www.leafcats.com/240

API통신간 크롬등 브라우저에서의 보안상의 이유로 외부 도메인에 대한 호출을 차단한다.

해당 차단을 풀기위해선 같은 도메인으로 서비스를 제공하거나 서버측에서 접속하는 도메인을 화이트리스트로 허용해주면 사용이 가능하다 아래는 참고링크이다.

https://jahong.tistory.com/entry/CORSCross-Origin-Resource-Sharing%EC%99%80-Django

//일단 기록용

서버가 존재하는 곳의 네트워크 라우팅 정보를 openvpn서버(도커로 운영)에 추가해준다.

터미널에 명령어 를 아래와 같이 자신의 네트워크 환경에 맞게 수정해주고 추가

ovpn_genconfig -N -d -p "route 192.168.35.0 255.255.255.0"

그리고 서버 재부팅

그리고 ovpn 파일에서 redirect-gateway def1 을 지우던가 주석처리 후 접속하면 서버에 추가한 경로만 vpn을 통해서 접속된다.

시놀로지 vpn서버에서는  redirect-gateway def1   만 지우면 됬는데 안되서 찾아보고 기록

1. 개발환경을 세팅

1)노드JS를 설치하거나 NVM을 설치하여 사용

https://nodejs.org/en/

https://github.com/coreybutler/nvm-windows/releases

2) 노드js에서 react설치

npm install -g create-react-app

3) 설치 후 리액트 프로젝트 생성

create-react-app .

. 은 현재 경로를 의미하며 지금 위치한 폴더에 리엑트 프로젝트를 생성한다.(프로젝트 명은 대문자를 포함 불가)

4) 생성한 리액트 프로젝트 실행

npm start

생성한 프로젝트 폴더로 이동한 뒤 프로젝트를 실행하면 연결된다.

4-1) 기타 프로젝트 생성시 이미 제작되어 있는 프로젝트를 가져올경우

npm install

명령어를 통해 의존성 패키지를 설치하여 실행합니다.

시스템에 설치된 모든 패키지를 업데이트 하지 않고 OS의 보안 패치만 적용하는 명령어

sudo apt-get update

sudo apt-get install unattended-upgrades

sudo unattended-upgrade