vue js 배포 파일 dist 생성하기 #19

공공데이터 포털 국회도서관 자료검색 만든 결과물을 docker 파일로 빌드하여 AWS EC2 에 배포하는 것까지 진행한다.

 

전체 진행 흐름은 아래와 같이 진행한다.

1. vue cli 프로젝트의 배포파일 dist 를 생성한다.
2. vue 프로젝트에 Dockerfile 생성한다.
3. python django 프로젝트에 Dockerfile 생성한다.
4. docker desktop 설치하고 docker hub 계정 생성한다.
5. docker 파일 빌드하고 docker hub 의 repository 로 push 한다.
6. AWS EC2 에 docker hub 에 push 한 docker file 을 pull 한다.
7. AWS EC2 에서 docker 실행(run) 한다.

이번 장에는 1번 vue cli 프로젝트의 배포파일 dist 를 생성한다.

vue.js 배포파일 모음 dist 폴더

• 프로젝트가 빌드된 후 최종 배포할 준비가 된 정적 파일들이 위치하는 폴더.
• 애플리케이션의 정적 자산(이미지, 폰트, 아이콘 등)도 빌드 과정에서 dist 폴더로 복사됨.
• dist 폴더는 웹 서버에 업로드하거나, 클라우드 서비스(예: AWS S3, Netlify, Vercel)에서 호스팅할 준비가 된 상태.
• 이 폴더를 웹 서버의 루트 디렉토리에 배치하면, 애플리케이션이 브라우저에서 제대로 작동하게 된다.

vue cli 배포 파일 생성

vue 프로젝트 배포는 npm run build 명령어로 실행한다.

• package.json 파일이 있는 폴더로 이동한다.
• npm run build 실행한다.
  • Build complete. The dist directory is ready to be deployed. 로 나오면 성공

pubdweb % ls  
README.md    jsconfig.json    package-lock.json    public    vue.config.js
babel.config.js    node_modules    package.json    src
pubdweb % npm run build

npm run build

• dist 폴더 생성 확인한다.

vue cli dist 폴더

마무리

vue cli 프로젝트의 배포파일 dist 폴더가 생성되었고, 다음에는 vue cli 프로젝트에 DockerFile 을 생성해본다.