docker-composeを使ってVue.jsのプロジェクトを作成して、Dockerで動かしてみました。

プロジェクトを作成するディレクトリを作成する

プロジェクトを作成するための`docker-compose.yml`を作成する

`docker-compose`でサービスを起動して、コンテナ内に入る

$ docker-compose run node sh

マウントされている`/vuejs`に移動する

/ # cd vuejs/

`Vue CLI`をインストールする

今回はVue CLIを使用して、プロジェクトを作成するので、Vue CLIをインストールする

/vuejs # yarn global add @vue/cli

`Vue.js`のプロジェクトを作成する

/vuejs # vue create .

上記のコマンドを実行すると、対話式でプロジェクトの設定をしていく

YESを選択

?  Your connection to the default yarn registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? (Y/n) Y

YESを選択

? Generate project in current directory? (Y/n) Y

defaultを選択

? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features

Yarnを選択

? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn 
  Use NPM

コンテナ内と、ホスト側に、プロジェクトが作成される

コンテナ

/vuejs
    |_ node_modules
    |_ public
    |_ src
    |_ .gitignore
    |_ babel.config.js
    |_ docker-compose.yml
    |_ package.json
    |_ README.md
    |_ yarn.lock

ホスト

/hoge_directory
    |_ node_modules
    |_ public
    |_ src
    |_ .gitignore
    |_ babel.config.js
    |_ docker-compose.yml
    |_ package.json
    |_ README.md
    |_ yarn.lock

プロジェクトの作成完了！！！

`docker`で`Vue.js`を動かす

Dockerfileを作成する

`docker-compose.yml`を修正する

docker-compose.yml

version: '3'
services:
  view:
    build: .
    command: yarn run serve
    volumes:
      - .:/myapp
      - /myapp/node_modules
    ports:
      - "8000:8080"

Vue.jsプロジェクトをマウントした場合に、
コンテナ側のnode_modulesが上書きされて、削除される場合があるので、
マウントされないようにする

volumes:
      - ./vuejs:/myapp
      - /myapp/node_modules <- マウントで上書きされなくなる

(プロジェクトが作成される時に作成される.gitignoreでは、
node_modulesはデフォルトで無視されているので、Gitで共有していると、
コンテナが立ち上がらなくなる)

サービスを起動して、コンテナを立ち上げる

$ docker-compose up -d

アクセスする

URL

http://localhost:8000/

終わり

マウントした時に、node_modulesが上書きされて、削除されるのは、
なかなかハマりました...

プロジェクトを作成するディレクトリを作成する

プロジェクトを作成するためのdocker-compose.ymlを作成する

docker-composeでサービスを起動して、コンテナ内に入る

マウントされている/vuejsに移動する

Vue CLIをインストールする

Vue.jsのプロジェクトを作成する