Vue.js를 연습하는 도중 간단한 webpack-simple 프로젝트를 npm으로 다운로드받아서 테스트 후 업로드를 해보았는데...
git에 push하고 집에 가려는데 갑자기 email 폭탄이 날아오더니, 특정 파일의 취약한 버전이 발견되어 이를 수정하기를 권고하는 내용이었다.
package-lock.json에 작성된 js-yaml 버전이 낮으니 패치하길 권고package-lock.json에 작성된 minimist 버전이 낮으니 패치하길 권고
이렇게 업데이트 메시지가 나오는 이유에 대해서는 두말 할 것 없이, 당연 취약해서다.
취약한 버전이거나, 버그가 있거나 하여 이를 fix한 버전으로 업데이트하라는 말이다.
그런데 npm install을 수행할 때 package-lock.json에 기재된 버전 정보가 낮을 경우 Security Alert를 Mail로 Bot이 자동으로 보내주는 형태인 것 같다.
이를 해결하기 위해 많은 삽질을 하던 중 다음과 같은 결과가 나와 업데이트를 수행할 수 있었다.
1. NPM Warning Message
npm에서는 자체적으로 audit 기능을 제공한다.
이 명령어를 이용하면 일반적으로 서브 버전의 차이일 경우 해결이 가능하다.
그러나 이 기능을 활용하여 fix 명령어를 입력해보았지만, 크게 변화가 없었다.
이에 대한 명령어와 결과는 다음과 같이 나타났다.
npm audit command
$ npm audit fix
after audit fix command...
⚡ root@ubuntu .../study/study021 master ● npm audit fix
npm WARN webpack-dev-middleware@1.12.2 requires a peer of webpack@^1.0.0 || ^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-server@2.11.5 requires a peer of webpack@^2.2.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.
up to date in 4.103s
24 packages are looking for funding
run `npm fund` for details
fixed 0 of 13 vulnerabilities in 10538 scanned packages
13 vulnerabilities required manual review and could not be updated
체크해볼 수 있는 취약한 버전으로 webpack-dev-server를 중심으로 고쳐보려 노력했다.
여기서 볼 수 있는 건, 현재 설치된 webpack-dev-server의 버전이 2.x 버전이기 때문에 3.x가 설치되지 않아 직접 dependency를 해결하라는 경고 메시지가 보인다.
정말 아쉽게도 이를 해결하기 위해서는 기존의 npm update webpack-dev-server와 같은 명령어로는 어림도 없었다.
2. Conclusion
위와 같은 버전 차이는 새로 설치해야 하는 문제이기 때문에, reinstall 과정을 수행해야 한다.
⚡ root@ubuntu .../study/study021 master ● npm install webpack-dev-server -save-devev
+ webpack-dev-server@3.10.3
added 219 packages from 168 contributors and audited 10479 packages in 11.716s
22 packages are looking for funding
run `npm fund` for details
found 14 moderate severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
Vue CLI는 Vue.js 프로젝트 생성을 돕는 vue 공식 CLI이다. Vue CLI를 통해 vue 명령어를 사용할 수 있게 되고, 빠른 프로젝트 생성 및 관리가 가능하다.
vue-cli 설치 방법(1)
$ npm install -g @vue/cli
vue-cli 설치 방법(2)
$ yarn global add @vue/cli
vue 명령 살펴보기
root@ubuntu:~# vue
Usage: vue <command> [options]
Options:
-V, --version output the version number
-h, --help output usage information
Commands:
init generate a new project from a template
list list available official templates
build prototype a new project
create (for v3 warning only)
help [cmd] display help for [cmd]
3. vue를 이용한 프로젝트 생성
프로젝트 생성시 vue-cli를 설치해두었으면 생각보다 편하게 설치가 가능하다. 물론 인터넷이 되어야 한다는 전제가 있다.
프로젝트를 구동하는 곳은 VMware라는 전제하에 외부의 Windows 환경에서 구동하고 싶었다. 그런데 VMware 내부에서는 접근이 가능하였으나, 외부에서는 접근이 안 되는 것을 확인하여, config 파일이 어딨는지 삽질하면서 다음과 같은 힌트를 얻었다.
root@ubuntu ~/VueJSProject/01 > npm run dev
> 01@1.0.0 dev /root/VueJSProject/01
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
1 10% building modules 3/7 modules 4 active ...dules/webpack/hot/log-apply-result.js
위의 파일에서 build/webpack.dev.conf.js에 config가 있는가 싶어서 살펴보았지만 다른 파일의 내용을 보라고 나타나 있었다. 그리고 좀 더 찾아보니 config 아래에 있는 index.js 파일에서 localhost에 대한 내용을 찾았다.
/*
config/index.js
*/
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
//host: 'localhost', // can be overwritten by process.env.HOST
host: '0.0.0.0'
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-```
