開発を行う環境を構築する。
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で作成されたプロジェクトが出来上がった状態のコンテナが作成されます。