コンテンツにスキップ
Saasfly Docs

手動設定

新しい Saasfly サイトを作成する最も簡単な方法は、インストール ガイドに示されているように create saasfly を使用することです。

システム要求

  • Node.js - 18.17 以降。
  • Bun - 1.0 以降。
  • OS - macOS、Windows（WSLを含む）、Linuxがサポートされています。

ちなみに、異なるバージョンのNode.jsを実行するには、NVM（Node Version Manager）を使用することをお勧めします。

1. 手動インストール

新しい Saasfly アプリを手動で作成するには、次のいくつかの手順を実行するだけです。

GitHub からリポジトリをフォークしてクローンする

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]
+ [email protected]
+ [email protected] (v1.12.4 available)
+ [email protected]


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 を使用して Web サーバーを起動します。

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