본문 바로가기

전체 글

(85)
[Vue.js] Nuxt3 Nitro란? Nitro는 Nuxt 3의 핵심 서버 엔진으로, Nuxt 애플리케이션의 서버 측 로직을 더 빠르고 효율적으로 처리하기 위해 설계된 프레임워크입니다. Nuxt 3는 이전 버전보다 훨씬 유연하고, 다양한 환경에서 애플리케이션을 배포할 수 있도록 하기 위해 Nitro를 도입했습니다. Nitro는 Nuxt의 서버 측 기능을 강화하고, 다양한 배포 옵션과 성능 최적화를 제공하는 역할을 합니다.Nitro의 주요 특징서버리스 및 엣지 컴퓨팅 지원Nitro는 서버리스 환경과 엣지 컴퓨팅 플랫폼에서 쉽게 작동하도록 설계되었습니다. Vercel, Netlify, AWS Lambda와 같은 서버리스 플랫폼에서 바로 Nuxt 애플리케이션을 배포할 수 있으며, 엣지 네트워크에서도 실행이 가능합니다.빠른 빌드 및 서버 실행Nit..
[Vue.js] Nuxt3 nuxi prepare 명령어란? nuxi prepare는 Nuxt 3에서 사용되는 CLI 명령어로, Nuxt 프로젝트의 빌드 준비 과정을 수행하는 역할을 합니다. 이 명령어는 Nuxt 프로젝트가 실행되기 전에 필요한 파일을 생성하고, 프로젝트 설정 및 구조를 준비하는 데 사용됩니다.nuxi prepare의 주요 기능프로젝트 설정 준비nuxi prepare는 Nuxt 프로젝트를 실행하기 전에 필요한 설정 파일을 준비하고, Nuxt가 올바르게 동작할 수 있도록 프로젝트 구조를 설정합니다. 이 과정에는 .nuxt 디렉토리 내에 필요한 파일 및 구성을 생성하는 작업이 포함됩니다.TypeScript 지원 준비Nuxt 3는 TypeScript를 기본적으로 지원합니다. nuxi prepare 명령어는 프로젝트의 TypeScript 설정을 검사하고,..
[Vue.js] nuxi란? nuxt dev와 nuxi dev 명령어 차이 nuxi란?nuxi는 Nuxt.js 프레임워크에서 제공하는 CLI(Command Line Interface) 도구로, Nuxt 3 프로젝트를 생성하고 관리하는 데 사용됩니다. Nuxt.js는 Vue.js 기반의 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)을 지원하는 프레임워크이며, Nuxt 3부터 nuxi라는 CLI 도구가 도입되었습니다.nuxt dev와 nuxi dev 명령어 차이nuxt dev와 nuxi dev는 Nuxt.js 프로젝트에서 개발 서버를 실행하는 명령어들이지만, 두 명령어는 Nuxt 버전에 따라 다르게 사용됩니다.1. nuxt devNuxt 2에서 사용되는 명령어입니다.Nuxt 2.x 버전의 프로젝트에서 개발 서버를 실행하려면 nuxt dev를 사용합니다.nuxt 명령어는..
[Vue.js] npx란? npx란?npx는 Node.js 패키지 관리자(NPM)에서 제공하는 실행 도구입니다. 주로 npm으로 설치된 패키지나 로컬에 설치되지 않은 패키지를 쉽게 실행하기 위해 사용됩니다. 주요 기능과 특징글로벌 설치 없이 패키지 실행로컬에 설치하지 않은 패키지라도 npx를 사용하면 일회성으로 해당 패키지를 실행할 수 있습니다.예를 들어, create-react-app을 설치하지 않고 React 프로젝트를 생성할 때:npx create-react-app my-app  이 명령은 create-react-app을 설치하지 않고도 바로 실행할 수 있습니다.로컬 설치된 명령어 실행프로젝트에 로컬로 설치된 Node.js 패키지를 실행할 수 있습니다. 보통 로컬에 설치된 패키지를 실행하려면 전체 경로를 지정해야 하지만, n..
[Vue.js] Nuxt3 프로젝트에서 Node 또는 PM2로 실행하기 Nuxt 애플리케이션은 Node.js 서버에 배포하거나, 정적 호스팅을 위해 미리 렌더링하거나, 서버리스 또는 엣지(CDN) 환경에 배포할 수 있습니다. Nuxt 빌드nuxt 빌드를 실행했을 때, 생성되는 결과물이 노드 서버를 실행하는 entry point(진입점)가 됩니다.npm run build Node로 실행이렇게 하면 기본적으로 포트 3000에서 listen하는 Nuxt 서버가 실행됩니다.node .output/server/index.mjs  PM2로 실행하기ecosystem.config.cjs 파일 작성하기module.exports = { apps: [ { name: 'NuxtAppName', port: '3000', exec_mode: 'cluster', ..