برای سرورهای اشتراکی که خیلی راحت می توانید به شرکت ارائه دهنده هاست درخواست بدهید و https را روی دامنه تان فعال کنید. اما برای سرورهای اختصاصی و مجازی (vps) چطور؟ برای اپلیکیشن هایی که خودتان برنامه نویسی کرده اید؟

برای این کار باید مراحل زیر را انجام دهید:

1- گرفتن گواهینامه ssl

گواهینامه ssl را هم می توانید پولی و هم رایگان تهیه کنید. let’s encrypt بطور رایگان این کار را انجام می دهد. دستورات زیر را برای نصب آن دنبال کنید (این دستورات برای سیستم عامل لینوکس، centos است. اگر شما ubuntu دارید، کافیست تا به جای yum ، از apt-get استفاده کنید – فرض براینست که از سرور nginx استفاده می کنیم، اگر از apache استفاده می کنید، به جای apache ، nginx بگذارید)

اول let’s encrypt را نصب کنید:

sudo yum install certbot python3-certbot-nginx

حالا یک گواهینامه ssl تولید کنید:

sudo certbot --nginx -d example.com

* به جای example.com ، آدرس سایت خودتان را قرار دهید – این دستور از شما می خواهد با قوانین موافقت کنید و یک آدرس ایمیل معتبر بدهید

*فایل گواهینامه در آدرس های /etc/letsencrypt/live/example.com/fullchain.pem و /etc/letsencrypt/live/example.com/privkey.pem قرار می گیرد که در مراحل بعدی به آن ها احتیاج داریم.

2- بالا آوردن برنامه تان روی پورت دلخواه _مثلاً 3000)

حالا باید برنامه اصلی تان را روی یک پورت دلخواه بالا بیاورید (مثلاً قسمت فرانت پروژه تان ) . برای لانچ کردن برنامه react ، لینک را ببینید.

3- بالا آوردن یک سرور روی پورت 80

حالا باید یک سرور (مثلاً apache یا nginx ) را روی پورت 80 بالا بیاورید. (ما در اینجا از nginx استفاده می کنیم).

برای نصب nginx ، دستورات زیر را وارد کنید:

sudo yum install epel-release

sudo yum install nginx

با دستور زیر ، nginx روی پورت 80 بالا می آید:

sudo yum install nginx

4- ریدایرکت درخواست ها از پورت 80 به پورت برنامه تان به همراه certificate کردن درخواست ها

حالا تمامی درخواست های http به پورت 80 می رود. پس باید درخواست های پورت 80 به پورت https (443) هدایت شود و همزمان با گواهینامه ssl تایید شود. برای این کار باید وارد تنظیمات (یعنی nginx) بشوید:

sudo nano /etc/nginx/nginx.conf

و این تکه کد را به آن اضافه کنید:

server {
    listen 80;
    server_name example.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl;
    server_name example.com;

    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

    location / {
        proxy_pass http://flicka.ir:3000;
        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;
    }
}

نکته ها:

*اگر به ارور خاصی در رابطه با کانکت نشدن یا برقرارنشدن اتصال با پورت برخوردید، ممکن است به خاطر فایروال باشد که آن پورت را بسته است. مثلاٌ اگر از firewalld به عنوان فایروال استفاده می کنید، می توانید با دستور زیر ، لیست پورت هایی که باز هستند را ببنید و اگر برنامه شما یا سرور (مثلاً پورت های 3000، 80 یا 443) باز نبودند، آن ها را به این لیست اضافه کنید:

دیدن لیست پورت های باز:

sudo firewall-cmd --list-ports

باز کردن پورت خاص (به جای 3000 ، پورت مورد نظر خودتان را بگذارید):

sudo firewall-cmd --add-port=3000/tcp --permanent
sudo firewall-cmd --reload

*اگر دو برنامه مختلف برای فرانت و بک نوشتید و از فرانت به بک درخواست کانکشن http می زنید ، باید آدرس بک را هم به https تغییر دهید (مثلاً محتوای فایل .env به شکل زیر تغییر می کند – برای آشنایی با enviroment variable ها ، لینک را ببینید)

REACT_APP_BACK=https://flicka.ir:4000
REACT_APP_FRONT=https://flicka.ir:3000
PORT=3000

حالا باید داخل پروژه بک بروید و فایل های certificate را مشخص کنید (مثلاً برای پروژه nest.js ، وارد فایل main.ts شوید و کد زیر را به تابع bootstrap اضافه کنید:

httpsOptions: {
      key: fs.readFileSync('/etc/letsencrypt/live/example.com/privkey.pem'),
      cert: fs.readFileSync('/etc/letsencrypt/live/example.com/fullchain.pem'),
    },
  });

برای تمدید گواهینامه ssl ، لینک را ببینید.