macOS에서 ServBay를 사용해 Vue.js 프로젝트 생성 및 실행하기

Vue.js는 사용자 인터페이스 구축에 널리 사용되는 점진적 JavaScript 프레임워크입니다. 배우기 쉽고, 유연하며, 높은 성능을 자랑해 단일 페이지 애플리케이션(SPA) 개발에 특히 적합합니다. ServBay는 강력한 로컬 웹 개발 환경으로, 개발자에게 편리한 Node.js 지원을 제공하여 macOS에서 Vue.js 개발을 위한 이상적인 플랫폼입니다.

이 가이드에서는 ServBay의 통합 환경을 활용해, 제로부터 Vue.js 프로젝트를 생성하고 개발·운영 모드에서 ServBay로 접속하는 방법을 단계별로 설명합니다.

Vue.js란 무엇인가요?

Vue.js는 사용자 인터페이스를 만드는 데 사용되는 점진적 JavaScript 프레임워크입니다. 다른 대형 프레임워크와 달리, Vue는 하향식 점진적 개발 방식을 채택해 코어 라이브러리는 뷰(View) 레이어에만 집중합니다. 덕분에 진입 장벽이 낮고, 타사 라이브러리 또는 기존 프로젝트와 쉽게 통합할 수 있습니다. Vue 3는 가장 최신 버전으로, 빠른 성능, 더 작은 번들 크기, 향상된 TypeScript 지원 등 다양한 기능 개선이 이루어졌습니다.

Vue 3의 주요 특징 및 장점

컴포지션 API(Composition API): 함수 기반 코드 조합 방식을 제공하여 대형 컴포넌트의 코드 관리와 재사용성이 용이합니다.
성능 개선: Proxy 객체 기반 반응형 시스템과 가상 DOM 알고리즘 최적화를 통해 탁월한 성능 향상을 제공합니다.
더 작은 번들 크기: 트리 셰이킹(Tree-shaking) 기능 도입으로 코어 라이브러리 용량이 줄고, 로딩 속도가 빨라집니다.
향상된 TypeScript 지원: TypeScript용 타입 정의가 확장되어, TypeScript 기반 Vue 개발 경험이 더 좋아집니다.
개선된 컴포넌트 생명주기: 새로운 라이프사이클 훅과 Setup 함수 도입으로 컴포넌트 로직이 더욱 명확하고 관리하기 쉬워졌습니다.

Vue 3를 사용하면 현대적이고 반응성 높은 웹 애플리케이션을 효율적으로 개발할 수 있습니다.

ServBay 통합 환경에서 Vue.js 프로젝트 만들고 실행하기

이 문서는 ServBay가 제공하는 Node.js 환경을 사용해 Vue.js 프로젝트를 만들고 실행하는 과정을 설명합니다. ServBay의 웹사이트 기능을 이용해 웹 서버를 설정하고, 리버스 프록시 및 정적 파일 서비스를 통해 프로젝트를 로컬에서 쉽게 접근합니다.

사전 준비

시작하기 전에 다음 사항을 준비해 주세요.

ServBay 설치: macOS에 ServBay 로컬 개발 환경이 정상적으로 설치되어 있어야 합니다.
Node.js 패키지 설치: ServBay 패키지 관리 기능을 이용해 Node.js 패키지를 설치해야 합니다. 구체적인 과정은 ServBay에서 Node.js 설치 및 사용하기를 참고하세요.

Vue.js 프로젝트 생성

프로젝트 초기화

먼저 터미널 앱을 엽니다. ServBay에서는 웹 프로젝트를 /Applications/ServBay/www 디렉토리에 보관하는 것을 권장합니다. 해당 디렉토리로 이동한 뒤, npm create vue@latest 명령어로 새 Vue.js 프로젝트를 초기화하세요. @latest는 최신 Vue CLI 또는 create-vue 툴을 사용하게 되며, 기본적으로 Vue 3 프로젝트가 생성됩니다.

bash

cd /Applications/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에서 Node.js 개발 웹사이트 추가하기를 참고하십시오.
개발 모드 접속
ServBay 웹 서버가 실행 중인지 확인하고, 브라우저에서 방금 설정한 도메인 https://servbay-vue-dev.servbay.demo에 접속하세요.
ServBay는 자체 CA(ServBay User CA 또는 ServBay Public CA)를 사용해 로컬 도메인에 자동으로 SSL 인증서를 발급하므로, HTTPS로 안전하게 로컬 개발 웹사이트를 미리보기 할 수 있습니다. SSL 설정에 관한 자세한 정보는 ServBay에서 웹사이트 SSL 인증서 설정하기를 참고하세요.
이제 브라우저에서 개발 중인 Vue 앱 화면을 볼 수 있고, 코드 변경 시 핫 리로드의 편리함을 바로 경험할 수 있습니다.

프로덕션 빌드를 생성하고 배포(정적 웹사이트 서비스 사용)

Vue 프로젝트 개발이 완료되어 배포를 준비할 때, 프로덕션 최적화 버전을 빌드해야 합니다. 이 빌드 결과물은 주로 HTML, CSS, JS 등 정적 파일로, ServBay의 정적 웹사이트 서비스로 간편하게 배포할 수 있습니다.

프로덕션 빌드 생성
프로젝트 루트 디렉토리에서 아래 명령어로 프로덕션 빌드를 진행합니다.
bash
```
npm run build
```
1
빌드가 완료되면, 프로젝트 루트의 dist 폴더에 최적화·번들링된 정적 파일이 생성됩니다.
정적 파일 서비스 설정
ServBay 앱 화면을 열고, 웹사이트 설정으로 이동해 새 웹사이트를 추가합니다. 유형은 정적으로 선택하세요.
- 이름: My first Vue production site (또는 알아보기 쉬운 이름)
- 도메인: servbay-vue-prod.servbay.demo (또는 원하는 .servbay.demo 도메인)
- 웹사이트 유형: 정적
- 웹사이트 루트 디렉토리: /Applications/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 도메인을 자동으로 로컬(127.0.0.1)로 매핑합니다. 다른 도메인을 쓸 경우, 시스템 hosts 파일을 수동 수정하거나 ServBay Hosts Manager 기능을 이용해 local DNS 설정이 정상임을 확인하세요.

마무리

ServBay를 사용하면 macOS에서 Node.js 환경이 통합된 로컬 개발 환경을 손쉽게 마련하고, Vue.js 프로젝트의 개발 및 프로덕션 배포를 편리하게 관리할 수 있습니다. 웹사이트 기능을 통해 개발 서버로의 리버스 프록시 및 프로덕션 정적 파일 서비스 구성이 빠르고 간단하며, 맞춤 도메인 및 자동 SSL 인증서 적용으로 더욱 안전하고 현실적인 테스트 환경을 제공합니다. 이를 통해 macOS에서의 Vue.js 프로젝트 설정과 작업 흐름이 한층 더 간소화됩니다.

macOS에서 ServBay를 사용해 Vue.js 프로젝트 생성 및 실행하기 ​

Vue.js란 무엇인가요? ​

Vue 3의 주요 특징 및 장점 ​

ServBay 통합 환경에서 Vue.js 프로젝트 만들고 실행하기 ​

사전 준비 ​

Vue.js 프로젝트 생성 ​

프로젝트 예제 내용 수정(선택사항) ​

개발 환경 설정(리버스 프록시 사용) ​

프로덕션 빌드를 생성하고 배포(정적 웹사이트 서비스 사용) ​

유의사항 ​

마무리 ​