Setup - Supaplate Documentation

이 페이지에서는 Supaplate를 실행하는 데 필요한 최소한의 설정 방법을 배웁니다.

대부분의 기능은 기본적으로 비활성화되어 있으며, 이후 페이지에서 각 기능을 하나씩 활성화하고 이해하는 과정을 다룹니다.

요구 사항

다운로드한 .zip 파일의 압축을 풀고 코드 에디터에서 폴더를 엽니다.

cd <your-project-name>
npm install

Supaplate는 환경 변수를 사용하여 앱을 구성하며, '.env.example'라는 예제 파일이 함께 제공되므로 이 파일의 이름을 '.env'로 변경해야 합니다.

mv .env.example .env

ren .env.example .env

개발 서버를 실행하기 전에 '.env' 파일에서 필요한 환경 변수를 설정해야 합니다. 그렇지 않으면 다음과 같은 에러가 발생합니다:

Internal server error: supabaseUrl is required.
Error: Missing Supabase environment variables

Supabase에 로그인한 후 새 프로젝트를 생성합니다.

강력한 데이터베이스 비밀번호를 설정한 후 나중에 다시 볼 수 없도록 안전한 곳에 기록해 두세요. 이후 다시 확인할 수 없습니다.

또한 유저에게 가장 가까운 지역을 선택하세요.

프로젝트가 생성되면 프로젝트 설정의 "Data API" 섹션으로 이동합니다.

프로젝트 URL, anon public key 그리고 service role key가 표시됩니다.

이를 모두 복사하여 '.env' 파일에 붙여넣습니다:

# example
SUPABASE_URL="https://your-project-url.supabase.co"
SUPABASE_ANON_KEY="your-anon-key"
SUPABASE_SERVICE_ROLE_KEY="your-service-role-key"

Drizzle ORM을 사용하여 데이터베이스를 관리하려면 DATABASE_URL 환경 변수를 설정해야 합니다.

Supabase 프로젝트의 상단 표시줄에서 "Connect" 버튼을 클릭하고 'Shared Pooler' 섹션의 URL을 복사하여 '.env' 파일에 붙여넣습니다.

# example
DATABASE_URL="postgresql://postgres:your-database-password@your-project-region.pooler.supabase.co:5432/postgres"

데이터베이스에 설정 마이그레이션을 적용하려면 다음 명령어를 실행하세요:

npm run db:migrate

이 명령어는 데이터베이스에 profiles 및 payments 테이블을 생성하고 유저 등록을 처리하는 트리거와 updated_at 열 업데이트를 처리하는 함수를 생성합니다.

이에 대한 자세한 내용은 데이터베이스 스키마 페이지에서 확인하세요.

Windows를 사용하는 경우 터미널에 cross-env 명령을 설치해야 합니다.

npm install --save-dev cross-env

그런 다음 dev 스크립트에서 cross-env를 사용하도록 package.json 파일을 수정합니다.

"dev":"cross-env NODE_OPTIONS='--import ./instrument.server.mjs' react-router dev",

모든 환경 변수를 설정한 후 개발 서버를 실행할 수 있습니다.

npm run dev

앱이 http://localhost:5173에서 실행되고, 홈 페이지가 표시되는 것을 확인할 수 있습니다.

프로젝트는 아직 프로덕션(Production) 준비가 되지 않았으므로, 추가 설정이 필요합니다. 계속 읽으면서 설정 방법을 알아보세요.