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

Ранее Я описал очень простой способ разработки и развертывания приложения Vue.js, используя комбинацию git и npm Анкет Это прекрасно работает, чтобы быстро прототип приложения и посмотреть, как оно ведет себя в дикой природе. В случае, если у вас ждет продуктивный проект, вы, вероятно, хотите использовать более предсказуемый сквозной рабочий процесс.

Эта серия статей обеспечит вам знания для создания, разработки и развертывания проекта VUE с Docker. С некоторыми настройками вы также можете использовать избранное Dockerfiles Чтобы развернуть любой проект, используя другие рамки, такие как React или Svelte.

Представление Docker

Docker — это инструмент для создания и развертывания контейнерных единиц программного обеспечения. Таким образом, рядом с исходным кодом для приложения проект Docker также приведет к ее запуску среды.

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

Node.js не требуется в хостинговой машине, ни на вашем локальном устройстве, ни для разработки, тестирования или продуктивного использования.
Установка модулей узлов и строительство приложения может быть сделано внутри контейнера.
Мы можем легко заменить папку Static Express на «настоящий» сервер. В этом случае мы будем использовать nginx для обслуживания веб -приложения.
Обмен кодом и воспроизведение ошибок в контексте команды намного проще.
Сам Docker поставляется с некоторыми вкусностями, такими как Сети и Docker-Compose , что позволяет легко управлять приложениями, API и базами данных.

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

Изображения — это чертежи для контейнеров Анкет Они включают исходный код и требуемое время выполнения, такие как Python или Node.js
Контейнеры — это живые единицы программного обеспечения. Они работают на основе основного изображения.

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

Установка Docker

Для объема этой статьи мы хотим использовать все возможности Docker. Это означает: Вам не нужно установить другой инструмент, но сам Docker Анкет Мы будем использовать его для выполнения всех дальнейших шагов настройки для процесса разработки и сборки VUE.

Linux (Ubuntu) Быстрая настройка

Взято из https://docs.docker.com/engine/install/ubuntu/

# Remove previous versions of docker
sudo apt-get remove docker docker-engine docker.io containerd runc

# Update package list & install necessary dependencies
sudo apt-get update
sudo apt-get install \
  apt-transport-https \
  ca-certificates \
  curl \
  gnupg \
  lsb-release

# Add Docker's GPG key to your local mashine
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

# Install Docker
echo \
  "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

Настройка Windows

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

https://docs.docker.com/docker-for-windows/install/

Настройка проекта

Веб -фреймворки обычно требуют некоторых шагов между инициализацией проекта и развертыванием. Чтобы убедиться, что этот процесс может быть воспроизведен, Docker использует Dockerfiles , отдельные файлы, которые описывают шаги для создания Изображение Анкет

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

Первоначальная структура проекта

Переодеться в каталог по вашему выбору и создайте следующую структуру папок:

/
| - /dockerfiles
|   | - Setup.Dockerfile  # 1
|   | - Dev.Dockerfile    # 2
|   | - Deploy.Dockerfile # 3

Чтобы дать вам представление о том, что эти три Dockerfiles поможет нам достичь:

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

Так много для теории. Давайте пройдемся через эти шаги сейчас, один за другим.

Шаг 1: Инициализируйте приложение

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

Мы начнем с использования Vue Cli Чтобы настроить структуру нашего приложения. Поскольку это зависит от node.js, мы начнем От Узел: 14 и добавьте несколько дополнительных командных слоев сверху.

В Настраивать. Dockerfile , добавить следующий контент:

FROM node:14

WORKDIR /vue-setup

RUN npm install -g @vue/cli

# The following commands ensure access to our files
# If we left them out, changing files on our local setup
# would fail due to insufficient permissions. 
RUN userdel -r node

ARG USER_ID

ARG GROUP_ID

RUN addgroup --gid $GROUP_ID user

RUN adduser --disabled-password --gecos '' --uid $USER_ID --gid $GROUP_ID user

# Set the active user and open the interactive terminal
USER user

ENTRYPOINT [ "bash" ]

Затем мы можем построить наше изображение vue_helper, используя следующую команду.

# Build an image named vue_helper using the Setup.Dockerfile
# The build args manage permissions when executing commands from inside the container
docker build \
  --build-arg USER_ID=$(id -u) \
  --build-arg GROUP_ID=$(id -g) \
  -t vue_helper - < ./dockerfiles/Setup.Dockerfile

Выполнение следующей команды свяжет рабочую каталог контейнера с нашей локальной машиной, используя Bind-Mount Анкет

Убедитесь, что заменить /path/to/project/ с вашим собственным пути проекта.

docker run -v /path/to/project/:/vue-setup -it vue_helper

Затем откроется терминал изнутри контейнера. Здесь мы теперь можем установить само приложение VUE и добавить больше модулей NPM, если это необходимо.

user@b24a617a1dfa:/vue-setup$ vue create vue_app

Тогда вам будет предложено через Стандартная настройка CLI VUE Анкет Если вы не уверены, что выбрать, просто подтвердите все стандартные шаги.

Учитывая все до этого момента, вы заметите новый каталог с именем vue_app Появление в папке проекта. Это происходит из -за контейнера и означает, что все пошло по плану, и наш проект готов к работе.

Давайте повторим, что произошло до этого момента:

Мы использовали Docker, чтобы создать новое изображение с именем vue_helper Анкет
Он использует привязку и интерактивный сессионный терминал, который поможет нам освоить наш проект VUE.
С помощью Vue Create Внутри контейнера с выделенным пользователем у нас есть базовый проект, доступный на нашем локальном устройстве — не устанавливая на него что -либо.

Оставайтесь с нами для следующей части, где мы будем:

Исследуйте, как обслуживать приложение в контейнер во время разработки.
Создайте изображение приложения и запустите его на нашей локальной машине.
Развернуть изображение в Dockerhub и подавать его на Цифровой океанский капля

Представление Docker

Установка Docker

Linux (Ubuntu) Быстрая настройка

Настройка Windows

Настройка проекта

Первоначальная структура проекта

Шаг 1: Инициализируйте приложение

Рекомендации

Docker 101 — Учебное пособие по самостоятельному управлению

Официальная документация Docker

Читайте ещё по теме: