انتشار سایت ساخته‌شده با Lovable یا Bolt روی هاست ابری ایران

با چند پیام در Lovable یا Bolt.new، دو سایت‌ساز هوش مصنوعی، سایتی ساخته‌ای که کار می‌کند، ولی هنوز روی آدرس lovable.app یا زیر دامنهٔ خود Bolt است. می‌خواهی روی دامنهٔ خودت و هاستی که خودت کنترلش می‌کنی بالا بیاید. این آموزش دیپلوی پروژه Lovable و Bolt را از گرفتن کد تا وصل کردن دامنه قدم‌به‌قدم جلو می‌برد، همراه با سه جایی که معمولاً کار گیر می‌کند: نوع پروژه، متغیرهای محیطی و خطای ۴۰۴ بعد از رفرش.

مسیر اصلی را روی یک پروژهٔ نمونه با همان ساختار خروجی Lovable و Bolt (React، Vite، React Router و Supabase) تست کرده‌ایم. پروژه را مثل هاست React چابکان روی یک نسخهٔ تمیز نصب و build کردیم و با همان تنظیم پیش‌فرض nginx که در مستندات چابکان آمده اجرا کردیم.

 

 

چرا سایتت را از Lovable یا Bolt بیرون بیاوری؟

Lovable و Bolt برای ساختن و پیش‌نمایش سریع‌اند و هر دو هاست خودشان را هم دارند. بیرون بردن سایت معمولاً یکی از این دلیل‌ها را دارد:

• دامنه و هاست زیر دست خودت: سایت روی دامنهٔ خودت و سرویسی بالا می‌آید که لاگ، بکاپ و تنظیماتش را خودت می‌بینی.
• مالکیت کد: خروجی هر دو ابزار کد استاندارد React است. وقتی کد در GitHub یا روی هاست خودت باشد، به یک پلتفرم وابسته نیستی. مستندات Lovable هم صریحاً می‌گوید قفل نمی‌شوی و می‌توانی کد را بیرون ببری.
• ادامهٔ کار با توسعه‌دهنده: برنامه‌نویسی که بعداً کمکت می‌کند، با یک مخزن GitHub و یک هاست معمولی راحت‌تر کار می‌کند تا با حساب Lovable تو.

اگر پروژه‌ات را با ChatGPT یا Claude و تکه‌تکه نوشته‌ای، آنلاین کردن پروژه ChatGPT یا Claude برای تو مناسب‌تر است. این مقاله مخصوص خروجی آمادهٔ Lovable و Bolt است.

قبل از هر کاری: پروژه‌ات از کدام نوع است؟

این مهم‌ترین قدم دیپلوی پروژه Lovable یا Bolt است، چون هاست مناسب به نوع پروژه بستگی دارد. Lovable از ۱۳ مه ۲۰۲۶ (اردیبهشت ۱۴۰۵) پروژه‌های تازه را با TanStack Start می‌سازد که بخشی از صفحه‌ها را روی سرور می‌سازد و یک سرور Node.js لازم دارد. پروژه‌های قدیمی‌تر Lovable و پروژه‌های Bolt معمولاً سایت تک‌صفحه‌ای (SPA) با React و Vite هستند و بعد از build فقط چند فایل HTML، CSS و JS می‌شوند.

فایل package.json را در ریشهٔ پروژه باز کن و بخش dependencies را نگاه کن:

چیزی که در package.json می‌بینی	نوع پروژه	سرویس مناسب در چابکان
vite و react هست، ولی @tanstack/react-start نیست	SPA با React و Vite (Lovable قدیمی، معمولاً Bolt)	هاست React
@tanstack/react-start هست	TanStack Start (پروژه‌های جدید Lovable)	هاست Node.js
next هست	Next.js (بعضی پروژه‌های Bolt)	هاست Next.js

اگر مطمئن نیستی، در چت Lovable همین را بپرس: «این پروژه React + Vite قدیمی است یا TanStack Start؟». مستندات Lovable همین سؤال را پیشنهاد کرده است. بقیهٔ این آموزش اول مسیر SPA را می‌گوید و بعد در یک بخش جدا پروژه‌های TanStack Start را.

خروجی گرفتن از Lovable: GitHub یا Download codebase

Lovable دو راه برای بیرون آوردن کد دارد:

• اتصال به GitHub (همهٔ پلن‌ها): در پروژه به Project settings و بعد Git برو و GitHub را وصل کن. Lovable یک مخزن تازه و خصوصی می‌سازد و هر تغییری که در Lovable بدهی، خودش به آن مخزن می‌فرستد. برای گرفتن فایل ZIP هم در صفحهٔ مخزن در GitHub از دکمهٔ Code گزینهٔ Download ZIP را بزن.
• Download codebase (پلن‌های پولی): در ویرایشگر کد Lovable، پایین فهرست فایل‌ها روی Download codebase بزن، یا از همان Project settings و Git استفاده کن. کل پروژه یک فایل ZIP می‌شود.

راه GitHub بهتر است، چون بعداً هر تغییری در Lovable بدهی، فقط با یک git pull روی هاست به‌روز می‌شود. Lovable موقع اتصال همیشه یک مخزن تازه می‌سازد و نمی‌شود یک مخزن موجود را به پروژه وصل کرد. جزئیات در راهنمای انتشار بیرون از Lovable آمده است.

انتشار پروژه Bolt.new: خروجی گرفتن با Download یا GitHub

در Bolt هم دو راه داری:

• دانلود ZIP: پروژه را باز کن، بالا سمت چپ روی اسم پروژه بزن و Export و بعد Download را انتخاب کن.
• اتصال به GitHub: بالا سمت راست روی آیکون GitHub بزن، وارد GitHub شو و اجازهٔ دسترسی را بده. Bolt مخزن را خصوصی می‌سازد و بعد از هر تغییر سالم یک commit در آن ثبت می‌کند.

راهنمای رسمی دانلود در مستند مدیریت پروژه‌های Bolt آمده است. بعد از دانلود، package.json را طبق جدول بالا چک کن. Bolt بسته به درخواستت ممکن است پروژهٔ Next.js یا فریم‌ورک دیگری هم ساخته باشد.

دیپلوی پروژه Lovable و Bolt روی هاست React چابکان

هاست React چابکان خودش build را انجام می‌دهد. سورس پروژه را آپلود می‌کنی و چابکان بعد از ری‌استارت، پکیج‌ها را نصب می‌کند، دستور build را از package.json اجرا می‌کند و پوشهٔ dist را با nginx نمایش می‌دهد. پس لازم نیست روی کامپیوترت Node.js نصب کنی.

 

 

1. در پنل چابکان از «ساخت سرویس جدید» به «هاست ابری» برو و React را انتخاب کن. پلن و موقعیت را بردار و سرویس را بساز. این سرویس فقط فایل‌های ساخته‌شده را به مرورگر می‌دهد، پس موقعیت ایران برایش مناسب است. مراحل با تصویر در مستند استقرار React آمده است.
2. کل پوشهٔ پروژه را ZIP کن، به‌جز دو پوشهٔ node_modules و dist. فایل‌هایی مثل vite.config.ts، tsconfig.json، tailwind.config و پوشهٔ public هم برای build لازم‌اند، پس چیزی را جدا نکن. فایل .env (اگر پروژه دارد) با نقطه شروع می‌شود و در بعضی سیستم‌ها مخفی است، پس مطمئن شو داخل ZIP هست. اگر به جای package-lock.json فقط bun.lock داری، اشکالی ندارد.
3. در سرویس، «مدیریت فایل‌ها» را باز کن، فایل‌های پیش‌فرض چابکان را در پوشهٔ app پاک کن، ZIP را آپلود کن و Extract را بزن. فایل‌ها باید مستقیم داخل app باشند، نه داخل یک پوشهٔ دیگر. جزئیات در مستند استقرار با مدیریت فایل آمده است. اگر کد در GitHub است، می‌توانی به جای این کار از روش استقرار با Git استفاده کنی. چون مخزنی که Lovable یا Bolt می‌سازد خصوصی است، موقع git clone به جای رمز GitHub یک Personal Access Token بده. آن را در GitHub از Settings و بعد Developer settings و Personal access tokens بساز و فقط دسترسی خواندن همان مخزن را به آن بده.
4. سرویس را یک بار ری‌استارت کن. در بخش لاگ‌ها نصب پکیج‌ها و build را می‌بینی.
5. دامنهٔ پیش‌فرض سرویس را باز کن و چند صفحهٔ داخلی را مستقیم باز و رفرش کن.

در تست ما، پروژهٔ نمونه روی یک نسخهٔ تمیز بدون node_modules نصب و build شد و همهٔ مسیرها مثل /pricing با رفرش هم درست باز شدند. دلیلش تنظیم پیش‌فرض nginx هاست React است که در مستند تنظیمات NGINX در React آمده: هر آدرسی که فایل واقعی نداشته باشد، به index.html برمی‌گردد و React Router صفحهٔ درست را نشان می‌دهد.

اگر نصب پکیج‌ها با خطای peer dependency متوقف شد، در متغیرهای محیطی سرویس این را بگذار. این راه‌حل در نکات تکمیلی React آمده است:

NPM_INSTALL_COMMAND=npm install --legacy-peer-deps

همان صفحه دو تنظیم دیگر هم دارد که به کار پروژه‌های Lovable و Bolt می‌آید. یکی تغییر نسخهٔ Node.js از تنظیمات سرویس است. Lovable نسخهٔ ۲۲ را پیشنهاد می‌کند، پس اگر build با نسخهٔ پیش‌فرض خطا داد، ۲۲ را امتحان کن. دیگری میرور npm چابکان است. اگر دانلود پکیج‌ها کند است یا وسط کار قطع می‌شود، این متغیر را هم در متغیرهای محیطی سرویس بگذار:

NPM_CONFIG_REGISTRY=https://mirror2.chabokan.net/npm/

راه دیگر روشن کردن گزینهٔ Mirror اختصاصی در تنظیمات سرویس است.

اگر خودت build گرفتی: هاست Static

اگر روی کامپیوترت npm run build زده‌ای و فقط پوشهٔ dist را داری، می‌توانی از هاست Static استفاده کنی. فایل‌های پیش‌فرض پوشهٔ app را پاک کن و محتوای داخل پوشهٔ dist را، نه خود پوشه را، مستقیم در app بگذار، طوری که index.html مستقیم داخل app باشد. این‌طوری سرویس فقط فایل نمایش می‌دهد و چیزی نصب نمی‌کند. در عوض هر بار که پروژه عوض شد، باید خودت دوباره build بگیری و آپلود کنی.

هاست Static هم آدرس‌هایی را که فایل واقعی ندارند به index.html برمی‌گرداند، پس رفرش صفحه‌های داخلی روی آن هم ۴۰۴ نمی‌دهد و فایل nginx.conf جداگانه لازم نیست. اگر خودت build می‌گیری، Static هم گزینهٔ خوبی است.

پروژه‌های جدید Lovable (TanStack Start) روی هاست Node.js

پروژهٔ TanStack Start با هاست React یا Static کامل کار نمی‌کند، چون بخشی از کارش روی سرور اجرا می‌شود. هاست Node.js چابکان برنامه را با npm start و روی پورت 3000 اجرا می‌کند و این با خروجی TanStack Start جور است. دو تغییر کوچک لازم است.

در vite.config.ts، به همان defineConfig که پروژه دارد، خروجی سرور Node.js را اضافه کن. اگر گزینهٔ دیگری داخل آن هست، نگهش دار:

import { defineConfig } from "@lovable.dev/vite-tanstack-config";

export default defineConfig({ nitro: { preset: "node-server" } });

در package.json هم یک دستور start بگذار که سرور ساخته‌شده را اجرا کند:

"scripts": {
  "build": "vite build",
  "start": "node .output/server/index.mjs"
}

همچنین در package.json ببین nitro در فهرست پکیج‌ها هست. بدون آن، build برنامه را بسته‌بندی نمی‌کند. اگر نیست، در چت Lovable بخواه اضافه‌اش کند.

ما یک پروژهٔ نمونه با همین پکیج تنظیمات Lovable ساختیم. بعد از npm run build فایل .output/server/index.mjs ساخته شد و npm start صفحه‌ها را روی پورت 3000 از سمت سرور رندر کرد. در این حالت try_files و تنظیم nginx لازم نیست، چون خود سرور مسیرها را مدیریت می‌کند.

مثل هاست React، سورس پروژه را بدون node_modules و .output آپلود کن و سرویس را ری‌استارت کن. طبق نکات تکمیلی Node.js، چابکان دستور build را از package.json می‌خواند، پکیج‌ها را نصب می‌کند و برنامه را با npm start بالا می‌آورد. اگر نصب با خطای peer dependency متوقف شد، همان NPM_INSTALL_COMMAND بالا را در متغیرهای این سرویس هم بگذار. اگر در لاگ دیدی .output/server/index.mjs پیدا نشد، npm run build را روی کامپیوتر خودت بزن و پوشهٔ .output را هم آپلود کن. ما همین پوشه را جدا و بدون node_modules اجرا کردیم و صفحه‌ها درست باز شدند.

اگر پروژه به Supabase یا بک‌اند Lovable وصل است، متغیرهای SUPABASE_URL و SUPABASE_PUBLISHABLE_KEY را هم برای کد سمت سرور در متغیرهای محیطی سرویس بگذار، به‌علاوهٔ هر کلید مخفی‌ای که server functionهای پروژه می‌خوانند. این کلیدها در مخزن نیستند. اینجا کد سمت سرور از دیتاسنتر به Supabase وصل می‌شود، پس بعد از ساخت سرویس یک صفحه را که از سرور داده می‌گیرد تست کن. اگر خطای اتصال دیدی، سرویس را در موقعیت اروپا بساز.

متغیرهای محیطی و کلیدهای Supabase

پروژه‌های Lovable و Bolt معمولاً به Supabase وصل‌اند و آدرس و کلیدش در فایل .env است. در Lovable شکلش این است:

VITE_SUPABASE_URL="https://your-project-id.supabase.co"
VITE_SUPABASE_PUBLISHABLE_KEY="your-publishable-key"

دو نکته را در تست خودمان دیدیم:

• مقدارهای VITE_ موقع build داخل فایل JS می‌نشینند. وقتی .env در پروژه بود، آدرس Supabase داخل فایل نهایی بود. وقتی .env را برداشتیم، نبود و کتابخانهٔ Supabase با خطای supabaseUrl is required متوقف شد. نتیجه‌اش در مرورگر یک صفحهٔ سفید است. پس .env باید قبل از build در پروژه باشد. اگر بعداً مقدارش را عوض کردی، باید دوباره build بگیری؛ روی هاست React یعنی یک ری‌استارت. اگر از راه Git آمده‌ای و بعد از clone فایل .env در app نیست، از «مدیریت فایل‌ها» یک فایل .env بساز، همان دو خط را داخلش بگذار و سرویس را ری‌استارت کن.
• هر متغیر VITE_ که در کد استفاده شود، برای همه قابل دیدن است. یک کلید آزمایشی با پیشوند VITE_ گذاشتیم و بعد از build عین متنش در فایل JS بود. هر کسی با F12 همین را می‌بیند.

برای همین کلید publishable یا anon در Supabase برای نمایش در مرورگر ساخته شده و دیده شدنش مشکل نیست، به شرط اینکه روی جدول‌ها Row Level Security (RLS) روشن باشد. مستندات Lovable هم می‌گوید قانون‌های RLS اشتباه یکی از دلیل‌های رایج لو رفتن داده است. کلید service_role یا کلید secret اما هیچ‌وقت نباید با پیشوند VITE_ یا در هر جای کد سمت مرورگر باشد. اگر جایی دیدی، همان را در داشبورد Supabase عوض کن. همین قانون برای کلید API هوش مصنوعی هم هست: اگر سایتت مدل GPT صدا می‌زند، کلید را فقط سمت سرور نگه دار. ساختن کلید و این نکته در آموزش کار با API ChatGPT و ساخت کلید آمده است.

دو نکتهٔ دیگر هم قبل از انتقال مهم است:

• درخواست‌های Supabase از مرورگر کاربر می‌روند، نه از هاست. جابه‌جا کردن هاست، بک‌اند را جابه‌جا نمی‌کند. سایت روی چابکان بالا می‌آید، ولی داده و ورود کاربرها هنوز در Supabase است. اگر پروژه از بک‌اند داخلی Lovable (Lovable Cloud) یا دیتابیس Bolt استفاده می‌کند، آن بخش هم سر جایش می‌ماند. مصرف Lovable Cloud و قابلیت‌های هوش مصنوعی داخل اپ همچنان از حساب Lovable کم می‌شود. اگر پروژه از دیتابیس Bolt استفاده می‌کند، پروژه را در Bolt Unpublish نکن، چون Bolt دیتابیس پروژه‌های منتشرنشده را بعد از چند روز کم‌مصرفی ممکن است متوقف کند. بعد از انتقال، سایت را با اینترنت موبایل و خانگی ایران باز کن و ورود و ثبت داده را امتحان کن. اگر می‌خواهی داده هم داخل ایران باشد، باید بک‌اند را هم منتقل کنی.
• آدرس تازه را به ورود کاربران معرفی کن. اگر سایت ورود با Google یا ایمیل دارد، دامنهٔ جدید را در Supabase به فهرست Redirect URLها اضافه کن. وگرنه ورود بعد از انتقال خطا می‌دهد.

وصل کردن دامنه و SSL

وقتی سایت روی دامنهٔ پیش‌فرض سرویس درست کار کرد، دامنهٔ خودت را وصل کن:

1. اگر دامنه نداری، از ثبت دامنهٔ چابکان بگیر.
2. در سرویس به بخش «دامنه‌ها» برو، «افزودن دامنه» را بزن و دامنه و سرویس را انتخاب کن.
3. در تنظیمات دامنه، اتصال از طریق DNS را انتخاب کن و رکوردهای NS نمایش‌داده‌شده را در پنل ثبت‌کنندهٔ دامنه بگذار. وقتی وضعیت «متصل شد» را دیدی، کار تمام است. مراحل با تصویر در مستند افزودن دامنه از طریق DNS آمده است.
4. در «تنظیمات Https» همان دامنه، انتقال خودکار HTTP به HTTPS را روشن کن.

اگر گواهی صادر نشد، چرا SSL نصب نمی‌شود؟ خطاهای رایج را بررسی کرده است. نشانی lovable.app هم سر جایش می‌ماند و آخرین نسخه‌ای را که در Lovable منتشر کرده بودی نشان می‌دهد، تا وقتی خودت آن را Unpublish کنی.

رفع ۴۰۴ بعد از رفرش و خطاهای رایج دیپلوی پروژه Lovable

چیزی که می‌بینی	علت	چه کار کنی
صفحهٔ اول باز می‌شود، ولی رفرش یک صفحهٔ داخلی ۴۰۴ می‌دهد	سرور برای آدرس‌هایی که فایل ندارند، index.html را برنمی‌گرداند	هاست React و Static هر دو با تنظیم پیش‌فرض این را درست می‌کنند. اگر باز هم ۴۰۴ دیدی، مطمئن شو index.html (روی Static) یا package.json (روی React) مستقیم داخل app است، نه داخل یک پوشهٔ دیگر
صفحهٔ سفید و در Console خطای supabaseUrl is required	فایل .env موقع build در پروژه نبوده	.env را کنار package.json بگذار و سرویس را ری‌استارت کن
نصب پکیج‌ها با خطای ERESOLVE یا peer dependency متوقف می‌شود	ناسازگاری نسخهٔ پکیج‌ها	NPM_INSTALL_COMMAND=npm install --legacy-peer-deps
build با خطای نسخهٔ Node.js متوقف می‌شود	پروژه نسخهٔ دیگری از Node.js می‌خواهد	نسخهٔ Node.js را از تنظیمات سرویس روی ۲۲ بگذار
به جای سایت، صفحهٔ پیش‌فرض یا خطای nginx می‌آید	فایل‌ها داخل یک پوشهٔ اضافه Extract شده‌اند و package.json مستقیم در app نیست	فایل‌ها را مستقیم به app منتقل کن و ری‌استارت کن
ورود با Google یا ایمیل بعد از انتقال خطای redirect می‌دهد	دامنهٔ جدید در Supabase ثبت نشده	دامنه را به Redirect URLهای Supabase اضافه کن
پروژهٔ TanStack Start روی هاست React یا Static کار نمی‌کند	این نوع پروژه سرور Node.js لازم دارد	از هاست Node.js و تنظیم node-server استفاده کن

باقی خطاهای هاست React در مشکلات احتمالی React آمده است.

سایت Lovable یا Bolt خودت را روی چابکان منتشر کن

برای دیپلوی پروژه Lovable و پروژه‌های Bolt از نوع React و Vite، هاست React (هاست ری‌اکت) چابکان کوتاه‌ترین مسیر است: سورس را آپلود می‌کنی، build و nginx با چابکان است و رفرش صفحه‌های داخلی هم از اول درست کار می‌کند.

اگر پروژه را با Cursor ادامه می‌دهی و Git و CI داری، دیپلوی پروژه Cursor روی هاست ابری را هم ببین. برای آشنایی بیشتر با این سبک ساختن سایت، وایب کدینگ چیست؟ را بخوان.

سوالات متداول درباره دیپلوی پروژه Lovable و Bolt

بدون پلن پولی Lovable هم می‌شود کد را گرفت؟

بله. اتصال به GitHub در همهٔ پلن‌های Lovable هست و بعد از اتصال، از صفحهٔ مخزن در GitHub می‌توانی ZIP بگیری. دکمهٔ Download codebase داخل خود Lovable فقط در پلن‌های پولی فعال است.

هاست React بگیرم یا Static؟

اگر سورس پروژه را داری، هاست React ساده‌تر است، چون build را خود چابکان انجام می‌دهد و هر تغییر فقط یک ری‌استارت می‌خواهد. اگر خودت build می‌گیری و فقط محتوای پوشهٔ dist را آپلود می‌کنی، Static هم گزینهٔ خوبی است. رفرش صفحه‌های داخلی روی هر دو بدون تنظیم اضافه درست کار می‌کند.

بعد از انتقال، باز هم می‌توانم در Lovable تغییر بدهم؟

بله، اگر پروژه به GitHub وصل باشد. تغییرهای Lovable خودکار به مخزن می‌روند. روی هاست چابکان در کنسول سرویس git pull بزن (با همان Personal Access Token به جای رمز GitHub) و سرویس را ری‌استارت کن تا دوباره build شود. دکمهٔ Publish در Lovable فقط نسخهٔ روی هاست خود Lovable را به‌روز می‌کند.

کلید Supabase در کد سایت دیده می‌شود. خطرناک است؟

کلید publishable یا anon برای همین ساخته شده و دیده شدنش طبیعی است. امنیت داده با قانون‌های RLS روی جدول‌هاست، پس قبل از انتشار مطمئن شو همهٔ جدول‌ها RLS دارند. کلید service_role یا secret اما نباید هیچ‌وقت در کد سمت مرورگر یا متغیرهای VITE_ باشد.

سایت بعد از انتشار صفحهٔ سفید نشان می‌دهد. چرا؟

با F12 تب Console را باز کن. اگر supabaseUrl is required یا خطای مشابهی دیدی، فایل .env موقع build در پروژه نبوده است. آن را کنار package.json بگذار و سرویس را ری‌استارت کن.

پروژهٔ Bolt من Next.js است. همین مسیر را بروم؟

نه. پروژهٔ Next.js باید روی هاست Next.js برود، چون بخشی از صفحه‌ها روی سرور ساخته می‌شود و پوشهٔ dist ندارد. گرفتن کد از Bolt همان است، فقط سرویس مقصد فرق می‌کند.