نحوه اضافه کردن دامنه سفارشی و نصب SSL (HTTPS) بر روی Localhost

نحوه اضافه کردن دامنه به لوکال هاست و نصب SSL بر روی Localhost ، معمولا توسعه دهندگان تمایل دارند از دامنه سفارشی یا دامنه مجازی بر روی Localhost استفاده کنند.مانند site.dev ، example.dev و غیره. قبلا ما می توانستیم به آسانی SSL را برروی لوکال هاست نصب کنیم. گوگل در ماه نوامبر سال 2018 اعلام کرد .dev ، یک دامنه اختصاصی برای توسعه دهندگان و تکنولوژی است و  SSL برای دامنه های .dev مورد نیاز خواهد بود.به همین خاطر ما قادر به استفاده از دامنه .dev نخواهیم بود.

در این مقاله از تجاری اپ ما قصد داریم روشی را به شما بیاموزیم که به آسانی قادر به استفاده از دامنه های .dev ،  .test ،  .comهمراه با HTTPS بر روی لوکال هاست باشید.در این مقاله ما از XAMPP برای اینکار استفاده می کنیم.با ما همراه باشید.

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

اضافه کردن دامنه به لوکال هاست

فایل hosts را از مسیر C:\Windows\System32\drivers\etc\hosts پیدا کنید ، آن را با نوت پد باز کنید و خط زیر را به آن اضافه کنید:

127.0.0.1 site.test

توجه: فایل hosts ممکن است بعد از ویرایش ذخیره نشود در اینصورت، مراحل زیر را دنبال کنید:

فایل hosts ویرایش شده را در دسکتاپ یا هر مکان دیگری ذخیره کنید.
تغییر نام فایل hosts  موجود در C: \ Windows \ System32 \ Drivers \ etc \ hosts از “hosts” به نامی دیگر مانند  “_hosts”
فایل hosts ویرایش شده را در این مسیر این فایل را C:\Windows\System32\drivers\etc قرار دهید. در صورت نیاز به دسترسی به admin ، بر روی OK کلیک کنید.

اکنون  سایت را به فایل httpd-vhosts.conf اضافه کنید.فایل C:\xampp\apache\conf\extra\httpd–vhosts.conf را ویرایش کنید و کد زیر را در آن وارد کنید. DocumentRoot محل پروژه xampp شماست.

## site.test
 <VirtualHost *:80>
     DocumentRoot "C:/xampp/htdocs"
     ServerName site.test
     ServerAlias *.site.test
 </VirtualHost>
 <VirtualHost *:443>
     DocumentRoot "C:/xampp/htdocs"
     ServerName site.test
     ServerAlias *.site.test
     SSLEngine on
     SSLCertificateFile "crt/site.test/server.crt"
     SSLCertificateKeyFile "crt/site.test/server.key"
 </VirtualHost>

اگر شما نمی خواهید SSL را نصب کنید، می توانید کد زیر را از فایل حذف کنید.

 <VirtualHost *:443>
     DocumentRoot "C:/xampp/htdocs"
     ServerName site.test
     ServerAlias *.site.test
     SSLEngine on
     SSLCertificateFile "crt/site.test/server.crt"
     SSLCertificateKeyFile "crt/site.test/server.key"
 </VirtualHost>

تا اینجا ما موفق به اضافه کردن دامنه به لوکال هاست شدیم . در ادامه SSL را نصب خواهیم کرد .

نصب SSL بر روی لوکال هاست

1. رفتن به دایرکتوری آپاچی و ساخت یک پوشه جدید

به مسیر xampp\apache بروید و یک پوشه با نام “crt” ایجاد کنید.در این پوشه گواهی های ما ذخیره خواهد شد.

2. افزودن دو فایل

ما در پوشه crt نیاز به دو فایل داریم یک فایل با نام cert.conf که در ادامه می توانید آن را دانلود کنید و فایل دیگری با نام make-cert.bat که باید آن را بسازید و کدهای زیر را در آن بنویسید:

1. cert.conf
2. make-cert.bat

@echo off
set /p domain="Enter Domain: "
set OPENSSL_CONF=../conf/openssl.cnf

if not exist .\%domain% mkdir .\%domain%

..\bin\openssl req -config cert.conf -new -sha256 -newkey rsa:2048 -nodes -keyout %domain%\server.key -x509 -days 365 -out %domain%\server.crt

echo.
echo -----
echo The certificate was provided.
echo.
pause

3. ویرایش cert.conf و اجرای make-cert.bat

فایل cert.conf file را باز کنید و در آن عبارت “site.test” را جستجو کنید ، سپس آن را با دامنه خود جایگزین کنید.
بر روی فایل make-cert.bat دابل کلیک کنید تا ترمینال شما باز شود ، سپس موارد خواسته شده را وارد کنید و اینتر بزنید.

4. نصب cert در ویندوز

بعد از اجرای مراحل بالا یه پوشه درون پوشه crt  با نام ‘site.test’ ایجاد خواهد شد که در این پوشه دو فایل با نام های server.crt و server.key وجود دارد، برای نصب آن برروی ویندوز بر روی فایل server.crt دابل کلیک کنید.

مانند تصویر بالا بر روی “Install Certificate” کلیک کنید و Local Machine را مانند تصویر پایین انتخاب کنید.

سپس گزینه “Place all certificate in the following store“ را انتخاب کرده و در ادامه  بروی browse کلیک کرده و گزینه Trusted Root Certification Authorities را انتخاب کنید.

بر روی OK ،  Next و Finish کلیک کنید.ما موفق شدیم SSL را با موفقیت نصب کنیم.

5. ری استارت کردن آپاچی و مرورگر

در انتها ما باید آپاچی خود را راه اندازی مجدد کنیم ، سپس مرورگر را هم رفرش کنید تا قفل سبز رنگ را مشاهده کنید.