Как редактировать код в контейнерах Docker с помощью Visual Studio Code

Разработка или отладка кода внутри контейнеров Docker может быть сложной задачей. Обычно вы подключаетесь к контейнеру и используете утилиты оболочки для редактирования файлов. Расширение Visual Studio Code Remote Containers позволяет открывать папки внутри контейнеров, чтобы вы могли работать с ними в редакторе кода.

Удаленная разработка работает с Docker Desktop 2.0 и выше для Windows и macOS и Docker Engine 18.06 и выше для Linux. Если вы используете Windows 10 Домашняя, у вас должны быть установлены обновление от апреля 2020 г., Docker Desktop 2.3 и подсистема Windows для Linux.

Что касается контейнеров, VS Code совместим как с контейнерами x64, так и с контейнерами ARM. Вы можете использовать операционные системы Alpine, Debian, Ubuntu, CentOS и RHEL. Если ваш базовый образ не работает из коробки, вы сможете установить внутри него дополнительные пакеты для завершения подключения.

Начиная

Запустите VS Code, нажмите Ctrl+Shift+P и найдите «расширения». Выберите пункт «Установить расширения», чтобы открыть боковую панель. На панели расширений найдите «Remote — Containers» и установите соответствующий элемент.

После установки расширения в левом нижнем углу строки состояния появится новая зеленая кнопка. Нажмите эту кнопку, чтобы вызвать палитру команд, предварительно заполненную доступными удаленными командами. Если вы предпочитаете избегать использования мыши, вы также можете найти команды, нажав Ctrl+Shift+P и набрав «remote». Расширение будет отображаться и в других областях пользовательского интерфейса, таких как страница приветствия и панель открытия папки.

Чтобы открыть свою первую папку Dockerized, откройте список команд и выберите «Присоединить к работающему контейнеру». Вам нужно будет подтвердить предупреждение о том, что контейнер может выполнять ненадежный код. Вы должны подключаться только к контейнерам, созданным из образов, которым вы доверяете, поскольку вредоносный контейнер с файлом рабочей области VS Code может поставить под угрозу вашу систему.

VS Code отобразит список контейнеров Docker, работающих в вашей системе. Выберите контейнер, к которому вы хотите подключиться. Запустится новое окно. Запуск может занять несколько секунд, пока VS Code устанавливает компоненты удаленного сервера в контейнер. Вы увидите активный контейнер, отображаемый в левом нижнем углу строки состояния.

Когда окно готово, можно приступать к работе. Нажмите кнопку «Открыть папку» на левой панели, чтобы открыть окно выбора файлов. Это отображает файловую систему внутри контейнера. Перейдите в каталог, который вы хотите открыть, и нажмите «ОК».

Боковая панель обновится, чтобы отобразить содержимое выбранного каталога. Щелкните любой из файлов, чтобы открыть его в редакторе VS Code. Теперь вы можете вносить изменения внутри контейнера, не копируя файлы вручную и не настраивая привязку рабочего каталога. Это максимально повышает эффективность при использовании Dockerized среды разработки или отладке неисправного контейнера.

Доступен полный набор функций VS Code, включая завершение кода IntelliSense и набор инструментов для отладки. Панели, такие как консоль и терминал, будут присоединены к входным и выходным потокам контейнера.

Как это работает?

Первое, что нужно знать об интеграции, это то, что VS Code изменит файловую систему вашего контейнера. Он установит сервер в контейнерах, к которым вы подключаетесь, который отправляет информацию клиенту редактора.

Сервер следит за файловой системой, читает файлы и запускает процессы внутри контейнера. Это поддерживает такие возможности, как отладчик VS Code. Редактор попросит сервер запустить исходный код, позволив ему проверить код, работающий внутри контейнера.

Точно так же VS Code установит копии ваших других расширений внутри контейнера. Это гарантирует, что они получат полный доступ к файловой системе контейнера, поэтому они будут работать без расхождений по сравнению с локальной папкой. Конечным результатом является полноценный редактор, который работает прозрачно, даже если он распределен между вашим хостом и контейнерами. В зависимости от размера вашей среды первоначальная установка может занять несколько минут, но сервер контейнера будет кэширован для последующего использования.

Контейнеры разработки

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

Когда вы используете контейнер для разработки, вы можете либо связать свой рабочий каталог, либо использовать изолированный том. Последний вариант позволяет избежать загрязнения файловой системы и обеспечивает повышенную производительность, поскольку он более родной для Docker.

Контейнеры разработки создаются из файлов .devcontainer/devcontainer.json. Они описывают конфигурацию Docker и Visual Studio, которая запускает вашу среду разработки.

{
    "image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:16",
    "extensions": "EditorConfig.EditorConfig",
    "forwardPorts": [3000]
}

Показанный выше файл devcontainer.json устанавливает контейнер разработки, использующий шаблон Microsoft Node.js. Расширение EditorConfig VS Code включено, добавляя поддержку файлов .editorconfig в вашем рабочем каталоге. Затем порт 3000 сопоставляется с хоста в контейнер.

Файлы контейнеров разработки также поддерживают несколько других параметров. Вы можете установить значения VS Code settings.json, добавить команду для запуска внутри контейнера и определить пользователя, от имени которого будет работать сервер VS Code.

Если вы не хотите создавать файл конфигурации контейнера самостоятельно, команда Remote-Containers: Add Development Configuration Files автоматически добавит его в ваш проект. Вы сможете выбрать из списка предварительно настроенных шаблонов, которые вы сможете настроить позже.

Получив в проекте файл devcontainer.json, запустите команду Remote-Containers: Rebuild Container из палитры команд. Это создаст образ контейнера с использованием указанной конфигурации. Когда сборка завершится, запустите Remote-Containers: Reopen Folder in Container, чтобы открыть текущий локальный каталог в новом контейнере разработки.

Если вы используете репозиторий Git, обычно проще клонировать репозиторий непосредственно в контейнер. Команда Remote-Containers: Clone Repository in Container Volume принимает URL-адрес Git для клонирования. Он создаст новый том и прикрепит его к экземпляру контейнера разработки. Это позволяет вам работать с репозиториями Git, не клонируя их в локальную файловую систему, избегая ненужного загрязнения. VS Code автоматически передает контейнеру ваши локальные учетные данные Git.

Настройка расширения

Расширение Remote — Containers поставляется с несколькими параметрами, которые позволяют настроить работу с контейнером. Их можно найти с помощью команды Remote-Containers: Settings for Remote-Containers.

Первый набор настроек касается dotfiles. Точечные файлы относятся к файлам конфигурации, которые начинаются с точки (.). Удаленные контейнеры могут автоматически клонировать репозиторий точечных файлов Git в новые контейнеры, помогая вам начать работу с вашими обычными настройками.

Добавьте URL-адрес репозитория dotfiles в параметр Repository. Репозиторий будет клонирован по пути Target Path, который по умолчанию равен ~/dotfiles. Если вы хотите запустить команду после того, как репозиторий будет клонирован, укажите ее как Install Command.

Remote-Containers по умолчанию использует docker в качестве двоичного файла, который выполняет команды контейнера. Вы можете изменить его на любой двоичный файл, совместимый с Docker CLI, с помощью параметра Docker Path. Если вы используете Podman, указав podman в качестве этого значения, вы сможете работать с его контейнерами с помощью VS Code.

Вы можете настроить удаленные расширения по умолчанию в разделе Расширения по умолчанию. Нажмите «Добавить элемент», чтобы выбрать расширение для добавления в каждый контейнер. Это позволяет обеспечить глобальную доступность ваших обязательных расширений, даже если они не указаны в файле devcontainer.json.

Последняя группа настроек касается конфигурации Git. Когда установлен флажок «Копировать Git Config», ваш локальный файл .gitconfig будет автоматически скопирован в контейнеры автоматически. Включение этого параметра гарантирует, что ваши коммиты будут правильно соотнесены с данными пользователя, которые вы уже используете локально.

Параметр «Git Credential Helper Config Location» определяет файл конфигурации, в который будут записаны новые учетные данные Git. Вы можете выбрать локальный файл для каждого пользователя, ~/.gitconfig, или глобальное расположение системы, /etc/gitconfig.

Краткое содержание

Расширение Remote — Containers для Visual Studio Code позволяет редактировать файлы и папки внутри контейнеров Docker. Он без проблем работает с функциями редактора VS Code, включая IntelliSense, индексацию каталогов, отладку и расширения. Внутри VS Code запускает сервер разработки внутри контейнера, поэтому его инструменты имеют полный доступ к файловой системе, с которой они работают.

Есть несколько возможных вариантов использования этой функции, среди которых Dockerized среды разработки и редактируемые контейнеры на лету. Хотя идея использования контейнеров для систематизации разработки существует уже некоторое время, VS Code значительно упрощает начало работы, предлагая среду IDE, изначально понимающую Docker.

Вы можете подготовить образ Docker, который предоставит разработчикам все необходимое для работы в вашей системе — язык программирования, зависимости и удобные инструменты. Разработчики запускали контейнер, подключались к нему из VS Code и продолжали свою работу, не устанавливая ничего (кроме Code) на свою машину. Если зависимость должна быть исправлена, вам нужно только обновить общий образ Docker и попросить разработчиков вытащить новый тег.