دیپلوی نهایی در React

دیپلوی و آماده‌سازی برای تولید

بعد از تکمیل پروژه React، نوبت به آماده‌سازی برای محیط Production و دیپلوی می‌رسد. این مرحله تضمین می‌کند که اپلیکیشن شما بهینه، سبک و آماده ارائه به کاربران نهایی باشد.

ساخت نسخه Production

React هنگام اجرای npm start از یک سرور توسعه‌ای استفاده می‌کند که مناسب محیط واقعی نیست. برای ساخت نسخه Production، از دستور زیر استفاده کنید:

npm run build

خروجی این دستور یک پوشه به نام build ایجاد می‌کند که شامل فایل‌های بهینه و فشرده‌شده برای اجرا در سرور است.

مزایا:

کاهش حجم فایل‌ها (Minification و Tree Shaking)

بهینه‌سازی عملکرد برای سرعت بیشتر

دیپلوی با Vercel / Netlify / GitHub Pages

1. دیپلوی روی Vercel

Vercel یکی از بهترین گزینه‌ها برای میزبانی پروژه‌های React است.

تنها کافیست ریپازیتوری پروژه‌تان (GitHub/GitLab) را به Vercel متصل کرده و Build Command را npm run build و Output Directory را build تنظیم کنید.

2. دیپلوی روی Netlify

به Netlify بروید و پروژه را از GitHub ایمپورت کنید.

Build Command: npm run build

Publish Directory: build

3. دیپلوی روی GitHub Pages

پکیج gh-pages را نصب کنید:

npm install gh-pages --save-dev

در package.json اضافه کنید:

"homepage": "https://your-username.github.io/your-repo",

"scripts": {

•  "predeploy": "npm run build",
   "deploy": "gh-pages -d build"
  }

  
  


• 
  

  سپس اجرا کنید:

  
  

  npm run deploy
  
  

  
  

مدیریت محیط‌ها (env files)

برای ذخیره تنظیمات حساس یا متغیرهای محیطی مثل URLهای API، از فایل .env استفاده کنید.

نمونه فایل .env:

REACT_APP_API_URL=https://api.example.com

و در پروژه:

console.log(process.env.REACT_APP_API_URL);

نکته: تمام متغیرها باید با REACT_APP_ شروع شوند تا در build نهایی در دسترس باشند.

تنظیمات سئو پایه‌ای (React Helmet)

برای اضافه کردن متا تگ‌ها و عنوان‌های پویا، از کتابخانه React Helmet استفاده می‌شود.

نصب:

npm install react-helmet

مثال:

import { Helmet } from "react-helmet";
function HomePage() {
 return (
 <>
 }

جمع‌بندی

در این فصل یاد گرفتیم که:

چطور نسخه Production بسازیم (npm run build)

اپلیکیشن را روی Vercel، Netlify یا GitHub Pages دیپلوی کنیم

متغیرهای محیطی را با .env مدیریت کنیم

با React Helmet تنظیمات سئو را بهینه کنیم

این مرحله پایانی، اپلیکیشن شما را آماده انتشار و استفاده کاربران می‌کند.