개발이 진행되는 환경을 구축하다.

Vue 개발에 필요한 최소 패키징 이미지 작성

※ 전제는 닥터커 영입
※ 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 개발에 필요한 최소 패키징 이미지 작성
이미지 만들기

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라는 이미지가 있으면 성공할 수 있습니다.

프로젝트의 모형을 만들어 이미지로 만들기

생성된 vuejs 페이지에서 용기 만들기
-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/

command(ctrl)+shift로 시작하는 node 서버 정지
VueJS 컨테이너에서 출발하여host의 단말기로 되돌아가다

현재 부팅된 VueJS 컨테이너를 이미지화합니다.

docker commit VueJS vuejs:ver1.1

앞으로 이 이미지로 컨테이너를 제작해 클리가 만든 프로젝트를 완성한 용기를 제작한다.

참고 자료

Docker로 Yarn+VueCLI 환경 구축
Docker file 쓰기