为什么我不能使用Docker部署Vue Web应用程序?

时间:2019-10-25 14:59:25

标签: docker vue.js deployment vue-cli

  • Windows 10专业版
  • 适用于Windows的Docker

我正在关注一个教程,该教程应该允许我通过Docker构建和部署简单的Vue.js应用程序。我可以将Django应用程序部署为后端,并可以通过端口8000访问,但是前端部署失败。更具体地说,先创建前端,然后在几秒钟后退出。下面的日志/命令

更新: 我迁移到Linux,此后再也没有回头。在Ubuntu环境中没有问题。适用于Windows的Docker可能仍需要一些工作。

Docker日志:

Recreating frontend ... done                                                                                                                                                                    Attaching to db, backend, frontend

frontend    | Cache verified and compressed (~/.npm/_cacache):
frontend    | Content verified: 0 (0 bytes)
frontend    | Index entries: 0
frontend    | Finished in 0.027s

    frontend    | npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/fsevents):
    frontend    | npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
    frontend    |
    frontend    | audited 928740 packages in 26.389s
    frontend    | found 1 high severity vulnerability
    frontend    |   run `npm audit fix` to fix them, or `npm audit` for details
    frontend    |
    frontend    | > code@0.1.0 serve /app
    frontend    | > vue-cli-service serve
    frontend    |
    frontend    | /app/node_modules/.bin/vue-cli-service: line 1: XSym: not found
    frontend    | /app/node_modules/.bin/vue-cli-service: line 2: 0042: not found
    frontend    | /app/node_modules/.bin/vue-cli-service: line 3: 9b6d22955dddeb6cfbc52c6ade7b03d0: not found
    frontend    | /app/node_modules/.bin/vue-cli-service: line 4: ../@vue/cli-service/bin/vue-cli-service.js: not found
    frontend    | npm ERR! code ELIFECYCLE
    frontend    | npm ERR! syscall spawn
    frontend    | npm ERR! file sh
    frontend    | npm ERR! errno ENOENT
    frontend    | npm ERR! code@0.1.0 serve: `vue-cli-service serve`
    frontend    | npm ERR! spawn ENOENT
    frontend    | npm ERR!
    frontend    | npm ERR! Failed at the code@0.1.0 serve script.
    frontend    | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    frontend    |
    frontend    | npm ERR! A complete log of this run can be found in:
    frontend    | npm ERR!     /root/.npm/_logs/2019-10-25T14_05_55_326Z-debug.log
    frontend exited with code 1

npm错误!完整的日志:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'serve' ]
2 info using npm@6.11.3
3 info using node@v12.12.0
4 verbose run-script [ 'preserve', 'serve', 'postserve' ]
5 info lifecycle code@0.1.0~preserve: code@0.1.0
6 info lifecycle code@0.1.0~serve: code@0.1.0
7 verbose lifecycle code@0.1.0~serve: unsafe-perm in lifecycle true
8 verbose lifecycle code@0.1.0~serve: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/app/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
9 verbose lifecycle code@0.1.0~serve: CWD: /app
10 silly lifecycle code@0.1.0~serve: Args: [ '-c', 'vue-cli-service serve' ]
11 info lifecycle code@0.1.0~serve: Failed to exec serve script
12 verbose stack Error: code@0.1.0 serve: `vue-cli-service serve`
12 verbose stack spawn ENOENT
12 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:48:18)
12 verbose stack     at ChildProcess.emit (events.js:210:5)
12 verbose stack     at maybeClose (internal/child_process.js:1021:16)
12 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
13 verbose pkgid code@0.1.0
14 verbose cwd /app
15 verbose Linux 4.9.184-linuxkit
16 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "serve"
17 verbose node v12.12.0
18 verbose npm  v6.11.3
19 error code ELIFECYCLE
20 error syscall spawn
21 error file sh
22 error errno ENOENT
23 error code@0.1.0 serve: `vue-cli-service serve`
23 error spawn ENOENT
24 error Failed at the code@0.1.0 serve script.
24 error This is probably not a problem with npm. There is likely additional logging output above.
25 verbose exit [ 1, true ]

前端项目创建命令:

# docker run --rm -it -v ~/dockerproject/frontend:/code node:12.12.0-alpine /bin/sh
# cd code
# npm i -g vue @vue/cli
# vue create .

Vue项目创建提示:

Vue CLI v4.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Jest
? Pick a E2E testing solution: Nightwatch
? Pick browsers to run end-to-end test on Chrome, Firefox
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: NPM

Docker-compose Build命令:

docker-compose -f docker-compose.yml up --build

项目文件夹:

Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----       10/24/2019   4:41 PM                backend
d-----       10/24/2019   3:53 PM                env
d-----       10/25/2019   7:33 AM                frontend
d-----       10/25/2019   9:05 AM                npmlogs
-a----       10/25/2019   8:58 AM            674 docker-compose.dev.yml
-a----       10/24/2019   3:53 PM            242 docker-compose.yml
-a----       10/23/2019  10:07 AM             52 README.md

前端文件夹:

Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----       10/25/2019   7:19 AM                node_modules
d-----       10/25/2019   7:13 AM                public
d-----       10/25/2019   7:13 AM                src
d-----       10/25/2019   7:13 AM                tests
-a----       10/25/2019   7:13 AM            160 .editorconfig
-a----       10/25/2019   7:21 AM            326 .gitignore
-a----       10/25/2019   7:22 AM             75 .gitkeep
-a----       10/25/2019   7:15 AM             76 babel.config.js
-a----       10/25/2019   7:26 AM            272 Dockerfile
-a----       10/25/2019   7:15 AM         577145 package-lock.json
-a----       10/25/2019   7:13 AM           1745 package.json
-a----       10/25/2019   7:15 AM            423 README.md
-a----       10/25/2019   7:33 AM            152 start_dev.sh

前端文件夹中的Dockerfile:

FROM node:12.12.0-alpine

# make the 'app' folder the current working directory
WORKDIR /app/

# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .

# expose port 8080 to the host
EXPOSE 8080

CMD ["sh", "start_dev.sh"]

前端文件夹中的start_dev.sh:

#!/bin/bash

# https://docs.npmjs.com/cli/cache
npm cache verify

# install project dependencies
npm install

# run the development server
npm run serve

在根文件夹中的Docker-compose文件:

version: '3'

services:
  db:
    container_name: db
    image: postgres
    networks:
      - main

  backend:
    container_name: backend
    build: ./backend
    command: /start.sh
    volumes:
      - .:/code
    ports:
      - "8000:8000"
    networks:
      - main
    depends_on:
      - db

  frontend:
    container_name: frontend
    build:
      context: ./frontend
    volumes:
      - ./frontend:/app/frontend:ro
      - '/app/node_modules'
      - ./npmlogs:/root/.npm/_logs/
    ports:
      - "8080:8080"
    networks:
      - main
    depends_on:
      - backend
      - db
    environment:
      - NODE_ENV=development

networks:
  main:
    driver: bridge

0 个答案:

没有答案