はじめに

実際にDockerでvuecli上で開発できる環境を考えてみました。

今回はこういうディレクトリ構成で環境を作ろうかと思います。

├── Dockerfile
└── docker-compose.yml

構築

作業ディレクトリを作成して、dockerfileとcomposeを書いていきます。

[docker-compose.yml]

version: '3.2'
services:
  vue:
    build: .
    command: bash -c "yarn install && yarn serve"
    ports:
      - 1234:8080
    volumes:
      - type: bind
        source: ./
        target: /app/vue
    stdin_open: true
    tty: true

解説

build: vue

vue/Dockerfileをビルドします。

ports: - 1234:8080　

コンテナ内のlocalhost8080をローカル環境の1234につなげる

volumes:

ローカルのvueディレクトリ以下をコンテナ内の/app/vueと同期

tty: trueとstdin_open: trueについて

• docker run の「-it」オプションに当たるもの。これを指定しないと、コンテナを起動してもすぐ終了してしまうので注意

[vue/Dockerfile]

FROM node:13.12.0

WORKDIR /app/vue

RUN apt-get update && \
    yarn global add @vue/cli

CMD ["/bin/bash"]

ここまで書いたら一回ビルドしてvue createします。

docker-compose up -d
docker-compose exec vue bash
/app/vue# vue create .
exit
docker-compose down

docker-compose.ymlの #command: bash -c “yarn serve” のコメントアウトを外して docker-compose upしてサーバーが起動すれば成功です。

これで環境は完了です

最後に

railsとvueと連携する前にvuecliだけの環境dockerで構築する方法を書きました。 作った環境はmacです windowsは動くかわからないです。 また問題点あれば修正していこうと思います。

おまけ