Runing vue/cli app under docker simple index.html is opened

Question

I want to install my @vue/cli 4.0.5 app under docker and I found this package https://hub.docker.com/r/ebiven/vue-cli Supposing that is what I need (?) I modified _Docker/docker-compose.yml with

web:
    container_name: vtasks_web

    build:
        context: ./web
        dockerfile: Dockerfile.yml

    environment:
        - APACHE_RUN_USER=www-data
    volumes:
        - ${APP_PATH_HOST}:${APP_PTH_CONTAINER}
    ports:
        - 8088:80
    working_dir: ${APP_PTH_CONTAINER}

...

vue_cli:
    container_name: vtasks_vue_cli
    image: ebiven/vue-cli:latest
    volumes:
        - ${APP_PATH_HOST}:${APP_PTH_CONTAINER}
    working_dir: ${APP_PTH_CONTAINER}
    command: npm install

Building the app and next checking logs I do not have errors, also node_modules was created(I removed it priorly):

But entering the bush I run

npm run serve

command and it shows :

ONE  Compiled successfully in 10065ms                                                                                                                                                                                            4:21:52 PM


  App running at:
  - Local:   http://localhost:8080/ 

  It seems you are running Vue CLI inside a container.
  Access the dev server via http://localhost:<your container's external mapped port>/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

So I run

http://localhost:8088/

as in container of web I have 8088:80 set But in browser I see that index.html is opened(by title and page content) but not js rendered?

What is valid way ?

MODIFIED BLOCK : Looking at demo at https://github.com/ebiven/docker-vue-cli I see that ebiven/docker-vue-cli is used as web container, so removing node_modules directory and I remade my _Docker/docker-compose.yml :

version: '3.5'

services:



    web:
        container_name: vtasks_web

        image: ebiven/vue-cli

        command: npm install
#        command: npm install ; npm run serve  // I GOT ERROR HERE
#        command: npm run serve

        build:
            context: ./web
            dockerfile: Dockerfile.yml

        environment:
            - APACHE_RUN_USER=www-data

        volumes:
            - ${APP_PATH_HOST}:${APP_PTH_CONTAINER}
        ports:
            - "8088:80"

        working_dir: ${APP_PTH_CONTAINER}


    db:
        container_name: vtasks_db
        image: mysql:5.7.28
        restart: always
        environment:
            - MYSQL_DATABASE=DockerVTasks
            - MYSQL_USER=docker_user
            - MYSQL_PASSWORD=4321
            - MYSQL_ALLOW_EMPTY_PASSWORD=false
            - MYSQL_ROOT_PASSWORD=321
            - TZ=Europe/Kiev

        volumes:
            - ${DB_PATH_HOST}:/var/lib/mysql


    adminer:
      container_name: vtasks_adminer
      image: adminer
      restart: always
      ports:
        - 8089:8080
      links:
        - db

as result I see :

$ docker-compose up -d --build     
Building web
Step 1/6 : FROM php:7.3-apache
 ---> 5af347316d4b
Step 2/6 : RUN apt-get update &&     apt-get install -y     python     libfreetype6-dev     libwebp-dev     libjpeg62-turbo-dev     libpng-dev     libzip-dev     nano     mc     git-core     curl     build-essential     openssl     libssl-dev     libgmp-dev     libldap2-dev     netcat     locate     && git clone https://github.com/nodejs/node.git     && cd node     && git checkout v12.0.0     && ./configure      && make      && make install
 ---> Using cache
 ---> b56b2543f6bd
Step 3/6 : RUN npm install cross-env
 ---> Using cache
 ---> f8abda742c47
Step 4/6 : RUN  docker-php-ext-configure gd --with-freetype-dir=/usr/include/ --with-webp-dir=/usr/include/  --with-jpeg-dir=/usr/include/
 ---> Using cache
 ---> df0636ba5b86
Step 5/6 : RUN  docker-php-ext-install gd pdo pdo_mysql zip gmp bcmath pcntl ldap sysvmsg exif && a2enmod rewrite
 ---> Using cache
 ---> 307c9f243f02
Step 6/6 : COPY virtualhost.conf /etc/apache2/sites-enabled/000-default.conf
 ---> Using cache
 ---> 3c733883faaa

Successfully built 3c733883faaa
Successfully tagged ebiven/vue-cli:latest
Recreating vtasks_web ... 
vtasks_db is up-to-date
Recreating vtasks_web
Recreating vtasks_web ... done
serge@athoe:/mnt/_work_sdb8/wwwroot/lar/VApps/vtasks/_Docker$ docker logs --tail=40  vtasks_web

> node-sass@4.13.0 install /var/www/vtasks_docker_root/node_modules/node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.13.0/linux-x64-72_binding.node
Download complete
Binary saved to /var/www/vtasks_docker_root/node_modules/node-sass/vendor/linux-x64-72/binding.node
Caching binary to /root/.npm/node-sass/4.13.0/linux-x64-72_binding.node

> core-js@3.6.1 postinstall /var/www/vtasks_docker_root/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> ejs@2.7.4 postinstall /var/www/vtasks_docker_root/node_modules/ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)


> node-sass@4.13.0 postinstall /var/www/vtasks_docker_root/node_modules/node-sass
> node scripts/build.js

Binary found at /var/www/vtasks_docker_root/node_modules/node-sass/vendor/linux-x64-72/binding.node
Testing binary
Binary is fine
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 1239 packages from 876 contributors and audited 19413 packages in 26.747s
found 0 vulnerabilities

I see node_modules directory is generated, but also I need to run

npm run serve

after

npm install

MODIFIED BLOCK # 2 :

Modified command as

command: bash -c "npm install && npm run serve"

I have got next output without errors:

$ docker logs --tail=20  vtasks_web
<s> [webpack.Progress] 93% after chunk asset optimization
<s> [webpack.Progress] 93% asset optimization
<s> [webpack.Progress] 94% after asset optimization
<s> [webpack.Progress] 94% after seal
<s> [webpack.Progress] 95% emitting
<s> [webpack.Progress] 95% emitting HtmlWebpackPlugin
<s> [webpack.Progress] 95% emitting CopyPlugin
<s> [webpack.Progress] 98% after emitting
<s> [webpack.Progress] 98% after emitting CopyPlugin
 DONE  Compiled successfully in 10316ms4:36:18 AM

<s> [webpack.Progress] 100% 


  App running at:
  - Local:   http://localhost:8080/ 

  It seems you are running Vue CLI inside a container.
  Access the dev server via http://localhost:<your container's external mapped port>/

But which url have I to run ? On

 http://localhost:8080/

I got error :

 This site can’t be reachedlocalhost 
 refused to connect.

I tried to set some code for format : but I am not sure what they call :

your container's external mapped port

?

But which syntax have I to use?

MODIFIED BLOCK # 3

Running

http://localhost:8080/ 

at my browser I got eror :

This site can’t be reached
localhost refused to connect.


Checking logs I see : $ docker logs --tail=40 vtasks_web
<s> [webpack.Progress] 87% after chunk id optimization
<s> [webpack.Progress] 87% record modules
<s> [webpack.Progress] 87% record modules RecordIdsPlugin
<s> [webpack.Progress] 87% record chunks
<s> [webpack.Progress] 87% record chunks RecordIdsPlugin
<s> [webpack.Progress] 88% hashing
<s> [webpack.Progress] 88% after hashing
<s> [webpack.Progress] 88% after hashing HotModuleReplacementPlugin
<s> [webpack.Progress] 89% record hash
<s> [webpack.Progress] 89% module assets processing
<s> [webpack.Progress] 90% chunk assets processing
<s> [webpack.Progress] 90% additional chunk assets processing
<s> [webpack.Progress] 90% additional chunk assets processing HotModuleReplacementPlugin
<s> [webpack.Progress] 91% recording
<s> [webpack.Progress] 91% recording HotModuleReplacementPlugin
<s> [webpack.Progress] 92% additional asset processing
<s> [webpack.Progress] 92% chunk asset optimization
<s> [webpack.Progress] 93% after chunk asset optimization
<s> [webpack.Progress] 93% asset optimization
<s> [webpack.Progress] 94% after asset optimization
<s> [webpack.Progress] 94% after seal
<s> [webpack.Progress] 95% emitting
<s> [webpack.Progress] 95% emitting HtmlWebpackPlugin
<s> [webpack.Progress] 95% emitting CopyPlugin
<s> [webpack.Progress] 98% after emitting
<s> [webpack.Progress] 98% after emitting CopyPlugin
 DONE  Compiled successfully in 11638ms12:10:15 PM

<s> [webpack.Progress] 100% 


  App running at:
  - Local:   http://localhost:8080/ 

  It seems you are running Vue CLI inside a container.
  Access the dev server via http://localhost:<your container's external mapped port>/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

But in my _Docker/docker-compose.yml I have options :

ports:
    - "8088:80"

Actually I have several docker projects, like :

$ docker ps                                                                                                                                                
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS                          PORTS                    NAMES                                                                    
99bc972f0840        ebiven/vue-cli      "docker-php-entrypoi"   32 hours ago        Up 8 minutes                    0.0.0.0:8088->80/tcp     vtasks_web                                                             
fcb6d879effa        adminer             "entrypoint.sh docke"   2 weeks ago         Up 8 minutes                    0.0.0.0:8089->8080/tcp   vtasks_adminer                                                         
b0b81c6587bb        mysql:5.7.28        "docker-entrypoint.s"   2 weeks ago         Restarting (1) 47 seconds ago                            vtasks_db       

The issue with ports is confusing...

Thanks!

Answer 1

• First, please check your Dockerfile for vue app. You have to include EXPOSE instruction.
• Then make sure your docker-compose correctly maps your hosting machine port to internal docker port

ports:
  - LOCAL_PORT:PORT_YOU_EXPOSED_IN_DOCKERFILE

Answer 2

The way I do in my docker-compose files is:

command: bash -c "npm install && npm run serve"

Answer 3

You need to create a "named volume" for both the node_modules directory and the dist directory so that those directories won't be overwritten by your bind mount (this thing: ${APP_PATH_HOST}:${APP_PTH_CONTAINER}).

This tutorial explains it better:

The second is a named volume, node_modules. When Docker runs the npm install instruction listed in the application Dockerfile, npm will create a new node_modules directory on the container that includes the packages required to run the application. The bind mount we just created will hide this newly created node_modules directory, however. Since node_modules on the host is empty, the bind will map an empty directory to the container, overriding the new node_modules directory and preventing our application from starting. The named node_modules volume solves this problem by persisting the contents of the /home/node/app/node_modules directory and mounting it to the container, hiding the bind.

To do this you can add two new volumes under the web service and add them under volumes at the bottom of your docker-compose.yml too:

web:
    volumes:
        - ${APP_PATH_HOST}:${APP_PTH_CONTAINER}
        - node_modules:${APP_PTH_CONTAINER}/node_modules
        - dist:${APP_PTH_CONTAINER}/dist

volumes:
  node_modules:
  dist:

I got VueCLI working in Docker with the following files:

Dockerfile:

FROM node:lts-alpine

# install simple http server for serving static content
RUN npm install --quiet -g http-server

# install the vue-cli
RUN npm install --quiet --global \
      @vue/cli

# create app directory
RUN mkdir /app

# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json /app/

# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . /app/

# make the 'app' folder the current working directory
WORKDIR /app

# install project dependencies
RUN npm install

# build the app
RUN npm run build

docker-compose.yml:

version: '3'

services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/app
      - node_modules:/app/node_modules
      - dist:/app/dist
    ports:
      - "8080:8080"
    # uncomment command below to run development version
    # command: "npm run serve"
    command: "http-server dist"

volumes:
  node_modules:
  dist:

I ran docker-compose up and then my app was available at http://localhost:8080/.

After updating your Dockerfile for the first time, be sure to rebuild the container, e.g. docker-compose up --build.