VueJS + Docker для разработки | Frontend | Записки разработчика. Учимся писать на Python.

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

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

... я, как человек, не очень любящий работать с 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 .

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

Собираем 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

Осталось:

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

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