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 파일을 생성합니다. 뛰어난 성능과 간단한 배포, 별도의 서버 실행 비용이 들지 않아 블로그나 문서 사이트처럼 내용 변화가 적은 사이트에 매우 적합합니다.
  • 자동 코드 분할 (Automatic Code Splitting): Nuxt.js는 라우터에 따라 JavaScript 코드를 자동으로 분할하여 방문자가 필요한 코드만 불러오므로, 앱의 성능이 크게 향상됩니다.
  • 파일 시스템 기반 라우팅(File-system Routing): pages 폴더에 .vue 파일을 생성하는 것으로 라우터 설정이 자동 생성되어 라우트 관리가 매우 간소화됩니다.
  • 모듈화(Modular): 다양한 기능과 써드파티 서비스(예: Axios, PWA 지원, CMS 연동 등)를 쉽게 통합할 수 있는 강력한 모듈 생태계를 갖추고 있습니다.
  • 설정보다 규약(Convention over Configuration): 정해진 디렉토리 구조와 네이밍 규칙을 따르기만 하면 복잡한 설정이 크게 줄어듭니다.
  • 개발 경험 최적화: 핫 모듈 리로드(HMR), 오류 리포트 등 개발 효율성을 높여주는 다양한 기능 제공.

이러한 특장점을 통해 Nuxt.js는 복잡하면서도 성능 좋은, SEO 친화적인 웹 애플리케이션을 더욱 쉽고 빠르게 구축할 수 있습니다.

ServBay에서 Nuxt.js 프로젝트 설정 및 실행 ​

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

사전 준비 사항 ​

시작하기 전에 아래 조건을 충족하는지 확인하세요:

  1. ServBay 애플리케이션이 설치되어 있습니다.
  2. ServBay에서 Node.js 패키지가 설치 및 활성화되어 있습니다. ServBay 컨트롤 패널의 “패키지” 탭에서 확인하거나 설치할 수 있습니다.
  3. Node.js, npm(Yarn 또는 pnpm) 사용과 기본 터미널 명령어에 익숙합니다.
  4. (권장) VS Code와 같은 코드 에디터가 설치되어 있습니다.

Nuxt.js 프로젝트 생성 ​

빠르고 간편하게 Nuxt.js 프로젝트를 시작하기 위해 create-nuxt-app 툴을 사용합니다.

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

    ServBay의 기본 웹사이트 루트는 /Applications/ServBay/www입니다. 이 경로는 로컬 개발 프로젝트 저장에 추천되는 디렉토리입니다. 터미널에서 아래 명령어를 입력하여 해당 디렉토리로 이동하세요.

    bash
    cd /Applications/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>

    여기서 style 태그에 scoped 속성을 추가해 해당 스타일이 현재 컴포넌트에만 적용되도록 했으며, 출력 화면이 약간 더 보기 좋게 꾸며집니다.

ServBay에서 개발 모드 실행 ​

Nuxt.js 개발 서버는 보통 특정 로컬 포트에서 실행됩니다. ServBay의 사용자 지정 도메인, SSL 인증서, 80/443 포트 접근을 통해 사이트를 확인하려면, ServBay의 웹사이트 기능을 이용해 리버스 프록시를 설정해야 합니다.

  1. Nuxt.js 개발 서버 실행

    프로젝트 루트 디렉토리에서 Nuxt.js 개발 서버를 아래 명령어로 실행합니다. 포트는 8585를 사용하지만, 사용 가능한 다른 포트도 지정 가능합니다.

    bash
    cd /Applications/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가 자동으로 설정을 적용합니다.

    ServBay에서 Node.js 개발용 웹사이트(주로 리버스 프록시 사용) 추가에 관한 자세한 방법은 Node.js 개발용 웹사이트 추가하기를 참고하세요.

  3. 개발 사이트 접속하기

    웹 브라우저를 열고 ServBay에서 등록한 도메인으로 접속합니다. 예: https://nuxt-dev.servbay.demo

    ServBay 리버스 프록시를 통해, 관리되는 도메인과 HTTPS 포트(443)로 Nuxt.js 개발 서버를 바로 접근할 수 있습니다. ServBay는 SSL 인증서를 자동 발급/설정(ServBay User CA 서명, 시스템 신뢰 필요)하므로, 개발 중에도 HTTPS 환경을 쉽게 테스트할 수 있습니다. 이는 실제 운영 환경 시뮬레이션, Service Worker 테스트, HTTPS 요구 기능 확인 등에 매우 유용합니다.

프로덕션 빌드 및 운영 모드 실행 ​

Nuxt.js 프로젝트 개발이 완료되어 배포(또는 운영 환경 미리보기)를 할 준비가 되었다면, 프로덕션 빌드를 생성할 수 있습니다. Universal 모드에서 정적 사이트 생성을 원할 경우 보통 nuxt generate(또는 npm run export)를 실행합니다.

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

    프로젝트 루트 디렉토리에서 아래 명령어를 실행합니다. npm run build는 프로젝트 코드를 컴파일하고, npm run export는 라우팅에 따라 정적 HTML 파일을 생성하여, 기본적으로 dist 폴더에 저장합니다.

    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

    빌드가 완료되면, 프로젝트 폴더 내에 dist라는 이름의 정적 파일 폴더가 생성됩니다.

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

    ServBay 컨트롤 패널에서 '웹사이트' 탭으로 이동 후, 좌하단의 + 버튼을 눌러 새 웹사이트를 추가하세요:

    • 이름(Name): Nuxt.js Prod Site (Static) 등 쉽게 구별되는 이름 입력.
    • 도메인(Domain): 프로덕션 사이트에 사용할 커스텀 도메인 입력(예: nuxt-prod.servbay.demo).
    • 웹사이트 유형(Website Type): 정적(Static) 선택.
    • 웹사이트 루트(Website Root): Nuxt.js 빌드 결과의 정적 파일 경로, 즉 /Applications/ServBay/www/servbay-nuxt-app/dist 입력.

    설정 후 '추가' 또는 '저장'을 클릭하면 됩니다. ServBay가 자동으로 설정을 적용합니다.

  3. 운영 사이트 접속

    브라우저에서 프로덕션 버전 도메인(예: https://nuxt-prod.servbay.demo)으로 접속합니다.

    ServBay의 고성능 웹 서버(Caddy 또는 Nginx, 설정에 따라)가 dist 폴더의 정적 파일을 직접 제공합니다. 정적 콘텐츠 제공에 최적화된 방식으로, 매우 빠른 속도를 자랑합니다. 역시 ServBay에서 무료로 SSL 인증서와 커스텀 도메인도 함께 지원받을 수 있습니다.

마무리 ​

ServBay를 이용하면 Nuxt.js 프로젝트의 로컬 개발 및 미리보기 환경을 손쉽게 관리할 수 있습니다. 개발 서버는 ServBay의 Node.js 패키지로 구동시키고, 웹사이트 기능을 통한 리버스 프록시 설정으로 원하는 도메인 및 HTTPS 환경에서 개발과 디버깅이 가능합니다. 개발이 끝나면 정적 파일로 빌드하여 ServBay의 정적 사이트 유형으로 고성능 로컬 미리보기도 간편하게 제공할 수 있습니다. 이런 워크플로우를 통해 ServBay의 편의성과 강력한 기능을 최대한 활용하여 프론트엔드 프로젝트의 로컬 개발/테스트 과정을 크게 단순화할 수 있습니다.

이 가이드가 ServBay에서 Nuxt.js 개발을 더욱 효율적으로 진행하는 데 도움이 되기를 바랍니다!