[Docker] 배포 실습-frontend(Vue.js)

Frontend 배포 실습

  1. frontend 프로젝트 실행 확인

    가. npm install

    나. npm run serve

 

  2. Dockerfile 생성

    Dockerfile 생성 참고 문서

    본문에서는 Real-World Example 활용

root-directory에 확장자 없음

Dockerfile 내부 내용

  Dockfile 내부 EXPOSE 80으로 기입했기 때문에 80포트로 docker 이미지를 실행, 확인해야 함.

  다른 포트 번호를 기입했다면, 해당 포트 번호로 실행/확인해야 함.

  3. 도커 이미지 생성

  docker build . -t(태그 설정) front:0.1(이미지 이름:이미지 태그)

이미지 생성 및 확인

  4. 도커 이미지 태그

    가. docker tag [IMAGE:TAG] [IMAGE:NEW_TAG] ::태그 생성

태그 생성 확인

    나. docker rmi [IMAGE:TAG] :: 태그 삭제

      latest는 디폴트 태그 >> 생략 가능

태그 삭제

  5. 이미지 실행

    docker run -it -p 80:80 --rm front:0.1

    --rm: 컨테이너 정지 시 자동 삭제 >> 임시 테스트용

 

  6. 접속 확인(http://localhost/)

접속 결과 확인