از HTTPS برای توسعه محلی استفاده کنید

بیشتر اوقات، http://localhost برای اهداف توسعه مانند HTTPS رفتار می کند. با این حال، برخی موارد خاص مانند نام میزبان سفارشی یا استفاده از کوکی‌های ایمن در مرورگرها وجود دارد که باید به‌صراحت سایت توسعه خود را طوری تنظیم کنید که مانند HTTPS رفتار کند تا نحوه عملکرد سایت شما در تولید را به‌طور دقیق نشان دهد. (اگر وب سایت تولیدی شما از HTTPS استفاده نمی کند، تغییر به HTTPS را در اولویت قرار دهید ).

این صفحه نحوه اجرای سایت خود را به صورت محلی با HTTPS توضیح می دهد.

برای دستورالعمل های کوتاه، به مرجع سریع mkcert مراجعه کنید. **

سایت خود را به صورت محلی با HTTPS با استفاده از mkcert اجرا کنید (توصیه می شود)

برای استفاده از HTTPS با سایت توسعه محلی خود و دسترسی به https://localhost یا https://mysite.example (نام میزبان سفارشی)، به گواهی TLS نیاز دارید که توسط یک نهاد مورد اعتماد دستگاه و مرورگر شما امضا شده باشد، به نام مرجع گواهی معتبر (CA) ) . مرورگر قبل از ایجاد اتصال HTTPS بررسی می کند که آیا گواهی سرور توسعه شما توسط یک CA قابل اعتماد امضا شده است یا خیر.

توصیه می کنیم از mkcert ، یک CA چند پلتفرمی، برای ایجاد و امضای گواهی خود استفاده کنید. برای سایر گزینه های مفید، به اجرای سایت خود به صورت محلی با HTTPS مراجعه کنید: گزینه های دیگر .

بسیاری از سیستم‌عامل‌ها شامل کتابخانه‌هایی برای ایجاد گواهی‌ها هستند، مانند openssl . با این حال، آن‌ها نسبت به mkcert پیچیده‌تر و کمتر قابل اعتماد هستند، و لزوماً چند پلتفرمی نیستند، که باعث می‌شود تیم‌های توسعه‌دهنده بزرگ‌تر به آن‌ها دسترسی کمتری داشته باشند.

برپایی

1. mkcert را (فقط یک بار) نصب کنید.

   دستورالعمل های نصب mkcert را بر روی سیستم عامل خود دنبال کنید. به عنوان مثال، در macOS:

   brew install mkcert
   brew install nss # if you use Firefox
   

2. mkcert را به CAهای ریشه محلی خود اضافه کنید.

   در ترمینال خود دستور زیر را اجرا کنید:

   mkcert -install
   

   این یک مرجع گواهی محلی (CA) ایجاد می کند. CA محلی ایجاد شده توسط mkcert فقط به صورت محلی در دستگاه شما قابل اعتماد است.

3. یک گواهی برای سایت خود با امضای mkcert ایجاد کنید.

   در ترمینال خود، به دایرکتوری ریشه سایت خود یا هر دایرکتوری که می خواهید گواهی خود را در آن نگه دارید، بروید.

   سپس اجرا کنید:

   mkcert localhost
   

   اگر از نام میزبان سفارشی مانند mysite.example استفاده می کنید، اجرا کنید:

   mkcert mysite.example
   

   این دستور دو کار را انجام می دهد:

   • یک گواهی برای نام میزبانی که شما مشخص کرده اید ایجاد می کند.
   • اجازه دهید mkcert گواهی را امضا کند.

   گواهی شما اکنون آماده است و توسط یک مرجع گواهی که مرورگر شما به صورت محلی به آن اعتماد دارد امضا شده است.

4. سرور خود را پیکربندی کنید تا از HTTPS گواهی TLS که به تازگی ایجاد کرده اید استفاده کند.

   جزئیات نحوه انجام این کار به سرور شما بستگی دارد. چند نمونه در ادامه می آید:

   👩🏻‍💻 با گره:

   server.js (به جای {PATH/TO/CERTIFICATE...} و {PORT} ):

   const https = require('https');
   const fs = require('fs');
   const options = {
     key: fs.readFileSync('{PATH/TO/CERTIFICATE-KEY-FILENAME}.pem'),
     cert: fs.readFileSync('{PATH/TO/CERTIFICATE-FILENAME}.pem'),
   };
   https
     .createServer(options, function (req, res) {
       // server code
     })
     .listen({PORT});
   

   👩🏻‍💻 با سرور http :

   سرور خود را به صورت زیر راه اندازی کنید (جایگزین {PATH/TO/CERTIFICATE...} شوید):

   http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem
   

   -S سرور شما را با HTTPS اجرا می کند، در حالی که -C گواهی را تنظیم می کند و -K کلید را تنظیم می کند.

   👩🏻‍💻 با سرور توسعه React:

   package.json خود را به صورت زیر ویرایش کنید و {PATH/TO/CERTIFICATE...} را جایگزین کنید:

   "scripts": {
   "start": "HTTPS=true SSL_CRT_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL_KEY_FILE={PATH/TO/CERTIFICATE-KEY-FILENAME}.pem react-scripts start"
   

   به عنوان مثال، اگر یک گواهی برای localhost در دایرکتوری ریشه سایت خود ایجاد کرده اید:

   |-- my-react-app
       |-- package.json
       |-- localhost.pem
       |-- localhost-key.pem
       |--...
   

   سپس اسکریپت start شما باید به شکل زیر باشد:

   "scripts": {
       "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"
   

   👩🏻‍💻 نمونه های دیگر:

   • سرور توسعه زاویه ای
   • پایتون

5. https://localhost یا https://mysite.example در مرورگر خود باز کنید تا دوباره بررسی کنید که سایت خود را به صورت محلی با HTTPS اجرا می کنید. هیچ هشدار مرورگر را نخواهید دید، زیرا مرورگر شما به mkcert به عنوان یک مرجع گواهی محلی اعتماد دارد.

مرجع سریع mkcert