Docker 실전 의 단순 배치 Vuejs 프로젝트 (7)

docker 의 장점 에 대해 서 는 더 이상 소개 하지 않 겠 습 니 다. 이전의 글 은 이미 비교적 명확 하 게 말 했 습 니 다. 그러면 docker 의 지식 을 배 운 후에 이 제 는 그것 으로 일 을 해 야 합 니 다. ^ ^,약간의 흥분.다음은 docker 가 VueJs 프로젝트 를 어떻게 배치 하 는 지 살 펴 보 겠 습 니 다. 우 리 는 다음 세 가지 점 에서 진행 합 니 다.

Vuejs 프로젝트 초기 화 및 포장

Nginx 설정

Docker 미 러 파일

Vuejs 프로젝트 초기 화
vue - cli 를 통 해 vuejs 프로젝트 를 초기 화 합 니 다. 명령 은 다음 과 같 습 니 다.

vue init webpack projectName

이 항목 의 이름 은 docker - web 와 같 습 니 다. 프로젝트 초기 화 구성 요소 HelloWord. vue 구성 요 소 를 간단하게 수정 합 니 다.
그리고 npm run build 명령 을 통 해 프로젝트 포장 을 진행 합 니 다.
Nginx 설정
먼저 docker hub 에서 nginx 를 끌 어 올 려 야 합 니 다. docker pull nginx 를 통 해 가 져 올 수 있 습 니 다. 가 져 온 후 명령 docker image ls 명령 을 통 해 로 컬 에 존재 하 는 미 러 목록 을 보고 프로젝트 (docker - web) 의 루트 디 렉 터 리 에 nginx. conf 파일 을 추가 할 수 있 습 니 다. 설정 은 다음 과 같 습 니 다.
Docker 미 러 파일
먼저 프로젝트 (docker - web) 의 루트 디 렉 터 리 에 Dockerfile 파일 을 추가 합 니 다. 내용 은 다음 과 같 습 니 다. 그 다음 에 Dockerfile 이라는 파일 을 통 해 미 러 를 만 들 고 실행 해 야 합 니 다. docker build - t 미 러 이름 을 통 해 미 러 를 만 들 수 있 습 니 다. 예 를 들 어 이 미 러 가 구축 되 었 는 지 다시 확인 할 수 있 습 니 다.마지막 으로 이 미 러 를 바탕 으로 용 기 를 실행 합 니 다.이 부분의 내용 에 대해 모 르 는 부분 이 있 으 면 제 가 전에 docker 미 러 구축 에 관 한 글 을 찾 아 보 세 요.이로써 모든 준비 작업 이 완료 되 었 습 니 다. 그리고 브 라 우 저 주소 표시 줄 에 localhost: 3000 을 입력 하여 웹 페이지 를 방문 하면 방금 docker - web 프로젝트 의 Hello Word. vue 구성 요소 에서 수 정 된 내용 을 볼 수 있 습 니 다.
Over, 앞으로 docker 를 통 해 전단 프로젝트 배 치 를 더욱 실전 할 것 입 니 다.