コンテンツへスキップ
supastack
ドキュメントを閲覧
WebNext.js

For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /ja/docs/web/local-setup.md (or send Accept: text/markdown).

ローカルセットアップ

正確な Windows および macOS コマンドを使用して、有料のプロバイダー資格情報を使用せず、実際のデータベースにバックアップされたアカウントへの明確なパスを使用して、コンピューター上で Web デモを実行します。

このガイドについて質問
開くアプリ

1. コンピュータを準備し、プロジェクトを開きます

最初の完了 開始する前に: GitHub の招待を受け入れ、Node.js 22 以降、Git、エディター、および Corepack をインストールし、Web リポジトリまたはすべてのプラットフォームのモノリポジトリを複製します。エディターで supastack フォルダーを開き、「ターミナル」→「新しいターミナル」を選択します。エディターの最上位ファイル リストに package.json が表示されるはずです。以下のすべてのコマンドは、このリポジトリ ルートから実行されます。

これにより、AI、請求プロバイダー、または電子メール プロバイダーのアカウントや Docker を使用せずにローカル デモンストレーションが開始されます。初めて依存関係をダウンロードする場合は、十分な時間をとってください。次の手順では、Windows ブロックのみまたは macOS/Linux ブロックのみに従ってください。両方を実行しないでください。

2. 設定ファイルの作成 — macOS / Linux

ターミナルで、以下の各行を実行します。最初のコピーでは、後の移行コマンド用に .env が作成されます。 2 つ目は、Web サーバーが実際に読み取る apps/web/.env.local を作成します。どちらにもサンプルのローカル設定が含まれています。いずれかの宛先ファイルがすでに存在する場合は、それを保持し、そのコピー コマンドをスキップします。保存された設定を上書きしないでください。 Windows ユーザーは代わりに次のセクションを使用します。

corepack pnpm install は、アプリに必要なライブラリをダウンロードします。 Corepack が pnpm をダウンロードするように要求した場合は、「y」と答えます。完了してターミナル プロンプトが戻るまで待ちます。エラーのない最後の Done メッセージは、続行できることを意味します。

cp .env.example .env
cp .env.example apps/web/.env.local
corepack pnpm install

2. 構成ファイルの作成 — Windows PowerShell

package.json を含むフォルダーから PowerShell でこれらのコマンドを使用します。 .env または apps/web/.env.local がすでに存在する場合は、そのコピー行をスキップして設定を保持します。インストールが完了するまで待ってからサーバーを起動します。スクリプトの実行がブロックされている場合は、「始める前に」で説明されているように、corepack の代わりに corepack.cmd を使用します。

Copy-Item .env.example .env
Copy-Item .env.example apps/web/.env.local
corepack pnpm install

3. Web サーバーを起動します — このターミナルを開いたままにしておきます

リポジトリのルートから以下のコマンドを実行します。これは Web アプリのみを起動するため、Web 専用リポジトリとすべてのプラットフォームのモノリポジトリの両方で機能します。端末に Local: http://localhost:3000 と Ready が表示されるまで待ちます。最初のページのコンパイルには少し時間がかかる場合があります。ターミナルは実行し続ける必要があります。それは予想されています。

すべてのプラットフォームのモノリポジトリでは、corepack pnpm dev が利用可能な開発ワークスペースを一緒に開始します。 apps/docs が存在する場合、その別のドキュメント アプリは http://localhost:3001. を使用します。 あなたが読んでいる公開ガイドは、http://localhost:3000/docs. にある Web アプリの一部です。 このチュートリアルに従うのにポート 3001 は必要ありません。

corepack pnpm --filter @supastack/web dev

4. アプリを開き、ローカル タスクを 1 つ完了します

ブラウザのアドレス バーで http://localhost:3000 を開いてホームページを表示します。次に、http://localhost:3000/dashboard. を開きます。事前に入力された名前と電子メールをそのまま使用するか、独自のテスト値を入力して、Start local reference flow をクリックします。これにより、メモリ内にデモンストレーション ワークスペースが作成されます。永続的なアカウントを作成したり、実際の電子メールを送信したりすることはありません。

デモでは、サイドバーから AI task を開き、「ローカル受け入れ基準の要約」などの短いリクエストを入力して、「Queue local task」をクリックします。ステータスがキューに登録されている場合は、「Run local task」をクリックし、次に「View result」をクリックします。完了した出力と Email queued 状態が表示されるはずです。 AI の応答は意図的に偽物であり、再現可能です。キューに入れられた電子メールはローカルです。サーバーを再起動すると、このデモンストレーション データは消去されます。

実際のサインアップに /auth を使用するには、まず Postgres を起動し、データベースと移行ガイドを使用して移行を適用します。その後、EMAIL_PROVIDER=local からのサインアップまたは OTP メッセージは、外部の受信トレイに届かない http://localhost:3000/mail-preview; で検査できます。モバイル サインインでも、デモンストレーション セッションではなく、このデータベースに基づく認証が使用されます。

5. 停止、再起動、および初回実行時の一般的な問題の修正

成功とは、ホームページがロードされ、ローカル ワークスペースが開き、キューに入れられたタスクが完了することを意味します。終了したら、サーバーターミナルをクリックして Ctrl + C を押します。後で再開するには、リポジトリルートでターミナルを再度開き、手順 3 からのサーバーコマンドを繰り返します。依存関係を毎回再インストールする必要はありません。

localhost:3000 が開かない場合は、サーバー端末がまだ実行中であり、Ready が表示されていることを確認してください。ポート 3000 が使用中の場合は、Ctrl + C を使用して他の開発サーバーを停止し、再試行してください。 /auth を開いた後にデータベース エラーが表示された場合は、/dashboard に戻ってデモを行うか、データベース ガイドを完了してください。ローカルデモが表示されない場合は、apps/web/.env.local の APP_ENV=local、AI_PROVIDER=fake、BILLING_PROVIDER=local、EMAIL_PROVIDER=local、JOB_PROVIDER=local を確認して再起動してください。

名前とマーケティング テキストをカスタマイズするには、エディターで apps/web/src/marketing/site-config.ts を開きます。正確なフィールドと検証手順については、「ブランディング」に従ってください。実際のアカウントの外観設定については、まずデータベースのセットアップを完了してから、/settings/Appearance を開きます。自動受け入れコマンドは、この初回実行のウォークスルーよりも時間がかかります。これらはワークスペース コマンドの下にあります。

設定を続けるには、データベースのセットアップをご覧ください。

よくある質問

14 件の質問

supastack とは何ですか？

supastack は AI SaaS 製品を構築するためのモジュラー基盤です。共通インフラをまとめて提供するので、製品固有の機能に集中できます。

Web とモバイルに対応していますか？

はい。supastack には Web とモバイル体験の出発点として Next.js アプリと Expo アプリが含まれています。

どの認証が含まれていますか？

Better Auth がメール/パスワード、OTP、ソーシャルログインをカバーします。個人ワークスペースはアカウントと一緒にプロビジョニングされ、初日からレコードが境界内に収まります。

AI はどうサポートされていますか？

supastack には設定可能なマルチプロバイダー AI、使用量追跡、予算、暗号化された自前キー（BYOK）サポートが含まれています。

サブスクリプションはどう管理されますか？

このキット上に構築された製品では、Stripe 課金・サブスクリプション・権限が有料アクセスの基盤になります。プロバイダーの秘密はサーバー側に留まります。

製品固有のコードはどこに置きますか？

製品固有の機能は別のコードベースに置き、製品側が supastack の基本モジュールを設定・統合します。

supastack の価格は？

キットは生涯アップデート付きの一回払いです：単一フレームワーク 249 ドル（期間限定のローンチ価格 — 通常価格 349 ドルから 100 ドル割引）、または全フレームワーク（Next.js・iOS・Android）499 ドル（期間限定のローンチ価格 — 通常価格 599 ドルから 100 ドル割引）、追加開発者シート 1 席 75 ドル。キットのサブスクリプションはありません。このサイトのチェックアウトはライセンスキーをメールで配信し、GitHub 招待でリポジトリアクセスを提供します。

ワークスペースはどうデータを囲いますか？

ユーザーレコードは workspaceId でスコープされます。認証、権限、AI 使用量、課金イベント、監査エントリは個人ワークスペースの境界内に留まります。

バックグラウンドジョブはどう機能しますか？

Trigger.dev が明示的なジョブランタイムです。JobRunner コントラクトは enqueue・status・cancel のみを約束し、ワークフロー意味論は Trigger.dev 固有で明示的です。

メールとアウトリーチの違いは？

トランザクションメールはタスク完了通知などの製品ワークフローをカバーします。コールドアウトリーチやキャンペーンは製品自身に属し、このキットのメールモジュールの外です。

モバイルの購入はどのように機能しますか？

モバイルでは RevenueCat によるネイティブ購入と復元に対応し、アクセス権をサーバーで検証します。公開前にストアアカウントを設定し、実機テストを完了してください。Web 課金は別に管理します。

AI プロバイダーのキーはどこにありますか？

BYOK 認証情報は暗号化され、サーバー側に留まります。キーはログでサニタイズされ、使用量と予算はワークスペースレベルで可視です。

チェックアウトで使える支払い方法は？

Stripe ホストのチェックアウトはカードを受け付け、Stripe アカウントでウォレットを有効にすれば Alipay と WeChat Pay も提供できます——中国の購入者に便利です。ウォレット認可は非同期で確定するため、決済完了と同時にライセンスページが更新されます。

返金を受けることはできますか？

リポジトリへのアクセス権を取得した後は、supastack は永久にあなたのものとなるため、返金はできません。ですがご安心ください。生涯アップデートを含む完全なソースコードを入手し、ご自身やクライアントのために無制限にプロダクトを構築・公開できます。コードの転売や、リポジトリをスターターキットやテンプレートとして再配布することのみ禁止されています。

JA
テーマ