ServBay

한국어

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย

한국어

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย

Appearance

ServBay로 Nuxt.js 프로젝트 생성 및 실행하기 ​

Nuxt.js란? ​

Nuxt.js는 널리 사용되는 Vue.js 프레임워크를 기반으로 하는 오픈 소스 프레임워크로, 현대적이고 고성능의 웹 애플리케이션 개발에 특화되어 있습니다. 복잡한 설정을 추상화하여 개발자가 비즈니스 로직에 집중할 수 있도록 돕습니다. Nuxt.js는 특히 서버 사이드 렌더링(SSR) 애플리케이션 구축에 탁월하며, 강력한 정적 사이트 생성(SSG) 기능을 제공하여 콘텐츠가 풍부하고 SEO 친화적인 웹사이트 및 앱 개발에 적합합니다.

Nuxt.js의 주요 특징 및 장점 ​

  • 서버 사이드 렌더링(SSR): 서버에서 Vue 페이지를 미리 렌더링하여 최초 화면 로딩 속도를 높이고, 사용자 경험을 개선하며, 검색 엔진 크롤링에 유리해 SEO에 도움을 줍니다.
  • 정적 사이트 생성(SSG): 빌드 시점에 완전히 정적인 HTML 파일을 생성합니다. 성능이 매우 우수하며, 배포가 간편하고 런타임 서버 부하가 없어 변경이 잦지 않은 블로그, 문서 사이트 등에 적합합니다.
  • 자동 코드 분할: Nuxt.js는 라우터에 따라 자바스크립트 코드를 자동으로 분할하여, 사용자가 페이지를 방문할 때 필요한 코드만 로드하므로 성능을 크게 개선합니다.
  • 파일 시스템 기반 라우팅: pages 디렉터리 안에 .vue 파일을 생성하는 것만으로 라우터가 자동으로 설정되어, 라우트 관리가 매우 간편합니다.
  • 모듈 생태계: 다양한 기능과 외부 서비스(예: Axios, PWA 지원, 콘텐츠 관리 시스템 연동 등)를 쉽게 통합할 수 있는 강력한 모듈 시스템을 갖추고 있습니다.
  • 설정보다 규약 중심: 디렉터리 구조와 네이밍 규약만 지키면 복잡한 설정을 최소화하여 개발을 효율화합니다.
  • 개발 경험 최적화: 핫 모듈 리로드(HMR), 오류 리포트 등 개발 효율성을 높여주는 다양한 기능을 제공합니다.

이러한 특징을 바탕으로 Nuxt.js는 복잡하고 성능이 뛰어난 SEO 친화적 웹 애플리케이션을 쉽고 효과적으로 개발할 수 있도록 돕습니다.

ServBay에서 Nuxt.js 프로젝트 구성 및 실행하기 ​

이 가이드에서는 ServBay가 제공하는 강력한 로컬 개발 환경, 특히 Node.js 패키지와 웹사이트 관리 기능을 활용하여 Nuxt.js 프로젝트를 생성, 설정, 실행하는 방법을 안내합니다. 개발 모드(리버스 프록시 이용)와 프로덕션 모드(정적 파일 서비스) 설정 방법을 각각 설명합니다.

사전 준비 사항 ​

시작하기 앞서 다음 조건을 충족하는지 확인하세요.

  1. ServBay 앱이 성공적으로 설치되어 있어야 합니다.
  2. ServBay에서 Node.js 패키지가 설치 및 활성화되어 있어야 합니다. ServBay 콘트롤 패널의 '패키지' 탭에서 확인 및 설치할 수 있습니다.
  3. Node.js, npm(또는 Yarn/pnpm), 기본 터미널 명령어 사용에 익숙해야 합니다.
  4. (권장) VS Code 등 코드 에디터가 설치되어 있으면 도움이 됩니다.

Nuxt.js 프로젝트 생성하기 ​

create-nuxt-app CLI를 사용하여 손쉽게 Nuxt.js 프로젝트를 초기화할 수 있습니다.

  1. 터미널을 열어 ServBay 웹사이트 루트 디렉터리로 이동

    ServBay의 기본 웹사이트 루트 디렉터리는 로컬 개발 프로젝트를 저장하기에 적합한 위치입니다. 터미널을 열고 아래 명령으로 해당 디렉터리로 이동하세요.

    macOS:

    bash
    cd /Applications/ServBay/www

    Windows:

    bash
    cd C:\ServBay\www

  2. Nuxt.js 프로젝트 초기화

    npx create-nuxt-app 명령을 사용해 servbay-nuxt-app라는 프로젝트를 생성합니다. npx는 npm 5.2 이상 버전에 기본 포함되어 있으며, 패키지를 글로벌로 설치하지 않아도 실행할 수 있습니다.

    bash
    npx create-nuxt-app servbay-nuxt-app

    명령 실행 후 터미널의 안내에 따라 각 항목을 선택합니다. 필요에 따라 옵션을 선택하세요. 예시 구성은 다음과 같습니다.

    bash
    ? Project name: servbay-nuxt-app
? Programming language: JavaScript
? Package manager: Npm         # 원하는 패키지 매니저 선택, Npm 또는 Yarn 권장
? UI framework: None          # 필요에 따라 UI 프레임워크 선택
? Nuxt.js modules: Axios      # 필요에 따라 Nuxt.js 모듈 선택
? Linting tools: ESLint       # 필요에 따라 린팅 도구 선택
? Testing framework: None     # 필요에 따라 테스트 프레임워크 선택
? Rendering mode: Universal (SSR / SSG) # 렌더링 모드 선택, Universal은 SSR과 SSG 지원
? Deployment target: Server (Node.js hosting) # 배포 대상 선택, Server는 로컬 개발 및 Node.js 서버 호스팅에 적합
? Development tools: jsconfig.json (Recommended for VS Code) # 필요 시 개발 도구 설정 선택

  3. 프로젝트 의존성 설치

    새로 생성된 프로젝트 디렉터리로 들어가 선택한 패키지 매니저로 의존성을 설치합니다.

    bash
    cd servbay-nuxt-app
npm install
# 또는 Yarn: yarn install
# 또는 pnpm: pnpm install

    설치가 완료될 때까지 기다립니다.

프로젝트 메인 콘텐츠 변경 ​

정상 동작 확인을 위해 메인 페이지 파일을 간단하게 수정해보겠습니다.

  1. pages/index.vue 파일 열기

    코드 에디터를 사용해 프로젝트 폴더 내 pages/index.vue 파일을 엽니다.

  2. 파일 내용 수정

    파일을 아래와 같이 변경하면 페이지에 "Hello ServBay!"가 표시됩니다.

    html
    <template>
  <div>
    <h1>Hello ServBay!</h1>
  </div>
</template>

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

<style scoped>
div {
  text-align: center;
  margin-top: 50px;
  font-family: sans-serif;
}
h1 {
  color: #333;
}
</style>

    스타일 태그에 scoped를 추가해 스타일이 현재 컴포넌트에만 적용되도록 했으며, 출력이 좀 더 예쁘게 표현됩니다.

ServBay에서 개발 모드로 실행하기 ​

Nuxt.js 개발 서버는 보통 특정 포트에서 동작합니다. ServBay의 커스텀 도메인, SSL 인증서, 통합 80/443 포트로 쉽게 접근할 수 있도록 ServBay의 웹사이트 기능에서 리버스 프록시를 설정합니다.

  1. Nuxt.js 개발 서버 실행

    프로젝트 루트 디렉터리에서 아래 명령을 실행해 Nuxt.js 개발 서버를 시작합니다. 포트는 8585를 사용하며, 다른 사용 중인 포트가 있다면 변경할 수 있습니다.

    macOS:

    bash
    cd /Applications/ServBay/www/servbay-nuxt-app
npm run dev -- --port 8585
# 또는 Yarn: yarn dev --port 8585
# 또는 pnpm: pnpm run dev --port 8585

    Windows:

    bash
    cd C:\ServBay\www\servbay-nuxt-app
npm run dev -- --port 8585
# 또는 Yarn: yarn dev --port 8585
# 또는 pnpm: pnpm run dev --port 8585

    개발 서버가 실행되면 http://localhost:8585에서 동작합니다. 이 터미널 창은 서버 실행을 위해 계속 열어두세요.

  2. ServBay 웹사이트(리버스 프록시) 설정

    ServBay 콘트롤 패널을 열고 '웹사이트' 탭으로 이동합니다. 왼쪽 하단의 + 버튼을 누르면 새 웹사이트 구성을 추가할 수 있습니다.

    • 이름 (Name): 구분하기 쉬운 이름을 입력하세요(예: Nuxt.js Dev Site (Proxy)).
    • 도메인 (Domain): 브라우저에서 사용할 커스텀 도메인을 입력하세요(예: nuxt-dev.servbay.demo). .servbay.demo를 사용하는 것이 ServBay 브랜드에 적합합니다.
    • 웹사이트 타입 (Website Type): 리버스 프록시 (Reverse Proxy) 선택
    • IP 주소 (IP Address): 127.0.0.1 입력(로컬 루프백 주소)
    • 포트 (Port): Nuxt.js 개발 서버 실행 시 지정한 포트(예: 8585) 입력

    설정 후 "추가" 또는 "저장" 버튼을 눌러 구성을 적용합니다. ServBay가 자동으로 설정을 반영합니다.

    Node.js 개발용 웹사이트(일반적으로 리버스 프록시 사용)에 대한 자세한 설정 내용은 Node.js 개발 웹사이트 추가하기 문서를 참고하세요.

  3. 개발 모드 웹사이트 접속하기

    웹 브라우저에서 ServBay에 설정한 도메인(예: https://nuxt-dev.servbay.demo)을 입력해 접속합니다.

    ServBay 리버스 프록시를 통해 커스텀 도메인 및 HTTPS 포트를 그대로 Nuxt.js 개발 서버로 연결할 수 있습니다. ServBay는 자동으로 SSL 인증서(ServBay User CA에서 발급, 해당 CA가 시스템에서 신뢰되어야 함)를 생성·적용하므로 개발 환경에서도 HTTPS를 이용할 수 있습니다. 이는 프로덕션 환경 테스트, Service Worker 시뮬레이션, 보안이 필요한 기능 등에도 매우 유용합니다.

프로덕션 빌드 및 실행 ​

Nuxt.js 프로젝트 개발 완료 후 실제 배포(또는 로컬에서 프로덕션 환경 미리보기)를 위한 빌드 작업을 진행합니다. Universal 모드를 사용하며 정적 사이트 생성을 원하는 경우, 일반적으로 nuxt generate(또는 npm run export 스크립트)를 실행합니다.

  1. 프로덕션 빌드 및 정적 파일 생성

    프로젝트 루트에서 다음 명령을 실행합니다. npm run build는 코드 컴파일, npm run export는 라우터에 맞게 정적 HTML 파일을 생성하여(기본적으로 dist에 생성됩니다) 배포 준비가 끝납니다.

    macOS:

    bash
    cd /Applications/ServBay/www/servbay-nuxt-app
npm run build
npm run export
# 또는 Yarn: yarn build && yarn export
# 또는 pnpm: pnpm build && pnpm run export

    Windows:

    bash
    cd C:\ServBay\www\servbay-nuxt-app
npm run build
npm run export
# 또는 Yarn: yarn build && yarn export
# 또는 pnpm: pnpm build && pnpm run export

    빌드가 완료되면 프로젝트 폴더 하위에 dist 디렉터리가 생성됩니다. 여기에 모든 정적 파일이 들어 있습니다.

  2. ServBay 웹사이트(정적 파일 서비스) 설정

    ServBay 콘트롤 패널에서 '웹사이트' 탭으로 이동합니다. 왼쪽 하단의 + 버튼을 눌러 새 웹사이트 설정을 추가합니다.

    • 이름 (Name): 구분하기 쉬운 이름 입력(예: Nuxt.js Prod Site (Static))
    • 도메인 (Domain): 프로덕션 버전 접근용 커스텀 도메인 입력(예: nuxt-prod.servbay.demo)
    • 웹사이트 타입 (Website Type): 정적 (Static) 선택
    • 웹사이트 루트 (Website Root): Nuxt.js에서 생성한 정적 파일 디렉터리 경로 입력
      • macOS: /Applications/ServBay/www/servbay-nuxt-app/dist
      • Windows: C:\ServBay\www\servbay-nuxt-app\dist

    설정 후 "추가" 또는 "저장" 버튼을 눌러 적용합니다. ServBay가 자동으로 설정을 반영합니다.

  3. 프로덕션 모드 웹사이트 접속하기

    웹 브라우저에서 프로덕션 도메인(예: https://nuxt-prod.servbay.demo)을 입력해 접속합니다.

    ServBay의 고성능 웹 서버(Caddy 또는 Nginx, 설정에 따라 다름)가 dist 디렉터리의 정적 파일을 직접 서빙합니다. 이는 정적 콘텐츠 제공에 가장 최적화된 방식으로, 매우 빠른 속도를 보여줍니다. 또한 무료 SSL 인증서와 커스텀 도메인 지원을 ServBay를 통해 누릴 수 있습니다.

요약 ​

ServBay를 활용하면 Nuxt.js 프로젝트의 로컬 개발과 미리보기를 손쉽게 관리할 수 있습니다. Node.js 패키지로 개발 서버를 실행하고, ServBay의 웹사이트 기능에서 리버스 프록시를 설정해 커스텀 도메인과 HTTPS 환경에서 개발·디버깅이 가능합니다. 개발이 완료되면 정적 파일을 빌드해 ServBay의 정적 웹사이트 타입으로 고성능 로컬 미리보기를 지원받을 수 있습니다. 이 워크플로우는 ServBay의 강력함과 편리함을 최대한 활용해 프론트엔드 프로젝트의 로컬 개발 및 테스트 과정을 크게 간소화해 줍니다. 이 가이드가 여러분의 Nuxt.js 개발에 ServBay를 더욱 효율적으로 활용하는 데 도움이 되길 바랍니다!