Atlasをセットアップする — レンタカー管理SaaS

無料のAtlas SaaSを入手し、Claudeに自分のSupabaseプロジェクトへセットアップしてもらい、動くコピーをHostingerで公開します。ライブデモを見る（新しいタブで開きます）

ロードマップと資料

必要なもの

Hostingerのホスティング

Atlasのコードは無料ですが、ホスティングは有料プランです。公開するサイトはここで動きます。

Hostingerのプランを選ぶ

Unlimitedプラン、またはWeb Appデプロイに対応したCloudプランを使ってください。

Claude Desktop

セットアップを担当するAIアシスタントです。技術的な作業はClaudeがCodeタブで行います。

Claude Desktopをダウンロードする

https://claude.ai/download

Node.js

バージョン20.19以降。残りはClaudeが対応します。

Node.jsをダウンロードする

https://nodejs.org/en/download

Git

Atlasのコピーを公開するために使います。GitのコマンドはClaudeが実行します。

Gitをダウンロードする

https://git-scm.com/

Supabaseアカウント

始めるには無料プランで十分です。新しいプロジェクトは、Claudeに求められたときに作成します。

Supabaseアカウントを作成する

https://supabase.com/dashboard

GitHubアカウント

無料です。Atlasの自分専用の非公開コピーを保管し、Hostingerはそこからデプロイします。

GitHubアカウントを作成する

https://github.com/signup

Atlasを入手する

Atlasをダウンロードする

AtlasはMITライセンスの無料オープンソースです。

GitHubでAtlasを開く

https://github.com/salhiworks/atlas-car-rental-saas

Codeをクリックし、Download ZIPをクリックするダウンロードしたファイルを解凍する atlas-car-rental-saas-mainフォルダーを「書類」など見つけやすい場所に置いておく

Gitを使い慣れていますか？代わりにリポジトリをクローンしてもかまいません。Claudeのセットアップはどちらでも動きます。

Claude DesktopでAtlasを開く

Claude Desktop Code Local Select Project Folder Open Trust Workspace

README.mdが入っている、Atlasフォルダーそのものを選んでください。

ClaudeでSupabaseをセットアップする

ClaudeにAtlasのセットアップを頼む

Atlasフォルダーを開いた状態で、Codeタブから次のメッセージを送ります：

Atlasセットアッププロンプト

Atlasに組み込まれたセットアップを開始します。技術的な作業はClaudeが代わりに行います。

Set up Atlas for me.

ClaudeはAtlasに組み込まれたセットアップスキルに従います。パソコンを確認し、Atlasに必要なものをインストールして、技術的な作業を自分で進めます。Claudeが止まるのはあなたの操作が必要なときだけで、その一つひとつがこのガイドのタスクになっています。

Supabaseプロジェクトを作成する

Claudeが最初に求めるのがこれです。Atlasは必ず新しい空のプロジェクトにインストールされます。

Supabaseのダッシュボードを開く

https://supabase.com/dashboard

New projectをクリックする — Freeプランで問題ありません名前を付け、データベースのパスワードを安全な場所に保存する準備ができたら、Project IDをコピーしてClaudeに貼り付ける

Supabase Project Settings General

ClaudeからSupabaseへのサインインやプロジェクトの接続を求められたら、Claudeが示す手順どおりに進めてください。

インストールを承認する

Claudeがプロジェクトの名前、リージョン、作成日を表示し、そこにAtlasをインストールしてよいか尋ねます。作成したばかりのプロジェクトであることを確認し、yesと返信してください。その1回のyesで、残りはすべて進みます：

Atlasのデータベースを作成する（54件のマイグレーション、事前にプレビュー）

Atlasの4つのEdge Functionsをデプロイして検証する

Publishable keyだけを使ってアプリを設定する

Atlasの自動ビルドとチェックを実行する

数分かかりますが、あなたが開いたりテストしたりするものはありません。プロジェクトが空でない場合、Claudeは止まり、何も変更しません。

GitHubを準備する

空の非公開リポジトリを作成する

GitHub上にある、あなた専用のAtlasのコピーです。Hostingerはここからサイトをデプロイします。

GitHubリポジトリを作成する

https://github.com/new

リポジトリに名前を付ける Privateを選ぶ README、.gitignore、licenseはオフのままにする Create repositoryをクリックするリポジトリのURLをコピーする

公開を承認する

Claudeに求められたら、リポジトリのURLを貼り付けます。ClaudeはGitを準備し、秘密情報が含まれていないことを確認してから、リポジトリとmainブランチの短い概要を表示します。自分のリポジトリであることを確認し、yesと返信してください。

Claudeが元のAtlasリポジトリにpushすることはありません。Gitからサインインを求められた場合、Claudeはpushをあなた自身で実行するよう頼みます。GitHubはそこでアカウントのパスワードを受け付けないため、ブラウザからサインインしてください。

Hostingerでデプロイする

リポジトリをインポートする

まだホスティングがありませんか？先に「必要なもの」でプランを入手してください。

Hostinger Websites Add Website Web App Import Git Repository

GitHubを接続し、Only select repositoriesを選ぶ Atlasのリポジトリとmainブランチを選ぶ無料の一時ドメインか自分のドメインを選ぶ

ビルドを設定してデプロイする

Hostingerが検出したViteのフレームワークプリセットをそのまま使う Node.js 22、または表示されている最新のバージョンを選ぶビルドコマンドをnpm run buildにする出力ディレクトリをdistにする

次の2つの環境変数だけを追加します。どちらの値もClaudeが表示するので、ほかの提案は無視してかまいません：

VITE_SUPABASE_URL VITE_SUPABASE_PUBLISHABLE_KEY

VITE_SUPABASE_URL

プロジェクト URL

VITE_SUPABASE_PUBLISHABLE_KEY

Publishable key

これらの値は Supabase で取得します

Connectを開く

https://supabase.com/dashboard/project/_?showConnect=true

セキュリティ

ここに入れるのはPublishable keyだけです。Secretキーやservice_roleキーをVITE_変数に入れないでください。VITE_で始まるものはすべてブラウザから見えます。

Deployをクリックし、ビルドが終わるまで待つサイトのアドレスをコピーしてClaudeに貼り付ける

Claudeが、公開サイトがHTTPSで表示され、Supabaseプロジェクトに接続されていることを確認します。

公開してエージェンシーを作成する

公開アドレスをSupabaseに追加する

登録メールとパスワードメールのリンクはこれらのアドレスを指します。ClaudeがHostingerのドメインに合わせた正確なSite URLと4つのRedirect URLsを送るので、Claudeのメッセージからコピーしてください。

Supabase Authentication URL Configuration

Site URLを、https://で始まる公開アドレスにする 4つのRedirect URLsを1つずつ追加する Saveをクリックし、完了したことをClaudeに伝える

各Redirect URLは、公開アドレスの後ろに次のパスのいずれかを付けたものです：

/auth/callback

/accept-invite

/auth/reset-password

/confirm-email

エージェンシーを作成する

Claudeから届いた登録リンク（公開アドレスの後ろに/sign-up）を開く Supabaseアカウントと同じメールアドレスでエージェンシーを作成する確認メールを同じブラウザで開くサインインし、ダッシュボードにエージェンシーが表示されたらClaudeに伝える

同じメールアドレスを使う理由：Supabaseの組み込みメールは、Supabaseチームのアドレスにしか届かず、1時間に約2通までです。そのあとClaudeが、あなたをOwnerとするエージェンシーができていることを確認します。あなたがテストすることはありません。

Atlasが公開されました。今後はmainブランチへのpushのたびにHostingerで再デプロイされます。名前、ロゴ、色の変更も含めて、変えたいことをClaudeに頼み、最後にpushするよう伝えてください。

実際の顧客を迎える前に

Supabaseチーム以外の顧客やスタッフが登録する前に、独自のメールプロバイダー（Custom SMTP）を接続してください：

Supabase Authentication Emails SMTP Settings