Почему Nuxt в Docker не следит за изменением файлов?

Question

[Игорь]

Почему Nuxt в Docker не следит за изменением файлов?

Например когда я виду разработку с тем же php, то происходит синхронизация объемов.
Тем самым я могу вести разработку и тестирование в docker.

Но с Nuxt такое не прокатило, изменения сразу не применяются, а только после перезагрузки.
docker-compose restart

Dockerfile-dev

FROM node:lts-alpine

RUN mkdir -p /nuxt-app/
WORKDIR /nuxt-app/

COPY ./package*.json /nuxt-app/

RUN npm install

CMD ["npm", "run", "dev"]

docker-compose

# Nuxt publication
  nuxt-public:
    container_name: cc.nuxt_public
    build:
      context: ./nuxt_public
      dockerfile: Dockerfile-dev
    volumes:
      - ./nuxt_public:/nuxt-app/
    ports:
      - "127.0.0.100:3600:3000"
    expose:
      - "3000"

Answer 1

[daniel_wesson]

Тоже столкнулся с такой проблемой. Откопал решение, которое, в принципе, рабочее: добавить в nuxt.config.js следующее:

watchers: {
  webpack: {
    aggregateTimeout: 300,
    poll: 1000
  }
}

Webpack каждую секунду будет проверять изменился ли файл. Подробнее об этом в доке.
Может кому это решение пригодится

Answer 2

[Vitaly Karasik]

У вас установлен nodemon?
https://medium.com/i22digital/development-setup-wi...

Comments

[Игорь]

Судя по статье, в проекте должен быть файл index.js который инициализирует сервер.
Но из коробки его нет.

[Игорь]

Заволялся у меня пример создания сервера, надеюсь поможет

const express = require('express');
const consola = require('consola');

const { Nuxt, Builder } = require('nuxt');
const app = express();

// Import and Set Nuxt.js options
let config = require('../nuxt.config');
config.dev = !(process.env.NODE_ENV === 'production');


app.set('port', config.server.port);

async function start() {
  // Init Nuxt.js
  const nuxt = new Nuxt(config);

  // Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt);
    await builder.build()
  }

  // Give nuxt middleware to express
  app.use(nuxt.render);

  // Listen the server
  app.listen(config.server.port, config.server.host);
  consola.ready({
    message: `Сервер слушает http://${config.server.host}:${config.server.port}`,
    badge: true
  })
}

start();

...
  "scripts": {
    "dev-docker": "nodemon server/index.js -e js,graphql,gql",
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start --production",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
...

[Игорь]

Не работает Hot reload!

[Vitaly Karasik]

сорри, не знаю :-(

[Dos]

Игорь, нашли в чем причина? Тоже не обновляет на докере

[Игорь]

pro-dev, Я отказался от этой идеи, не стал костыли городить.

[Dos]

Игорь, а как сделали? Без докера?)

[Игорь]

pro-dev, Да, без докера.
В докере только php, nginx, database, а vue отдельно запускаю.

[Dos]

Игорь, а как потом на сервер загружаете. Без докера? Есть ли вообще пример? Интересно) не мог найти примеров с докером.

[Игорь]

pro-dev, Почему без докера.

В production все в докере и даже nuxt
Это когда в разработке в nuxt/vue нет hot reload in docker

Привожу пример:

# Production configuration
version: "3.1"

services:

  # Php application - Основное приложение API Symfony
  app:
    container_name: ruintouch.app
    restart: always
    build:
      context: .
      dockerfile: ./docker/php/Dockerfile-prod
    expose:
      - 9000



  # Nginx api server - Сервер для API буду тягать всякий контент (JSON)
  nginx-api:
    container_name: ruintouch.nginx-api
    image: nginx:latest
    restart: always
    volumes:
      - ./docker/nginx/prod/nginx.conf:/etc/nginx/nginx.conf
      - ./docker/nginx/prod/sites-enabled/vhost-api.conf:/etc/nginx/sites-enabled/vhost-api.conf
    ports:
      - 8095:80
    expose:
      - 80
    command: ["nginx", "-g", "daemon off;"]



  # Nginx admin server - API для админки
  nginx-admin:
    container_name: ruintouch.nginx-admin
    image: nginx:latest
    restart: always
    volumes:
      - ./docker/nginx/prod/nginx.conf:/etc/nginx/nginx.conf
      - ./docker/nginx/prod/sites-enabled/vhost-admin.conf:/etc/nginx/sites-enabled/vhost-admin.conf
    ports:
      - 8096:80
    expose:
      - 80
    command: ["nginx", "-g", "daemon off;"]



  #Nuxt publication  - Nuxt SSR
  nuxt-public:
    container_name: ruintouch.nuxt-public
    restart: always
    build:
      context: ./nuxt_public
      dockerfile: Dockerfile-prod
    ports:
      - "3001:3000"
    expose:
      - "3000"

Вчера развернул тестовый проект в production
https://ruintouch.cn

Долго грузится из-за того, что сервер находится в Китае.
В самом Китае открывается быстро.

Все это крутится в докере.

В докере для - developmentent
В докере для - production

Естественно с разными конфигурациями.

Итог:

secure.ruintouch.cn - API Сервер авторизации (для фанатиков)
api.ruintouch.cn - API для сайта (JSON)
admin.ruintouch.cn - API для админки (JSON)
cp.ruintouch.cn - Админка SPA
ruintouch.cn - Сайт SSR

А само Symfony поделено на ядра
То есть back end один, но с разными bundles.

Например если тянем данные по admin.ruintouch.cn то загружаем ядро AdminKernel.php

[Dos]

Игорь, понял. Значит я зря пытаюсь тут наладить докер для dev)) а я думал руки ни из того места. Вроде бы все верно сделал. На обычном работает. На докере нет. А что у вас в Dockerfile-prod для Nuxt? Тоже самое что в документации. Аля build, start?)

[Игорь]

pro-dev,

Значит я зря пытаюсь тут наладить докер для dev))

Да можно, костылей понаставить типа nodemon.
У меня не получилось, долго искал решение.

[Игорь]

pro-dev,

А что у вас в Dockerfile-prod для Nuxt?

FROM node:lts-alpine

RUN mkdir -p /nuxt-app/
WORKDIR /nuxt-app/

COPY ./package*.json /nuxt-app/
COPY . .

RUN npm install \
    && npm build

CMD ["npm", "start"]

[Dos]

Игорь, да может оно и не надо) Я ж откуда знаю. Просто почему то думал раз сервисы, то они и разрабатываться должны в одном месте. И информации по разработке в докере не находил. Только для prod. Но теперь, вашими указаниями понимаю, что оно, наверное и не должно быть так)) Скорее всего разработка идёт отдельно. А уже в prod используем докер. В принципе логично тоже.

[Dos]

Игорь, понял. Благодарю. Выручаете как всегда)

[Игорь]

pro-dev, Если бы работало, то это было бы отличным решением.
Но увы, решил не тратить время.

[Dos]

Игорь, я тоже не буду видимо. Сколько ковырялся толку нет. В интернете ничего не нашел) Вот наткнулся на вот вопрос думал моя ситуация. Но увы)