Конфигурация Docker для Vue.js приложения в сети Traefik

Данная конфигурация представляет собой полный цикл разработки и развертывания веб-приложения Quasar Vue.js, начиная от написания кода и заканчивая его публикацией.

Приложение упаковано в Docker контейнер, настроенный на работу с реверс прокси Traefik. Имеется два режима запуска проекта — developer и production.

Конфигурация используется в нашем приложении Messenger.

Ниже приведем код docker-compose.yml (production):

services:
  messenger-frontend:
    container_name: messenger-frontend
    build:
      context: .
      target: 'production-stage'
      args:
        VITE_APP_VERSION: 0.3
        VITE_CLIENT_URL: https://messenger.${SERVER_DOMAIN}
        VITE_API_URL: https://msg.${SERVER_DOMAIN}
    environment:
      NODE_ENV: production
    restart: unless-stopped
    networks:
      - proxynet
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.msgfe.rule=Host(`messenger.${SERVER_DOMAIN}`)"
    logging:
      driver: "json-file"
      options:
        max-size: "1m"
networks:
  proxynet:
    external: true

В production осуществляется полная сборка билда и последующая его упаковка в контейнер с Nginx веб-сервером.

Для development так же есть свой docker-compose.dev.yml:

services:
  messenger-frontend-dev:
    container_name: messenger-frontend-dev
    build:
      context: .
      target: 'develop-stage'
    environment:
      NODE_ENV: development
      PORT: 9000
      VITE_APP_VERSION: 0.3
      VITE_CLIENT_URL: https://messenger.${SERVER_DOMAIN}
      VITE_API_URL: https://msg.${SERVER_DOMAIN}
    volumes:
      - .:/app:rw
    command: sh -c "npm install && quasar dev"
    restart: unless-stopped
    networks:
      - proxynet
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.msgfe.rule=Host(`messenger.${SERVER_DOMAIN}`)"
      - "traefik.http.routers.msgfe.entrypoints=https"
      - "traefik.http.routers.msgfe.service=msgfe-service"
      - "traefik.http.services.msgfe-service.loadbalancer.server.port=9000"
    logging:
      driver: "json-file"
      options:
        max-size: "1m"
networks:
  proxynet:
    external: true

• В development режиме клиент запускается командой quasar dev и используется сервер Node.js. Этот режим позволяет динамически отслеживать изменения в коде, что бы сразу отображать их в браузере.
• В volumes добавляется .:/app:rw, что позволяет в процессе разработки динамически обновлять файлы проекта в контейнере.
• command: sh -c "npm install && quasar dev" — здесь, npm install необходимо указать для того, что бы дирекотория node_modules была доступна для отслеживания зависимостей в VS Code.

Dockerfile

Эта конфигурация Dockerfile описывает многоэтапную сборку образа для Quasar Vue.js приложения:

# develop stage
FROM node:22.8.0-alpine3.20 AS develop-stage
WORKDIR /app
COPY package*.json ./
RUN npm config set fund false --location=global
RUN npm install -g @quasar/cli
COPY . .


# build stage
FROM develop-stage AS build-stage
RUN npm install

ARG VITE_API_URL
ENV VITE_API_URL=${VITE_API_URL}

ARG VITE_APP_VERSION
ENV VITE_APP_VERSION=${VITE_APP_VERSION}

ARG VITE_CLIENT_URL
ENV VITE_CLIENT_URL=${VITE_CLIENT_URL}

#RUN quasar build
RUN quasar build -m pwa


# production stage
FROM nginx:1.27.1-alpine3.20 AS production-stage
WORKDIR /app
COPY --from=build-stage /app/dist/pwa /usr/share/nginx/html
# COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80

Он состоит из трёх основных этапов:

1. Разработка (develop stage):

• Базовый образ: Используется образ node:22.8.0-alpine3.20, что обеспечивает легковесную среду на основе Alpine Linux для работы с Node.js.
• Рабочий каталог: Устанавливается /app как основной рабочий каталог для всех последующих команд.
• Зависимости: Копируются файлы package*.json для последующей установки необходимых зависимостей.
• Настройки npm: Отключает спам в консоли о финансировании (fund) пакетов в NPM.
• Установка Quasar CLI: Глобально устанавливается Quasar CLI для возможности управления приложением Quasar.
• Копирование приложения: Все исходные файлы приложения копируются в контейнер.

1. Сборка (build stage):

• Исходный образ: Используется ранее созданный develop-stage как основа.
• Зависимости: Выполняется установка всех зависимостей приложения.
• Переменные окружения: Аргументы и переменные окружения (VITE_API_URL, VITE_APP_VERSION, VITE_CLIENT_URL) передаются в окружение сборки для использования в конфигурациях.
• Сборка приложения: Приложение собирается в режиме PWA при помощи Quasar CLI.

1. Продакшн (production stage):

• Базовый образ: Используется образ nginx:1.27.1-alpine3.20, что обеспечивает легковесную и производительную среду для развертывания статических файлов.
• Рабочий каталог: Устанавливается /app как основной рабочий каталог.
• Копирование файлов сборки: Скомпилированные файлы PWA копируются в каталог Nginx /usr/share/nginx/html для обслуживания.
• Конфигурация Nginx: В комментарии указана возможность изменения конфигурации Nginx, что позволяет настраивать его работу при необходимости.
• Открытие порта: Контейнер будет прослушивать стандартный 80 порт (в дальнейшем он будет перенаправлен через реверс-прокси Traefik, который позволит управлять SSL сертификатами для обеспечения соединения HTTPS).

Если вам интересен наш проект, есть вопросы, замечания, или предложения — оставляйте комментарии или пишите на почту: checkerwars@mail.ru

Кроме того, автор проекта ищет работу. Мое резюме.