開発を行う環境を構築する。

Vue開発に必要最低限のパッケージをインストールしたイメージを作成

※　前提としてDockerが導入されていること
※　docker-composeは使用しません（実力不足）

Dockerfile


# ubuntuベース
FROM ubuntu

# 各環境変数を設定
ENV USER vuejs
ENV PASS vuejs

# aptコンテナのupdate&upgrade
RUN apt update && apt upgrade -y

# curl・nodejs・npm・sudo・vimのインストール
RUN apt install -y curl  && \
    apt install -y nodejs npm && \
    apt install -y sudo && \
    apt install -y vim

# n package を導入
RUN npm install n -g

# n package を使って最新nodeをインストール
RUN n stable

# 古いnodeとnpmを消す
RUN apt purge -y nodejs npm

# vue-cli3インストール
RUN npm install -g @vue/cli

# 一般ユーザーアカウントを追加
RUN useradd -m ${USER}
# 一般ユーザーにsudo権限を付与
RUN gpasswd -a ${USER} sudo
# 一般ユーザーのパスワード設定
RUN echo "${USER}:${PASS}" | chpasswd

# 一般ユーザに切り替える
USER ${USER}

# 作業するディレクトリの変更
WORKDIR /home/${USER}

# portを指定する
EXPOSE 8080

Vue開発に必要最低限のパッケージをインストールしたイメージを作成します

imageの作成


docker build -t vuejs:ver1.0 .

イメージができたか確認します

確認

docker images

結果

REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
vuejs               1.0                 9933666865dd        4 minutes ago       707MB
ubuntu              latest              7698f282e524        2 weeks ago         69.9MB

vuejsというimageができていれば成功です。

プロジェクトの雛形を作成しimage化する

作成したvuejsのimageからコンテナを作成する
-pオプションを使用してportを指定しておいてください

コンテナの作成

docker run --rm --name VueJS -itd -p 8080:8080 vuejs:ver1.0

コンテナが作成されたか確認する

docker ps

結果

CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS                    NAMES
f1ee5532e7a1        vuejs:ver1.0        "/bin/bash"         36 minutes ago      Up 36 minutes       0.0.0.0:8080->8080/tcp   VueJS

PORTS：0.0.0.0:8080->8080/tcp
NAMES：VueJS
こんな感じで作成されます。

プロジェクトの雛形を作成するためにコンテナの中に入る

docker exec -it VueJS /bin/bash

ワークスペース直下にVueCliでプロジェクトを作成する
cliでプロジェクト作成を行う時の設定はお好みで

vue create .

プロジェクトの作成が終わったら確認を行います。

npm run serve

App running atにあるリンクからアクセスできる事を確認する

App running at:
  - Local:   http://localhost:8080/

起動しているnodeサーバーをcommand(ctrl)+shiftで停止する
VueJSコンテナからexitしhostのターミナルに戻ります

現在起動しているVueJSコンテナをimage化する。

docker commit VueJS vuejs:ver1.1

今後このimageでコンテナを作成する事でCliで作成されたプロジェクトが出来上がった状態のコンテナが作成されます。

参考資料

Yarn+VueCLI環境をDockerで構築する
 Dockerfileを書いてみる