How to install vue/cli app under docker

General Discussions
1

Hello!
I want to install my @vue/cli 4.0.5 app under docker and I found package ebiven/vue-cli

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 :

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 ...ithub.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 ...eases/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){}"

...

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

...

> 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

But which syntax have I to use?

2

Who has installed vue/cli app under docker please share your expierence…

3

I’m also confused about this, looking forward to answers from professionals.

4

Hi there. From what I can tell, it seems like your confusion is in the command: portion of your docker-compose.yml
This is the command that docker-compose will run in your container after it is started, when you run the docker-compose up command.
Probably, you want to change that to npm run serve so when you bring up your cluster via docker-compose up, your vtasks_web container will start the webserver and make your app available.

The question you probably have now is “well how do I run npm-install in my vstasks_web container to install my npm dependencies, etc.?” The answer to that is via the docker-compose run command.

The sequence you might typically follow is:

docker-compose build #builds your images
docker-compose run --rm vtasks_web npm install #runs npm-install on a vtasks_web container, which will install your npm dependencies, and then removes the container. 
docker-compose up #bring up your cluster. this will then run `npm run serve` and start your server in the vtasks_web container, assuming your 'command:' entry in your docker-compose.yml is changed to "npm run serve"

A couple of notes about the docker-compose run command:

the command passed by run overrides the command defined in the service configuration (i.e. it won’t run whatever you have in the “command:” option in your docker-compose.yml, which in your case will presumably be ‘npm run serve’.)

[…] the command does not create any of the ports specified in the service configuration. This prevents port collisions with already-open ports. If you do want the service’s ports to be created and mapped to the host, specify the –service-ports flag (basically this means you can run a docker-run command even if you already have your cluster up, and it won’t interfere with the running containers’ networking/ports.)

Using volumes (which it appears you have configured already), the node_modules directory and anything else changed by npm install (package-lock.json perhaps) will persist on the host and be shared across container instances, and your source files on your host machine will be available to the container, so you should be good to go

5

Thanks everyone, I was able to finally do that.