我正在关注一个教程,该教程应该允许我通过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