Level 7
Give https://medium.com/@jwdobken/vue-with-docker-initialize-develop-and-build-51fad21ad5e6 a read.might be of help to you
1 like
Dec 26, 2019
5
Level 5
Runing vue/cli app under docker simple index.html is opened
Hello, 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 ?
Thanks!
Level 5
Thank you for the provided link . I modified the command line : modified node source from 11-alpine and renamed project name and installed the project, but running command
yarn serve
I got error that serve was not found :
me@athoe:/mnt/_work_sdb8/wwwroot/lar/VApps/DOCKER_TEST$ mkdir vtaskproject && cd "$_" && docker run --rm -v "${PWD}:/$(basename `pwd`)" -w "/$(basename `pwd`)" -it node:11-alpine sh -c "yarn global add @vue/cli && vue create ."
Unable to find image 'node:11-alpine' locally
11-alpine: Pulling from library/node
e7c96db7181b: Already exists
0119aca44649: Pull complete
40df19605a18: Pull complete
82194b8b4a64: Pull complete
Digest: sha256:8bb56bab197299c8ff820f1a55462890caf08f57ffe3b91f5fa6945a4d505932
Status: Downloaded newer image for node:11-alpine
yarn global v1.15.2
[1/4] Resolving packages...
warning @vue/cli > @vue/cli-ui > vue-cli-plugin-apollo > apollo > git-parse > babel-polyfill > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning @vue/cli > @vue/cli-ui > vue-cli-plugin-apollo > apollo > git-parse > babel-polyfill > babel-runtime > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
warning Your current version of Yarn is out of date. The latest version is "1.21.1", while you're on "1.15.2".
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
success Installed "@vue/[email protected]" with binaries:
- vue
Done in 32.17s.
? Your connection to the default yarn registry seems to be slow.
Use https://registry.npm.taobao.org for faster installation? Yes
Vue CLI v4.1.1
? Generate project in current directory? Yes
Vue CLI v4.1.1
? Please pick a preset: default (babel, eslint)
? Pick the package manager to use when installing dependencies: Yarn
Vue CLI v4.1.1
��� Creating project in /vtaskproject.
��� Installing CLI plugins. This might take a while...
yarn install v1.15.2
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
success Saved lockfile.
Done in 77.43s.
���� Invoking generators...
���� Installing additional dependencies...
yarn install v1.15.2
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 24.82s.
��� Running completion hooks...
���� Generating README.md...
���� Successfully created project vtaskproject.
���� Get started with the following commands:
$ yarn serve
me@athoe:/mnt/_work_sdb8/wwwroot/lar/VApps/DOCKER_TEST/vtaskproject$ yarn serve
00h00m00s 0/0: : ERROR: [Errno 2] No such file or directory: 'serve'
serge@athoe:/mnt/_work_sdb8/wwwroot/lar/VApps/DOCKER_TEST/vtaskproject$ yarn --version
0.32
I see that on successfull installation newly created project dir was selected.
Also in the provided article next was :
Dockerfile
The Dockerfile is identical to the given example in the documentation. Only the build-stage is split up into an install-stage and a build-stage, since we don’t need to build when we are developing!
$ lsb_release -d; uname -r; uname -i
Description: Ubuntu 18.04.3 LTS
4.15.0-72-generic
x86_64
$ docker --version
Docker version 19.03.5, build 633a0ea838
But the thin is I do not see any Dockerfile file in the created project : https://imgur.com/a/mKrdFgi as I expected. Had Dockerfile be there and how move next ?
Level 5
I returned to 1st way with https://github.com/ebiven/docker-vue-cli and 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
> [email protected] 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
> [email protected] 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 -)
> [email protected] 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/)
> [email protected] 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: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: 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?
Level 5
Who has installed vue/cli app under docker please share your expierence...
Please or to participate in this conversation.