Vue.js chobi

DockerでVue.jsを使う

はじめに

Vue.jsで作成したアプリをCircleCIで自動デプロイしてみたいなと思ったので、DockerでのVue.js環境構築をしてみました。

✅ゴール
・Dockerの理解を深める

✅環境
Windows

✅参考
💻ローカルを汚さずdockerを使ってvue.jsの開発環境を作る[vuecli4]
今回はコチラをメインの参考記事として扱いました

💻Dockerを使ってVue CLI 3 の開発環境を構築する
上記記事でdocker-composeでの環境構築に失敗したので、こちらで再挑戦するもbuildでなぜか固まる(備忘録内記載)。

💻dockerでnuxt.jsの環境を作ってみる

💻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

確認

http://localhost:9050

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を使っていたので軽く調べた。

意外と間違えるVue.jsのバージョン確認方法

これ自分も何回も間違えてる。。。

改行コードの種類の「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

http://localhost:8000/で確認

コンテナ内に入る。

docker-compose run view sh

 

コメントを残す

RECOMMENDこちらの記事も人気です。