Help us understand the problem. What is going on with this article?

docker-composeでシンプルにvue.js環境構築

More than 1 year has passed since last update.

はじめに

今回はdocker-composeでvue.jsの開発環境をシンプルに構築してみます。

環境

Dockerとdocker-composeは用意できている前提です。
Docker version 18.06.0-ce
docker-compose version 1.22.0

構成

以下の構成を想定しています。
server/ 以下にvue.jsのプロジェクトが作成されます。

project
├── docker
│   └── Dockerfile
├── docker-compose.yml
└── server

構築

環境構築の手順を解説を簡単に交えながら紹介していきます。

1. docker-compose.yml作成

docker-compose.yml
version: '3'

services:
  web:
    container_name: web
    build: ./docker
    ports:
      - 8080:8080
    privileged: true
    volumes:
      - ./server:/app
    tty: true
    stdin_open: true
    command: /bin/sh

【備考】
vue.jsはデフォルトでポート8080を使用するようになっているため、それに合わせてます。
必要な方は以下のように変更することもできます。

docker-compose.yml
ports:
 - 9000:9000

2. Dockerfileの作成

Dockerfile
FROM node:8.11.3-alpine

WORKDIR /app

RUN apk update && \
    npm install && \
    npm install -g npm && \
    npm install -g vue-cli

3. Docker起動&コンテナに入る

# Docker構築&起動
docker-compose up -d

# コンテナに入る
docker-compose exec web sh

4. vue.jsプロジェクト作成または更新

新規構築と更新(gitで共有された場合など)でコマンドが変わりますのでご注意ください。

新規作成の場合

/app # vue init webpack
# y/nで質問されますが、こだわりなければ基本yesまたはEnterでOKです。

環境設定
hostやポートを変更しましょう。
今回は、hostを'localhost'から'0.0.0.0'に変更します。

server/config/index.js
// Various Dev Server settings
host: '0.0.0.0', // can be overwritten by process.env.HOST

更新の場合

/app # npm update

npm実行(共通)

/app # npm run dev

5. 確認

http://0.0.0.0:8080 にアクセスしましょう。
下記の画面が表示されればOKです。

スクリーンショット 2019-01-27 2.10.15.png

参考
https://qiita.com/rh_taro/items/ca08b930f704275286a4

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした