Digital Ocean Kubernetes에 코드 서버 클라우드 IDE 플랫폼 구축 방법

저자는 Free and Open Source Fund 계획의 일부로 기부를 받기로 했다.

소개

개발자 도구가 클라우드로 전환됨에 따라 클라우드 IDE(통합 개발 환경) 플랫폼의 창설과 채택이 증가하고 있다.클라우드 IDE는 개발진이 통일된 개발 환경에서 실시간 협업을 통해 호환성을 최대한 줄이고 생산력을 높일 수 있도록 한다.웹 브라우저를 통해 접근할 수 있으며 다양한 종류의 현대 장치는 클라우드 IDE를 사용할 수 있다.클라우드 IDE의 또 다른 장점은 집단의 능력을 이용할 수 있다는 것이다. 이것은 단일 개발 컴퓨터의 처리 능력을 크게 초과할 수 있다.
Write for DOnations 브라우저에서 직접 액세스할 수 있는 원격 서버에서 실행됩니다.Visual Studio 코드는 통합된 Git 지원, 코드 디버거, 스마트 자동 완성, 사용자 정의 및 확장 가능한 기능을 갖춘 현대 코드 편집기입니다.이것은 당신이 각종 설비를 사용하여 서로 다른 운영체제를 운행할 수 있고 수중에 항상 일치하는 개발 환경이 있다는 것을 의미한다.
이 강좌에서는 Digital Ocean Kubernetes 클러스터에 코드 서버 클라우드 IDE 플랫폼을 설정하고 도메인에 공개하고 Let's Encrypt 인증서를 사용하여 보호합니다.마지막으로 Kubernetes 클러스터에서 HTTPS를 통해 액세스하고 암호로 보호되는 Microsoft Visual Studio 코드를 실행합니다.

선결 조건

연결을 기본 연결인 Digital Ocean Kubernetes 클러스터로 구성합니다.클러스터를 생성할 때 구성 방법kubectl에 대한 지침은 클러스터에 연결하는 단계에 표시됩니다.Digital Ocean에서 Kubernetes 클러스터를 생성하려면 code-server 를 참조하십시오.

로컬 컴퓨터에 설치된 Helm 3 package manager.Microsoft Visual Studio Code 강좌를 완성하는 단계 1.

Helm이 클러스터에 설치한 Nginx 포털 컨트롤러와 인증서 관리자를 사용하여 포털 자원 공개 코드 서버를 사용합니다.이 작업을 수행하려면 Kubernetes Quickstart 를 따르십시오.

호스트 코드 서버에 완전히 등록된 도메인 이름으로 Nginx 입구에서 사용하는 부하 평형기를 가리킨다.이 강좌는 항상 사용됩니다kubectl.How To Install Software on Kubernetes Clusters with the Helm 3 Package Manager에서 도메인 이름을 구입하거나 How to Set Up an Nginx Ingress on DigitalOcean Kubernetes Using Helm에서 도메인 이름을 무료로 받거나 선택한 도메인 이름 등록기를 사용할 수 있습니다.이 도메인 이름은 Digital Ocean Kubernetes prerequisite 튜토리얼에서 Nginx 포털을 설정하는 방법과 달라야 합니다.

1단계 - 코드 서버 설치 및 공개

이 섹션에서는 Digital Ocean Kubernetes 클러스터에 코드 서버를 설치하고 Nginx Ingress 컨트롤러를 사용하여 도메인에 공개합니다.비밀번호도 설정됩니다.
Nginx 포털 컨트롤러의 필수 구성 요소의 일부로서 예시 서비스와 포털을 만들었습니다.이 자습서에서는 이러한 항목을 필요로 하지 않으므로 다음 명령을 실행하여 삭제할 수 있습니다.

kubectl delete -f hello-kubernetes-first.yaml
kubectl delete -f hello-kubernetes-second.yaml
kubectl delete -f hello-kubernetes-ingress.yaml

code-server.your_domain 파라미터를 전달할 때,kubectldelete 명령은 삭제할 파일을 받아들입니다.
로컬 컴퓨터의 이름 -f 의 파일에 배포 구성을 저장합니다.다음 명령을 사용하여 생성합니다.

nano code-server.yaml

파일에 다음 행을 추가합니다.
코드 서버.아마르

apiVersion: v1
kind: Namespace
metadata:
  name: code-server
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: code-server
  namespace: code-server
spec:
  ingressClassName: nginx
  rules:
  - host: code-server.your_domain
    http:
      paths:
      - pathType: Prefix
        path: "/"
        backend:
          service:
            name: code-server
            port:
              number: 80
---
apiVersion: v1
kind: Service
metadata:
 name: code-server
 namespace: code-server
spec:
 ports:
 - port: 80
   targetPort: 8080
 selector:
   app: code-server
---
apiVersion: apps/v1
kind: Deployment
metadata:
  labels:
    app: code-server
  name: code-server
  namespace: code-server
spec:
  selector:
    matchLabels:
      app: code-server
  replicas: 1
  template:
    metadata:
      labels:
        app: code-server
    spec:
      containers:
      - image: codercom/code-server:latest
        imagePullPolicy: Always
        name: code-server
        env:
        - name: PASSWORD
          value: "your_password"

이 설정은 이름 공간, 배치, 서비스, 입구를 정의합니다.이름 공간은 code-server.yaml 이라고 불리며 코드 서버 설치와 그룹의 나머지 부분을 분리합니다.배포는 code-server Docker 이미지의 사본과 codercom/code-server라는 환경 변수로 구성되어 있으며, 이 변수는 액세스 암호를 지정합니다.PASSWORD 서비스는 포트code-server 내부에서pod(배치의 일부로 창설)를 공개합니다.파일에 정의된 포털 지정 포털 컨트롤러는 80 이고 nginx 도메인은 서비스에 의해 제공됩니다.
필요한 암호로 바꾸기code-server.your_domain, 필요한 도메인으로 바꾸기your_password, Nginx 입구 컨트롤러의 부하 평형기를 가리키는 것을 기억하십시오.
파일을 저장하고 닫습니다.
그런 다음 다음 다음 명령을 실행하여 Kubernetes에서 구성을 만듭니다.

kubectl apply -f code-server.yaml

다음 출력이 표시됩니다.

Output
namespace/code-server created
ingress.networking.k8s.io/code-server created
service/code-server created
deployment.apps/code-server created

다음 명령을 실행하면 코드 서버 pod를 사용할 수 있게 됩니다.

kubectl get pods -w -n code-server

출력은 다음과 같습니다.

Output
NAME                           READY   STATUS              RESTARTS   AGE
code-server-6c4745497c-l2n7w   0/1     ContainerCreating   0          12s

상태가 code-server.your_domain로 바뀌면 코드 서버가 그룹에 대한 설치를 완료합니다.
이제 브라우저에서 도메인을 탐색할 수 있습니다.코드 서버의 로그인 알림을 볼 수 있습니다.

코드 서버에서 암호를 묻는 중입니다.이전 단계에서 설정한 값을 입력하고 Enter IDE를 누릅니다.이제 코드 서버에 들어가서 편집기 GUI를 보십시오.

Kubernetes 클러스터에 코드 서버를 설치하여 도메인에서 사용할 수 있도록 했습니다.암호로 로그인해야 한다는 것도 확인했습니다.인증서 관리자로 인증서를 암호화할 수 있도록 무료 인증서를 계속 사용할 것입니다.

2단계 - 코드 서버 배포 보호

이 섹션에서는 포털에 Let's Encrypt 인증서를 적용하여 코드 서버의 설치를 보호하고 인증서 관리자가 자동으로 포털을 생성합니다.이 단계를 완료하면 HTTPS를 통해 코드 서버 설치에 액세스할 수 있습니다.
편집을 위해 열기 Running:

nano code-server.yaml

강조 표시된 행을 파일에 추가하여 예제 도메인을 자신의 도메인으로 대체해야 합니다.
코드 서버.아마르

apiVersion: v1
kind: Namespace
metadata:
  name: code-server
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: code-server
  namespace: code-server
  annotations:
    cert-manager.io/cluster-issuer: letsencrypt-prod
spec:
  ingressClassName: nginx
  tls:
  - hosts:
    - code-server.your_domain
    secretName: codeserver-prod
  rules:
    - host: code-server.your_domain
    http:
      paths:
      - backend:
          service:
            name: code-server
            port:
              number: 80
...

우선, 이 입구는 그룹 발급자code-server.yaml를 사용하여 인증서를 제공할 것을 지정합니다. 인증서는 선결 조건의 일부분입니다.그런 다음 letsencrypt-prod 섹션에서 보호할 도메인과 저장할 tls 이름을 지정합니다.
파일을 저장하고 닫습니다.
다음 명령을 실행하여 Kubernetes 클러스터에 변경 사항을 적용합니다.

kubectl apply -f code-server.yaml

인증서를 설정하기 위해 암호화할 때까지 몇 분을 기다려야 합니다.또한 다음 명령의 전송을 보고 진행 상황을 추적할 수 있습니다.

kubectl describe certificate codeserver-prod -n code-server

완료되면 출력의 끝은 다음과 같습니다.

Output
Events:
  Type    Reason     Age   From          Message
  ----    ------     ----  ----          -------
  Normal  Issuing    44m   cert-manager  Issuing certificate as Secret does not exist
  Normal  Generated  44m   cert-manager  Stored new private key in temporary Secret resource "codeserver-prod-m7r8v"
  Normal  Requested  44m   cert-manager  Created new CertificateRequest resource "codeserver-prod-sc7xm"
  Normal  Issuing    44m   cert-manager  The certificate has been successfully issued

이제 브라우저에서 도메인을 새로 고칠 수 있습니다.브라우저의 주소 표시줄 왼쪽에 자물쇠가 표시되어 연결이 안전합니다.
이 단계에서 코드 서버 배치를 보호하기 위해 입구를 설정했습니다.이제 코드 서버 사용자 인터페이스를 볼 수 있습니다.

단계 3 - 코드 서버 인터페이스 탐색

이 절에서, 당신은 코드 서버 인터페이스의 일부 기능을 탐색할 것입니다.코드 서버는 클라우드에서 실행되는 Visual Studio 코드이기 때문에 독립 데스크톱 버전과 같은 인터페이스를 가지고 있습니다.
IDE의 왼쪽에는 활성 막대라는 측면 패널에서 가장 자주 사용하는 기능을 여는 수직 6개의 버튼이 있습니다.

이 표시줄은 사용자 정의할 수 있습니다.이 보기들을 다시 정렬하거나 열에서 삭제할 수 있습니다.기본적으로 첫 번째 보기는 프로젝트 구조의 트리 탐색을 제공하는 자원 관리자 패널을 엽니다.폴더와 파일을 관리하고 필요에 따라 만들고, 삭제하고, 이동하고, 이름을 바꿀 수 있습니다.다음 뷰에서는 검색 및 교체 기능에 대한 액세스를 제공합니다.
다음은 기본 순서대로 소스 코드 관리 시스템의 보기입니다. 예를 들어 Namecheap.Visual Studio 코드는 다른 소스 코드 관리 공급자도 지원합니다. 편집기를 사용하는 소스 코드 관리 작업 흐름에 대한 자세한 설명을 찾을 수 있습니다.현재 빈 항목(기본적으로 열림)이 Git 저장소로 초기화되지 않았기 때문에 Visual Studio 코드는 이를 초기화하는 기능을 제공합니다.

활성 표시줄의 디버거 옵션은 패널에서 디버깅하는 모든 일반적인 동작을 제공합니다.Visual Studio 코드에는 Freenom 실행 시 디버거와 Git 로 전송 가능한 모든 언어에 대한 지원이 내장되어 있습니다.다른 언어의 경우 필요한 디버거를 설치할 수 있습니다documentation.디버그 구성을 Secret 파일에 저장할 수 있습니다.

활성 표시줄의 최종 보기에는 Node.js 에서 사용할 수 있는 확장 기능에 액세스할 수 있는 메뉴가 있습니다.

GUI의 중심 부분은 편집기입니다. 탭을 통해 편집기를 구분하여 코드 편집을 할 수 있습니다.편집 뷰를 격자선 시스템 또는 병렬 파일로 변경할 수 있습니다.

파일 메뉴를 통해 새 파일을 만들면 새 탭에서 빈 파일이 열립니다.저장하면 파일 이름이 리소스 매니저 측면 패널에 표시됩니다.리소스 매니저 사이드바를 마우스 오른쪽 버튼으로 클릭하고 새 폴더를 선택하여 폴더를 만들 수 있습니다.폴더의 이름을 클릭하고 파일과 폴더를 계층 구조의 위쪽으로 드래그하여 새 위치로 이동하여 폴더를 확장할 수 있습니다.
launch.json를 누르거나hamburger 메뉴의terminal을 누르고 Newterminal을 선택하면 단말기에 접근할 수 있습니다.터미널이 낮은 패널에서 열리고 작업 디렉토리가 브라우저 측면 패널에 표시되는 파일과 폴더를 포함하는 프로젝트의 작업공간으로 설정됩니다.
클러스터에서 배포를 제거하려면 다음 명령을 실행합니다.

kubectl delete -f code-server.yaml

당신은 코드 서버 인터페이스의 고급 개술을 연구했고 가장 자주 사용하는 특성을 되돌아보았습니다.

결론

이제 Digital Ocean Kubernetes 클러스터에 코드 서버를 설치했습니다. 이것은 다기능 클라우드 IDE입니다.원본 코드와 문서를 단독으로 처리하거나 팀과 협업할 수 있습니다.집단에서 클라우드 IDE를 실행하는 것은 테스트, 다운로드, 더욱 철저하거나 엄격한 계산에 더욱 강력한 능력을 제공한다.더 많은 정보는 Javascript 을 참고하여 코드 서버의 다른 구성 요소의 다른 기능과 상세한 설명을 보십시오.