استقرار پروژه‌های React با استفاده از Nginx و گواهی SSL

استقرار پروژه‌های React با استفاده از Nginx و گواهی SSL


استقرار پروژه‌های ریکتپروژه‌های مبتنی بر React خودت رو کمتر از 5 دقیقه Deploy کن!توی این نوشته، با استفاده از Nginx و letsencrypt ، پروژه‌های React یا Next js خودمون رو زیر 5 دقیقه روی یک سرور لینوکس، deploy می‌کنیم.📢 شما از قبل بایستی یک سرور لینوکس ( که ما اینجا از اوبونتو استفاده می‌کنیم ) تهیه کرده باشید و از طریق SSH به اون متصل بشید. همچنین نیاز به آخرین ورژن npm و nodejs روی سرور خودتون دارید.$ sudo apt-get update
$ sudo apt-get install nginx letsencrypt$ sudo vim /etc/nginx/sites-available/defaultکه محتوای زیر رو در اون تغییر می‌دیم و به جای <your_domain> ، نام دامنه خودمون رو قرار می‌دیم.server {
listen 80 default_server;
listen [::]:80 default_server;

root /var/www/html;
index index.html index.htm index.nginx-debian.html;

server_name <your_domain>;

location / {
try_files $uri $uri/ =404;
}

location ~ /.well-known {
allow all;
}
}و با دستور زیر nginx رو ریستارت می‌کنیم.$ sudo systemctl restart nginx$ sudo letsencrypt certonly -a webroot –webroot-path=/var/www/html -d <your_domain> -d www.<your_domain>
$ sudo openssl dhparam -out /etc/ssl/certs/dhparam.pem 2048ایجاد فایل کانفیگ nginx برای SSL$ sudo vim /etc/nginx/snippets/ssl-params.confکه محتوای زیر رو قرار می‌دیم:ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
ssl_ciphers &quotEECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH”
ssl_ecdh_curve secp384r1;
ssl_session_cache shared:SSL:10m;
ssl_session_tickets off;
ssl_stapling on;
ssl_stapling_verify on;

resolver 8.8.8.8 8.8.4.4 valid=300s;
resolver_timeout 5s;

add_header Strict-Transport-Security &quotmax-age=63072000; includeSubdomains”
add_header X-Frame-Options DENY;
add_header X-Content-Type-Options nosniff;

ssl_dhparam /etc/ssl/certs/dhparam.pem;و در نهایت فایل کانفیگ nginx خودمون رو مجددا ویرایش می‌کنیم:server {
listen 80 default_server;
listen [::]:80 default_server;
server_name <your_domain> www.<your_domain>;
return 301 https://$server_name$request_uri;
}

server {
listen 443 ssl http2 default_server;
listen [::]:443 ssl http2 default_server;

server_name <your_domain>;

ssl_certificate /etc/letsencrypt/live/<your_domain>/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/<your_domain>/privkey.pem;
include snippets/ssl-params.conf;

location / {
# reverse proxy for node server
proxy_pass http://localhost:5000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection ‘upgrade’;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}

location ~ /.well-known {
allow all;
}
}چند نکته راجع به فایل کانفیگ nginx رو بهش اشاره کنم:🧨 بسته به پروژتون next، react یا … و port ای که برای run شدنش انتخاب کردید، در خط 20 اون رو تغییر بدید.🧨 در خط اول تا ششم هم ما یه ریدایرکت از http به https داریم.🧨 در خط 14 و 15 هم به جای your_domain، نام دامنه‌ای که در هنگام راه‌اندازی letsencrypt وارد کردید را قرار دهید.🧨 هر دو پورت 80 و 443 هم بایستی روی سرورتون باز باشه.و در آخر دوباره سرویس nginx رو restart می‌کنیم:$ sudo service nginx restartدر ابتدا پروژه‌ی خودتون رو از طریق git روی سرور clone کنید. اگر موفق نشدید، احتمالا نیاز به set کردن dns روی سرور دارید.سپس برای ران کردن پروژه و برقراری اجرای آن پس از بسته شدن session اتصال به سرور، نیاز به دستور screen دارید که می‌تونید از طریق لینک زیر راجع بهش بخونید.📌 آموزش و کار با دستورات screenبرای مثال من یک دستور screen برای ران کردن پروژه‌‌ی react رو می‌نویسم که مشابه همین برای next هم می‌تونید استفاده کنید:$ sudo npm run build
$ sudo screen serve -s buildهم‌اکنون پروژه‌ی شما بر روی دامنه شما به همراه https قابل دسترسی است.هرجا که به مشکل خوردید یا سوالی داشتید، می‌تونید زیر همین پست یا در توییتر من بپرسید.

منبع

Author: admin

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *