0

Vue.jsの開発環境をDockerで構築する手順 - Qiita

上記の記事を参考にdockerを用いてVueの環境構築をしています。

docker build --tag zatu:latest --file Dockerfile .

でイメージを作成し、

docker run --rm -it --name zatu1 -p 8080:8080 -v ${PWD}:/zatubako -v /zatubako/node_modules zatu:latest

でコンテナを起動しようとしましたが、以下のエラーが出ました。

npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /zatubako/package.json
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/zatubako/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-05-21T08_57_53_482Z-debug.log

どうかご享受お願いします。

Dokcerfile

FROM node:10.17.0-alpine3.9
WORKDIR /zatubako
COPY package*.json ./
RUN npm install
CMD ["npm", "run", "serve"]

ディレクトリ構成

.
├── zatubako
│   ├── babel.config.js
│   ├── dist 
│   ├── node_modules
│   │   └── ...
│   ├── package.json
│   ├── public
│   │   ├── favicon.ico
│   │   └── index.html
│   ├── README.md
│   ├── src
├── README.md
└── dockerfile
├── .dockerignore
└── docker-compose.yml

Package.json

{
  "name": "zatubako",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  },
  {
  "scripts": {
    "serve": "node_modules/.bin/vue-cli-service serve"
  }
}

}
0

1 件の回答 1

0

マウントしているディレクトリが間違っていそうです。

おそらくDockerfileのある場所でdocker runを実行しているでしょうから、そこからみてpackage.jsonの位置はzatubako/package.jsonに存在します。

つまり、実行コマンドは次のようになると考えられます。

docker run --rm -it --name zatu1 -p 8080:8080 -v ${PWD}/zatubako:/zatubako -v /zatubako/node_modules zatu:latest

追記

package.jsonがJSONのsyntax errorを起こしています。正しくは以下の通りです。

{
  "name": "zatubako",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  },
  "scripts": {
    "serve": "node_modules/.bin/vue-cli-service serve"
  }
}
6
  • 返信ありがとうございます。再度イメージをビルドし上記のコマンドを実行したところ、また上記のようなエラーが出てしまいました。ただ今回はnpm ERR! JSON.parse Failed to parse json・・・のようなエラーでしたので、おそらくpackage.jsonがおかしいのかなとおもいました
    – Tikka
    2020年5月23日 9:17
  • package.jsonの情報の追記をお願いします。
    – himenon
    2020年5月23日 9:33
  • package.jsonを追加しました。またnpm install --save @vue/cli-serviceで vue-cli-serviceをインストールしていますがそれがうまく機能していないようです。
    – Tikka
    2020年5月23日 9:48
  • 回答に追記しました。たとえばJSONの有効性を jsonformatter.curiousconcept.com なものでチェックするのもありです。
    – himenon
    2020年5月23日 9:50
  • 返信ありがとうございます。上記のpackage.jsonにかえてdocker runをおこなったのですがnpm ERR! zatubako@1.0.0 serve: vue-cli-service serve npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the zatubako@1.0.0 serve script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. のようなエラーが出てしまいます。
    – Tikka
    2020年5月23日 12:47

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。