Будущее сред кодирования
На днях, когда я зашел на GitHub, у меня появилось всплывающее окно о том, что у меня есть доступ к GitHub Codespaces Beta! Хотя я давно подписался на бета-версию Codespaces. Так как только несколько пользователей получают доступ к программе из списка ожидания, я хотел бы поделиться своим опытом использования Codespaces.
В этой статье я расскажу о следующих моментах:
- Введение
- Как использовать кодовые пространства?
- Примеры
- Github.dev против GitHub Codespaces
- Является ли GitHub Codespaces бесплатным?
- Заворачивать
Введение
Несколько месяцев назад GitHub анонсировал свое новое приложение — Codespaces. Codespaces предоставляет вам среду разработки в самом браузере. Эта среда будет размещена в облаке, поэтому не стоит беспокоиться об оборудовании. Если вы не можете запустить свой проект из-за нехватки оперативной памяти или ядер ЦП, вам поможет Codespaces. Простыми словами, Visual Studio Code работает в вашем браузере со средой.
Разработчик может легко настроить проект из репозитория за 2–3 минуты и избежать утомительного первого клонирования репозитория, установки зависимостей, проверки совместимости и т. д. Среда похожа на компьютер, но в облаке. Сервер сделает всю работу за разработчика. Очевидно, что сервер будет основан на Linux, чтобы предоставлять быстрые услуги.
С Codespaces также стало проще участвовать в различных проектах на GitHub. Поскольку это позволяет без проблем открывать и просматривать запросы на вытягивание.
С другой стороны, вы используете переадресацию портов? Допустим, у вас есть клиент, который хочет просмотреть вашу самую последнюю работу, но она у вас есть на вашем локальном компьютере. Итак, вы перенаправляете порт со своего маршрутизатора (port 80), и клиент может видеть ваше приложение, используя ваш публичный IP-адрес.
Но если вы находитесь в облачной среде Codespaces, как вы можете перенаправить туда порт? Codespaces автоматически перенаправляет порт для вас! Мы увидим реализацию того же в разделе «Примеры».
Как использовать кодовые пространства?
Если у вас есть доступ к Codespaces, создать среду довольно просто. Теперь есть два пути:
После входа выполните следующие действия:
- Нажмите на значок своего профиля, затем перейдите в Codespaces.
- Или перейдите в репозиторий и нажмите кнопку «Код» и «Создать кодовое пространство на главном». Если вы не являетесь владельцем репозитория, он будет разветвлен автоматически. Вы можете открыть четыре разные ветки отдельно.
- Если вы выберете первый вариант, вы получите показанный выше экран. Вы можете выбрать репозиторий и ветку. Лучший регион выбирается по умолчанию, но вы можете изменить его. Тип машины представляет собой ядро, оперативную память и хранилище. По умолчанию в бете у меня только один тип машины. Если у вас есть Teams или корпоративная учетная запись. у вас может быть больше вариантов. Затем просто нажмите «Создать».
- Если вы выберете второй вариант, вы можете выбрать дополнительные параметры из раскрывающегося списка для экрана выше. Затем просто нажмите «Создать».
И бум! Вы в облаке! Codespaces использует Docker для создания образов и зависимостей и управления ими. Вы можете взглянуть на URL-адрес; у каждого Codespaces разные URL-адреса. Все функции, такие как VS Code, доступны здесь. Вы также можете синхронизировать настройки и расширения с вашим локальным приложением VS Code.
Терминал, который вы видите, похож на терминал Linux. Вы можете устанавливать пакеты, запускать службы и т. д. Если вам интересно, какая версия Linux используется в вашей среде, вы можете просто использовать следующие команды:
$ cd $ sudo apt install neofetch $ neofetch
Выход
Как видите, это Ubuntu 20.04.4 LTS 64-bit!
Если вам неудобно использовать VS Code в браузере, выберите Файл > Открыть в VS Code, это откроет среду кода в вашем локальном приложении VS Code. Но убедитесь, что у вас установлено это расширение — Нажмите на эту ссылку, чтобы установить расширение.
Примеры
Здесь я приведу два примера:
- Настройка фляжного проекта в Codespaces
- Настройка проекта веб-сайта (стек HTML, CSS, JavaScript) в Codespaces
1. Настройка проекта Flask в Codespaces
Я настрою это простое приложение Flask (не обращайте внимания на имя репо, это просто приложение Flask)
Просто нажмите Code›Codespaces›Create Codespace on Main.
Теперь давайте откроем терминал и наберем следующую команду для установки зависимостей:
pip3 install -r requirements.txt
При работе над проектами Python рекомендуется создать requirements.txt со списком библиотек, используемых в вашем проекте. Если у вас нет requirements.txt, вы можете установить библиотеки вручную:
pip3 install <library_name>
Запустим наш проект:
python3 application.py
Обратите внимание, что на вкладке PORTS в терминале порт автоматически перенаправляется. Кроме того, создается URL-адрес.
CTRL + Click по локальному адресу; это URL нашего приложения. Это частный URL-адрес, что означает, что только вы можете видеть веб-сайт, когда вы вошли в GitHub. Но вы можете изменить видимость веб-сайта на вкладке ПОРТЫ для публики, чтобы показать его вашему клиенту.
Выход
2. Настройка проекта веб-сайта (HTML, CSS, стек Javascript) в Codespaces
Я настрою этот проект веб-сайта, созданный с использованием HTML, CSS и JavaScript, на Codespaces. Это был мой проект III семестра:
Следуйте той же процедуре, что и в приведенном выше примере, и откройте Codespaces для репозитория.
Теперь в этом проекте порт не перенаправляется автоматически, так как мы ничего не запускаем, и для открытия HTML-файлов нужен только браузер. Поэтому нам придется делать это вручную.
Откройте терминал и последовательно введите следующие команды:
$ sudo apt install apache2 -y $ sudo mkdir /var/www/html/backup $ sudo mv /var/www/html/index.html /var/www/html/backup $ sudo cp -r * /var/www/html $ sudo service apache2 start
Надеюсь, у вас не будет ошибок. Теперь перейдите на вкладку «ПОРТЫ» в терминале и нажмите «Добавить порт». В номере порта введите 80 (поскольку apache2 обслуживает порт 80) и в поле локального адреса просто нажмите на него, и он будет сгенерирован автоматически.
Теперь нажмите на значок земного шара — и бум! — ваш сайт запущен.
Выход
Вам может понадобиться выполнить следующую команду, если вы выключите/закроете свое кодовое пространство:
$ sudo service apache2 start
Github.dev по сравнению с GitHub Codespaces
Многие из вас запутались между github.dev и Codespaces. Ну, это две разные вещи. Для тех, кто не знает, что такое github.dev, это веб-редактор, такой же, как VS Code, который можно использовать, перейдя в репозиторий и нажав клавишу точки (.) на клавиатуре.
Это откроет репозиторий в редакторе, и вы сможете редактировать код на ходу. Github.dev поддерживает расширения, синхронизацию учетной записи VS Code и т. д.
Он отличается от Codespaces тем, что не предоставляет никакой среды, а также похож на приложение «на ходу». Например, если вы попытаетесь открыть терминал в github.dev, вы получите следующее сообщение:
Пишет, что терминалы недоступны в веб-редакторе. Вместо этого вам нужно работать над codespace в среде, где вы можете установить, настроить и т. д. Другое дело — GitHub dev не позволяет вам ничего запускать — только редактировать код.
Является ли кодовое пространство GitHub бесплатным?
У меня были те же сомнения, и я связался с поддержкой GitHub по этому поводу.
Они сказали мне, что это бесплатно для пользователей бета-версии до следующего объявления. Если вы не являетесь пользователем бета-версии и все еще хотите использовать Codespaces, вы можете проверить следующие ссылки:
- https://github.com/pricing
- https://docs.github.com/en/billing/managing-billing-for-github-codespaces/about-billing-for-codespaces
Или вы можете испытать удачу и записаться в лист ожидания кодовых пространств GitHub!
Заворачивать
То, что создала Microsoft, великолепно! Это будущее. Поскольку он основан на облаке, он быстрый и безопасный. Это самый быстрый и эффективный способ совместной работы разработчиков над проектом.
Want to Connect? Connect with me on LinkedIn.
