Go to Qiita Advent Calendar Top
LoginSignup
3
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@leafeon00000

DockerでVue3環境を作る！

Last updated at Posted at 2020-10-24

はじめに

この記事は Docker を使って Vue3.0 環境の構築までを記します。
初心者のため間違い等ございましたらご指摘いただけると幸いです。

前提条件

Docker、node、npmをインストールしていること。
Dockerをインストールしていない場合は以下のリンクを参考にインストールしてみてください。
たぶん動くから！Docker始めてみよう！

環境

macOS Catalina : 10.15.7
Visual Studio Code : 1.42.1

ターミナル
$ docker --version
Docker version 19.03.13
$ node --version
v14.14.0
$ npm --version
6.14.8

Vueのバージョンアップ

PC上での Vue3.0 の環境を構築します。
古い Vue2.0 が入っていたため、一度アンインストールした後、最新のバージョンをインストールします。

旧バージョンの削除

旧バージョンのVueをグローバルインストールしている場合のみ行います。

ターミナル
$ sudo npm uninstall vue-cli -g

新バージョンのインストール

新しいバージョンをインストールし直します。

ターミナル
$ sudo npm install -g @vue/cli

(略)

$vue --version
@vue/cli 4.5.8

ローカルの環境構築

ローカルで Vue3.0 を使ったプロジェクトを動かしてみます。

ローカル環境でのVueプロジェクトの作成

作業用のディレクトリを作成します。
後々Vue以外のコンテナも追加予定のため、以下の様なディレクトリ構成を想定しています。

ディレクトリ構成
dockerApp
├──docker-compose.yml ←未作成
└──vue
    ├── Dockerfile　  ←未作成
    └── vue_app       ←今からこのフォルダを作る。vueの作業場所。
        └── ・・・       ←ここにVueのソースとか入る。

vue_app用のフォルダを作成し、Vueプロジェクトを作成していきます。

ターミナル
$ mkdir vue_app        #ディレクトリ作成
$ cd vue_app           #ディレクトリの中へ移動
$ vue create vue_app   #Vueプロジェクトの作成

ディレクトリ名やプロジェクト名は各自好きな名前を付けてください。

コマンドを叩くと初期設定が始まります。
Vue 2 か Vue 3 どちらを使うか聞かれるので、もちろんVue 3 を選びます。
Default (Vue 3 Preview) ([Vue 3] babel, eslint) を選択します。（↑キー↓キーで選択し、Enterキーで決定）

ターミナル
? Please pick a preset: 
  Default ([Vue 2] babel, eslint) 
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
  Manually select features

しばらくしたら Vue3 のプロジェクトが作成されます。

一度動作の確認をしてみましょう。
npm run serve コマンドでサーバーを動かしてみます。

ターミナル
$ npm run serve

起動したら http://localhost:8080/ へアクセスしてみます。

スクリーンショット 2020-10-21 19.38.17.png

ちゃんと起動してますね！

ターミナル上で control + c でサーバーを停止させます。

コンテナの環境構築

次にコンテナで Vue 環境を構築していきます。

Dockerfileの作成

ディレクトリ構成で記した場所に、以下の様に Dockerfile を作成します。

Dockerfile
FROM node:14.14.0

WORKDIR /vue_app

RUN npm install

COPY ./vue_app/ .

CMD ["npm", "run", "serve"]
  • FROM node:14.14.0 : Docker イメージのベースとなるイメージを選択します。 : の後はバージョンを指定します。ローカル環境と揃えたほうが無難？
  • WORKDIR /vue_app : コンテナ内で作業するディレクトリを絶対パスで指定します。指定したディレクトリがない場合は自動的に生成してくれます。
  • RUN npm install : npmをインストールします。
  • COPY ./vue_app/ . : ソースをコピーします。[ローカル環境のソースのパス]、[コンテナ内に配置するパス]の順で記します。
  • CMD ["npm", "run", "serve"] : Vueサーバーの起動。

Dockerfileを用いたコンテナの起動

ターミナルで Dockerfile が配置されているディレクトリに移動してコンテナを起動してみましょう。
まずは docker build コマンドでイメージのビルドを行います。

ターミナル
cd {Dockerfileの配置されたパス}
docker build -t vueapp:0.0.1 .
  • -t myvueapp:0.0.1 : タグをつけることができます。以降の操作が楽になるので付けておきましょう。 : で区切ってバージョンを指定することができます。
  • . : Dockerfile が配置されているパスを指定します。

ビルドができたらイメージが作成されているか確認します。

ターミナル
$ docker images
REPOSITORY              TAG                 IMAGE ID            CREATED             SIZE
vueapp                  0.0.1               fc7cabc1fe35        22 minutes ago      1.06GB

作成されてますね！

ではいよいよ docker run コマンドで起動してみましょう。

ターミナル
$ docker run --name vue_app_container --rm -it -d -p 8080:8080 vueapp:0.0.1
  • --name vue_app_container : vue_app_container という名前で起動します。こちらもコンテナイメージをビルドするときと同じく、イメージ名を指定すると管理が楽になるので指定します。
  • --rm : コンテナを停止した際に自動的にコンテナを削除してくれます。
  • --it : ターミナルのコマンドをいい感じに入出力してくれます。
  • -d : コンテナをバックグラウンドで実行します。
  • -p 8080:8080 : ローカルのポートをコンテナのポートに転送します。
  • vueapp:0.0.1 : vueappイメージのバージョン 0.0.1 を起動します。

起動したら http://localhost:8080/ へアクセスして起動確認します。

ターミナル上での起動確認

ターミナル
$ docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED              STATUS              PORTS                    NAMES
388c1dfe015b        vueapp:0.0.1        "docker-entrypoint.s…"   About a minute ago   Up About a minute   0.0.0.0:8080->8080/tcp   vue_app_container

docker stop コマンドで停止させます。

ターミナル
docker stop vue_app_container

docker-composeの作成

ディレクトリ構成で記した場所に、以下の様に docker-compose.yml を作成します。

docker-compose.yml
version: '3'
services:
  vue:
    build: ./vue
    image: vueapp:0.0.2
    container_name: "vue_app_container"
    ports:
      - "8080:8080"
  • build : dockerfile を配置したディレクトリを指定します。
  • images : イメージ名を指定します。 : 以降にバージョンの指定ができます。
  • container_name : コンテナ名を指定します。
  • ports : ポートの転送指定をします。

docker-composeを用いたコンテナの起動

docker-compose up コマンドで起動します。

ターミナル
$ docker-compose up　-d
  • -d : バックグラウンドで起動します。

起動したら http://localhost:8080/ へアクセスして起動確認します。

スクリーンショット 2020-10-23 10.22.32.png

きちんと動いてますね！

コンテナを終了させるときは docker-compose down コマンドを使います。

ターミナル
$ docker-compose down

ファイルの変更をコンテナに反映させるには docker-compose build コマンドを使います。
試しに Vue プロジェクトを自動生成したときに作成されている HelloWorld.vue の template タグ内の最後の行に追記してみます。

vue/vue_app/src/components/HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
    <div>
      追記！
    </div>
  </div>
</template>

docker-compose build コマンドを叩いた後、起動します。

ターミナル
$ docker-compose build

(略)

$ docker-compose up　-d
スクリーンショット 2020-10-23 10.37.19.png

「追記！」の文字が見えますね！

終わりに

Vueを使ったコンテナの作成の参考になれば幸いです。
前回の記事の最後に複数のコンテナを追加したdocker-composeを書きたいとか言いつつ結局コンテナ一つの記事になってしまいました。
次回こそ、次回こそきっと…

3
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?