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

پروژه‌های مبتنی بر React خودت رو کمتر از 5 دقیقه Deploy کن!

توی این نوشته، با استفاده از Nginx و letsencrypt ، پروژه‌های React یا Next js خودمون رو زیر 5 دقیقه روی یک سرور لینوکس، deploy می‌کنیم.

? شما از قبل بایستی یک سرور لینوکس ( که ما اینجا از اوبونتو استفاده می‌کنیم ) تهیه کرده باشید و از طریق SSH به اون متصل بشید. همچنین نیاز به آخرین ورژن npm و nodejs روی سرور خودتون دارید.

1️⃣ نصب nginx و letsencrypt بر روی سرور

$ sudo apt-get update
$ sudo apt-get install nginx letsencrypt

2️⃣ ویرایش تنظیمات پیش‌فرض nginx

$ 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

3️⃣ راه‌اندازی letsencrypt برای ایجاد گواهی SSL

$ 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

4️⃣ اجرای پروژه ( run کردن )

در ابتدا پروژه‌ی خودتون رو از طریق git روی سرور clone کنید. اگر موفق نشدید، احتمالا نیاز به set کردن dns روی سرور دارید.

سپس برای ران کردن پروژه و برقراری اجرای آن پس از بسته شدن session اتصال به سرور، نیاز به دستور screen دارید که می‌تونید از طریق لینک زیر راجع بهش بخونید.

? آموزش و کار با دستورات screen

برای مثال من یک دستور screen برای ران کردن پروژه‌‌ی react رو می‌نویسم که مشابه همین برای next هم می‌تونید استفاده کنید:

$ sudo npm run build
$ sudo screen serve -s build

? کار ما تمام شد!

هم‌اکنون پروژه‌ی شما بر روی دامنه شما به همراه https قابل دسترسی است.

هرجا که به مشکل خوردید یا سوالی داشتید، می‌تونید زیر همین پست یا در توییتر من بپرسید.