Docker를 사용해 Vue.js 기반 웹앱 배포하기

📍Docker를 사용해 Node.js 기반 Vue.js 웹앱을 만들고, Dockerfile을 만들어 Node.js 실행 환경 구성 후, 컨테이너를 빌드하고 실행하여 Vue 서버 확인하기

• Vue.js : 자바스크립트로 웹사이트의 사용자 인터페이스(UI)를 쉽게 만들 수 있도록 도와주는 프레임워크(프론트엔드에서 실행되는 UI 라이브러리)

1. Vue 프로젝트 만들기
   웹앱을 저장할 폴더를 만든다.
   mkdir vue_docker
cd vue_docker

   Vue CLI를 설치한다.
   npm install -g @vue/cli
   Vue 프로젝트를 생성한다.
   vue create my_vue_app
   -> 명령어를 실행하면 Vue 프로젝트 설정 옵션 선택 창이 나온다.

• 기본 설정(Default)으로 생성->바로 Vue 프로젝트가 만들어진다.
• Manually select features(수동 선택)->필요한 기능을 직접 선택한다.
  

2. Vue 앱 서버 실행
   프로젝트 폴더로 이동
   cd my_vue_app
npm run serve
   

   -> 웹 브라우저에 http://localhost:8080/에 접속하면 Vue 앱이 정상적으로 실행된다.
   

3. Vue 앱을 정적 파일로 변환
   npm run build 를 실행하면 Vue 앱이 최적화된 정적 파일(HTML, CSS, JS) 형태로 변환되어 이제 Vue 앱은 웹 브라우저에서 직접 실행 가능하다.
   -> Docker로 배포하기 전에 Vue 앱을 정적 파일로 변환해야 배포 가능하다.
   : 실행하면 dist/ 폴더가 생성된다. 이 폴더 안에 최적화된 Vue 앱 파일들이 들어있다.

4. Dockerfile 을 사용해 Vue 앱을 컨테이너로 만들기
   echo. > Dockerfile
notepad

5. Docker 이미지 build
   docker build -t vue_app .

6. Docker 컨테이너 실행
   docker run -d -p 8080:80 --name vue_container vue_app

📌 결과

---

📍React와 Vue 비교

• 대규모 프로젝트, 확장성 중요 -> React
• 빠른 개발, 배우기 쉬운 환경 -> Vue
  -> React와 Vue 모두 프론트엔드 개발용 JavaScript 기반의 프레임워크/라이브러리이지만 React는 UI 라이브러리, Vue는 전체적인 개발 환경을 제공하는 프레임워크이다.