> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cloudtype.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Prisma

* 본 예시에서는 TypeScript 기반의 ORM인 Prisma와 Next.js(v13)를 연동하여 클라우드타입에서 배포하는 과정을 다루고 있습니다.
  기타 프레임워크 연동 및 각종 설정 등은 Prisma 공식 문서를 참고해주세요.

* [🔗 Prisma Docs](https://www.prisma.io/docs)

## 준비 및 확인사항

### 지원 Node 버전

* **8, 10, 12, 14, 16, 18**
* Prisma는 \*\*<u>최소 14.17.0 버전의 Node</u>\*\*를 필요로 합니다.
* Next.js는 \*\*<u>최소 14.6.0 버전의 Node</u>\*\*를 필요로 합니다.
* ⚠️ 로컬/테스트 환경과 클라우드타입에서 설정한 Node 버전이 상이한 경우 정상적으로 빌드되지 않을 수 있습니다.

### 빌드인자 및 환경변수 설정

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

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

### package.json 세팅

```json theme={null}
{
  "name": "next-prisma",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "license": "MIT",
  "author": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "prisma generate && prisma migrate deploy && prisma db seed && next build",
    "start": "concurrently \"next start\" \"npx prisma studio\"",
    "studio": "npx prisma studio"
  },
  "dependencies": {
    "@prisma/client": "^4.11.0",
    "next": "^13.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-markdown": "^8.0.0"
  },
  "devDependencies": {
    "concurrently": "^7.6.0",
    "prisma": "^4.11.0"
  },
  "prisma": {
    "seed": "node prisma/seed.js"
  }
}
```

* Prisma를 어플리케이션과 연동하여 클라우드타입에 배포하기 위해서는 `package.json` 의 npm script가 알맞게 작성되어 있어야 합니다.
  Prisma의 경우 데이터베이스 스키마 마이그레이션이 어플리케이션 빌드 과정 중에 수행되기 때문에 올바르지 않은 Build 스크립트 작성 시 정상적으로 구동되지 않을 수 있으며, 배포 시 `package.json`에서 정의한 내용에 따라 Build Command 필드에 알맞은 값을 입력해주어야 어플리케이션이 정상적으로 동작합니다.

<Figure className="mt-5 mb-12" src="quickstart/prisma/build-command.png" size="sm" />

* Prisma는 [Prisma Studio](https://www.prisma.io/docs/concepts/components/prisma-studio) 라는 툴을 통해 데이터베이스의 데이터를 조회 및 조작할 수 있는 기능을 제공하고 있습니다.
  이 기능을 사용하시려면 어플리케이션이 배포되는 포트 뿐만 아니라 Prisma Studio가 서비스되는 `5555` 포트를 배포 시에 반드시 추가해주어야 합니다.
  Next.js 어플리케이션과 Prisma Studio를 동시에 서비스 하기 위해 예제에서는 npm 패키지인 [concurrently](https://github.com/open-cli-tools/concurrently) 가 사용되었습니다.

<Figure className="mt-5 mb-12" src="quickstart/prisma/port-setting.png" size="sm" />

## 대시보드를 통한 생성

### 1. 템플릿 선택하기

* **[Github 저장소에서 템플릿 보기](https://github.com/cloudtype-examples/next-prisma.git)**

* 시작하기 페이지의 **언어/플랫폼** 카테고리에 접속 또는 `⌘ + K` 를 사용하여 `prisma` 를 검색하고 `Prisma(Next 13)` 템플릿을 클릭하세요.

<Figure className="mt-5 mb-12" src="quickstart/prisma/select_template.png" size="3xl" />

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

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

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

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

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

<Figure className="mt-5 mb-12" src="quickstart/prisma/repository-1.png" size="3xl" />

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

* Github 계정에 존재하는 저장소를 사용하려는 경우 아래의 화면처럼 여러 저장소 중 배포를 원하는 항목을 선택하세요. 이미 위에서 저장소를 만든 경우 이 부분은 건너뛰어주세요.

<Figure className="mt-5 mb-4" src="quickstart/prisma/repository-2.png" size="3xl" />

* 저장소를 직접 선택한 경우, 빌드 및 시작을 위한 명령어 등 세부 설정이 기본 설정과 다를 수 있습니다. 아래의 그림처럼 빌드 설정의 **설정변경** 버튼을 클릭하고 수정이 필요한 설정사항을 수정해주세요.

<Figure className="mt-5 mb-12" src="quickstart/prisma/repository-3.png" size="3xl" />

### 3. 배포하기

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

<Figure className="mt-5 mb-4" src="quickstart/prisma/deployment-1.png" size="3xl" />

<Figure className="mt-5 mb-12" src="quickstart/prisma/deployment-2.png" size="3xl" />

***

## CLI 를 통한 생성

### 1. 사전준비

아래 가이드에 따라 CLI 를 설치하고 로그인을 진행해주세요.<br />
[CLI 설치하기](/ko/developers/cli/install)

### 2. 설정파일 생성

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

#### Prisma + Next.js

```yaml theme={null}
name: next-prisma
app: node@16
options:
  env:
    - name: NODE_ENV
      value: production
  ports: 3000
  build: yarn build
context:
  git:
    url: https://github.com/cloudtype-examples/next-prisma.git
    branch: main
  preset: next-prisma
```

### 3. 배포하기

```sh theme={null}
$ ctype apply
```

## 참고

### FAQ

* [서비스 접속 시 50X 페이지만 뜹니다.](/ko/troubleshooting/common)
* [로컬에서는 이상없이 설치되던 패키지가 클라우드타입에서 빌드할 때 정상적으로 설치되지 않습니다.](/ko/troubleshooting/node)
* [하나의 Git 원격 저장소에서 두 개 이상의 앱을 배포하고 싶어요.](/ko/troubleshooting/git)
* [클라우드타입에서 볼 수 있는 로그뷰 말고 별도의 파일로 로그를 따로 저장하고 싶습니다.](/ko/troubleshooting/common)
* [Node로 서버를 구동했는데 permission denied 0.0.0.0:80 에러가 발생하면서 서비스에 접근이 되지 않습니다.](/ko/troubleshooting/node)

### 공식문서

* [Prisma Docs](https://www.prisma.io/docs)
* [Next.js Docs](https://nextjs.org/docs/getting-started)