Создание игровых площадок для работы с новыми репозиториями без локальной установки
Знакомое зрелище, если вы меня. Найдите интересный репозиторий на GitHub и хотите его быстро просмотреть, но он не на моем любимом языке в данный момент, поэтому на моем ноутбуке не настроена среда. В README есть инструкции по настройке, но я не уверен, что все это будет делать с моей машиной (я смотрю на вас, Python).
Docker спешит на помощь (или Rancher, если вам больше нравится версия с открытым исходным кодом).
Для примера возьмем https://github.com/ente-io/bada-frame. Допустим, нам это показалось интересным, и мы хотим попробовать. Сначала клонируем репозиторий:
$ git clone https://github.com/ente-io/bada-frame
и откройте его в VS Code.
$ code bada-frame
Идея, изложенная в этом посте, может работать и без VS Code, потому что внутри он просто использует контейнеры Docker. Просто VS Code и расширение Remote Containers дают нам хороший готовый способ реализовать наши желания. Кроме того, я обнаружил, что в конечном итоге нам понадобится редактор для внесения небольших правок в репозиторий, с которым мы играем. Так что, если мы создадим эти контейнеры вручную, нам также потребуется установить редактор внутри этих контейнеров, и этим редактором может быть VS Code, и… вы видите, к чему все идет.
Вернемся к посту. В VS Code установим расширение «Remote — Containers» от Microsoft.
После его установки откройте средство выбора команд (Cmd — Shift — P) и выполните команду «Remote-Containers: Reopen in Container».
Он спросит нас, какое базовое изображение мы хотим использовать. Из беглого взгляда на README мы вспоминаем, что это Typescript, так что давайте перейдем к «Node.js + Typescript».
Затем он задаст нам кучу вопросов, ни один из которых не имеет большого значения в данный момент, и мы можем просто выбрать значения по умолчанию для всех.
Если это какой-то код, с которым мы регулярно работаем, мы могли бы написать Dockerfile, но это не то, чем мы хотим заниматься прямо сейчас. Мы не хотим контейнеризовать приложение или делать воспроизводимые сборки или что-то в этом роде. Нам просто нужна песочница или игровая площадка, чтобы поиграть с кодом, попробовать что-нибудь.
Теперь VS Code приступит к запуску вашего Dev Container. Как только это будет сделано (это может занять несколько секунд, пока он загружает базовые изображения), мы должны получить хороший обнадеживающий зеленый цвет в левом нижнем углу, говорящий, что мы находимся в «контейнере разработки: Node.js & TypeScript». Хороший!
Итак, продолжим наше путешествие. Теперь мы можем открыть README проекта и просто запустить команды (надеюсь), описанные в разделе инструкций по установке в README.
Чтобы позволить нам это сделать, сначала давайте откроем терминал (Ctrl — `); самое классное, если вы еще не поняли, это то, что это не терминал на нашей машине, а терминал внутри контейнера Docker. Так что мы можем ковыряться, не ковыряясь в нашей машине.
Для нашего примера команды действительно задокументированы в README, давайте запустим их в нашем терминале внутри VS Code.
➜ $ git submodule update --init --recursive
(Обновление подмодуля было бы лучше сделать вне нашего контейнера, но да ладно, это тоже работает. Мы просто играемся, давайте оставаться в потоке.)
Далее следует стандартная настройка TS:
➜ $ yarn install
Вот и все. Теперь давайте запустим наш сервер разработки.
➜ $ yarn dev
Когда мы это делаем, VS Code автоматически определяет, что мы запустили процесс, который открыл порт, и предлагает перенаправить порт для нас:
Да, черт возьми! Когда вы нажмете «Открыть в браузере», он откроет его в браузере, который взаимодействует с сервером разработки, работающим в нашем контейнере.
Вот и все.
Мы можем остановить сервер (просто закройте окно VS Code), а затем, когда мы вернемся к нему позже (просто снова откроем папку в VS Code), он автоматически перезапустит контейнер для нас и вернет нам приглашение терминала. Мы можем снова yarn dev продолжить с того места, на котором остановились.
Все контейнеры, которые мы создали таким образом, можно найти на панели Remote Explorer, которую VS Code отобразит на панели действий.
Я надеюсь, что вы нашли это полезным. Это довольно простая вещь, мы в основном просто использовали расширение, но я чувствую, что знакомство людей с этим рабочим процессом иногда может быть полезным и помочь им преодолеть инерцию, которая может возникнуть у них при проверке новой кодовой базы и воздействии на код. И возиться - это то, что мы здесь делаем 😇
Если вам нравится то, что вы здесь увидели, скажите привет в Твиттере или заходите к нам в Дискорд. А пока сохраняйте спокойствие и продолжайте возиться!
