Table of Contents

*Автор выбрал фонд Free and Open Source Fund для получения пожертвования в рамках программы Write for DOnations.*

Введение

По мере перемещения инструментов для разработчиков в облако, появляется все большее количество облачных IDE (Интегрированная среда разработки), и все большее количество разработчиков начинает их использовать. Облачные IDE позволяет реализовать взаимодействие между группами разработчиков в режиме реального времени, работающих в единой среде разработки, которая минимизирует количество несовместимостей и повышает продуктивность. Облачные IDE, доступ к которым осуществляется с помощью веб-браузеров, можно использовать на любых типах современных устройств. Еще одним преимуществом облачной IDE является возможность использовать возможности, появляющиеся при создании кластера, что позволяет значительно увеличивать вычислительные возможности отдельного компьютера, используемого для разработки.

Код-серверная IDE — это код Microsoft Visual Studio Code, запущенная на удаленном сервере и доступная напрямую из браузера. Visual Studio Code — это современный редактор кода с интегрированной поддержкой Git, дебаггером кода, умным автозаполнением и настраиваемыми и расширяемыми функциями. Это означает, что вы можете использовать различные устройства, работающие под управлением различных оперативных систем, и всегда иметь под рукой постоянную среду разработки.

В этом обучающем руководстве вы настроите код-серверную облачную платформу IDE на вашем кластере Kubernetes и публиковать его на вашем домене, защищенном сертификатами Let's Encrypt. В конце руководства у вас будет Microsoft Visual Studio Code на вашем кластере Kubernetes, доступный через HTTPS и защищенный паролем.

Предварительные требования

ide illustration for: Предварительные требования
  • Кластер Kubernetes с вашим подключением, настроенным с помощью kubectl по умолчанию. Инструкции по настройке kubectl описаны в шаге Подключение кластера, где вы создадите ваш кластер. Процесс создания кластера Kubernetes в the cloud provider, см. Быстрое начало работы с Kubernetes.
  • Nginx Ingress-контроллер и Cert-Manager, установленные на вашем кластере с помощью Helm, для предоставления код-серверной IDE с помощью ресурсов Ingress. См. руководство Настройка Nginx Ingress на Kubernetes с помощью Helm для выполнения необходимых действий.
  • Полное зарегистрированное доменное имя для хранения код-сервер, указывающее на средство балансировки нагрузки, используемое в Nginx Ingress. В этом обучающем модуле мы будем использовать имя <^>code-server.your_domain<^>. Вы можете купить доменное имя на Namecheap, получить его бесплатно на Freenom или воспользоваться услугами любого предпочитаемого регистратора доменных имен. Это доменное имя должно отличаться от имени, используемом в руководстве по настройке Nginx Ingress на Kubernetes.

Шаг 1 — Установка и передача код-серверной IDE

В этом разделе вы установите код-серверную IDE на ваш кластер Kubernetes и передадите его на ваш домен с помощью контроллера Nginx Ingress. Также вы выполните настройку пароля для входа.

Вы должны будете сохранить конфигурацию развертывания на локальном компьютере в файле с именем code-server.yaml. Создайте файл с помощью следующей команды:

				
					
nano code-server.yaml

Добавьте в файл следующие строки:

				
					
[label code-server.yaml]

apiVersion: v1

kind: Namespace

metadata:

  name: code-server

---

apiVersion: extensions/v1beta1

kind: Ingress

metadata:

  name: code-server

  namespace: code-server

  annotations:

    kubernetes.io/ingress.class: nginx

spec:

  rules:

  - host: &lt;^&gt;code-server.your_domain&lt;^&gt;

    http:

      paths:

      - backend:

          serviceName: code-server

          servicePort: 80

---

apiVersion: v1

kind: Service

metadata:

 name: code-server

 namespace: code-server

spec:

 ports:

 - port: 80

   targetPort: 8443

 selector:

   app: code-server

---

apiVersion: extensions/v1beta1

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

        imagePullPolicy: Always

        name: code-server

        args: ["--allow-http"]

        ports:

        - containerPort: 8443

        env:

        - name: PASSWORD

          value: "&lt;^&gt;your_password&lt;^&gt;"

Эта конфигурация определяет пространство имен, развертывание и службы, а также Ingress. Пространство имен называется code-server и отделяет установку код-серверной IDE от остальной части кластера. Развертывание включает одну копию образа Docker codercom/code-server, а также переменную среды с именем PASSWORD, которая указывает пароль для доступа.

Служба code-server на внутреннем уровне передает под (создаваемый как часть развертывания) на порт 80. Ingress, определенный в строке, указывает, что в качестве Ingress-контролера выступает nginx, а домен <^>code-server.your_domain<^> будет обслуживаться службой.

Обязательно замените <^>your_password<^> на собственный пароль, а <^>code-server.your_domain<^> — на ваш домен, указывающий на средство балансировки нагрузки контроллера Nginx Ingress.

Затем создайте конфигурацию в Kubernetes с помощью следующей команды:

				
					
kubectl create -f code-server.yaml

Вывод должен выглядеть так:

				
					
[secondary_label Output]

namespace/code-server created

ingress.extensions/code-server created

service/code-server created

deployment.extensions/code-server created

Вы можете проверить, стал ли под код-серверной IDE доступным, с помощью команды:

				
					
kubectl get pods -w -n code-server

Вывод будет выглядеть следующим образом:

				
					
[secondary_label Output]

NAME                          READY   STATUS              RESTARTS   AGE

code-server-f85d9bfc9-j7hq6   0/1     ContainerCreating   0          1m

Как только в качестве статуса будет отображаться Running (Запущен), это значит, что код-серверная IDE завершила установку на ваш кластер.

Перейдите на ваш домен в браузере. Вы увидите запрос данных для входа в код-серверную IDE.

Введите пароль, который вы задали в code-server.yaml и нажмите Enter IDE. Вы выполните вход в код-серверную IDE и немедленно увидите графический интерфейс редактора.

Вы установили код-серверную IDE на ваш кластер Kubernetes и сделали ее доступной на вашем домене. Также вы убедились, что для входа требуется указать пароль. Теперь вы можете перейти к обеспечению безопасности с помощью бесплатных сертификатов Let's Encrypt, используя Cert-Manager.

Шаг 2 — Защита развертывания код-серверной IDE

В этом разделе вы должны будете обеспечить безопасность вашей установки код-серверной IDE, применив сертификаты Let's Encrypt для вашего Ingress, которые будет автоматически создавать Cert-Manager. После выполнения этого шага ваша установка код-серверной IDE будет доступна через HTTPS.

Откройте code-server.yaml для редактирования:

				
					
nano code-server.yaml

Добавьте выделенные строки в файл и обязательно замените используемый в качестве примера домен на собственный:

				
					
[label code-server.yaml]

apiVersion: v1

kind: Namespace

metadata:

  name: code-server

---

apiVersion: extensions/v1beta1

kind: Ingress

metadata:

  name: code-server

  namespace: code-server

  annotations:

    kubernetes.io/ingress.class: nginx

&lt;^&gt;    certmanager.k8s.io/cluster-issuer: letsencrypt-prod&lt;^&gt;

spec:

&lt;^&gt;  tls:&lt;^&gt;

&lt;^&gt;  - hosts:&lt;^&gt;

&lt;^&gt;    - code-server.your_domain&lt;^&gt;

&lt;^&gt;    secretName: codeserver-prod&lt;^&gt;

  rules:

  - host: code-server.your_domain

    http:

      paths:

      - backend:

          serviceName: code-server

          servicePort: 80

...

Во-первых, необходимо указать, что создателем кластера, который Ingress будет использовать для выпуска сертификатов, будет выступать letsencrypt-prod, созданный на этапе выполнения подготовительных требований. Затем вы должны указать домены, которые будут защищаться в рамках раздела tls, а также ваше имя для Secret, который их хранит.

Примените изменения, внесенные в ваш кластер Kubernetes, с помощью следующей команды:

				
					
kubectl apply -f code-server.yaml

Вам нужно будет подождать несколько минут, чтобы Let's Encrypt смог предоставить ваш сертификат. В настоящее время вы можете отслеживать прогресс, ознакомившись с результатами выполнения следующей команды:

				
					
kubectl describe certificate codeserver-prod -n code-server

После завершения ее выполнения, конечная часть вывода будет выглядеть примерно так:

				
					
[secondary_label Output]

Events:

  Type    Reason              Age    From          Message

  ----    ------              ----   ----          -------

  Normal  Generated           2m49s  cert-manager  Generated new private key

  Normal  GenerateSelfSigned  2m49s  cert-manager  Generated temporary self signed certificate

  Normal  OrderCreated        2m49s  cert-manager  Created Order resource "codeserver-prod-4279678953"

  Normal  OrderComplete       2m14s  cert-manager  Order "codeserver-prod-4279678953" completed successfully

  Normal  CertIssued          2m14s  cert-manager  Certificate issued successfully

Теперь вы можете обновить ваш домен в браузере. Вы увидите замок слева адресной строки в браузере, что означает, что соединение защищено.

На этом шаге вы настроили Ingress для обеспечения безопасности развертывания код-серверной IDE. Теперь вы можете перейти к изучению пользовательского интерфейса код-серверной IDE.

Шаг 3 — Изучение интерфейса код-сервер

В этом разделе вы изучите некоторые функции интерфейса код-серверной IDE. Поскольку наша код-серверная IDE — это Visual Studio Code, запущенный в облаке, она имеет тот же интерфейс, что и отдельная настольная версия.

С левой стороны IDE имеется вертикальный ряд из 6 кнопок с самыми популярными функциями на боковой панели, которая называется панелью активности.

Эта панель настраивается, поэтому вы можете перемещать эти представления в различном порядке или удалять их из панели. По умолчанию, первое представление открывает панель обозревателя, которая обеспечивает возможность навигации по структуре проекта, имеющей форму дерева. Здесь вы можете управлять папками и файлами — создавать, удалять, перемещать их при необходимости. Следующее представление предоставляет доступ к поиску и замене.

Далее при использовании порядка по умолчанию идет представление систем управления версиями, например, Git. Visual Studio Code также поддерживает другие системы контроля версий, вы можете найти дополнительные данные о системах управления версиями в этой документации.

Функция дебаггера в панели действий предоставляет все стандартные возможности для отладки на панели. Visual Studio Code оснащается встроенной поддержкой встроенного отладчика во время выполнения для Node.js​​​ и любого языка, который компилируется в Javascript. Для других языков вы можете установить расширения для требуемого отладчика. Вы можете сохранить конфигрурации отладчика в файле launch.json.

Последнее представление панели деятельности предоставляет меню для доступа к доступным расширениям в Marketplace.

Центральную часть графического интерфейса занимает редактор, который вы можете разделить вкладками для редактирования кода. Вы можете изменить представление редактирования на сетку или расположенные параллельной файлы.

После создания нового файла через с помощью меню File (Файл), в новой вкладке открывается пустой файл, а после сохранения имя файла будет отображаться в боковой панели обозревателя. Папки можно создать с помощью щелчка правой кнопкой мыши на боковой панели обозревателя и нажать New Folder (Новая папка). Вы можете развернуть папку, нажав на ее имя, а также перетаскивать файлы и папки в верхнюю часть иерархии, чтобы переместить их в новое место.

Вы можете получить доступ к командной строке, нажав CTRL+SHIFT+ или выбрав пункт Terminal (Командная строка) в верхнем меню, а затем выбрав New Terminal (Новая командная строка). Командная строка откроется в нижней панели, а в качестве ее рабочей директории будет указано рабочее пространство проекта, которое содержит файлы и папки папки, отображаемые в боковой панели обозревателя.

Вы изучили базовые элементы интерфейса код-серверной IDE и познакомились с некоторыми самыми популярными функциями.

Заключение

Теперь у вас есть код-серверная IDE, гибкий облачный инструмент, установленный на вашем кластере Kubernetes. Вы можете работать с исходным кодом и документами индивидуально или вместе с вашей командой. Запуск облачной IDE на кластере предоставляет большее удобство для тестирования, загрузки и многого другого, а также при серьезных вычислениях. Дополнительную информацию о дополнительных функциях и подробные инструкции по работе с прочими компонентами код-серверной IDE см. в документации для Visual Studio Code.