Запуск веб-приложения на основе фреймворка Vue.js на Dockhost

В данной статье мы рассмотрим деплой веб-приложения, написанного c использованием фреймворка Vue.js.

В качестве примера возьмём небольшое веб-приложение. Исходный код данного веб-приложения можно посмотреть здесь: example-vuejs.

Деплой веб-приложения будет производиться на платформе Dockhost. В рамках примера предполагаем, что у пользователя есть учётная запись на платформе.

Подключение репозитория Git

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

nginx/default.conf

В корне репозитория создайте папку nginx, и добавьте в неё файл default.conf со следующим содержимым:

server {
    listen 80;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html index.htm;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Данная конфигурация запустит nginx на 80 порту, корневая директория сервера будет располагаться в /usr/share/nginx/html. Для локации / добавлено правило по умолчанию возвращать index.html, это сделано чтобы запросы на несуществующие URL возвращали index.html, который запустит веб-приложение.

Dockerfile

В корневой директории создайте Dockerfile со следующим содержимым:

# build stage
FROM node:lts-alpine AS build-stage

WORKDIR /app

COPY . .
RUN npm ci && npm run build

# production stage
FROM nginx:stable-alpine AS production-stage

COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Данный Dockerfile использует Multi-stage builds, для сборки веб-приложения будет использоваться образ node:lts-alpine, для запуска - образ nginx:stable-alpine. На первом этапе командой npm ci устанавливаются все зависимости, а командой npm run build производится сборка веб-приложения, на следующем этапе собранное веб-приложение копируется из /app/dist в корневую директорию nginx /usr/share/nginx/html.

В качестве основной команды будет использоваться nginx -g daemon off;. Данная команда запустит nginx, который будет слушать 80 порт, с настройками из файла /etc/nginx/conf.d/default.conf .

Теперь в Вашем репозитории есть Dockerfile, а также конфигурация для nginx и Вы можете подключить его (репозиторий) к платформе Dockhost. Для этого в проекте my-project (проект может быть любым, для примера мы будем использовать my-project, который создаётся по умолчанию при регистрации на платформе) необходимо перейти в раздел «Репозитории Git» и добавить репозиторий.

В нашем примере Git-репозиторий является публичным и не требует авторизации. Для того чтобы подключить приватный Git-репозиторий, необходимо указать имя пользователя и пароль в разделе «Авторизация».

Далее нажмите на кнопку «Применить» и дождитесь завершения процесса подключения репозитория и первой сборки контейнера из репозитория.

Как только процесс сборки будет завершён, в разделе «Контейнеры» появится контейнер веб-приложения.

В логах контейнера будет запись об успешном старте nginx, который будет раздавать статику веб-приложения.

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

Теперь необходимо указать для контейнера 80 порт, который слушает nginx, для этого нажмите на кнопку «Управлять», чтобы перейти в раздел просмотра контейнера, и на открывшейся странице нажмите на кнопку «Редактировать».

В открывшемся модальном окне, в разделе «Порты», добавьте новый порт 80.

Далее нажмите на кнопку «Применить» и дождитесь завершения процесса перезапуска контейнера.

Настройка домена и маршрута

Теперь контейнер настроен и готов принимать входящий трафик на порт 80. Для доступа к контейнеру из Интернета добавьте динамический домен и настройте маршрутизацию трафика.

Для создания или подключения домена необходимо перейти в раздел «Сетевые сервисы», подраздел «Домены» и добавить домен.

Далее нажмите на кнопку «Применить» и дождитесь завершения процесса создания домена.

Как только домен будет создан, необходимо настроить маршрутизацию трафика, для этого перейдите в раздел «Сетевые сервисы», подраздел «Маршруты» и добавьте новый маршрут.

Далее нажмите на кнопку «Применить» и дождитесь завершения процесса запуска сервиса маршрутизации.

Вы можете увидеть карту сети проекта, если перейдёте в раздел «Сетевые сервисы», подраздел «Карта сети»:

Теперь веб-приложение полностью настроено и запущено, а благодаря настройке деплоя через Push, при изменении кода, платформа Dockhost будет автоматически собирать и запускать новую версию веб-приложения.

В дальнейшем Вы можете взять за основу наш репозиторий example-vuejs и расширить функционал.

Если у Вас уже есть свой проект, написанный на vue.js, Вы можете так же просто запустить его на платформе Dockhost, используя пошаговый алгоритм из нашей статьи. Для этого воспользуйтесь примером Dockerfile, настройки nginx и придерживайтесь описанной последовательности действий.

FAQ

• Как запустить vue.js с помощью npm run serve

Для этого нужно отредактировать Dockerfile:

FROM node:lts-alpine

WORKDIR /app

COPY . .
RUN npm ci

EXPOSE 8080
CMD ["npm", "run", "serve"]

Vue.js будет запущен на 8080 порту. Далее в контейнере необходимо указать порт 8080 и использовать его при добавлении маршрута.