docker simple index.html下运行vue/cli app打开

Posted 2023-02-22

技术标签:

【中文标题】docker simple index.html下运行vue/cli app打开【英文标题】：Runing vue/cli app under docker simple index.html is opened 【发布时间】：2020-04-16 20:26:28 【问题描述】：

我想在 docker 下安装我的 @vue/cli 4.0.5 应用程序，我找到了这个包 https://hub.docker.com/r/ebiven/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？

什么是有效方式？

修改块： 在https://github.com/ebiven/docker-vue-cli 看演示，我看到了 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 "tryrequire('./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>/

但是我要运行哪个网址？开

 http://localhost:8080/

我有错误：

 This site can’t be reachedlocalhost 
 refused to connect.

我尝试为格式设置一些代码：但我不确定他们叫什么：

您的容器的外部映射端口

但是我应该使用哪种语法？

修改区块#3

跑步

http://localhost:8080/

在我的浏览器中出现错误：

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-compose.yml 我有选项：

ports:
    - "8088:80"

其实我有几个 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

端口的问题令人困惑......

谢谢！

【问题讨论】：

请看 MODIFIED BLOCK 谁在docker下安装了vue/cli app请分享你的经验... 请看 MODIFIED BLOCK #3 端口格式是‘host:container’，所以试试‘8080:8080’，这样你就可以在你主机的8080端口访问你的应用了。不，我就是这个意思。您需要将 docker-compose.yml 文件中的端口值更改为 ports: - "8080:8080" 【参考方案1】： 首先，请检查您的 Dockerfile 以获取 vue 应用程序。您必须包含 EXPOSE 指令。然后确保您的 docker-compose 正确地将您的主机端口映射到内部 docker 端口

ports:
  - LOCAL_PORT:PORT_YOU_EXPOSED_IN_DOCKERFILE

【讨论】：

【参考方案2】：

我在 docker-compose 文件中的做法是：

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

【讨论】：

谢谢！请看 MODIFIED BLOCK #2 请看 MODIFIED BLOCK #3 你的vue客户端重定向到8080，但是你的docker-compose把8088重定向到80。把它改成“8080:8080”，然后你就可以在localhost:8080访问它了跨度> 【参考方案3】：

您需要为node_modules 目录和dist 目录创建一个“命名卷”，这样这些目录就不会被您的绑定挂载覆盖（这个东西：$APP_PATH_HOST:$APP_PTH_CONTAINER）。

This 教程解释得更好：

第二个是命名卷，node_modules。当 Docker 运行应用程序Dockerfile 中列出的npm install 指令时，npm 将在容器上创建一个新的node_modules 目录，其中包含运行应用程序所需的包。然而，我们刚刚创建的绑定挂载将隐藏这个新创建的node_modules 目录。由于主机上的node_modules 是空的，绑定会将一个空目录映射到容器，覆盖新的node_modules 目录并阻止我们的应用程序启动。命名为 node_modules 的卷通过持久化 /home/node/app/node_modules 目录的内容并将其挂载到容器中来解决此问题，隐藏绑定。

为此，您可以在web 服务下添加两个新卷，并将它们也添加到volumes 底部的docker-compose.yml 下：

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 simple index.html下运行vue/cli app打开的主要内容，如果未能解决你的问题，请参考以下文章

django-开发博客

使用 PHP Simple HTML DOM Parser 查找和删除 html 标签

markdown Docker Simple CheatSheets

docker 基础(2) 共享目录

A Simple Markdown Toturial

Docker的安装（centos下）