предисловие
Поскольку прошлогодний доход от киоска для барбекю достиг ожиданий, брат-барбекю купил себе новый компьютер. Но на новом компьютере ничего нет, поэтому я не могу вернуться к сверхурочной работе после закрытия киоска на ночь, что очень огорчает.
Чтобы не влиять на производительность киоска для барбекю в этом году, Brother BBQ все же настроил среду разработки интерфейса для своей собственной книги-игры (книги для игр).
Как это сделать?
Одна проблема заключается в том, что怎么搭这个环境?
Давайте сначала посмотрим, бизнес брата-барбекю включает в себяweb开发、taro小程序. Итак, пока компьютерnode、git, а затем используйте npm для установки некоторых глобальных библиотек (например,typescript、taro-cliд.) нормально?
Это правда, но шашлычника не так-то просто удовлетворить, иначе он не пошел бы на шашлыки.
В рамках познания брата барбекю существуют следующие способы создания среды разработки.
Прямая установка не рассматривается, она относится к зоне комфорта круга способностей брата-барбекю (能力圈可以分为舒适区、拉伸区和困难区，处在拉伸区时个人成长最快), делать это - пустая трата времени. Подсчитано, что виртуальная машина будет каждый раз запускать среду в течение получаса (утрированная риторика). при использованииdockerЧто ж, это происходит в зоне растяжения брата-барбекю, что очень стоит попробовать.
Первый взгляд на докер
Первоначально разработано, пока вы можете говорить на javascript, все в порядке, и теперь вам нужно уметь говорить на докере.
Некоторые концепции докера
Я не буду много говорить о том, что такое докер, давайте сначала разберемся, о чем пойдет речь в этой статье.一些概念.
-
image: изображение, которое является шаблоном только для чтения, используемым для создания контейнеров. -
container: Контейнер, который является исполняемым экземпляром образа. -
Dockerfile: Шаблон для создания образа, описывающий этапы создания образа.
Следовательно, отношения между ними таковы, что通过Dockerfile构建出镜像，然后通过镜像来创建容器，程序就跑在容器中. И образ может создавать N контейнеров по желанию, и каждый контейнер изолирован друг от друга.
напиши привет мир
Давайте сделаем демонстрацию, напишем программу узла hello world, а затем запустим программу в контейнере.
Нарисуй совок по тыкве,编写代码文件index.js -> 编写Dockerfile -> image -> container.
написать файл кода
Создайте каталог docker-test, создайте в нем новый index.js и введите следующие команды.
console.log('hello world');
Написать Dockerfile
Продолжайте создавать внутри новый файл Dockerfile (суффикс не требуется), введите следующую команду
FROM node:15.10.0-slim
COPY . ./demo
WORKDIR /demo
CMD node index.js
Кратко объясните эти команды.
FROM node:15.10.0-slimЭто означает, что наш образ унаследуетnode:15.10.0-slimЭто зеркало, где я могу найти это зеркало? Да, вы, наверное, тоже догадались, на сайте Docker ExchangeDocker Hubсередина.
COPY . ./demoЭто копирование текущего каталога в каталог /demo зеркала.Конечно, вы также можете использовать .dockerignore для исключения файлов, которые вам не нужно упаковывать.
WORKDIR /demoпохожий наcd /demo.
CMD node index.jsВыполняется после запуска контейнераnode index.jsЗаказ.
построить образ
бежать в башdocker image build -t demo .
После сборки запуститеdocker image lsВы можете проверить демонстрационное изображение.
запустить контейнер
бегатьdocker container run demo, не случайно вы напечатаете его в hello world.
Докер почти готов, давайте посмотрим, как создать среду разработки.
Создайте среду разработки
Наша среда разработки должна быть установлена глобально сnode、git、typescript、taro-cli.
Пусть проект работает вместе
Давайте сначала запустим проект локально, предполагая, что на компьютере уже есть проект, созданный с помощью create-react-app.
Общие шаги такие же, как и в приведенной выше демонстрации, просто введитеindex.jsзаменяется项目文件, а еще одно отличие состоит в том, что, поскольку он запускается для разработки (не запускается после сборки проекта), нам нужно установить зависимости в package.json.
На самом деле общая разница только в Dockerfile, давайте посмотрим на Dockerfile.
FROM node:15.10.0-slim
COPY . ./demo
WORKDIR /demo
RUN npm install
CMD npm run start
Создайте образ:docker image build -t react-demo ..
Запустите контейнер:docker container run -p 3000:3000 react-demo.
Здесь нужно указать при запуске контейнера-p参数Сопоставьте порт 3000 контейнера с локальным портом 3000.
На данный момент реактивный проект запущен.
Существует проблема
Видно, что по режиму разработки это проблематично. Например:
- Упакуйте код в изображение, каждый раз, когда вы изменяете код, вы должны
重新构建镜像 - Упакованный образ относится к среде узла.
缺少开发时需要的依赖
Мы надеемся,通过容器来提供开发时需要的依赖，然后通过vscode修改的代码实时跑在容器中.
решить
Создайте свой собственный образ разработки
Чтобы наш образ предоставлял зависимости, необходимые для разработки, нам действительно нужно, чтобы наш образ включал в себя node (typescript, taro-cli) и git.
Фактически, наше предыдущее изображение узлаnode:15.10.0-slimКонтейнер после запуска можно рассматривать как只带有node环境虚拟化的linux虚拟系统, можем зайти в контейнер посмотреть, запуститьdocker container run -it node:15.10.0-slim /bin/bashВы можете войти в баш контейнера.
Поэтому просто полагайтесь на существующий образ узла и устанавливайте необходимые программы при создании нашего образа. Давайте посмотрим на Dockerfile.
FROM node:15.10.0-slim
RUN apt-get update && apt-get install -y git
RUN npm install -g typescript @tarojs/cli
На этот раз вместо упаковки кода в изображение мы выполнилиapt-get upgrade && apt-get install gitа такжеnpm install -g typescript @taro-cliдве команды.
Создайте образ:docker image build -t frontend-dev ..
Запустите контейнер:docker container run -it frontend-dev /bin/bash.
Зайдя в контейнер, вы можете увидеть установленные нами программы.
На данный момент наш образ уже имеет среду, необходимую для разработки.
точка крепления
Docker предоставляет точки монтирования, которые позволяют контейнерам получать доступ к нашей локальной файловой системе.
Просто нужно указать при запуске контейнера в нашем проекте-v 参数просто отлично, т.е.docker container run -v "${pwd}:/demo" -it frontend-dev /bin/bash.
вы найдете нашfrontend-dev镜像Запущено больше контейнеров/demo目录, и вы можете видеть, что это наш проект, когда вы входите.
затем в/demo目录Выполните команду запуска проекта вnpm run start, наш проект запущен и работает.
На этом этапе вы можете использовать vscode для изменения кода нашего проекта, и все изменения будут следовать/demo目录Синхронизировать.
На данный момент наше зеркало используется только для зависимостей среды, и мы также можем с удовольствием работать сверхурочно.
Но все точно скажут, что этот способ хорош, но уж слишком хлопотен.
использовать vscode
Remote-Containers
На самом деле то, что мы сделали выше, у vscode есть соответствующий плагин, который уже сделал это за нас.
как использовать?
Используйте три изображения, чтобы рассказать вам, как его использовать.
Пока на вашем компьютере установлен Docker, выполните три шага выше, и ваш код будет в контейнере.
Все должны сказать это снова, почему ты не сказал этого раньше, брат-барбекю?
Потому что брат-шашлык хочет сказать, по сути, то, что я сказал выше都不重要. правильно! Вы не ослышались,是都不重要.
идея
На самом деле, брат барбекю хочет сказать в этой статье, что есть一个想法.
Remote-SSH
Давайте сначала рассмотрим еще одну вещь, плагин vscode.
Вы можете увидеть, что делает этот плагин, посмотрев на название, он позволяет нам использовать vscode для передачи ssh登录到一个远程机器上, См. после регистрации каталог является удаленным каталогом, и изменения в файле, файл изменяется на реальной удаленной машине.
Это тоже意味着我们可以通过vscode从本地直接编辑远程服务器的文件.
идея
Объединив вышеизложенное, у брата-барбекю появилась идея, а именно:
с помощью линукс-системы
多用户多任务特点,а такжеdocker快速搭建、迁移环境的能力, команда一个远程机器上进行业务开发.
сделай это优点Да:
-
方便复制环境: Когда приходит новый человек, вам нужно только открыть для него аккаунт на удаленной машине, а затем передать ему образ (или Dockerfile), и создается новая персональная среда разработки. -
方便统一环境: все в команде могут использовать один и тот же образ, и при необходимости они могут единообразно заменять или обновлять зависимости среды. -
方便随时随地加班: Для удаленной разработки ограничений на локальный терминал в принципе нет. Установите vscode локально (или даже установите браузер), чтобы работать сверхурочно в любое время и в любом месте.
наконец
Я хочу сказать, что я в статье, и брат барбекю должен идти сверхурочно.
Если вы решили помочь вам, пожалуйста, поставьте лайк~!