Тренды

Докеризируем среду разработки в VS Code

30.01.2021

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

Мы будем использовать Visual Studio Code и Docker, чтобы сымитировать производственные настройки и создать согласованность во всех средах разработки. Чтобы следовать этому руководству, необходимо установить как Docker, так и Visual Studio Code.

Руководство написано для среды Node с Create React App, но шаги можно изменить для любой выбранной среды.

Мы даже получим горячую перезагрузку, работающую внутри контейнера dev.

В Visual Studio Code установите следующий плагин:

Его можно найти здесь.

Это позволит запускать Visual Studio Code в контейнере.

В корневом каталоге проекта нужно создать папку с именем .devcontainer. Здесь мы будем хранить настройки для среды.

Создайте там два файла: devcontainer.json и Dockerfile.

Именование важно, так как Visual Studio Code ожидает определенные имена папок и файлов, которые нужны для успешного запуска контейнера.

Структура папки должна соответствовать следующей:

В файле Dockerfile мы выбираем образ и выполняем RUN для любых необходимых команд (например, глобальных установок) после установки образа. Dockerfile:

FROM node:12.14.1-stretch
RUN npm install -g eslint prettier

Затем в devcontainer.json мы можем настроить все параметры.

Devcontainer.json — это конфигурационный файл, который определяет, как будет построен и запущен dev-контейнер. Содержимое devcontainer.json:

{
  "name": "Node.js Sample",
  "dockerFile": "Dockerfile",
  "appPort": 3000,
  "extensions": ["dbaeumer.vscode-eslint"],
  "settings": {
    "terminal.integrated.shell.linux": "/bin/bash"
  },
  "postCreateCommand": "yarn install",
  // Закомментируйте следующую строку, чтобы запустить как root. Пользователи Linux, обновите Dockerfile значением UID/GID вашего пользователя (если оно не 1000)
   "runArgs": ["-u", "node"]
}

Описание параметров:

dockerfile — относительный путь к файлу Dockerfile, который используется в качестве образа.
appPort — порт или массив портов, которые должны быть доступны локально при запуске контейнера.
extensions — массив идентификаторов расширений, указывающих на те из них, которые должны быть установлены внутри контейнера при его создании.
settings — добавляет значения по умолчанию settings.json в файл настроек контейнера / компьютера.
postCreateCommand — командная строка или список её аргументов для запуска после создания контейнера.
runArgs — массив аргументов CLI Docker, которые должны использоваться при запуске контейнера.

Здесь полный список опций devcontainer.json.

Проверка

После запуска контейнера и подключения к нему вы должны увидеть изменение удаленного контекста в левом нижнем углу строки состояния:

Установив расширение Remote-Containers, вы увидите новый элемент строки состояния в крайнем левом углу.

Элемент строки состояния Remote может быстро показать, в каком контексте выполняется VS Code (локальном или удаленном), а нажатие на этот элемент вызовет команды Remote-Containers.

Выберите “Reopen in Container” (Повторно открыть в контейнере).

Подождите, пока завершится сборка контейнера

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

Проверьте свою среду

Одна из полезных особенностей разработки в контейнере — возможность использовать определенные версии зависимостей, необходимые приложению, не влияя на локальную среду разработки.