Nuxt.js

준비 및 확인사항

지원 Node 버전

8, 10, 12, 14, 16, 18
Nuxt.js 버전별 필요 Node 사양
- Nuxt 2: 14 이상
- Nuxt 3: 16.11 이상
⚠️ 로컬/테스트 환경과 클라우드타입에서 설정한 Node 버전이 상이한 경우 정상적으로 빌드되지 않을 수 있습니다.

빌드인자 및 환경변수 설정

Next.js 어플리케이션을 배포하는 경우 빌드 시점에 외부의 값을 주입하는 것과 런타임 시점에 값을 참조하는 경우를 구분하여 빌드인자 혹은 환경변수를 세팅해야 합니다.

빌드인자(Build Arguments): 빌드 시 인자의 값이 주입
환경변수(Environment Variables): 런타임 시점에 값을 참조

Nuxt.js 버전 확인

Nuxt 2와 Nuxt 3는 필요로 하는 Node / Vue 버전 및 기타 설정이 다를 수 있습니다. 공식문서를 참고하여 배포에 필요한 설정을 확인해주세요.

IP Binding

Nuxt 2의 경우 기본 Host가 localhost로 설정되어 있습니다. 해당 설정으로 배포를 하게되면 외부에서 해당 서비스에 접근할 수 없으므로 nuxt.config.js에 다음과 같은 설정 추가가 필요합니다.
```
export default {
  server: {
    host: '0.0.0.0' // default: localhost
  }
}
```
Nuxt 3의 경우 기본 Host가 0.0.0.0으로 설정되어 있기 때문에 배포를 위한 설정 추가/변경이 필요하지 않습니다.

대시보드를 통한 생성

1. 템플릿 선택하기

Github 저장소에서 템플릿 보기
시작하기 페이지의 언어/플랫폼 카테고리에 접속 또는 ⌘ + K 를 사용하여 Nuxt 를 검색하고 Nuxt.js 템플릿을 클릭하세요.

2. 새 저장소(repository) 생성하기 또는 나의 저장소 선택하기

클라우드타입은 기본적으로 사용자 Github 계정의 저장소에 반영된 소스를 배포합니다.

1️⃣ 배포하려는 저장소가 없다면 ⇒ 클라우드타입이 제공하는 예제 저장소를 사용자의 Github 계정에 생성합니다.
2️⃣ 배포하려는 저장소가 있다면 ⇒ 클라우드타입에서 배포할 사용자 본인의 저장소를 선택합니다.

1️⃣ 배포하려는 저장소가 없는 경우

아래의 그림처럼 비공개 저장소 설정하기 여부만 선택한 후 저장소 만들기 를 클릭하면 사용자의 Github 계정에 해당 템플릿 저장소가 자동으로 생성됩니다.

2️⃣ 배포하려는 저장소가 있는 경우

Github 계정에 존재하는 저장소를 사용하려는 경우 아래의 화면처럼 여러 저장소 중 배포를 원하는 항목을 선택하세요. 이미 위에서 저장소를 만든 경우 이 부분은 건너뛰어주세요.
저장소를 직접 선택한 경우, 빌드 및 시작을 위한 명령어 등 세부 설정이 기본 설정과 다를 수 있습니다. 아래의 그림처럼 빌드 설정의 설정변경 버튼을 클릭하고 수정이 필요한 설정사항을 수정해주세요.

3. 배포하기

위 과정을 마친 후 마지막으로 배포할 리전을 선택하고 배포하기 버튼을 클릭하면 배포가 자동으로 진행됩니다.

CLI 를 통한 생성

1. 사전준비

아래 가이드에 따라 CLI 를 설치하고 로그인을 진행해주세요.
CLI 설치하기

2. 설정파일 생성

.cloudtype/app.yaml 파일을 생성하세요.

name: nuxtjs
app: node@16
options:
  env:
    - name: NODE_ENV
      value: production
  ports: 3000
  build: yarn build
context:
  git:
    url: https://github.com/cloudtype-examples/nuxtjs.git
    branch: main
  preset: nuxt.js

3. 배포하기

$ ctype apply

준비 및 확인사항

지원 Node 버전

빌드인자 및 환경변수 설정

Nuxt.js 버전 확인

IP Binding

대시보드를 통한 생성

1. 템플릿 선택하기

2. 새 저장소(repository) 생성하기 또는 나의 저장소 선택하기

1️⃣ 배포하려는 저장소가 없는 경우

2️⃣ 배포하려는 저장소가 있는 경우

3. 배포하기

CLI 를 통한 생성

1. 사전준비

2. 설정파일 생성

Nuxt.js

3. 배포하기

참고

FAQ

공식문서