docker-composeでVue.js環境を作った時に詰まった話

docker-composeを使ってVue環境を構築したとき、vueプロジェクトができないというエラーが生じたので解決方法を書いておきます。

環境

Windows Home
Docker version 19.03.1, build 74b1e89e8a
docker-compose version 1.24.1, build 4667896b
※　Windows Homeなのでdocker toolBoxを使っています。

DockerFileとdocker-compose file

DockerFile

FROM node:latest
WORKDIR /app
RUN yarn global add @vue/cli

docker-compose.yml

version: '3'
services:
  web:
    build: . 
    ports:
      - 8080:8080
    volumes:
      - ./app:/app
    stdin_open: true
    tty: true
    command: npm run serve

起こったこと

docker-compose build

して、イメージを作成したところまでは良かったのですが、

docker-compose run web vue create .

と実行してVueプロジェクトを作成すると、以下のようなエラーが生じました。

Vue CLI v4.3.1
? Generate project in current directory? Yes


Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: NPM


Vue CLI v4.3.1
✨  Creating project in /app.
⚙️  Installing CLI plugins. This might take a while...

npm ERR! code EPROTO
npm ERR! syscall symlink
npm ERR! path ../@babel/parser/bin/babel-parser.js
npm ERR! dest /app/node_modules/.bin/parser       
npm ERR! errno -71
npm ERR! EPROTO: protocol error, symlink '../@babel/parser/bin/babel-parser.js' -> '/app/node_modules/.bin/parser'

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-05-04T10_23_38_694Z-debug.log
 ERROR  command failed: npm install --loglevel error

npm ERR! syscall symlink

と言われています。

これはWindows環境ではdocker-composeのvolumesで指定したローカルの/appにシンボリックリンクを貼れないということだと予想されます。

ちなみに、

    volumes:
      - ./app:/app

というdocker-compose.ymlの記述はローカルの/appというディレクトリにDockerコンテナの/appの中身をマウントしてねというイメージです。
（正確には違うかもしれないです。違っていたらごめんなさい）

参考：[メモ]vagrantでnpm install中に出たエラーまとめ - Qiita

解決方法

Docker Quickstart Terminalを起動するときに管理者権限で起動しましょう。
管理者権限で起動し、先ほどと同じコマンドを入力して実行するとVueプロジェクトの作成が正しく実行されます。
管理者権限で起動して、Docker Quickstart Terminalでエラーが出る場合は、
再起動を行うか、Virtual Boxで動いているdefaltという名前の仮想マシンを終了すれば管理者権限で起動できます。

結論

Docker toolboxは管理者権限で起動しましょう。
他にもnpm installやyarn installができないという報告もあり、特に問題がなければ管理者権限で起動するべきだと思いました。