[Docker] Vue.js 프로젝트 올리기

차근차근 Docker 익히기

개발해왔던 front 소스를 Docker 위로 올려봤다.

 

1. Node Image Pull

Vue를 구동하려면 Node 환경이 필요한데, 내 소스의 경우 16.13 버전을 사용한다.

docker pull node:16.13

 

Docker node image download

! 첨에 이런거 뜨면 Desktop Docker를 먼저 구동시켜주자. (Mac 환경)

2. Creat Dockerfile

Front 폴더로 들어가서 Dockerfile을 생성한다.

FROM node:16.13
#폴더 위치
WORKDIR ~/Farming/ggms_fe

#download할 module목록
COPY package.json .

#현재 폴더에 있는 모든 폴더와 파일을 ADD 를 통해 가져옴
ADD . .
#package.json 에 정의한 moduel download
RUN npm install
#최종적으로 실행할 command
CMD ["npm", "run", "serve"]

3. Dockerfile Build

나는 프로젝트 명이 ggms_fe..라서 ..ㅎㅎ본인의 Front 명을 입력하면 된다.

docker build -t node:ggms_fe

실행결과

 

4. Docker Run

내 소스의 경우 8080으로 설정되어 있기에 내부포트를 8080으로 지정한다. 

3333으로 들어오면 내부적으로 8080으로 연결.

* option

-d : 컨테이너를 백그라운드에서 실행한다.

-p : 포트포워딩을 지정하는 옵션. :경계로 왼쪽은 내부포트 오른쪽은 외부포트

docker run -d -p 3333:8080 --name ggms_fe node:ggms_fe

 

5. Run check

1) Docker Desktop으로 확인해봐도 되고, 

2) Docker ps 명령으로 확인해봐도 되고!

 

아주 잘뜹니다.