Kubernetes 애플리케이션에 최소한의 ReactJS UI 추가하는 방법

Kubernetes 애플리케이션에 최소한의 ReactJS UI 추가하는 방법

 

ReactJS가 Go를 만나다

Unsplash에 있는 Lautaro Andreani의 사진

client-go를 사용하여 Kubernetes와 상호 작용하는 많은 멋진 서버 애플리케이션을 만들 수 있습니다. 때로는 응용 프로그램을 시각적으로 매력적으로 만들어서 curl, postman 등을 통해 요청을 보낼 필요 없이 기능을 쉽게 수행할 수 있도록 하고 싶습니다.

이 블로그 게시물에서는 Kubernetes 애플리케이션에 웹 UI를 추가하는 방법을 살펴보겠습니다. 나는 이전 블로그 게시물 Go에서 Kubernetes 인터페이스 애플리케이션 빌드, 테스트 및 자동화에서 자세히 볼 수 있는 Secreto-Server를 기반으로 구축할 것입니다. 계속하기 전에 해당 블로그를 읽는 것이 좋습니다.

웹 UI를 통해 제공되는 다음 기능을 허용하는 Secreto-Client를 살펴보겠습니다.

• Kubernetes 시크릿 생성
• 모든 Kubernetes 비밀 보기
• Kubernetes 비밀 설명
• Kubernetes 비밀 삭제

이러한 작업은 다음과 같은 방법으로 수행할 수 있습니다.

비밀 만들기

✚ 버튼을 클릭하면 비밀을 생성하기 위해 데이터를 입력하는 양식이 있는 대화 상자 팝업을 볼 수 있습니다.

모든 비밀 보기

모든 비밀은 애플리케이션이 실행되는 즉시 카드에 표시됩니다.

비밀 설명

버튼을 클릭하면 비밀을 더 자세히 설명할 수 있습니다.

비밀 삭제

❌ 버튼을 클릭하여 비밀을 삭제할 수 있습니다.

Secreto-Client는 UI를 생성한 다음 수행된 작업에 따라 Secreto-Server에 요청을 보냅니다.

전제 조건

우리는 서버와 클라이언트를 모두 구축할 것입니다. 서버 코드는 Go로 작성되었으며 자체 요구 사항이 있으며 클라이언트는 ReactJS로 작성된 코드입니다.

• React-JS: 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다. React-JS를 사용하면 최소한의 nodeJS를 알고 있는 사용자 인터페이스를 쉽게 구축할 수 있습니다.
• Go: Google에서 지원하는 오픈 소스 프로그래밍 언어
• MiniKube: macOS, Linux 및 Windows에서 로컬 Kubernetes 클러스터를 빠르게 설정하는 도구입니다. Docker, HyperV, Podman 등과 같은 MiniKube를 실행하려면 가상화 드라이버도 필요합니다. 자세한 정보는 여기에서 찾을 수 있습니다. 다른 유형의 클러스터(Docker Desktop Kubernetes, GKE, AKS 등)를 사용할 수 있습니다. 저는 Minikube에 쉽게 액세스할 수 있기 때문에 사용하고 있습니다.
• Kubernetes 지식: 애플리케이션의 목적을 이해하려면 Kubernetes에 대해 약간 알고 있어야 합니다.

계속 진행하기 전에 Minikube가 실행 중인지 확인합시다. 다음 명령을 실행하여 이 작업을 수행할 수 있습니다.

$ minikube start

😄 minikube v1.25.2 on Darwin 12.3 (arm64)
✨ Using the podman (experimental) driver based on existing profile
👍 Starting control plane node minikube in cluster minikube
🚜 Pulling base image ...
E0321 11:05:07.616563 66007 cache.go:203] Error downloading kic artifacts: not yet implemented, see issue #8426
🔄 Restarting existing podman container for "minikube" ...
🐳 Preparing Kubernetes v1.23.3 on Docker 20.10.12 ...E0321 11:05:13.251398 66007 start.go:126] Unable to get host IP: RoutableHostIPFromInside is currently only implemented for linux
▪ kubelet.housekeeping-interval=5m
🔎 Verifying Kubernetes components...
 ▪ Using image gcr.io/k8s-minikube/storage-provisioner:v5
🌟 Enabled addons: storage-provisioner, default-storageclass
💡 kubectl not found. If you need it, try: 'minikube kubectl -- get pods -A'
🏄 Done! kubectl is now configured to use "minikube" cluster and "default" namespace by default

이제 minikube 노드가 준비되었는지 확인하겠습니다.

$ minikube kubectl get nodes

NAME STATUS ROLES AGE VERSION
minikube Ready control-plane,master 3m50s v1.23.3

Secreto 서버 로드

백엔드는 다음과 같은 방식으로 로드할 수 있습니다.

1. GOPATH에 애플리케이션 복제

$ git clone git@gitlab.com:k2511/secreto-server.git

git clone git@gitlab.com:k2511/secreto-server.git
Cloning into 'secreto-server'...
remote: Enumerating objects: 235, done.
remote: Counting objects: 100% (232/232), done.
remote: Compressing objects: 100% (121/121), done.
remote: Total 235 (delta 97), reused 177 (delta 69), pack-reused 3
Receiving objects: 100% (235/235), 282.99 KiB | 3.11 MiB/s, done.
Resolving deltas: 100% (97/97), done.

$ cd secreto-server

2. 애플리케이션 실행 파일 빌드

나는 그것을 쉽게 만드는 Makefile을 만들었습니다. 이 명령이 실행되면 이라는 이름의 새 실행 파일이 생성되어야 합니다. 비밀 서버.

$ make build

go mod download
GOOS=darwin GOARCH=arm64 go build -o secreto-server .
chmod +x secreto-server

메모: M1 Mac에서 실행하지 않는 경우 Makefile에서 $GOOS 및 $GOARCH 변수를 변경해야 할 수도 있습니다. 자세한 내용은 여기를 참조하세요.

3. 로컬에서 애플리케이션 실행

실행 파일을 실행할 때 -local 플래그를 전달하기만 하면 됩니다. -local 플래그 없이 실행하려면 다른 인증 방법을 사용하기 때문에 Kubernetes 클러스터에서 애플리케이션을 실행해야 합니다.

$ ./secreto-server -local

2022/03/20 16:18:30 KubeClient running with local configuration
2022/03/20 16:18:30 Starting server on the port 8080

프로그램을 실행하기 전에 SECRETO_PORT 환경 변수를 설정하여 포트를 변경할 수도 있습니다.

이제 응용 프로그램이 실행 중입니다. 계속해서 작동하는지 확인합시다. 다른 터미널을 열고 해당 버전을 얻기 위해 서버에 요청을 보냄으로써 이를 수행할 수 있습니다.

$ curl http://localhost:8080/api/secreto/version

{"version":1}

이제 작동하는 서버가 있습니다! 이제 클라이언트를 배포해 보겠습니다.

Secreto 클라이언트 로드

클라이언트는 다음과 같은 방법으로 로드할 수 있습니다.

1. 리포지토리 복제

$ git clone git@gitlab.com:k2511/secreto-client.git

Cloning into 'secreto-client'...
remote: Enumerating objects: 109, done.
remote: Total 109 (delta 0), reused 0 (delta 0), pack-reused 109
Receiving objects: 100% (109/109), 6.20 MiB | 5.46 MiB/s, done.
Resolving deltas: 100% (58/58), done.

2. 종속성 다운로드

$ npm install --silent
$ npm install react-scripts -g --silent

3. 애플리케이션 실행

$ npm start
Compiled successfully!
You can now view client in the browser.
 Local: http://localhost:3000/
 On Your Network: http://192.168.3.7:3000/
Note that the development build is not optimized.
To create a production build, use npm run build.

이제 애플리케이션 페이지인 localhost:3000을 방문하면 다음 화면이 표시되어야 합니다.

내 브라우저에서 실행되는 Secreto Client

메모: 화면에 표시되는 비밀은 매우 다를 수 있습니다. 저는 Minikube 클러스터를 가지고 놀았기 때문에 약간 다르게 보입니다.

다른 포트에서 애플리케이션을 실행하려면 환경 변수 PORT를 설정하기만 하면 됩니다. 실행하려는 포트에 다음과 같이 입력합니다.

$ PORT=3001 npm start

Compiled successfully!

You can now view client in the browser.

Local: http://localhost:3001/
 On Your Network: http://192.168.86.24:3001/

Note that the development build is not optimized.
To create a production build, use npm run build.

Semantic-UI로 시각적 개체 만들기

Semantic-UI를 사용하면 최소한의 시각적으로 매력적인 페이지를 만들기 시작하는 것이 정말 간단해졌습니다. Semantic은 인간 친화적인 HTML을 사용하여 아름답고 반응적인 레이아웃을 만드는 데 도움이 되는 개발 프레임워크입니다.

예를 들어 팝업을 생성하는 것은 다음과 같이 비밀을 생성하기 위한 형식입니다. 다음 사항에 유의하십시오.

• 팝업은 읽을 수 있는 HTML을 사용하여 정의됩니다.
• 아이콘을 클릭하여 팝업을 트리거할 수 있습니다. 이는 트리거가 아이콘이고 클릭 시 팝업이 로드되는 것으로 나타납니다.
• 팝업 내에 표시되는 콘텐츠는 더 많은 레이아웃을 로드할 수 있는 기능을 가리킬 수 있습니다. 이 팝업의 경우 새로운 시크릿을 생성하기 위한 데이터를 입력하기 위한 폼을 로드하고 있습니다.

 trigger={
 circular name='add'
 color='grey'
 />
 }
 content={() => this.renderSubmitForm()}
 size='large'
 on='click'
 position='bottom center'>

Semantic에는 다양한 구성을 가진 다양한 유형의 객체가 있습니다. 나는 그들의 문서를 살펴보는 것이 좋습니다.

Axios로 요청 보내기

Axios는 이 인터페이스를 구축하는 데 도움이 된 또 다른 훌륭한 도구입니다. 악시오스는 약속 기반 node.js 및 브라우저용 HTTP 클라이언트. ReactJs Semantic UI에서 취한 조치를 기반으로 secreto-server에 요청을 보내기 위해 사용했습니다.

Axios를 사용하는 예는 다음과 같습니다.

• 상태의 변수를 가져와서 비밀 생성에 사용되는 양식에 입력한 내용으로 채워집니다.
• Axios는 내가 정의한 전역 끝점에 게시물을 보냅니다. 데이터(네임스페이스) 나머지 URI를 채우기 위해 상태에서 가져옴
• 본문은 다음을 포함하는 두 번째 매개변수로 전달됩니다. 이름 그리고 유효 탑재량 비밀의
• 헤더는 세 번째 매개변수로 전달됩니다.
• 응답을 기록하고 방금 생성한 새 비밀을 포함하는 비밀을 다시 로드합니다.

 createSecret = () => {
 const {name, namespace, payload} = this.state
 axios.post(this.endpoint + "/api/secreto/" + namespace,
 {
 "name": name,
 "payload": payload
 },
 {
 headers: {
 "Content-Type": "application/x-www-form-urlencoded",
 },
 },
 ).then(res => {
 console.log(res);
 this.getSecrets();
 })
 }

Kubernetes 인터페이스 애플리케이션을 위한 미니멀리스트 UI가 있습니다. 두 프로젝트의 소스 코드를 자유롭게 검토하고 자세히 알아보십시오!

읽어주셔서 감사합니다. 이 블로그를 통해 웹 서버에 멋진 미니멀리스트 UI를 추가할 수 있기를 바랍니다.

Want to Connect?

You can find me on twitter @awkwardferny

---

Kubernetes 애플리케이션에 최소한의 ReactJS UI 추가는 원래 Better Programming on Medium에 게시되었으며, 여기에서 사람들은 이 이야기를 강조 표시하고 응답하여 대화를 계속하고 있습니다.