VueJS 배포 과정

Vue.js 애플리케이션의 배포 과정은 React와 비슷하지만, Vue에 특화된 몇 가지 사항이 있습니다. Vue.js 애플리케이션을 빌드하고 배포하는 과정은 다음과 같습니다:

---

1. Vue 애플리케이션 빌드

Vue 프로젝트에서 npm run build 명령어를 실행하면, 애플리케이션이 프로덕션(배포) 환경에 최적화된 상태로 번들링됩니다. 이 과정에서는:

• src 디렉토리의 소스 코드가 최적화되고 압축된 정적 파일로 변환됩니다.
• dist 디렉토리(기본적으로 생성되는 폴더)에 모든 결과물이 저장됩니다:
  • index.html (앱의 진입점)
  • 번들링된 JavaScript 및 CSS 파일
  • 기타 필요한 정적 리소스 (이미지, 폰트 등)

---

2. 정적 파일 웹 서버로 배포

생성된 dist 폴더의 파일들을 웹 서버에 업로드하여 클라이언트가 접근 가능하도록 만듭니다. 여기서 Nginx나 Apache 같은 정적 파일 서버를 사용할 수 있습니다.

(1) Nginx를 사용한 배포

• Nginx 설정 파일에 root 디렉토리를 dist 폴더로 지정합니다:

  server {
    listen 80;
    server_name yourdomain.com;
  
    root /path/to/dist;
    index index.html;
  
    location / {
      try_files $uri /index.html;
    }
  }
  

  try_files 설정은 Vue 앱이 SPA(Single Page Application)임을 고려하여, 모든 경로 요청을 index.html로 처리합니다.

(2) Apache를 사용한 배포

• Apache 설정 파일에서 DocumentRoot를 설정합니다:

  DocumentRoot "/path/to/dist"
  <Directory "/path/to/dist">
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
  </Directory>
  

---

3. CDN 또는 클라우드 서비스를 이용한 배포

정적 사이트 배포에 특화된 플랫폼을 사용하면 더욱 간편하게 Vue 애플리케이션을 배포할 수 있습니다:

• Netlify: dist 폴더를 업로드하면 자동으로 배포됩니다.
• Vercel: CLI 도구나 Git 통합을 통해 손쉽게 배포 가능.
• AWS S3 및 CloudFront: S3에 파일을 업로드하고, CloudFront를 통해 전 세계에 배포.
• GitHub Pages: Vue CLI로 빌드한 파일을 GitHub Pages에 올려 무료로 호스팅 가능.

---

4. 추가 고려사항

1. 환경 변수 설정:
   • 배포 시 환경에 따라 다른 설정이 필요하다면 .env.production 파일에 환경 변수를 정의합니다.
2. 라우팅 문제 해결:
   • Vue Router를 사용하는 경우, mode: 'history'로 설정하면 URL이 더 직관적이지만, 서버에서 적절한 라우팅 처리를 설정해야 합니다.

---

요약

1. npm run build로 빌드 파일(dist 폴더)을 생성.
2. 웹 서버(Nginx, Apache 등) 또는 CDN/클라우드 플랫폼에 dist 폴더의 파일을 업로드.
3. 서버 또는 플랫폼에서 설정을 완료하여 사용자에게 앱을 제공.