풀스택 Next.js 빌더

개요

Next.js Builder는 Next.js로 구축된 웹 애플리케이션을 생성하고 관리하는 프로세스를 간소화하도록 설계된 강력하고 직관적인 애플리케이션입니다. 이 도구를 사용하면 사용자는 다단계 인터페이스를 통해 대화형으로 페이지, API 및 데이터베이스 스키마를 생성할 수 있습니다. 또한 백엔드 배포 서버와 원활하게 통합되어 프로젝트를 Vercel에 자동으로 배포하고 Supabase를 사용하여 데이터베이스를 관리합니다.

전제 조건

이 애플리케이션을 사용하기 전에 다음 필수 구성 요소가 설치 및 구성되어 있는지 확인하세요.

Node.js (v14.x 이상) 및 npm/yarn.
Vercel 및 Supabase가 있는 계정.
터널링을 위한 ngrok 계정(배포 서버용)
Spark 엔진에 가입하고 Account > API Keys 이동하여 얻을 수 있는 Spark API 키 입니다.

설치

프로젝트를 설정하려면 다음 단계를 따르세요.

저장소를 복제합니다.

git clone https://github.com/spark-engine-opensource-projects/fullstack-nextjs-app-generator.git
cd fullstack-nextjs-app-generator

설치 종속성:
```
npm install
# or
yarn install
```
Vercel에 애플리케이션을 배포합니다.
참고: Next.js Builder 애플리케이션이 올바르게 작동하려면 Vercel에 배포되어야 합니다. 배포하려면 다음 단계를 따르세요.
- Vercel CLI를 설치합니다.
```
npm install -g vercel
```
- Vercel에 로그인하십시오.
```
vercel login
```
- 애플리케이션을 배포합니다.
```
vercel --prod
```
배포 후에는 Vercel 구성의 NGROK_DEPLOYER_URL ngrok에서 제공한 URL로 업데이트해야 합니다(아래 중요 참고 사항 섹션에 설명되어 있음).
환경 변수 설정:
Vercel에서 생성된 프로젝트로 이동하여 다음 환경 변수를 구성합니다.
```
SPARK_API_KEY=your-spark-api-key
NGROK_DEPLOYER_URL=your-ngrok-deployer-url
```

용법

프로젝트 생성

새 프로젝트 시작: 다단계 양식을 사용하여 이름, 유형(단일 또는 여러 페이지), 색상, 로고 및 목적을 포함한 프로젝트 세부 정보를 입력합니다.
페이지 및 구성 요소 생성: 페이지와 해당 구성 요소를 정의합니다. 필요에 따라 스타일을 사용자 정의하십시오.
API 생성 및 관리: 프로젝트 사양에 따라 서버리스 API를 자동으로 생성하고 관리합니다.
데이터베이스 스키마 정의: 애플리케이션에서 생성된 데이터베이스 스키마를 검토하고 수정하여 프로젝트 요구 사항에 맞는지 확인합니다.

전개

프로젝트가 준비되면 통합 배포 서버를 사용하여 직접 배포할 수 있습니다. 서버는 배포 프로세스를 관리하고 Vercel과 통합하며 Supabase에서 환경 변수 및 데이터베이스 설정을 처리합니다.

환경 변수

SPARK_API_KEY: 코드 생성을 위한 Spark API 키입니다.
NGROK_DEPLOYER_URL: ngrok를 통해 관리되는 배포 서버의 URL입니다.

애플리케이션이 올바르게 작동하려면 이러한 변수가 Vercel에 설정되어 있는지 확인하세요.

배포 워크플로

프로젝트 생성 및 사용자 정의: 애플리케이션의 단계별 프로세스에 따라 Next.js 프로젝트를 생성하고 사용자 정의하십시오.
백엔드 서버를 사용하여 배포: 프로젝트가 준비되면 백엔드 서버의 /deploy 엔드포인트를 사용하여 프로젝트를 Vercel에 배포하고 Supabase 데이터베이스를 관리합니다. 백엔드 서버는 환경 변수 관리 및 SQL 스크립트 실행을 포함한 배포 프로세스를 처리합니다.
모니터링 및 업데이트: 구성 요소 재생성 및 재배포 옵션을 사용하여 애플리케이션의 대시보드를 사용하여 필요에 따라 프로젝트를 모니터링하고 업데이트합니다.

중요 사항

백엔드 배포 서버 복제: 프로젝트를 Vercel에 자동으로 배포하고 Supabase로 데이터베이스를 관리하려면 백엔드 배포 서버를 복제하고 설정해야 합니다. 다음 단계를 따르세요.
- 백엔드 배포 서버 저장소를 복제합니다.
```
git clone https://github.com/spark-engine-opensource-projects/Automated-NextJS-deployer-to-vercel-and-supabase.git
cd Automated-NextJS-deployer-to-vercel-and-supabase
```
- 서버 설정 및 시작: 백엔드 서버의 README에 있는 지침에 따라 종속성을 설치하고, 환경 변수를 설정하고, 서버를 시작합니다.
- NGROK_DEPLOYER_URL 업데이트: 백엔드 서버가 실행 중이고 ngrok가 터널링 중이면 Next.js Builder Vercel 구성의 NGROK_DEPLOYER_URL 을 ngrok에서 제공한 URL로 업데이트하세요.
프런트엔드 Next.js Builder에 대한 배포 요구 사항: 프런트엔드 Next.js Builder 애플리케이션이 제대로 작동하려면 Vercel에 배포되어야 합니다. 이는 애플리케이션이 동적 API 생성 및 호스팅을 위해 Vercel의 인프라에 의존하기 때문입니다. 애플리케이션이 올바르게 호스팅되었는지 확인하려면 위에 제공된 배포 지침을 따르세요.