🚀 یک وب سایت کامل استک MERN را به صورت رایگان راه اندازی کنید: راهنمای کامل

استقرار یک پروژه تمام پشته MERN (MongoDB، Express.js، React، Node.js) به صورت رایگان ساده تر از آن چیزی است که فکر می کنید! با رندر و نتلیفای، می‌توانید هر دو باطن و فرانت‌اند را بدون هزینه میزبانی کنید. این راهنما شما را در راه اندازی پروژه، استقرار آن، و اتصال یکپارچه باطن و فرانت اند راهنمایی می کند.

راه اندازی پروژه: پشته MERN با Vite React

1. راه اندازی Backend

1. یک پوشه Backend ایجاد کنید:

mkdir backend
cd backend

1. Node.js را راه اندازی کنید:

npm init -y
npm install express mongoose cors dotenv
npm install --save-dev nodemon

1. Environment Variables (.env): در پوشه backend، یک فایل .env ایجاد کنید:

PORT=5000
MONGO_URI=your_mongodb_connection_string

2. راه اندازی Frontend با Vite React

1. یک برنامه Vite React ایجاد کنید:

mkdir frontend
cd frontend
npm create vite@latest . --template react
npm install

1. متغیرهای محیطی (.env): یک فایل .env در پوشه frontend ایجاد کنید:

VITE_BACKEND_URL=http://localhost:5000

ساختار پروژه

mern-project/  
│  
├── backend/  
│   ├── controllers/        # For handling business logic (e.g., userController.js)  
│   ├── models/             # MongoDB schemas (e.g., User.js)  
│   ├── routes/             # API routes (e.g., userRoutes.js)  
│   ├── .env                # Environment variables  
│   ├── index.js            # Entry point for the backend  
│   ├── package.json        # Backend dependencies  
│   └── README.md           # Backend-specific documentation  
│  
├── frontend/  
│   ├── public/             # Public files (e.g., index.html)  
│   ├── src/  
│   │   ├── components/     # Reusable components (e.g., Header.jsx, Footer.jsx)  
│   │   ├── pages/          # Pages (e.g., Home.jsx, Login.jsx)  
│   │   ├── styles/         # CSS/SCSS files  
│   │   ├── App.jsx         # Main app file  
│   │   ├── main.jsx        # ReactDOM render  
│   │   └── .env            # Frontend environment variables  
│   ├── vite.config.js      # Vite configuration  
│   ├── package.json        # Frontend dependencies  
│   └── README.md           # Frontend-specific documentation  
│  
└── README.md               # Main documentation for the entire project

🌐 استقرار Backend در Render

1. Backend را به GitHub فشار دهید:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/your-username/backend-repo.git
git push -u origin main

2. استقرار در رندر:

برای رندر وارد شوید.

یک وب سرویس جدید ایجاد کنید.

مخزن GitHub خود را وصل کنید.`

موارد زیر را تنظیم کنید:

دستور ساخت:

npm install

دستور شروع:

node index.js

متغیرهای محیطی (مانند MONGO_URI) را در قسمت تنظیمات > متغیرهای محیطی اضافه کنید.

3. URL Render را کپی کنید: پس از استقرار، یک URL دریافت خواهید کرد (به عنوان مثال، https://your-backend.onrender.com).

🌐 استقرار Frontend در Netlify

1. Frontend را بسازید:

npm run build

2. Frontend را به GitHub فشار دهید:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/your-username/frontend-repo.git
git push -u origin main

3. استقرار در Netlify:

وارد Netlify شوید.

یک سایت جدید ایجاد کنید.

مخزن GitHub خود را وصل کنید.

مجموعه:

دستور ساخت:

npm run build

دایرکتوری انتشار:

dist

🔗 اتصال Frontend و Backend

1. فایل .env را در پوشه frontend خود به روز کنید:

VITE_BACKEND_URL=https://your-backend.onrender.com

2. فرانت اند را در Netlify دوباره بسازید و مجدداً مستقر کنید:

npm run build

تست اپلیکیشن

URL Netlify را برای ظاهر خود باز کنید.

با برنامه خود تعامل کنید و مطمئن شوید که همه چیز همانطور که انتظار می رود کار می کند.

هر مشکلی را با استفاده از گزارش‌های Render یا ابزارهای توسعه‌دهنده مرورگر رفع اشکال کنید.

🎯 نکات کلیدی برای استقرار هموار

1. مانیتور کردن درخواست‌های API: از ابزارهایی مانند Postman برای آزمایش نقاط پایانی استفاده کنید.

2. متغیرهای محیط را ایمن نگه دارید: از اسرار کدگذاری سخت در کد خود اجتناب کنید.

3. بهینه سازی عملکرد ساخت: از تنظیمات تولید برای ساخت ها استفاده کنید (به عنوان مثال، NODE_ENV=production).

🙌 نتیجه گیری

با Render و Netlify، استقرار یک پروژه پشته MERN سریع، رایگان و کارآمد است. این راهنما را دنبال کنید تا پروژه خود را در کمترین زمان اجرا کنید.

اگر این را مفید یافتید، نظر خود را ارسال کنید یا آن را با توسعه دهندگان همکار خود به اشتراک بگذارید!

سوال یا بازخوردی دارید؟ به من خبر بده!