برنامه‌های ReactJS

(ReactJS Apps)

🎯 توضیحات و نکات تکمیلی

فهرست عناوین:

• تنظیمات Nginx
• فعال‌سازی gzip و Browser Caching

تنظیمات Nginx

استقرار برنامه‌های ReactJS، توسط وب‌سرورNginxانجام می‌گیرد. در شرایط مختلف، ممکن است که نیاز داشته باشید این وب‌سرور را مطابق با نیازهای‌تان تنظیم کنید. برای این کار، کافیست که در ریشه‌ی برنامه‌ی‌تان، فایلی با نامliara_nginx.confایجاد کنید. به‌صورت پیش‌فرض، برای برنامه‌های ReactJS، این فایل به شکل زیر تعریف شده‌است:

location / {
  index index.html index.htm;
  try_files $uri $uri/ /index.html =404;
}

که شما می‌توانید آن را به شیوه‌ی خودتان گسترش دهید:

location / {
  # ...
}
location /api {
  # ...
}
location /images {
  # ...
}

فعال‌سازی gzip و Browser Caching

برای کاهش اندازه‌ی صفحات وب، فعال‌سازی فشرده‌ساز gzip و همین‌طور Browser Caching بسیار توصیه می‌شود. برای این‌کار، کافیست که فایلی به‌نامliara_nginx.confدر ریشه‌ی برنامه‌ی‌تان، در کنار package.json، بسازید و بعد دستورliara deployرا وارد کنید.

gzip             on;
gzip_disable     "msie6";
gzip_vary        on;
gzip_proxied     any;
gzip_comp_level  6;
gzip_types       text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;

location / {
  index index.html index.htm;
  try_files $uri $uri/ /index.html =404;
}

# cache.appcache, your document html and data
location ~* .(?:manifest|appcache|html?|xml|json)$ {
  expires -1;
}

# Media: images, icons, video, audio, HTC
location ~* .(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
  expires 1M;
  access_log off;
  add_header Cache-Control "public";
}

# CSS, Javascript and Fonts
location ~* .(?:css|js|otf|ttf|eot|woff|woff2)$ {
  expires 1y;
  access_log off;
  add_header Cache-Control "public";
}