在docker simple index.html下运行vue / cli应用程序已打开

时间：2019-12-26 16:37:46

标签： docker vuejs2 vue-cli

我想在docker下安装我的@ vue / cli 4.0.5应用程序，我找到了这个软件包 https://github.com/ebiven/docker-vue-cli 假设这是我需要的（？）我用

修改了_Docker / docker-compose.yml 
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

构建应用程序并检查下一个日志，我没有错误，也创建了node_modules（我之前将其删除了）：

但是进入丛林我就奔跑

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.

所以我跑

http://localhost:8088/

就像在Web容器中一样，我设置了8088：80 但是在浏览器中，我看到打开了index.html（按标题和页面内容），但是未呈现js？

什么是有效方法？

已修改的块： 看一下{{3}}的演示，我看到了 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

但是我要使用哪种语法？

谢谢！

3 个答案:

答案 0 :(得分：1)

您需要同时为node_modules目录和dist目录创建一个“命名卷”，以便这些目录不会被您的绑定装载覆盖（此内容：{{1} }。

This教程对此进行了更好的解释：

第二个是命名卷${APP_PATH_HOST}:${APP_PTH_CONTAINER}。当Docker运行应用程序node_modules中列出的npm install指令时，Dockerfile将在容器上创建一个新的npm目录，其中包含运行该应用程序所需的软件包。但是，我们刚刚创建的绑定安装将隐藏此新创建的node_modules目录。由于主机上的node_modules为空，因此绑定会将一个空目录映射到容器，从而覆盖新的node_modules目录并阻止我们的应用程序启动。命名为node_modules的卷通过保留node_modules目录的内容并将其安装到容器中，从而隐藏了绑定，从而解决了这个问题。

要执行此操作，您可以在/home/node/app/node_modules服务下添加两个新卷，并将它们也添加在web底部的volumes下：

docker-compose.yml

我让VueCLI在Docker中使用以下文件工作：

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

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。

答案 1 :(得分：1)

我在docker-compose文件中执行的方式是：

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

答案 2 :(得分：0)

  • 首先，请检查您的Dockerfile for vue应用程序。您必须包括EXPOSE指令。
  • 然后确保您的docker-compose正确将主机端口映射到内部docker端口
ports:
  - LOCAL_PORT:PORT_YOU_EXPOSED_IN_DOCKERFILE
相关问题
最新问题