13,8 тыс подписчиков

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

3 минуты

43 прочтения

2 февраля 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 :

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

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. Это может занять несколько минут, но будущие соединения будут происходить за секунды.

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

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

node --version;
npm --version

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

Проверка

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

Видеоверсия статьи