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

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

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

directory

/hoge_directory

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

directory

/hoge_directory
    |_ docker-compose.yml

docker-compose.yml

version: '3'
services:
  node:
    image: node:12.7.0-alpine
    volumes:
      - .:/vuejs

今回はコンテナ内で作成したVue.jsプロジェクトを、ホストに同期させて作るので、
ホスト側のhoge_directoryとコンテナ内の/vuejsをマウントする

    volumes:
      - .:/vuejs

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

sh

$ docker-compose run node sh

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

sh

/ # cd vuejs/

Vue CLIをインストールする

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

sh

/vuejs # yarn global add @vue/cli

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

sh

/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を作成する

directory

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

Dockerfile

FROM node:12.7.0-alpine

WORKDIR /myapp

COPY package.json ./
COPY yarn.lock ./

RUN yarn install

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で共有していると、
コンテナが立ち上がらなくなる)

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

sh

$ docker-compose up -d

アクセスする

URL

http://localhost:8000/

終わり

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