GitHub Codespaces

Всем привет, меня зовут Макарий Балашов. Я SRE в Ak Bars Digital, но в свободное время люблю чуть-чуть покодить и запушить это все на GitHub. Недавно заметил там Codespaces и решил разобраться для себя, что это и зачем оно нужно. Вот что у меня получилось.

Что же это такое?

Это VSCode у тебя в браузере, запущенный в заранее описанном окружении (devcontainer) или в стандартном, в который входит python, node.js, Docker и прочее. Все это крутится в облаке и бесплатно за первые 60 часов в месяц.

Для кого это?

Если у тебя под руками только планшет, хромбук или допотопный ноутбук, то, как мне кажется, это идеальный вариант, если надо что-то накодить или поправить в проекте, который лежит на гитхабе.

Как попасть в Codespaces?

Достаточно просто открыть необходимый вам репозиторий и нажать на яркую зеленую кнопку code, перейти в codespaces и тыкнуть в Create codespace on main (ну или на другой бранче)

Про devcontainers

Если ты активный пользователь VSCode, то уже мог слышать про devcontainers — расширение для VSCode, которое позволяет использовать Docker-контейнер, как полнофункциональное окружение для разработки. Полную доку можно найти на их сайте — https://containers.dev/ 

Самый простой способ создать конфиг — запустить стандартный codespaces, найти в списке команд VSCode  Codespaces: Add Dev Container Configuration Filesи протыкать в выпадающем меню все, что тебе нужно в проекте, например, в моем случае это был nodejs16 без дополнительных фич, вот что у меня получилось:

{ "name": "Node.js", "image": "mcr.microsoft.com/devcontainers/javascript-node:16", "features": {} }

Далее я отредактировал конфигурационный файл, подстроил его под себя, получилось следующее:

{ "name": "Node.js", "image": "mcr.microsoft.com/devcontainers/javascript-node:16", "forwardPorts": [5173, 4173, 4000], "postCreateCommand": "yarn install", "customizations": { "vscode": { "extensions": [ // Common plugins for every repo in GitHub "Makashi.dark-purple", "me-dutour-mathieu.vscode-github-actions", "Gruntfuggly.todo-tree", // Specific for web-page(Vue3 + Vite) project "esbenp.prettier-vscode", "Vue.volar", "antfu.vite", "dbaeumer.vscode-eslint" ] } } }

Немного про параметры, которые я добавил:

• forwardPorts — порты контейнера, которые переадресуются. При их использовании появляется сообщение, которое предлагает открыть новую вкладку, где мы увидим контент с этого порта:

• postCreateCommand — команда, которая запустится после создания контейнера;

• customizations — кастомизация под себя, в данном примере — список расширений, которые нужны мне в этом проекте. Теперь при запуске codespaces у меня будет создаваться контейнер с nodejs, yarn и расширениями которые мне нужны в этом проекте.

Мое мнение

Как по мне — это очень быстрый и удобный способ начать писать код в любой подходящий, или не очень, момент на любом устройстве с интернетом у вас под рукой. Сам я собираюсь дальше использовать codespaces для своих петпроектов и 60 часов в месяц мне хватит с головой.