پلتفرم VueJS

(VueJS Platform)

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

• تنظیمات 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 اختصاصی لیارا به‌منظور دانلود سریع‌تر پکیج‌ها در پلتفرم Vue به‌صورت پیش‌فرض فعال است اما شما می‌توانید با قرار دادن قطعه‌کد زیر در فایل liara.json، این قابلیت را غیر فعال کنید:

{
  "vue": {
    "mirror": false
  }
}

غیرفعال کردن Source Map

Source Map در پروژه‌های Vue به‌صورت پیش‌فرض فعال است و برای غیرفعال کردن این قابلیت می‌توانید قطعه‌کد زیر را در فایل vue.config.js اضافه کنید:

module.exports = {
  productionSourceMap: false
};

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