打开docker simple index.html下运行vue/cli应用程序
我想在docker下安装我的@vue/cli 4.0.5应用程序,我找到了此软件包 假设这就是我需要的(?)我用打开docker simple index.html下运行vue/cli应用程序,docker,vue.js,vuejs2,vue-cli,Docker,Vue.js,Vuejs2,Vue Cli,我想在docker下安装我的@vue/cli 4.0.5应用程序,我找到了此软件包 假设这就是我需要的(?)我用 web: container_name: vtasks_web build: context: ./web dockerfile: Dockerfile.yml environment: - APACHE_RUN_USER=www-data volumes: - ${APP_PATH_
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
构建应用程序和下一步检查日志我没有错误,还创建了节点_模块(我先将其删除):
但是进入灌木丛我就跑
npm run serve
命令,它显示:
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.
在网络的容器中,我设置了8088:80
但在浏览器中,我看到index.html是打开的(按标题和页面内容),而不是js呈现的
什么是有效途径
修改的块:
看看演示,我明白了
ebiven/docker vue cli用作web容器,因此删除node_modules目录并重新生成我的_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
因此,我看到:
$ 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
我看到node_modules目录是生成的,但我还需要运行
npm run serve
之后
npm install
修改块#2:
将命令修改为
command: bash -c "npm install && npm run serve"
我得到了下一个输出,没有错误:
$ 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>/
我得到一个错误:
This site can’t be reachedlocalhost
refused to connect.
我试图为格式设置一些代码:
但我不确定他们叫什么:
容器的外部映射端口
?
但是我必须使用哪种语法呢
修改块#3
运行
http://localhost:8080/
在我的浏览器中,我看到了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.
实际上我有几个docker项目,比如:
$ 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
端口的问题令人困惑
谢谢 您需要为node\u modules
目录和dist
目录创建一个“命名卷”,这样绑定装载就不会覆盖这些目录(这个东西:${APP\u PATH\u HOST}:${APP\u PTH\u CONTAINER}
)
本教程对此进行了更好的解释:
第二个是命名卷,node\u modules
。当Docker运行应用程序Dockerfile
中列出的npm安装
指令时,npm
将在容器上创建一个新的节点模块
目录,其中包含运行应用程序所需的包。但是,我们刚刚创建的绑定挂载将隐藏这个新创建的节点\u modules
目录。由于主机上的node\u modules
为空,因此绑定会将一个空目录映射到容器,覆盖新的node\u modules
目录并阻止应用程序启动。命名的node_modules
卷通过持久化/home/node/app/node_modules
目录的内容并将其装载到容器中,隐藏绑定来解决此问题
为此,您可以在web
服务下添加两个新卷,并将它们添加到docker compose.yml底部的volumes
下:
web:
volumes:
- ${APP_PATH_HOST}:${APP_PTH_CONTAINER}
- node_modules:${APP_PTH_CONTAINER}/node_modules
- dist:${APP_PTH_CONTAINER}/dist
volumes:
node_modules:
dist:
我让VueCLI在Docker中使用以下文件:
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:
我运行了docker compose up
,然后我的应用程序在http://localhost:8080/
第一次更新Dockerfile
后,请确保重建容器,例如docker compose-up--build
我在docker compose文件中的方式是:
command: bash -c "npm install && npm run serve"
- 首先,请检查vue应用程序的Dockerfile。你必须包括暴露指令
- 然后确保docker compose将主机端口正确映射到内部docker端口
请查看MODIFIED BLOCK谁在docker下安装了vue/cli应用请分享您的经验…请查看MODIFIED BLOCK#3端口格式为“主机:容器”,因此请尝试“8080:8080”,以便您可以访问主机上8080端口上的应用。不,这是我的意思。您需要将docker-compose.yml文件中的端口值更改为ports:-“8080:8080”
谢谢!请查看修改的块#2请查看修改的块#3您的vue客户端正在重定向到8080,但您的docker compose正在将8088重定向到80。将其更改为“8080:8080”,然后您将能够在上访问它
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
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:
command: bash -c "npm install && npm run serve"
ports:
- LOCAL_PORT:PORT_YOU_EXPOSED_IN_DOCKERFILE