ServBay를 이용한 Vue.js 프로젝트 생성 및 실행 방법

Vue.js는 사용자 인터페이스를 구축하기 위한 인기 있는 점진적 자바스크립트 프레임워크입니다. 쉽게 배울 수 있고 유연하며, 특히 싱글 페이지 애플리케이션(SPA) 개발에 뛰어난 성능을 보여줍니다. ServBay는 강력한 로컬 웹 개발 환경으로, Node.js 지원과 macOS 및 Windows 플랫폼 호환성을 제공하여 Vue.js 개발에 최적화되어 있습니다.

이 가이드는 ServBay의 통합 환경을 활용하여 처음부터 Vue.js 프로젝트를 생성하고, 개발 모드와 프로덕션 모드에서 ServBay를 통해 접근하는 과정을 단계별로 설명합니다.

Vue.js란 무엇인가요?

Vue.js는 사용자 인터페이스를 구축하는 데 사용되는 점진적 자바스크립트 프레임워크입니다. 다른 대형 프레임워크와 달리, Vue는 하향식 점진적 개발 방식을 채택합니다. 핵심 라이브러리는 뷰 레이어에만 집중하며, 배우기 쉽고 외부 라이브러리 또는 기존 프로젝트와도 쉽게 통합할 수 있습니다. Vue 3는 최신 버전으로, 더 빠른 성능, 더 작은 번들 크기, 개선된 TypeScript 지원 등 다양한 새로운 특징과 향상이 포함되어 있습니다.

Vue 3의 주요 특징과 장점

컴포지션 API(Composition API): 함수를 통해 로직을 구성함으로써, 대형 컴포넌트의 코드 유지 관리와 재사용성이 높아집니다.
성능 향상: Vue 3는 Proxy 객체를 기반으로 리액티브 시스템을 구현하고, 가상 DOM 알고리즘을 최적화하여 성능이 크게 향상되었습니다.
작은 번들 크기: Tree-shaking 기술로 핵심 라이브러리 용량이 줄어들어 더 빠른 로딩이 가능합니다.
향상된 TypeScript 지원: TypeScript 타입 정의가 대폭 개선되어, TypeScript로 Vue 앱을 개발하는 경험이 더욱 좋아졌습니다.
개선된 컴포넌트 라이프사이클: 새로운 라이프사이클 훅과 Setup 함수 도입으로 컴포넌트 로직 구조와 관리가 더욱 명확해졌습니다.

Vue 3를 활용하면, 현대적이고 반응성 뛰어난 웹 애플리케이션을 더욱 효율적으로 만들 수 있습니다.

ServBay 통합 환경으로 Vue.js 프로젝트 생성 및 실행하기

이 문서에서는 ServBay가 제공하는 Node.js 환경을 이용해 Vue.js 프로젝트를 직접 생성하고 실행해 봅니다. ServBay의 웹사이트 기능을 활용하여 웹 서버를 설정하고, 반대 프록시 및 정적 파일 서비스를 이용해서 프로젝트를 로컬에서 쉽게 테스트할 수 있습니다.

사전 준비 사항

시작 전에 다음 준비가 완료되어 있어야 합니다:

ServBay 설치: ServBay 로컬 개발 환경이 정상적으로 설치되어 있어야 합니다.
Node.js 패키지 설치: ServBay의 패키지 관리 기능으로 Node.js 패키지를 설치합니다. 자세한 설치 방법은 ServBay에서 Node.js 설치 및 사용하기 문서를 참고하세요.

Vue.js 프로젝트 생성

프로젝트 초기화

터미널을 엽니다. ServBay에서는 웹사이트 프로젝트를 기본 디렉토리에 저장하는 것을 권장합니다. 해당 디렉토리로 이동한 뒤, npm create vue@latest 명령어로 새 Vue.js 프로젝트를 초기화하세요. @latest는 최신 버전의 Vue CLI 또는 create-vue 도구를 의미하며, 대체로 Vue 3 프로젝트를 생성합니다.

macOS:

bash

cd /Applications/ServBay/www
npm create vue@latest

Windows:

cmd

cd C:\ServBay\www
npm create vue@latest

터미널 안내에 따라 프로젝트 이름(예: servbay-vue-app)을 입력하고, TypeScript, Vue Router, Pinia 등의 기능 추가 여부를 선택하세요. 예시 구성:

bash

✔ Project name: … servbay-vue-app
✔ Add TypeScript? … No # 필요에 따라 Yes 또는 No 선택
✔ Add JSX Support? … No # 필요에 따라 Yes 또는 No 선택
✔ Add Vue Router for Single Page Application development? … Yes # Yes 권장
✔ Add Pinia for state management? … No # 필요에 따라 Yes 또는 No 선택
✔ Add Vitest for Unit testing? … No # 필요에 따라 Yes 또는 No 선택
✔ Add an End-to-End Testing Solution? … No # 필요에 따라 Yes 또는 No 선택
✔ Add ESLint for code quality? … Yes # Yes 권장
✔ Add Prettier for code formatting? … Yes # Yes 권장
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No # 필요에 따라 Yes 또는 No 선택

의존성 설치
프로젝트 초기화가 끝나면, 새로 생성된 프로젝트 폴더 servbay-vue-app으로 이동하여, npm install 명령어로 모든 의존성 패키지를 설치하세요.
bash
```
cd servbay-vue-app
npm install
```
1
2

예제 내용 수정하기 (선택 사항)

프로젝트가 제대로 실행되는지 확인하려면, src/App.vue 파일을 열어 기본 내용을 단순한 "Hello ServBay!" 메시지로 바꿀 수 있습니다.

프로젝트의 src/App.vue 파일을 아래처럼 수정하세요:

html

<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>This is a Vue.js app running via ServBay.</p>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

개발 환경 설정 (반대 프록시 사용)

개발 모드에서는 Vue 프로젝트가 Vite 또는 Webpack 기반의 로컬 개발 서버를 실행하며, 핫 모듈 리로드(HMR) 등 개발에 편리한 기능을 제공합니다. ServBay는 반대 프록시 기능으로 로컬 도메인을 해당 개발 서버의 주소와 포트에 매핑할 수 있습니다.

개발 서버 실행
프로젝트 루트 디렉토리에서 아래 명령어로 개발 서버를 실행하세요. --port 옵션으로 사용 가능한 포트를 (예: 8585) 지정해주세요.
bash
```
npm run dev -- --port 8585
```
1
터미널에는 개발 서버가 지정 포트(예: http://localhost:8585)에서 실행 중임이 표시됩니다.
ServBay에서 웹사이트 반대 프록시 설정
ServBay 앱을 실행 후, 웹사이트 섹션으로 이동합니다. 새 웹사이트를 추가하고, 아래와 같이 반대 프록시 유형을 선택하세요:
- 이름: My first Vue dev site (또는 자신이 알아보기 쉬운 이름)
- 도메인: servbay-vue-dev.servbay.demo (또는 원하는 다른 .servbay.demo 도메인)
- 웹사이트 유형: 반대 프록시
- 프록시 대상 IP: 127.0.0.1
- 프록시 대상 포트: 8585 (개발 서버 실행시 지정한 포트와 동일)
저장하면 ServBay가 자체 웹서버(Caddy 또는 Nginx) 설정을 자동으로 갱신하여, servbay-vue-dev.servbay.demo 도메인 접근 시 http://127.0.0.1:8585로 프록시합니다.
Node.js 개발 웹사이트를 ServBay에 설정하는 자세한 방법은 ServBay에서 Node.js 개발 웹사이트 추가하기 문서를 참고하세요.
개발 모드 접근
ServBay의 웹서버가 정상 실행 중임을 확인하세요. 브라우저를 열고, 방금 설정한 도메인 https://servbay-vue-dev.servbay.demo로 접속합니다.
ServBay는 자동으로 로컬 도메인 SSL 인증서를 설정(CA는 ServBay User CA 또는 ServBay Public CA)하므로, HTTPS를 통해 개발 웹사이트를 안전하게 접근할 수 있습니다. SSL 설정 관련 안내는 ServBay에서 웹사이트 SSL 인증서 설정하기를 참고하세요.
이제 브라우저에서 Vue 앱이 개발 모드로 동작하는 것을 볼 수 있고, 코드 변경 시 바로바로 핫 리로드가 적용되는 편리함도 누릴 수 있습니다.

프로덕션 빌드 및 배포(정적 웹사이트 서비스)

Vue.js 프로젝트 개발이 끝나고 배포 준비가 되면, 프로덕션 최적화 버전을 빌드해야 합니다. 이 빌드 결과물은 HTML, CSS, JS로 이루어진 정적 파일들이며, ServBay의 정적 웹사이트 기능으로 쉽게 배포 및 테스트할 수 있습니다.

프로덕션 빌드 생성
프로젝트 루트에서 아래 명령어로 프로덕션 빌드를 진행하세요:
bash
```
npm run build
```
1
빌드가 완료되면, 최적화된 정적 파일들이 프로젝트 루트의 dist 폴더에 생성됩니다.
정적 파일 서비스 설정
ServBay 앱에서 웹사이트 섹션으로 이동해, 새 웹사이트를 추가하고, 아래처럼 정적 유형을 선택하세요:
- 이름: My first Vue production site (혹은 쉽게 구분되는 이름)
- 도메인: servbay-vue-prod.servbay.demo (또는 원하는 다른 .servbay.demo 도메인)
- 웹사이트 유형: 정적
- 웹사이트 루트 경로: 빌드 완료 후 생성된 dist 디렉토리(절대 경로)
  - macOS: /Applications/ServBay/www/servbay-vue-app/dist
  - Windows: C:\ServBay\www\servbay-vue-app\dist
저장하면 ServBay가 웹서버 설정을 업데이트하여, 해당 dist 폴더의 정적 파일을 직접 서비스합니다.
프로덕션 모드 접속
ServBay의 웹서버가 정상 동작하는지 확인하고, 브라우저에서 프로덕션용 도메인 https://servbay-vue-prod.servbay.demo로 이동하세요.
이제 Vue 앱의 최적화된 프로덕션 빌드가 표시됩니다. ServBay가 제공하는 커스텀 도메인 및 자동 SSL 기능 덕분에, 안전하게 로컬 프로덕션 환경을 최종적으로 테스트할 수 있습니다.

참고 사항

포트 충돌: npm run dev 명령어에서 지정한 포트(예: 8585)가 다른 프로그램에서 이미 사용 중이면 오류가 발생합니다. 미사용 포트를 새로 지정하고, ServBay 반대 프록시 설정의 포트도 동일하게 조정하세요.
ServBay 웹서버 상태: 사용 중인 ServBay 웹서버(Caddy 또는 Nginx)가 반드시 동작 중이어야 하며, 그렇지 않을 경우 지정한 도메인으로 웹사이트 접속이 불가합니다.
도메인 해석: ServBay는 웹사이트 설정에서 추가한 .servbay.demo 도메인의 DNS를 자동으로 로컬(127.0.0.1)로 연결합니다. 만약 다른 도메인을 사용한다면, 시스템 hosts 파일을 직접 수정하거나, ServBay 호스트 관리자(Hosts Manager) 기능으로 올바르게 로컬 해석이 되도록 설정해야 합니다.

마무리

ServBay를 활용하면 macOS와 Windows 모두에서 Node.js 환경이 통합된 로컬 개발 환경을 손쉽게 구축할 수 있으며, Vue.js 프로젝트의 개발과 프로덕션 배포까지도 간편하게 관리할 수 있습니다. 웹사이트 기능을 통해 반대 프록시로 개발 서버를 빠르게 설정하거나, 정적 파일을 바로 서비스할 수 있고, 커스텀 도메인과 자동 SSL 인증서 덕분에 편리하고 안전하게 로컬 환경을 운영할 수 있습니다. 이로써 Vue.js 프로젝트의 로컬 세팅과 워크플로우가 획기적으로 단순화됩니다.

ServBay를 이용한 Vue.js 프로젝트 생성 및 실행 방법 ​

Vue.js란 무엇인가요? ​

Vue 3의 주요 특징과 장점 ​

ServBay 통합 환경으로 Vue.js 프로젝트 생성 및 실행하기 ​

사전 준비 사항 ​

Vue.js 프로젝트 생성 ​

예제 내용 수정하기 (선택 사항) ​

개발 환경 설정 (반대 프록시 사용) ​

프로덕션 빌드 및 배포(정적 웹사이트 서비스) ​

참고 사항 ​

마무리 ​