Контейнер Docker, на котором запущена приветственная страница vue-cli на локальном хосте: этот сайт недоступен

Вопрос

Я хотел бы видеть страницу приветствия vue-cli в хроме, запущенную из контейнера Docker на моем Mac. Я изо всех сил пытаюсь настроить правильную конфигурацию, чтобы это работало. Что мне не хватает? Вот что я пробовал.

Шаги

Установлено

  1. Докер для Mac - 17.12.0-ce
  2. нпм 5.6.0
  3. vue-cli 2.9.3

Командная строка

  1. $ vue init webpack docvue
  2. $ cd docvue
  3. $ npm install

Файлы

После выполнения приведенных выше команд у меня теперь есть пример проекта vue, готовый к сборке с помощью webpack.

$ ls
README.md       config          node_modules        package.json        static
build           index.html      package-lock.json   src

В /docvue/ я могу npm run dev и вижу:

> [email protected] dev /Users/dchaddportwine/Startup/docvue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting                                                                        

 DONE  Compiled successfully in 4695ms                                                                              12:17:04 PM

 Your application is running here: http://localhost:8080

А в Chrome по адресу http://localhost:8080/#/ я вижу страницу приветствия Vue.

Создайте образ Docker

Пришло время создать образ Docker с помощью этого файла Docker:

# base image
FROM node:8.10.0-alpine

# Create app directory
WORKDIR /usr/src/app

# Install app dependencies
COPY package*.json ./

RUN npm install

# Bundle app source
COPY . .

EXPOSE 8080

CMD [ "npm", "start" ]

Командная строка

$ docker build -t cportwine/docvue .
Successfully built 61bc30c3695b
Successfully tagged cportwine/docvue:latest

А теперь пора запустить образ Docker в контейнере:

$ docker run --rm -d cportwine/docvue
34ba43323723c046869775f6f00e11b895c4124680784ebcaff7f711c99fc82d

И проверьте логи:

$ docker logs 34ba43323723c046869775f6f00e11b895c4124680784ebcaff7f711c99fc82d

> [email protected] start /usr/src/app
> npm run dev


> [email protected] dev /usr/src/app
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 78% advanced chunk op DONE  Compiled successfully in 4383ms16:56:56                 

 Your application is running here: http://localhost:8080

Проблема

В Chrome на http://localhost:8080/#/ я получаю сообщение «Этот сайт недоступен».

Работающий контейнер выглядит так:

$docker container ls
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES
34ba43323723        cportwine/docvue    "npm start"         7 minutes ago       Up 7 minutes        8080/tcp            agitated_payne

Что, если

Что, если я запустил контейнер Docker, используя опцию публикации:

$ docker run --rm -p3000:8080 -d cportwine/docvue
2f9dd0bf1caa11d96352012913eb58c7883e1db95a7ceb72e2e264184c368261

И проверьте логи:

$ docker logs 2f9dd0bf1caa11d96352012913eb58c7883e1db95a7ceb72e2e264184c368261

> [email protected] start /usr/src/app
> npm run dev


> [email protected] dev /usr/src/app
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 78% advanced chunk op DONE  Compiled successfully in 4438ms17:08:09                 

 Your application is running here: http://localhost:8080

Проблема 2

Подожди, так лучше?

CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS                    NAMES
2f9dd0bf1caa        cportwine/docvue    "npm start"         8 minutes ago       Up 8 minutes        0.0.0.0:3000->8080/tcp   zen_liskov

В Chrome в http://localhost:3000/#/ Сейчас я получаю «Эта страница не работает - localhost не отправил никаких данных».

Но я не вижу приветственной страницы Vue.


webpack docker node.js vuejs2 vue-cli
person Chadd    schedule 26.03.2018    source источник
comment
Удалось ли вам случайно заставить команду vue ui работать в докере? Мне не удалось заставить это работать, и мне было любопытно, так как это очень похоже на то, что вы здесь делаете.   -  person Joseph Astrahan    schedule 02.09.2019
comment
Джозеф, да, однажды я видел, как мое приложение Vue работало в хроме из контейнера докеров. Но это был ошибочный шаг к непрерывной интеграции. Я никогда не использовал Docker таким образом.   -  person Chadd    schedule 06.09.2019

Ответы (1)


arrow_upward
12
arrow_downward

Что ж, вы решили часть своей проблемы ... вам НЕОБХОДИМО опубликовать обслуживающий порт (в данном случае 8080) на какой-то порт на вашем локальном компьютере (также может быть 8080 или 3000, как у вас), но похоже, что вы это поняли уже.

Другая проблема заключается в том, что webpack-dev-server использует «localhost» для хоста, который должен быть «0.0.0.0» для работы в Docker. Вы можете перезаписать конфигурацию хоста, используя переменную среды, поэтому попробуйте вместо этого эту команду:

docker run --rm -p 8080:8080 -e "HOST=0.0.0.0" -d cportwine/docvue

В журналах должно быть сказано:

Your application is running here: http://0.0.0.0:8080

и вы сможете получить доступ к сайту в своем браузере по адресу localhost: 8080.

Поскольку в настройке vue используется webpack-dev-server, подумайте о том, чтобы прочитать это для получения дополнительной информации о том, как использовать webpack + Docker: https://medium.com/@andyccs/webpack-and-docker-for-development-and-deployment-ae0e73243db4

person bhb603    schedule 26.03.2018
comment
Это хороший способ запустить приложение vue.js на докере. но для горячей перезагрузки есть задержка, и загрузка процессора на Mac достигает 60% и увеличивается. Задержка горячей перезагрузки начинается с 5 секунд и также увеличивается в следующий раз, когда вы меняете - person Azraar Azward; 11.11.2018