Why can't I deploy a Vue web application with Docker? - docker

Question

Windows 10 Pro
Docker for Windows
I'm following a tutorial that should allow me to build and deploy a simple Vue.js application via Docker. I'm able to deploy the Django app as my backend and access via port 8000, but the frontend deployment fails. To be more specific, the frontend is built and then exits seconds later. Logs/Commands below
UPDATE:
I migrated to Linux and haven't looked back since. No problems in an Ubuntu environment. Docker for Windows might still need some work.
Docker log:
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 ERR! complete log:
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 ]
Frontend project creation commands:
# 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 Project creation prompt:
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 command:
docker-compose -f docker-compose.yml up --build
Project Folder:
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
frontend folder:
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 in frontend folder:
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 in frontend folder:
#!/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 file in root folder:
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