컨텐츠로 건너뛰기

수동 설정

새로운 Saasfly 사이트를 만드는 가장 빠른 방법은 설치 가이드에 표시된 대로 create saasfly를 사용하는 것입니다.

시스템 요구 사항

  • Node.js - 18.17 또는 이후.
  • Bun - 1.0 또는 이후.
  • OS - macOS, Windows(WSL 포함), Linux가 지원됩니다.

그런데, Node.js의 다양한 버전을 실행하려면 NVM(노드 버전 관리자)을 사용하는 것이 좋습니다.

1. 수동 설치

새로운 Saasfly 앱을 수동으로 생성하려면 몇 단계만 거치면 됩니다.

GitHub에서 Fork 및 Clone 저장소

https://github.com/saasfly/saasfly를 열고 이 저장소를 포크하세요.

포크는 저장소의 사본입니다. 저장소를 포킹하면 원래 프로젝트에 영향을 주지 않고도 변경 사항을 자유롭게 실험할 수 있습니다.

포크된 저장소를 복제합니다(<your_username>을 GitHub 계정 이름으로 바꿔주세요):

Terminal window
git clone https://github.com/<your_username>/saasfly.git

복제 절차를 살펴보겠습니다.

remote: Enumerating objects: 402, done.
remote: Counting objects: 100% (402/402), done.
remote: Compressing objects: 100% (298/298), done.
remote: Total 402 (delta 77), reused 386 (delta 65), pack-reused 0
Receiving objects: 100% (402/402), 963.18 KiB | 130.00 KiB/s, done.
Resolving deltas: 100% (77/77), done.

종속성 설치

더 나은 경험을 위해 npm이나 yarn 대신 Bun (Bun 설치 방법)을 사용하세요.

bun을 사용하여 종속성을 설치합니다.

Terminal window
bun i

몇 분이 걸릴 수 있으며 그 후에 다음이 표시됩니다.

+ @saasfly/api@workspace:packages/api
+ @saasfly/auth@workspace:packages/auth
+ @saasfly/common@workspace:packages/common
+ @saasfly/db@workspace:packages/db
+ @saasfly/eslint-config@workspace:tooling/eslint-config
+ @saasfly/nextjs@workspace:apps/nextjs
+ @saasfly/prettier-config@workspace:tooling/prettier-config
+ @saasfly/stripe@workspace:packages/stripe
+ @saasfly/tailwind-config@workspace:tooling/tailwind-config
+ @saasfly/typescript-config@workspace:tooling/typescript-config
+ @saasfly/ui@workspace:packages/ui
+ @turbo/[email protected] (v1.12.4 available)
+ [email protected] (v1.12.4 available)
1296 packages installed [1133.89s]

Prisma 유형 생성

saasfly 폴더에 있는지 확인한 다음 bun을 사용하여 Prisma 유형을 생성하세요.

Terminal window
cd packages/db/
bun db:generate

산출:

✔ Generated Kysely types(1.7.1) to./ prisma in 1.32s

2. Saasfly 시작하기

서버를 실행하려면 아래 목록을 따라야 합니다.

환경 변수 설정

saasfly 폴더로 들어가서 .env.example 파일을 복제하고 .env.local로 이름을 바꾼 후 변수를 입력합니다.

Terminal window
cd saasfly
cp .env.example .env.local

Postgres DB가 있는지 확인하세요(Postgres가 없으면 여기를 클릭하세요) 그리고 새 데이터베이스를 생성하세요.

POSTGRES_URL.env.local 파일에 있어야 합니다:

# 형식 예
# POSTGRES_URL="postgres://{USER}:{PASSWORD}@{DB_HOST}:{DB_PORT}/{DATABASE}"
POSTGRES_URL="postgres://postgres:[email protected]:5432/saasfly"

그런 다음 bun을 사용하여 데이터베이스 테이블을 만듭니다.

Terminal window
bun db:push

산출:

🚀 Your database is now in sync with your Prisma schema. Done in 151ms
┌─────────────────────────────────────────────────────────┐
│ Update available 5.9.1 -> 5.10.2 │
│ Run the following to update │
│ npm i --save-dev prisma@latest │
│ npm i @prisma/client@latest │
└─────────────────────────────────────────────────────────┘

문제가 발생하면 Discord에서 저희에게 이야기하세요. Saasfly에 관한 모든 것에 기꺼이 답변해 드리겠습니다.

먼저 빌드를 실행하세요

일부 기본 구성 요소는 컴파일 시점에 필요하므로 먼저 run build를 실행해야 합니다.

Terminal window
bun run build

개발 서버 실행

bun run을 사용하여 웹 서버를 시작하세요.

Terminal window
bun run dev:web
@saasfly/nextjs:dev: cache bypass, force executing ad8bea47f156e113
@saasfly/nextjs:dev: $ bun with-env next dev
@saasfly/nextjs:dev: $ dotenv -e ../../.env.local -- next dev
@saasfly/nextjs:dev: ▲ Next.js 14.1.0
@saasfly/nextjs:dev: - Local: http://localhost:3000
@saasfly/nextjs:dev:
@saasfly/nextjs:dev: automatically enabled Fast Refresh for 1 custom loader
@saasfly/nextjs:dev: ✓ Ready in 12.1s

모든 것이 잘 진행된다면, Saasfly는 이제 http://localhost:3000에서 귀하의 프로젝트를 제공할 것이고, 결과를 볼 수 있을 것입니다:

Installation

축하합니다! 이제 SaaS를 빌드하기 위한 코딩을 시작할 수 있습니다.

Saasfly를 처음 사용하는 경우 애플리케이션에서 사용할 수 있는 모든 파일과 폴더의 개요를 보려면 프로젝트 구조 문서를 참조하세요.

Stripe와 함께 달리세요

Stripe 기사를 읽어보세요. 그리고 bun dev를 사용하여 Stripe로 실행하세요:

Terminal window
bun dev