Haikson

[ Everything is possible. Everything takes time. ]

VueJS + Docker для разработки

Для тех, кто не очень любит читать - можете клонировать проект и работать с ним. Кто же хочет немного разобраться - добро пожаловать.

Предыстория такая

... я, как человек, не очень любящий работать с frontend-ом, но вынужденный, решил поработать с VueJS.  Под рукой: windows 10, WSL (Ubuntu 20.4), Mac. Гадить в мак не хотелось, поэтому решил поднять все под WSL (рассказать, почему не Win10? Я тоже думаю, что не стоит). Установил nodejs + npm + yarn + vue-cli, запустил vue create ***. Приложение создалось, но была проблема: при изменении файлов из под windows vue-cli-service не видел изменений. Насколько я понял - это fsevents не хочет видеть изменения в проекте по причине некоторой разницы работы с файловой системой между windows и unix.

Проковырявшись 2 дня решил попробовать поднять в контейнерах. Первым делом решил пойти простым путем - собрать образ на node. Но через час ковыряния понял, что затея не очень, так как при установке некоторых пакетов сыпятся ошибки. В том числе про отсутствующий python2. Поэтому решил попробовать поднять ubuntu и на нем установить все и настроить.

Результат? Есть результат!


Сначала пишем Dockerfile

  • ubuntu:latest
  • ENV DEBIAN_FRONTEND noninteractive
    • иначе debian задает лишние вопросы. Особенно с выбором региона. Нам оно надо? Нет!
  • nodejs && npm
  • yarn
  • @vue/cli
  • yarn install
  • yarn serve

Все предельно просто. Dockerfile

FROM ubuntu:latest

ENV DEBIAN_FRONTEND noninteractive

RUN apt-get update && apt-get install -y nodejs npm && rm -rf /var/lib/apt/lists/*
RUN npm install -g yarn

WORKDIR /srv/app
COPY app/package*.json ./
RUN yarn global add @vue/cli
RUN yarn install

# Bundle app source
COPY ./app .

EXPOSE 8080

CMD [ "yarn", "serve"]

НО! Прежде чем собрать, я решил подготовить docker-compose.yml .

  1. Сложившаяся хорошая привычка
  2. Дополнительные настройки


  • Собираем Dockerfile
  • Проект в /srv/app
  • Монтируем ./app:/srv/app
  • Игнорируем node_modules. Нам не нужно все это носить с собой из проекта в проект, или на носителях между компами. Мусор в собранном образе остается
  • + еще какая то магия, в которой даже желания нет разбираться. Просто где то увидел, что надо.

В итоге результат docker-compose.yml

version: '2'
services:

  app:
    build:
      context: ./
      dockerfile: Dockerfile
    working_dir: /srv/app
    volumes:
      - ./app:/srv/app
      - /srv/app/node_modules
    stdin_open: true
    environment:
      - HOST=0.0.0.0
      - CHOKIDAR_USEPOLLING=true
    ports:
      - 8080:8080

Осталось:

  1. Собрать docker compose build app
  2. Запустить docker compose up -d
  3. Наслаждаться разработкой http://localhost:8080
  4. Собирать продакшен docker compose run --rm app bash -c 'yarn build'

Надеюсь помог.