PIP-OS-웹앱

여러분, 안녕하세요,

이 블로그에서 우리는 JavaScript를 기술과 통합하고 훌륭한 것을 구축할 수 있는 방법을 볼 것입니다.

PIP-OS는 사용자가 Docker, Kubernetes 및 향후 훨씬 더 많은 기술에서 작업할 수 있는 WebAPP입니다.

지금까지 PIP-OS가 지원하는 기술:

도커

쿠버네티스

전제 조건:

HTML/CSS/JavaScript에 대한 지식

리눅스

Linux에서 구성된 웹 서버

Linux에 설치된 Docker

쿠버네티스 구성됨

이제 Docker부터 시작하겠습니다.

도커

Docker WebAPP는 브라우저에서 Docker 명령을 실행할 수 있으며 화면에서 출력을 볼 수 있습니다.

다음을 해결하는 사용 사례:

사용자가 시스템에서 Docker를 구성할 필요가 없음

사용된 기술 스택:

HTML

CSS

자바스크립트

파이썬

프런트 엔드 부분의 경우 생성된 주요 구성 요소는 docker 명령을 입력으로 사용하는 입력 상자입니다.

다음은 입력 상자를 만들기 위한 HTML 및 CSS 코드입니다.

 <div class="center-docker">
        <div class="d-flex justify-content-center">
          <div class="searchbar text-white">
            [root @localhost~]# <input id="inp" class="search_input text-white" type="text" name="" placeholder="Enter the command">
        <a onclick="lw()" class="search_icon">
            <i class="fas fa-arrow-right" aria-hidden="true"></i>
        </a>
      </div>
        </div>
    </div>

여기에서 입력 상자에서 다음 id를 가진 값을 가져올 JavaScript 코드와 연결된 입력 id = "inp"를 볼 수 있습니다.

<script>
    function lw() {

    var i = document.getElementById("inp").value

    var xhr = new XMLHttpRequest();


    xhr.open("GET","http://localhostIP/cgi-bin/PIPOS/docker.py?x="+i,true);
    xhr.send();

    xhr.onload = function() {
        var output = xhr.responseText;
        document.getElementById("d1").innerHTML = output;
        }
    }

</script>

여기서 코드의 이 부분은 입력 상자를 통해 사용자로부터 입력을 받고 입력을 cgi-bin 디렉토리에 있는 python 스크립트로 보냅니다.

CG가 뭐야?

CGI(Common Gateway interface)는 웹 서버에서 프로그램을 실행하는 방법입니다. For Detail

import cgi
import subprocess
import time 

print("context-type: text/html")
print()
#print("let's build something new Nitesh")#here now if now I change anything it will change in page without refreshing

#time.sleep(10) #this holds program for 10 seconds and then run the prog auto
f=cgi.FieldStorage()
cmd=f.getvalue("x")
#print(cmd)

o = subprocess.getoutput("sudo " +cmd)

print(o)

따라서 이 cgi 프로그램은 서버에서 입력을 받고 브라우저에서 명령을 실행합니다.

하위 프로세스는 프로세스를 생성하여 Python 코드를 통해 새로운 응용 프로그램이나 프로그램을 실행하는 데 사용되는 라이브러리입니다.

이제 서버를 시작하고 브라우저에서 웹 페이지를 열고 브라우저에서 docker 명령을 실행합니다.

쿠버네티스

Kubernetes WebAPP는 브라우저에서 kubernetes 명령을 실행할 수 있으며 일반적으로 명령이 아닌 언어로 입력을 받은 다음 해당 쿼리를 처리하고 그에 따라 출력을 표시합니다.

해결하는 사용 사례"

사용자는 kubernetes 명령을 알 필요가 없습니다

.

사용자가 시스템에서 kubernetes를 구성할 필요가 없음

사용한 기술 스택:

HTML

CSS

자바스크립트

파이썬

프런트 엔드의 주요 부분은 입력을 사용자의 쿼리로 사용하는 입력 상자입니다.

입력 상자를 만들려면 HTML과 CSS를 사용했습니다.

    <div class="center-docker">
        <div class="d-flex justify-content-center">
          <div class="searchbar text-white">
            [root @localhost~]# <input class="search_input text-white" id="inp1" type="text" name="" placeholder="Enter the command">
            <a onclick="lw()" class="search_icon">
            <i class="fa fa-arrow-right" aria-hidden="true"></i>
        </a>
          </div>
        </div>
    </div>

여기에서 입력 상자와 관련된 ID와 버튼과 관련된 기능을 볼 수 있습니다. 따라서 사용자가 쿼리를 입력하고 버튼을 클릭하자마자 JavaScript 코드와 연결된 기능이 트리거되어 입력을 처리하고 브라우저에 출력을 표시하는 cgi 프로그램에 해당 입력을 보냅니다.

import cgi
import subprocess as sp
import time

print("context-type: text/html")
print()
#print("let's build something new Nitesh")#here now if now I change anything it will change in page without refreshing

#time.sleep(10) #this holds program for 10 seconds and then run the prog auto
f=cgi.FieldStorage()
#print(cmd)
#cmd = f.getvalue("x")

#o = subprocess.getoutput(cmd + " --kubeconfig admin.conf")

#print(o)

query = f.getvalue("x")

if "show pods" in query:
    cmd = "kubectl get pods --kubeconfig admin.conf"
    o=sp.getoutput(cmd)
    print(o)

elif "show deployment" in query:
    cmd = "kubectl get deployments --kubeconfig admin.conf"
    o = sp.getoutput(cmd)
    print(o)

다음은 위에서 설명한 대로 브라우저에서 입력을 처리하고 출력을 표시하는 프로그램입니다.

여기서 admin.conf 파일은 Linux에서 kubernetes를 실행하는 데 도움이 되는 kubernetes의 구성 파일입니다.



데모 비디오를 보려면 👇