はじめに
Vue.jsで作成したアプリをCircleCIで自動デプロイしてみたいなと思ったので、DockerでのVue.js環境構築をしてみました。
✅ゴール
・Dockerの理解を深める
✅環境
Windows
✅参考
💻ローカルを汚さずdockerを使ってvue.jsの開発環境を作る[vuecli4]
今回はコチラをメインの参考記事として扱いました
💻Dockerを使ってVue CLI 3 の開発環境を構築する
上記記事でdocker-composeでの環境構築に失敗したので、こちらで再挑戦するもbuildでなぜか固まる(備忘録内記載)。
💻docker-composeを使ってVue.jsのプロジェクトを作成して、Dockerで動かしてみた
注意点!!
・Vue.jsプロジェクトをマウントした場合に、コンテナ側のnode_modulesが上書きされて、削除される場合があるので、マウントされないようにする
・プロジェクトが作成される時に作成される.gitignoreでは、node_modulesはデフォルトで無視されているので、Gitで共有していると、コンテナが立ち上がらなくなる
Dockerコマンドの場合
mkdir path/to/workdir cd vuejs-docker touch dockerfile
Dockerfileの編集
vi dockerfile ~~~~ FROM node:12.12.0-alpine WORKDIR /usr/src/app RUN apk update && \ npm install -g npm @vue/cli EXPOSE 9050 CMD ["/bin/sh"] ~~~~
Dockerビルド
docker build -t vue_app_image .
コンテナ起動
docker run -v `pwd`:/usr/src/app -p 9050:9050 --name app -it -d vue_app_image
起動を確認
docker ps >> 15fae21906f8 vue_app_image "docker-entrypoint.s…" 28 seconds ago Up 27 seconds 0.0.0.0:9050->9050/tcp app
コンテナに入る
docker exec -it app sh
Vueプロジェクトの作成
/usr/src/app # vue create .
ポートの番号書き換え
/usr/src/app # touch vue.config.js /usr/src/app # vi vue.config.js ~~~~ module.exports = { devServer: { port: 9050, host: '0.0.0.0', disableHostCheck: true, }, }; ~~~~
起動
/usr/src/app # npm run serve
確認

Dockerの停止
docker stop コンテナ名
Docker-compose コマンドの場合
※こちらは失敗しました。追記した後述の備忘録②で成功してます。
原因はおそらく同ディレクトリ内にVue.jsプロジェクトをマウントすることによって起きるnode_moduleのコンフリクトでした。
コンテナ生成でnode_moduleが作られた上にVue.jsのプロジェクト作成でnode_moduleを作るため、上書きなどトラブルのもととなる。
Dockerfile
FROM node:12.12.0-alpine WORKDIR /usr/src/app RUN apk update && \ npm install -g npm @vue/cli
docker-compose.yml
version: '3' services: app: build: . ports: - 9050:9050 volumes: - .:/usr/src/app stdin_open: true tty: true command: /bin/sh
コンテナのイメージをビルド
\workdir> docker-compose build Building app Step 1/3 : FROM node:12.12.0-alpine ---> 0fcfd7e52b09 Step 2/3 : WORKDIR /usr/src/app ---> Using cache ---> 60aa7df76924 Step 3/3 : RUN apk update && npm install -g npm @vue/cli ---> Using cache ---> 256ac7fbd552 Successfully built 256ac7fbd552 Successfully tagged workdir_app:latest
コンテナを起動
docker-compose up -d
コンテナに入る
docker-compose exec app sh
プロジェクト生成
/usr/src/app # vue create .
※以下質問のメモ
Your connection to the default yarn registry seems to be slow. Use https://registry.npm.taobao.org for faster installation? (Y/n) Y
デフォルトのヤーンレジストリへの接続が遅いようです。
インストールを高速化するには、https://registry.npm.taobao.orgを使用しますか? (はい/いいえ)
Generate project in current directory? Y
現在のディレクトリにプロジェクトを生成しますか?
vue.config.jsでポートの設定を変える
touch vue.config.js vi vue.config.js ~~~~ module.exports = { devServer: { port: 9050, host: '0.0.0.0', disableHostCheck: true, }, };
起動
/usr/src/app # npm run serve
http://localhost:9050/にアクセスするも失敗。
躓いた点
✅Dockerコマンドのケースでディレクトリを間違って2回目のコンテナ起動が上手くいかない
ビルドは成功
\chonm\path\to\workdir> docker build -t vue_app_image . Sending build context to Docker daemon 121.3MB Step 1/5 : FROM node:12.12.0-alpine ---> 0fcfd7e52b09 Step 2/5 : WORKDIR /usr/src/app ---> Using cache ---> 60aa7df76924 ---> Using cache ---> 256ac7fbd552 Step 4/5 : EXPOSE 9050 ---> Using cache ---> d504771f1c79 Successfully built d504771f1c79 Successfully tagged vue_app_image:latest SECURITY WARNING: You are building a Docker image from Windows against a non-Windows Docker host. All files and directories added to build context will have '-rwxr-xr-x' permissions. It is recommended to double check and reset permissions for sensitive files and directories.
起動に失敗
\chonm\path\to\workdir> docker run -v `pwd`:/usr/src/app -p 9050:9050 --name app -it -d vue_app_image C:\Program Files\Docker\Docker\resources\bin\docker.exe: Error response from daemon: Conflict. The container name "/app" is already in use by container "15fae21906f81a733fea77b31a69b4127e84938723e58106b5573fb8a25a419c". You have to remove (or rename) that container to be able to reuse that name. See 'C:\Program Files\Docker\Docker\resources\bin\docker.exe run --help'.
名前を再利用できるようにするには、そのコンテナーを削除(または名前変更)する必要があるとのこと。
確認すると見つけた
docker ps -a >> 15fae21906f8 vue_app_image "docker-entrypoint.s…" 2 hours ago Exited (137) 2 hours ago app
削除
docker rm 15fae21906f8
再起動
docker run -v `pwd`:/usr/src/app -p 9050:9050 --name app -it -d vue_app_image >> 8df42aebfa6fe218b3c2a7201a9c1c4230353b1ca756bf5e16aff377f653c8a6
✅docker-composeコマンドでmoduleエラー(未解決)
原因はマウントによるnode_moduleとのコンフリクトかと思われる。 参考
/usr/src/app # npm run serve ERROR Error: Cannot find module '../helpers/DefineOwnProperty' npm i DefineOwnProperty // 見つからない
仕方ないので1から作り直しでまさかのvue createできない問題。
usr/src/app # vue create . 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, Linter ? 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 npm ERR! code ENOENT npm ERR! syscall rename npm ERR! path /usr/src/app/node_modules/upath npm ERR! dest /usr/src/app/node_modules/.upath.DELETE npm ERR! errno -2 npm ERR! enoent ENOENT: no such file or directory, rename '/usr/src/app/node_modules/upath' -> '/usr/src/app/node_modules/.upath.DELETE' 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-22T10_46_13_120Z-debug.log ERROR command failed: npm install --loglevel error
念のためバージョンも確認。
/usr/src/app # npm list -g vue /usr/local/lib `-- @vue/cli@4.3.1 `-- vue@2.6.11
※ちなみにローカル環境(※なんか色々入ってる。。。)
$ npm list -g vue C:\Users\chonm\AppData\Roaming\npm +-- @vue/cli-service-global@4.1.2 | `-- vue@2.6.11 `-- nuxt@2.12.2 +-- @nuxt/builder@2.12.2 | `-- @nuxt/vue-app@2.12.2 | `-- vue@2.6.11 `-- @nuxt/core@2.12.2 `-- @nuxt/vue-renderer@2.12.2 `-- vue@2.6.11 deduped
Vue CLIのバージョンが高いのが原因か??
試しにVue CLI 3をインストールしてみる。
npm install -g @vue/cli@3.7.0
確認
vue --version >> 3.7.0
今回使わなかったがアンインストールはこれらしい。
npm uninstall vue-cli -g // もしかするとsudoコマンド入れないと実行できないかも。未検証。
再度作成でまたしてもエラー
/usr/src/app # vue create . Vue CLI v3.7.0 ? Generate project in current directory? Yes Vue CLI v3.7.0 ┌───────────────────────────┐ │ Update available: 4.3.1 │ └───────────────────────────┘ ? Please pick a preset: default (babel, eslint) Vue CLI v3.7.0 ✨ Creating project in /usr/src/app. ⚙ Installing CLI plugins. This might take a while... [ ...........] \ postinstall: sill install executeActions npm ERR! code ENOTEMPTY npm ERR! syscall rmdir npm ERR! path /usr/src/app/node_modules/.staging/apollo-env-cb5e05e5 npm ERR! errno -39 npm ERR! ENOTEMPTY: directory not empty, rmdir '/usr/src/app/node_modules/.staging/apollo-env-cb5e05e5' npm ERR! A complete log of this run can be found in: npm ERR! /root/.npm/_logs/2020-05-22T11_10_27_443Z-debug.log ERROR command failed: npm install --loglevel error --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist
npm ERR! ENOTEMPTY:ディレクトリが空ではありません、rmdir ‘/usr/src/app/node_modules/.staging/apollo-env-cb5e05e5’
こうなったら再度コンテナから作り直したほうが良さそう。。。
おわりに
dockerコマンドではなくdocker-composeコマンドで環境は作るべきだと感じました。
Dockerfileやdocker-compose.ymlの書き方含め、Dockerのそもそもの理解を深めたい。
以下とかいろいろ読んでみよう。あとdockerでVue.jsの環境作る(vue createコマンド)のにかなり時間かかるように感じた。。。
Docker入門(第一回)~Dockerとは何か、何が良いのか~
📝最後に自分用にコンテナIDを忘れないように記しておきます(完全に個人的なメモ)。
※3つも起動しててびっくりした(下記GUIは停止後の写真)。このような挙動とかの理解もちゃんとしていきたい。。。

user\vue-docker2> docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 1ff21e169e8b vue-docker2_view "docker-entrypoint.s…" 18 minutes ago Up 18 minutes 0.0.0.0:8000->8080/tcp vue-docker2_view_1 // これが動くやつ 5b50257a04ca node:12.7.0-alpine "docker-entrypoint.s…" 50 minutes ago Up 50 minutes vue-docker2_node_run_8d0d4a96e5d9 1a6cefb50821 node:12.7.0-alpine "docker-entrypoint.s…" 54 minutes ago Up 54 minutes vue-docker2_node_run_cc7d92f60890
✅参考
Vue-CLI 4を使用したJavaScript開発環境構築(プロトタイプ版とプロジェクト版)
Vue CLI 3を使っていると思いきや知らず知らずで4を使っていたので軽く調べた。
これ自分も何回も間違えてる。。。
改行コードの種類の「CR」「LF」「CRLF」の意味と違い
備忘録:改行コード「LF」と「CR」と「CRLF」の違い
これが違うと何か悪さするのかな。。。どうやらLFにしないとシェルスクリプトが呼べないケースがありそう。
LF・・・UNIX系。Linuxとか。
CR・・・MacOS(バージョン9まで)とか。
CR+LF・・・Microsoft Windowsとか。
備忘録
Dockerを使ってVue CLI 3 の開発環境を構築する
※別記事での再挑戦
mkdir vue-docker cd vue-docker
dockerfile作成
vim dockerfile // touchしないでも記載すれば自動生成されるのね。
FROM node:8.15.0-alpine WORKDIR /app RUN apk update && \ npm install -g npm && \ npm install -g @vue/cli CMD ["/bin/ash"]
docker-compose.ymlの作成
vim docker-compose.yml
version: '3' services: web: build: . ports: - 1234:8080 volumes: - .:/app stdin_open: true tty: true
コンテナの構築。
サービスとは今回でいうと「web」のことを指します。
ymlファイルにimage:が書かれている場合はそのイメージ名。
ローカルになければ、リモートからプルしてきます。imageが書かれていない場合、buildに書かれているパスの(デフォルトは)Dockerfileを参考にしてイメージを構築します。
docker-compose build
※ここでなぜか固まった。。。
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
コンテナの起動
コンテナを作成して、起動します。
オプションで-dをつけることでバックグラウンドで実行することができます。
またオプションで–buildをつけることで起動前にイメージも構築します。
docker-compose up -d
備忘録②
docker-composeを使ってVue.jsのプロジェクトを作成して、Dockerで動かしてみた
※別記事での挑戦
docker-compose.yml
version: '3' services: node: image: node:12.7.0-alpine volumes: - .:/vuejs
コンテナ内に入る
docker-compose run node sh
Vue.jsへ移動
/ # cd vuejs/
Vue CLIのインストール
/vuejs # yarn global add @vue/cli
プロジェクト生成
/vuejs # vue create .
Dockerfileを作成
FROM node:12.7.0-alpine WORKDIR /myapp COPY package.json ./ COPY yarn.lock ./ RUN yarn install
docker-compose.ymlを修正
・Vue.jsプロジェクトをマウントした場合に、コンテナ側のnode_modulesが上書きされて、削除される場合があるので、マウントされないようにする
・プロジェクトが作成される時に作成される.gitignoreでは、node_modulesはデフォルトで無視されているので、Gitで共有していると、コンテナが立ち上がらなくなる※別途設定が必要ぽい。
version: '3' services: view: build: . command: yarn run serve volumes: - .:/myapp - /myapp/node_modules ports: - "8000:8080"
サービスコンテナ起動
docker-compose up -d

コンテナ内に入る。
docker-compose run view sh
コメントを残す