پلتفرم Static

(Static Platform)

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

• تنظیمات Nginx
• تنظیم هدرهای امنیتی HTTP
• فعال‌سازی gzip و Browser Caching
• انتقال خودکار فایل به مسیر build پروژه

تنظیمات Nginx

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

error_page 404 /404.html;
location / {
  index  index.html index.htm;
}

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

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

error_page 404 /404.html;
location / {
  index  index.html index.htm;
}

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

error_page 404 /404.html;
location / {
  index  index.html index.htm;
}

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

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

برای کاهش اندازه‌ی صفحات وب، فعال‌سازی فشرده‌ساز gzip و همین‌طور Browser Caching بسیار توصیه می‌شود. برای این‌کار، کافیست که فایلی به‌نامliara_nginx.confدر ریشه‌ی برنامه‌ی‌تان بسازید و بعد دستور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;

error_page 404 /404.html;
location / {
  index  index.html index.htm;
}

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

انتقال خودکار فایل به مسیر build پروژه

درصورتی که قصد داشته باشید پس از build شدن پروژه، فایلی را به‌صورت خودکار به مسیر build انتقال دهید می‌توانید اسکریپت build پروژه‌ی خود را در فایل package.json به شکل زیر ویرایش کنید. در مثال‌های زیر، فایل liara_nginx.conf به‌صورت خودکار از مسیر اصلی پروژه در پوشه‌ی build کپی می‌شود.

ویندوز:

"scripts": {
  ...
  "build": "react-scripts build && copy liara_nginx.conf ./build/",
},

لینوکس و مک:

"scripts": {
  ...
  "build": "react-scripts build && cp liara_nginx.conf ./build/",
},