برنامه‌های ReactJS

(ReactJS Apps)

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

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

• تنظیمات Nginx
• تنظیم هدرهای امنیتی HTTP
• فعال‌سازی gzip و Browser Caching
• غیرفعال کردن Mirror
• فعال کردن Source Map

تنظیمات Nginx

در برنامه‌های React لیارا از وب‌سرور Nginx استفاده می‌شود و پیکربندی پیش‌فرض این وب‌سرور به‌شکل زیر است:

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

location ~ /\.well-known {
  allow all;
}

حال شما می‌توانید یک فایل با نام liara_nginx.confدر مسیر اصلی پروژه‌ی خود ایجاد کرده و پیکربندی وب‌سرور Nginx را متناسب با نیاز خود تغییر دهید:

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

location ~ /\.well-known {
  allow all;
}

location /api {
  # ...
}

location /images {
  # ...
}

تنظیم هدرهای امنیتی HTTP

برای جلوگیری از حملاتی مانند Clickjacking، XSS، SSL Striping می‌توانید هدرهای امنیتی را مانند مثال زیر در تنظیمات Nginx برنامه‌ی خود تنظیم کرده و نحوه‌ی برقراری ارتباط با سایت را برای مرورگرها تعیین کنید:

add_header X-Frame-Options DENY always;
add_header X-Content-Type-Options: nosniff;
add_header X-XSS-Protection "1; mode=block" always;
add_header Strict-Transport-Security "max-age=63072000; includeSubdomains; preload";

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

location ~ /\.well-known {
  allow all;
}

فعال‌سازی 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;
}

location ~ /\.well-known {
  allow all;
}

# 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";
}

غیرفعال کردن Mirror

Mirror اختصاصی لیارا به‌منظور دانلود سریع‌تر پکیج‌ها در پلتفرم React به‌صورت پیش‌فرض فعال است اما شما می‌توانید با قرار دادن قطعه‌کد زیر در فایل liara.json، این قابلیت را غیر فعال کنید:

{
  "react": {
    "mirror": false
  }
}

فعال کردن Source Map

Source Map در پلتفرم React لیارا به‌صورت پیش‌فرض غیرفعال است اما درصورت نیاز به فعال کردن این قابلیت می‌توانید قطعه‌کد زیر را در فایل liara.json قرار دهید:

{
  "react": {
      "sourceMap": true
   }
}

در نهایت برای اعمال این تغییر کافیست دستور liara deploy را در مسیر اصلی پروژه‌تان اجرا کنید.