DockerでVue.jsの環境作成

ファイル構成

 |
 |__docker
 |    |__ .env
 |    |__ Dockerfile
 |    |__ .docker-compose.yml
 |
 |__ .gitginore
 |__ source // ココにVueプロジェクトが出来上がる

.gitignoreは、デフォルトでは、sourceになっていますが、dockerに書き換えるとプロジェクトだけを、
管理できるのでお好みでやってみてください。

.Dockerfile

FROM node:12.12.0-alpine

WORKDIR /usr/src/app

RUN apk update && \
    npm install -g npm @vue/cli@3.11.0 @vue/cli-init 

docker-compose.yml

version: '3'
services:
  app:
    build: .
    ports:
      - 9090:9090
    volumes:
      - ../source:/usr/src/app
    stdin_open: true
    tty: true
    command: /bin/sh

使い方

1. docker

1. cd ./dockerでdockerに移動

2. docker-compose up -dでコンテナ起動

3. docker-compose exec app bashコンテナ内に入る

4. vue init webpack {プロジェクト名}でプロジェクト作成

5. exitで抜ける

6. docker-compose downでコンテナ停止

2. vue

1. source/{プロジェクト名}/config/index.jsを下記のように書き換える

   

2. コンテナに入りcd {プロジェクト名}, npm run devを実行

3. http://localhost:9090 にようこそ的なページがでる

3. デプロイ

1. コンテナに入りnpm run buildを叩く

2. source/{プロジェクト名}/distにファイルができているのでNetlifyやVercelなどにデプロイ

docker-vueのリポジトリ