Как использовать докер для создания фронтенд-среды разработки

Docker
Как использовать докер для создания фронтенд-среды разработки

Мало знаний, большой вызов! Эта статья участвует в "Необходимые знания для программистов«Творческая деятельность.

Docker имеет множество применений, помимо развертывания проектов, его также можно использовать в качестве среды разработки.

Преимущества использования docker в качестве среды разработки

Держите машину прохладной

Каждый, кто занимается разработкой, знает, что сразу после покупки компьютера должны быть установлены различные среды, например, для фронтенд-разработки необходимо установить node, yarn, git и т. д. Для того, чтобы использовать определенные инструменты или пакеты, python или java также может потребоваться установка (например, Jenkins полагается на java), со временем локальная среда станет очень хаотичной, что несколько неудобно для некоторых обсессивно-компульсивных пациентов или людей с чистотой программного обеспечения.

После использования докера среда разработки настраивается в контейнере. Вам нужно только открыть докер во время разработки и закрыть докер после разработки. На этой машине не нужно устанавливать грязную среду, что очень освежает.

Изолированная среда

Я не знаю, сталкивались ли вы с такой ситуацией во время разработки: некоторые проекты компании нужно запускать на более новых версиях узлов (например, vite, который нужно запускать на node12 или выше), а некоторые старые проекты нужно запускать на более старые версии узлов Переключиться на запуск на компьютере хлопотнее.Хотя для решения этой проблемы можно использовать nvm, для решения этой проблемы удобнее использовать docker.

Среда быстрой настройки

Купил новый компьютер, или переустановил систему, или перешел на новую рабочую среду, первым делом настроил среду разработки. Загрузите node, git, затем установите некоторые глобальные пакеты npm, затем загрузите vscode, настройте vscode, загрузите плагины и т. д.

После использования docker просто извлеките предварительно упакованный образ среды разработки из docker hub, и тогда вы сможете успешно разрабатывать.

установить докер

Заходим на официальный сайт докера (www.docker.com) Загрузите рабочий стол docker и установите его.Этот шаг относительно прост и опущен.

После завершения установки откройте докер, а после его полного запуска откройте оболочку и введите:

docker images

截屏2021-09-29 22.16.13.png

Отображение вышеуказанной информации выполнено успешно!

Настроить среду разработки

Предположим, есть проект, он должен работать в версии ноды 8.14.0, мы сначала идем в докер-хаб, чтобы вытащить эту версию образа ноды:

docker pull node:8.14.0

После завершения извлечения списка зеркал:

docker images

截屏2021-09-29 23.30.16.png

Получив образ, вы можете использовать его для запуска контейнера:

docker run -it --name my_container 3b7ecd51 /bin/bash

Приведенная выше команда запускает контейнер в интерактивном режиме командной строки и указывает имя контейнера как my_container.

截屏2021-10-08 23.16.11.png

На данный момент он создан и введен в контейнер.Контейнер представляет собой систему linux.Вы можете использовать команды linux.Попробуем ввести некоторые команды:

截屏2021-10-08 23.18.11.png

Вы можете видеть, что этот образ узла имеет предустановленную версию git 2.11.0 в дополнение к узлу 8.14.0.

Взаимосвязь между образом и контейнером: Образ предварительно установлен только с самой базовой средой.Например, образ node:8.14.0 выше можно рассматривать как систему Linux с предустановленным узлом 8.14.0, а контейнер - это еще один клон на основе образа.Система Linux может устанавливать в этой системе другие среды, такие как java, python и т. д. Один образ может создавать несколько контейнеров, и каждая среда контейнера изолирована друг от друга и не влияет на каждый другое (например, если в контейнере А установлена ​​java, то в контейнере Б нет).

Использовать командную строку для манипулирования проектами неудобно, поэтому сначала выходим из режима командной строки и для выхода используем exit:

截屏2021-10-08 23.20.49.png

С помощью IDE удобнее играть в докер.Здесь выбираем vscode, открываем vscode и устанавливаем расширение Remote - Containers.Это расширение позволяет нам легче управлять контейнерами:

截屏2021-10-08 23.03.53.png

После успешной установки в левом нижнем углу появится дополнительная иконка, нажмите:

截屏2021-10-08 23.23.00.png

Выберите «Присоединить к работающему контейнеру» в раскрывающемся меню:

截屏2021-10-08 23.25.02.png

В этот момент будет сообщено об ошибке «Нет запущенных контейнеров для подключения», потому что мы только что вышли из интерактивного режима командной строки, поэтому теперь контейнер находится в остановленном состоянии, мы можем использовать следующую команду для просмотра работающий контейнер:

docker ps

# 或者
docker container ls

截屏2021-10-08 23.30.51.png

Обнаружено, что в списке нет запущенных контейнеров.Нам нужно найти только что созданный нами контейнер и запустить его.Сначала выведем список всех контейнеров:

# -a 可以显示所有容器,包括未运行的
docker ps -a

# 或者
docker container ls -a

截屏2021-10-08 23.29.25.png

Запустите указанный контейнер:

# 使用容器名称
docker start my_container

# 或者使用容器 id,id 只需输入前几位,docker 会自动识别
docker start 8ceb4

После повторного запуска команды docker ps вы увидите работающий контейнер. Затем вернитесь в vscode, снова выберите «Присоединить к работающему контейнеру», и появится список запущенных контейнеров:

截屏2021-10-08 23.36.14.png

Выберите контейнер для входа, добавьте терминал bash, и вы можете войти в режим командной строки, который мы только что создали:

截屏2021-10-08 23.40.14.png

Устанавливаем vue-cli и создаем проект в каталоге /home:

# 安装 vue-cli
npm install -g @vue/cli

# 进入到 home 目录
cd /home

# 创建 vue 项目
vue create demo

Откройте каталог в vscode и обнаружите, что это уже не локальный каталог, а каталог в контейнере, найдите только что созданный /home/demo и откройте его:

截屏2021-10-09 00.01.13.png

Введите npm run serve, и вы можете счастливо развиваться:

截屏2021-10-09 00.03.32.png

Выше мы использовали образ узла 8.14.0 в качестве примера для создания среды разработки.Если вы хотите использовать новую версию узла, то тоже самое, вам нужно только вытащить образ узла указанной версии, а затем используйте этот образ для создания контейнера и создайте контейнер в контейнере. Проект или извлеките проект из репозитория git для разработки, чтобы были две разные версии среды разработки узла, и их можно было разрабатывать одновременно.

Используйте ubuntu для настройки среды разработки

Вышеупомянутый метод на самом деле неудобен в использовании, потому что образ узла устанавливает только узел и git, и иногда мы надеемся, что образ может иметь больше встроенных функций (например, предустановленные npm, vue-cli и другие глобальные пакеты npm, или предварительно установленные расширения vscode и т. д.), чтобы вновь созданный контейнер с образом также включал в себя эти функции, и его не нужно было устанавливать по одному разу для каждого контейнера.

Мы можем использовать Ubuntu в качестве фонда бесплатная среда разработки конфигурации, сначала получите зеркалирование Ubuntu:

# 不输入版本号,默认获取 latest 即最新版
docker pull ubuntu

Создайте новый контейнер:

docker run -itd --name fed 597ce /bin/bash

-itd здесь на самом деле является комбинацией -i -t -d, -d для запуска контейнера в фоновом режиме, что эквивалентно запуску контейнера, когда он только что создан, так что вам не нужно использовать команда запуска докера. Позже мы напрямую используем vscode для работы с контейнером, поэтому нет необходимости использовать режим командной строки.

Мы назвали контейнер Feed (для разработки переднего плана) и рекомендуем, чтобы имя контейнера было коротким и удобным для ввода.

截屏2021-10-10 00.11.40.png

Образ убунту очень чистый(всего 72м) и имеет только самые основные возможности.Для удобства последующего использования надо обновить систему.Перед обновлением,чтобы было быстрее,сначала сменить на исходник Али, используйте vscode, чтобы открыть контейнер с подачей, а затем откройте файл /etc/apt/sources.list, измените содержимое на:

deb http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ focal-security main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ focal-updates main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ focal-proposed main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ focal-backports main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ focal-security main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ focal-updates main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ focal-proposed main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ focal-backports main restricted universe multiverse

截屏2021-10-10 00.18.57.png

Введите последовательно следующие команды в терминал ниже, чтобы обновить систему:

apt-get update
apt-get upgrade

Установите судо:

apt-get install sudo

Установите гит:

apt-get install git

Устанавливаем wget (wget — это инструмент для скачивания, нам нужно использовать его для скачивания пакетов, конечно же можно выбрать и axel, в зависимости от личных предпочтений):

apt-get install wget

Для того, чтобы облегчить управление проектами и пакетами, мы создаем две папки (проекты и пакеты) в каталоге /home, проекты используются для хранения проектов, а пакеты используются для хранения программных пакетов:

cd /home
mkdir projects
mkdir packages

Поскольку версия узла в исходном коде Ubuntu относительно старая, загрузите последнюю версию с официального сайта и используйте wget для загрузки пакета узла:

# 将 node 放到 /home/packages 中
cd /home/packages

# 需要下载其它版本修改版本号即可
wget https://nodejs.org/dist/v14.18.0/node-v14.18.0-linux-x64.tar

распаковать файлы:

tar -xvf node-v14.18.0-linux-x64.tar

# 删除安装包
rm node-v14.18.0-linux-x64.tar

# 改个名字,方便以后切换 node 版本
mv node-v14.18.0-linux-x64 node

Настройте переменные среды узла:

# 修改 profile 文件
echo "export PATH=/home/packages/node/bin:$PATH" >> /etc/profile

# 编译 profile 文件,使其生效
source /etc/profile

# 修改 ~.bashrc,系统启动时编译 profile
echo "source /etc/profile" >> ~/.bashrc

# 之后就可以使用 node 和 npm 命令了
node -v
npm -v

Установите nrm и переключитесь на источник taobao:

npm install nrm -g
nrm use taobao

Установите некоторые расширения vscode, такие как eslint, vetur и т. д. Расширения устанавливаются в контейнер, а файл конфигурации будет храниться в контейнере, а упакованный образ будет упакован вместе. Когда мы закрываем контейнер, а затем открываем vscode, мы можем обнаружить, что эти расширения не установлены в нативном vscode.

На данный момент настроена простая среда разработки интерфейса, вы можете добавить некоторые пакеты по своему усмотрению, например, yarn, nginx, vim и т.д.

образ пакета

Выше мы настроили простую среду разработки через ubuntu, чтобы повторно использовать эту среду, нам нужно упаковать ее в образ и отправить на docker hub.

Шаг 1: Зарегистрируйте учетную запись в докере.

Шаг 2: Откройте оболочку и войдите в докер.

截屏2021-10-10 01.44.26.png

Шаг 3: Упакуйте контейнер в образ.

# commit [容器名称] [镜像名称]
docker container commit fed fed

Шаг 4: Пометьте образ, так как образ помещается в концентратор докеров, версия должна быть отмечена тегом, здесь мы сначала устанавливаем последнюю. Имя тега добавляется к имени пользователя в качестве пространства имен, чтобы предотвратить конфликты с изображениями в Docker Hub.

docker tag fed huangzhaoping/fed:latest

Шаг 5: Отправьте тег в Docker Hub.

docker push huangzhaoping/fed:latest

Шаг 6: Удалите все локальные образы и контейнеры о корме, а затем извлеките только что отправленный образ из Docker Hub:

# 拉取
docker pull huangzhaoping/fed

# 创建容器
docker run -itd --name fed huangzhaoping/fed /bin/bash

Откройте контейнер с помощью vscode, откройте командную строку и введите:

node -v
npm -v
nrm -V
git --version

Затем посмотрите на расширение vscode, вы можете обнаружить, что расширение было установлено.

Если вы хотите переключить версию узла, вам нужно всего лишь загрузить указанную версию узла, распаковать и заменить /home/packages/node.

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

Меры предосторожности

  • Если вы хотите нажать на изображение в Docker Hub, не сохраняйте важной информации на изображение, поскольку изображение передается, чтобы избежать утечки важной информации.
  • Никогда не храните какие-либо важные файлы или информацию в контейнере, потому что, как только контейнер удалит эти файлы по ошибке, они исчезнут.
  • Если вы разрабатываете проект в контейнере, не забывайте каждый день отправлять код на удаленный склад, чтобы избежать потери кода после случайного удаления контейнера.