개발 환경 만들면서 뻘 짓했던 내용 보관용입니다.
(.venv) root@da0fa5dd7aae:~/drf_vue# npm install -g vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
/usr/bin/vue-init -> /usr/lib/node_modules/vue-cli/bin/vue-init
/usr/bin/vue -> /usr/lib/node_modules/vue-cli/bin/vue
/usr/bin/vue-list -> /usr/lib/node_modules/vue-cli/bin/vue-list
+ vue-cli@2.9.6
updated 1 package in 5.399s
(.venv) root@da0fa5dd7aae:~/drf_vue# vue init webpack frontend
? Project name frontend
? Project description A Vue.js project
? Author delphi <delphi@kolon.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
mended) npm
vue-cli · Generated "frontend".
# Installing project dependencies ...
# ========================
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
> uglifyjs-webpack-plugin@0.4.6 postinstall /root/drf_vue/frontend/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
added 1127 packages from 647 contributors and audited 10642 packages in 24.832s
found 2 vulnerabilities (1 moderate, 1 high)
run `npm audit fix` to fix them, or `npm audit` for details
╭───────────────────────────────────────────────────────────────╮
│ │
│ New minor version of npm available! 6.4.1 → 6.5.0 │
│ Changelog: https://github.com/npm/cli/releases/tag/v6.5.0 │
│ Run npm install -g npm to update! │
│ │
╰───────────────────────────────────────────────────────────────╯
# Project initialization finished!
# ========================
To get started:
cd frontend
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
나중에 시간날 때, npm WARN deprecated 이런 부분들은 정리해 보려고 합니다.
(.venv) root@da0fa5dd7aae:~/drf_vue# cd frontend/
(.venv) root@da0fa5dd7aae:~/drf_vue/frontend# npm install
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
audited 10642 packages in 9.019s
found 2 vulnerabilities (1 moderate, 1 high)
run `npm audit fix` to fix them, or `npm audit` for details
이게 왜 이런 메시지가 출력되는 걸까요?
하라는 데로, npm audit을 돌려 봅니다. ㅠ.ㅠ
(.venv) root@da0fa5dd7aae:~/drf_vue/frontend# npm audit
=== npm audit security report ===
# Run npm install --save-dev webpack-dev-server@3.1.10 to resolve 1 vulnerability
SEMVER WARNING: Recommended action is a potentially breaking change
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High │ Missing Origin Validation │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ webpack-dev-server │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ webpack-dev-server [dev] │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ webpack-dev-server │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://nodesecurity.io/advisories/725 │
└───────────────┴──────────────────────────────────────────────────────────────┘
# Run npm install --save-dev url-loader@1.1.2 to resolve 1 vulnerability
SEMVER WARNING: Recommended action is a potentially breaking change
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate │ Regular Expression Denial of Service │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ mime │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ url-loader [dev] │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ url-loader > mime │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://nodesecurity.io/advisories/535 │
└───────────────┴──────────────────────────────────────────────────────────────┘
found 2 vulnerabilities (1 moderate, 1 high) in 10642 scanned packages
2 vulnerabilities require semver-major dependency updates.
일단 확인한 김에, package.json도 확인해 본다.
(.venv) root@da0fa5dd7aae:~/drf_vue/frontend# cat package.json
{
"name": "frontend",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "delphi <delphi@kolon.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
참고로 npm 버전도 확인해 봅니다.
(.venv) root@da0fa5dd7aae:~/drf_vue/frontend# npm -v
6.4.1
(.venv) root@da0fa5dd7aae:~/drf_vue/frontend# python -V
Python 3.6.6
(.venv) root@da0fa5dd7aae:~/drf_vue/frontend# pip list
DEPRECATION: The default format will switch to columns in the future. You can use --format=(legacy|columns) (or define a format=(legacy|columns) in your pip.conf under the [list] section) to disable this warning.
Django (2.1.4)
django-cors-headers (2.4.0)
djangorestframework (3.9.0)
pip (9.0.1)
pkg-resources (0.0.0)
pytz (2018.7)
setuptools (39.0.1)
wheel (0.32.3)
Audit 이슈가 있으니, 아래 내용을 적용을 해 보려고 합니다.
npm install --save-dev webpack-dev-server@3.1.10
npm install --save-dev url-loader@1.1.2
(.venv) root@da0fa5dd7aae:~/drf_vue/frontend# npm install --save-dev webpack-dev-server@3.1.10
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-server@3.1.10 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-middleware@3.4.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
+ webpack-dev-server@3.1.10
added 37 packages from 16 contributors, removed 80 packages, updated 13 packages and audited 11423 packages in 12.914s
found 1 moderate severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
이런!!! 이런 경우를 점입가경이라고 하나요?
어디까지 가는지 한번 가 보겠습니다.
(.venv) root@da0fa5dd7aae:~/drf_vue/frontend# npm audit
=== npm audit security report ===
# Run npm install --save-dev url-loader@1.1.2 to resolve 1 vulnerability
SEMVER WARNING: Recommended action is a potentially breaking change
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate │ Regular Expression Denial of Service │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ mime │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ url-loader [dev] │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ url-loader > mime │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://nodesecurity.io/advisories/535 │
└───────────────┴──────────────────────────────────────────────────────────────┘
found 1 moderate severity vulnerability in 11423 scanned packages
1 vulnerability requires semver-major dependency updates.
(.venv) root@da0fa5dd7aae:~/drf_vue/frontend# cat package.json
{
"name": "frontend",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "delphi <delphi@kolon.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^3.1.10",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
돌려보니 아까 문제를 해결하라는 말입니다. :)
(.venv) root@da0fa5dd7aae:~/drf_vue/frontend# npm install --save-dev url-loader@1.1.2
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-middleware@3.4.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-server@3.1.10 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
+ url-loader@1.1.2
added 4 packages from 2 contributors, updated 2 packages and audited 11432 packages in 9.618s
found 0 vulnerabilities
일단 완료된 느낌입니다.
(.venv) root@da0fa5dd7aae:~/drf_vue/frontend# cat package.json
{
"name": "frontend",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "delphi <delphi@kolon.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^1.1.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^3.1.10",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
일단 무사히 완료가 된 느낌이긴 한데, 더 진행하면서 변동 사항이 있는지 확인해 보겠습니다.
여기까지 진행 사항을 git에 올려 봅니다.
(.venv) root@da0fa5dd7aae:~/drf_vue# git add .
(.venv) root@da0fa5dd7aae:~/drf_vue# git commit -m "npm install patch 완료"
[master c539012] npm install patch 완료
25 files changed, 11310 insertions(+)
create mode 100644 frontend/.babelrc
create mode 100644 frontend/.editorconfig
create mode 100644 frontend/.gitignore
create mode 100644 frontend/.postcssrc.js
create mode 100644 frontend/README.md
create mode 100644 frontend/build/build.js
create mode 100644 frontend/build/check-versions.js
create mode 100644 frontend/build/logo.png
create mode 100644 frontend/build/utils.js
create mode 100644 frontend/build/vue-loader.conf.js
create mode 100644 frontend/build/webpack.base.conf.js
create mode 100755 frontend/build/webpack.dev.conf.js
create mode 100644 frontend/build/webpack.prod.conf.js
create mode 100644 frontend/config/dev.env.js
create mode 100644 frontend/config/index.js
create mode 100644 frontend/config/prod.env.js
create mode 100644 frontend/index.html
create mode 100644 frontend/package-lock.json
create mode 100644 frontend/package.json
create mode 100644 frontend/src/App.vue
create mode 100644 frontend/src/assets/logo.png
create mode 100644 frontend/src/components/HelloWorld.vue
create mode 100644 frontend/src/main.js
create mode 100644 frontend/src/router/index.js
create mode 100644 frontend/static/.gitkeep
(.venv) root@da0fa5dd7aae:~/drf_vue# git push origin master
Password for 'http://delphi@pydoumi.mooo.com:9000':
오브젝트 개수 세는 중: 33, 완료.
Delta compression using up to 16 threads.
오브젝트 압축하는 중: 100% (29/29), 완료.
오브젝트 쓰는 중: 100% (33/33), 88.80 KiB | 4.93 MiB/s, 완료.
Total 33 (delta 1), reused 0 (delta 0)
remote: Resolving deltas: 100% (1/1)
remote: Updating references: 100% (1/1)
To http://pydoumi.mooo.com:9000/delphi/drf_vue
a3baf17..c539012 master -> master
이러는 사이에 django server에서 아래와 같은 메시지가 출력되었는데, 언제 발생한 걸까요? ㅠ.ㅠ
[19/Dec/2018 02:59:31] "GET /favicon.ico HTTP/1.1" 404 1980
----------------------------------------
Exception happened during processing of request from ('104.152.52.39', 49395)
Traceback (most recent call last):
File "/usr/lib/python3.6/socketserver.py", line 651, in process_request_thread
self.finish_request(request, client_address)
File "/usr/lib/python3.6/socketserver.py", line 361, in finish_request
self.RequestHandlerClass(request, client_address, self)
File "/usr/lib/python3.6/socketserver.py", line 721, in __init__
self.handle()
File "/root/drf_vue/.venv/lib/python3.6/site-packages/django/core/servers/basehttp.py", line 151, in handle
self.handle_one_request()
File "/root/drf_vue/.venv/lib/python3.6/site-packages/django/core/servers/basehttp.py", line 161, in handle_one_request
self.raw_requestline = self.rfile.readline(65537)
File "/usr/lib/python3.6/socket.py", line 586, in readinto
return self._sock.recv_into(b)
ConnectionResetError: [Errno 104] Connection reset by peer
----------------------------------------
다시 실행해 봅니다.
^C(.venv) root@da0fa5dd7aae:~/drf_vue# ./manage.py runserver 0.0.0.0:8000
Performing system checks...
System check identified no issues (0 silenced).
December 19, 2018 - 03:33:55
Django version 2.1.4, using settings 'mysite.settings'
Starting development server at http://0.0.0.0:8000/
Quit the server with CONTROL-C.
실행도 정상적으로 되고, 접속 화면도 이상이 없어서 계속 진행해 보겠습니다.
npm run dev를 실행하면 localhost:8080으로 서비스가 시작됩니다. 이것을 0.0.0.0:8080으로 실행하기 위해 아래와 같이 변경합니다.
frontend/package.json 파일을 변경합니다.
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
를,
"scripts": {
"dev": "webpack-dev-server --host 0.0.0.0 --disableHostCheck --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
이렇게 변경해 줍니다.
(.venv) root@da0fa5dd7aae:~/drf_vue/frontend# npm run dev
> frontend@1.0.0 dev /root/drf_vue/frontend
> webpack-dev-server --host 0.0.0.0 --disableHostCheck --inline --progress --config build/webpack.dev.conf.js
The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
-> When using yarn: yarn add -D webpack-cli
module.js:550
throw err;
^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
at Function.Module._resolveFilename (module.js:548:15)
at Function.Module._load (module.js:475:25)
at Module.require (module.js:597:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/root/drf_vue/frontend/node_modules/webpack-dev-server/bin/webpack-dev-server.js:84:1)
at Module._compile (module.js:653:30)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! frontend@1.0.0 dev: `webpack-dev-server --host 0.0.0.0 --disableHostCheck --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the frontend@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2018-12-19T03_38_10_303Z-debug.log
왜 이런 일이 !!!
과연 해결할 수 있을지 장담할 수는 없지만, log를 들여다 봅니다. ㅠ.ㅠ
(.venv) root@da0fa5dd7aae:~/drf_vue/frontend# cat /root/.npm/_logs/2018-12-19T03_38_10_303Z-debug.log
0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'dev' ]
2 info using npm@6.4.1
3 info using node@v8.12.0
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle frontend@1.0.0~predev: frontend@1.0.0
6 info lifecycle frontend@1.0.0~dev: frontend@1.0.0
7 verbose lifecycle frontend@1.0.0~dev: unsafe-perm in lifecycle true
8 verbose lifecycle frontend@1.0.0~dev: PATH: /usr/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/root/drf_vue/frontend/node_modules/.bin:/root/drf_vue/.venv/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
9 verbose lifecycle frontend@1.0.0~dev: CWD: /root/drf_vue/frontend
10 silly lifecycle frontend@1.0.0~dev: Args: [ '-c',
10 silly lifecycle 'webpack-dev-server --host 0.0.0.0 --disableHostCheck --inline --progress --config build/webpack.dev.conf.js' ]
11 silly lifecycle frontend@1.0.0~dev: Returned: code: 1 signal: null
12 info lifecycle frontend@1.0.0~dev: Failed to exec dev script
13 verbose stack Error: frontend@1.0.0 dev: `webpack-dev-server --host 0.0.0.0 --disableHostCheck --inline --progress --config build/webpack.dev.conf.js`
13 verbose stack Exit status 1
13 verbose stack at EventEmitter.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack at emitTwo (events.js:126:13)
13 verbose stack at EventEmitter.emit (events.js:214:7)
13 verbose stack at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at emitTwo (events.js:126:13)
13 verbose stack at ChildProcess.emit (events.js:214:7)
13 verbose stack at maybeClose (internal/child_process.js:915:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid frontend@1.0.0
15 verbose cwd /root/drf_vue/frontend
16 verbose Linux 4.15.0-42-generic
17 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "dev"
18 verbose node v8.12.0
19 verbose npm v6.4.1
20 error code ELIFECYCLE
21 error errno 1
22 error frontend@1.0.0 dev: `webpack-dev-server --host 0.0.0.0 --disableHostCheck --inline --progress --config build/webpack.dev.conf.js`
22 error Exit status 1
23 error Failed at the frontend@1.0.0 dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
구글 번역기로 돌려 봅니다.
This is probably not a problem with npm. There is likely additional logging output above.
이것은 아마 npm에 문제가 되지 않습니다. 위의 추가 로깅 출력이 있을 수 있습니다.
(.venv) root@da0fa5dd7aae:~/drf_vue/frontend# npm audit
=== npm audit security report ===
found 0 vulnerabilities
in 11432 scanned packages
npm audit도 문제가 없는데, 뭐가 잘 못 된걸까요? 아 놔~~ ㅠ.ㅠ
The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
CLI는 webpack-cli라는 별도 패키지로 옮겨졌습니다.
CLI를 사용하려면 webpack 자체에 추가하여 'webpack-cli'를 설치하십시오.
이 문제로 webpack-cli를 검색하여 "http://www.daleseo.com/webpack-basics/"도 봤습니다.
그럼 webpack-cli를 설치해 주면 되는걸까요? O+_+O
(.venv) root@da0fa5dd7aae:~/drf_vue/frontend# npm i -D webpack-cli
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-middleware@3.4.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-server@3.1.10 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-cli@3.1.2 requires a peer of webpack@^4.x.x but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
+ webpack-cli@3.1.2
added 22 packages from 7 contributors and audited 11543 packages in 10.562s
found 0 vulnerabilities
이제 알았으니 npm audit 도 열심히 돌려 봅니다.
(.venv) root@da0fa5dd7aae:~/drf_vue/frontend# npm audit
=== npm audit security report ===
found 0 vulnerabilities
in 11543 scanned packages
문제가 없답니다.
그럼 다시 시작해 봅시다.
(.venv) root@da0fa5dd7aae:~/drf_vue/frontend# npm run dev
> frontend@1.0.0 dev /root/drf_vue/frontend
> webpack-dev-server --host 0.0.0.0 --disableHostCheck --inline --progress --config build/webpack.dev.conf.js
TypeError: Cannot destructure property `compile` of 'undefined' or 'null'.
at addHooks (/root/drf_vue/frontend/node_modules/webpack-dev-server/lib/Server.js:114:49)
at new Server (/root/drf_vue/frontend/node_modules/webpack-dev-server/lib/Server.js:127:5)
at startDevServer (/root/drf_vue/frontend/node_modules/webpack-dev-server/bin/webpack-dev-server.js:355:14)
at processOptions (/root/drf_vue/frontend/node_modules/webpack-dev-server/bin/webpack-dev-server.js:309:5)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:189:7)
at Function.Module.runMain (module.js:696:11)
at startup (bootstrap_node.js:204:16)
at bootstrap_node.js:625:3
허허...나 참....
package.json을 원래대로 돌리고 다시 실행해 봅니다. ㅠ.ㅠ
export HOST=0.0.0.0 까지 해 봐도 안됩니다.
다시 설치해 보려고 합니다.
혹시나 하는 마음에 다시 install 돌려 봅니다.
(.venv) root@da0fa5dd7aae:~/drf_vue/frontend# npm install
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-cli@3.1.2 requires a peer of webpack@^4.x.x but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-middleware@3.4.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-server@3.1.10 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
audited 11543 packages in 9.505s
found 0 vulnerabilities
webpack을 4.0.0으로 찾고 있어 올려 봅니다.
(.venv) root@da0fa5dd7aae:~/drf_vue/frontend# npm i -D webpack@^4.0.0
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN html-webpack-plugin@2.30.1 requires a peer of webpack@1 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
+ webpack@4.27.1
added 43 packages from 17 contributors, removed 59 packages, updated 4 packages and audited 12632 packages in 12.053s
found 0 vulnerabilities
(.venv) root@da0fa5dd7aae:~/drf_vue/frontend# npm install
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN html-webpack-plugin@2.30.1 requires a peer of webpack@1 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
audited 12632 packages in 8.592s
found 0 vulnerabilities
아무래도 의존성 문제가 심각한 듯 합니다.
다시 원복합니다. ㅠ.ㅠ
(.venv) root@da0fa5dd7aae:~/drf_vue# rm -Rf frontend
