http://localhost
, geliştirme için çoğunlukla HTTPS gibi davranır
amaçlar. Ancak bazı özel durumlar vardır.
Örneğin, ihtiyacınız olduğunda özel ana makine adları veya tarayıcılarda güvenli çerezler
HTTPS gibi davranacak şekilde ve web sitenizin doğru şekilde
sitenizin üretimde nasıl çalıştığını temsil eder. (Üretim web siteniz
HTTPS kullanıyorsanız HTTPS'ye geçişe öncelik verin).
Bu sayfada, HTTPS ile sitenizi yerel olarak nasıl çalıştırabileceğiniz açıklanmaktadır.
Kısa talimatlar için mkcert hızlı başvuru sayfasına bakın.**
Mkcert kullanarak sitenizi HTTPS ile yerel olarak çalıştırma (önerilir)
Yerel geliştirme sitenizde HTTPS'yi kullanmak ve https://localhost
veya
https://mysite.example
(özel ana makine adı), bir
TLS sertifikası
cihazınızın ve tarayıcınızın güvendiği, güvenilir adlı bir tüzel kişi tarafından imzalanmış
sertifika yetkilisi (CA).
Tarayıcı, geliştirme sunucunuzun sertifikasının
güvenilir CA'ya göz atmanız önerilir.
mkcert sertifika oluşturmanızı ve imzalamanızı sağlar. Diğer yararlı özellikler için Sitenizi HTTPS ile yerel olarak çalıştırma: diğer seçenekler başlıklı makaleyi inceleyin.
Pek çok işletim sisteminde sertifika oluşturmaya yönelik kitaplıklar bulunur. Örneğin: openssl. Ancak bunlar daha karmaşıktır ve ve platformlar arası olmayabilir. Bu nedenle, daha büyük geliştirici ekiplerine daha az erişilebilir.
Kurulum
Mkcert'i yükleyin (yalnızca bir kez).
Talimatları uygulayın. mkcert'i yüklemeniz gerekir. Örneğin, macOS'te:
brew install mkcert brew install nss # if you use Firefox
Yerel kök CA'larınıza mkcert'i ekleyin.
Terminalinizde aşağıdaki komutu çalıştırın:
mkcert -install
Bu işlem, bir yerel sertifika yetkilisi (CA) oluşturur. Mccert tarafından oluşturulan yerel CA'nıza yalnızca yerel olarak, cihazınızda güvenilir.
Siteniz için mkcert tarafından imzalanmış bir sertifika oluşturun.
Terminalinizde sitenizin kök dizinine veya bir dizin oluşturmanız gerekir.
Ardından şu komutu çalıştırın:
mkcert localhost
mysite.example
gibi özel bir ana makine adı kullanıyorsanız şu komutu çalıştırın:mkcert mysite.example
Bu komutun iki işlevi vardır:
- Belirttiğiniz ana makine adı için bir sertifika oluşturur.
- Mkcert'in sertifikayı imzalamasına izin verir.
Sertifikanız artık hazır ve bir sertifika yetkilisi tarafından imzalandı yerel olarak güvenir.
Sunucunuzu, yeni oluşturduğunuz TLS sertifikası için HTTPS kullanacak şekilde yapılandırın.
Bunun nasıl yapılacağıyla ilgili ayrıntılar sunucunuza bağlıdır. Aşağıda birkaç örnek verilmiştir:
👩🏻 💻 Düğümüyle:
server.js
({PATH/TO/CERTIFICATE...}
ve{PORT}
değerlerini değiştirin):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-server ile:
Sunucunuzu aşağıdaki gibi başlatın (
{PATH/TO/CERTIFICATE...}
kısmını değiştirin):http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem
-S
, sunucunuzu HTTPS ile çalıştırırken-C
, sertifikayı ve-K
, anahtarı ayarlar.👩🏻 💻, React geliştirme sunucusuyla:
package.json
öğenizi aşağıdaki gibi düzenleyin ve{PATH/TO/CERTIFICATE...}
ile değiştirin:"scripts": { "start": "HTTPS=true SSL_CRT_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL_KEY_FILE={PATH/TO/CERTIFICATE-KEY-FILENAME}.pem react-scripts start"
Örneğin,
localhost
için sitenizin kök dizin:|-- my-react-app |-- package.json |-- localhost.pem |-- localhost-key.pem |--...
Bu durumda
start
komut dosyanız şu şekilde görünmelidir:"scripts": { "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"
👩🏻 💻 Diğer örnekler:
Şu işlemler için tarayıcınızda
https://localhost
veyahttps://mysite.example
uygulamasını açın: sitenizi HTTPS ile yerel olarak çalıştırdığınızı bir kez daha kontrol edin. Hiçbirini görmeyeceksiniz Tarayıcınız mkcert'e yerel bir sertifika olarak güvendiğinden tarayıcı uyarıları yetkilidir.
mkcert hızlı başvuru
Yerel geliştirme sitenizi HTTPS ile çalıştırmak için:
-
Mkcert'i ayarlayın.
Henüz yapmadıysanız mkcert'i yükleyin. Örneğin, macOS'e:
brew install mkcert
install mkcert (mkcert'i yükle) seçeneğini kontrol edin. başlıklı makaleyi inceleyin.
Ardından bir yerel sertifika yetkilisi oluşturun:
mkcert -install
-
Güvenilir bir sertifika oluşturun.
mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}
Bu işlem, mkcert'in otomatik olarak imzaladığı geçerli bir sertifika oluşturur.
-
Geliştirme sunucunuzu HTTPS'yi ve kullandığınız sertifikayı kullanacak şekilde yapılandırın oluşturulmalıdır.
Artık tarayıcınızdan https://{YOUR HOSTNAME}
hizmetine herhangi bir uyarı olmadan erişebilirsiniz
</div>
Sitenizi HTTPS ile yerel olarak çalıştırma: diğer seçenekler
Sertifikanızı ayarlamanın diğer yolları aşağıda verilmiştir. Bunlar genellikle daha karmaşık veya daha riskli olabilir.
Kendinden imzalı sertifika
Ayrıca, mkcert gibi bir yerel sertifika yetkilisi kullanmamaya da karar verebilirsiniz. sertifikanızı kendiniz imzalayın. Bu yaklaşımın bazı dezavantajları vardır:
- Tarayıcılar, bir sertifika yetkilisi olarak size güvenmedikleri için uyarı gösterirler.
manuel olarak atlamanız gerekir. Chrome'da bayrağı
Şu tarihte bu uyarıyı otomatik olarak atlamak için
#allow-insecure-localhost
:localhost
. - Güvenli olmayan bir ağda çalışıyorsanız bu işlem güvenli değildir.
- Bu, mkcert gibi bir yerel CA kullanmaktan daha kolay veya hızlı değildir.
- Kendinden imzalı sertifikalar, güvenilen sertifikalar ile tam olarak aynı şekilde çalışmaz ekleyebilirsiniz.
- Bu tekniği bir tarayıcı bağlamında kullanmıyorsanız, . Şu süre içinde yeniden etkinleştirmeyi unutma: üretilmesi güvenlik sorunlarına neden olur.
Sertifika belirtmezseniz React'in ve Vue's geliştirme sunucusu HTTPS seçenekleri arasında eşofman. Bu işlem hızlıdır, ancak aynı tarayıcı uyarıları ve diğer kendinden imzalı sertifikaların tehlikeleri. Neyse ki kullanıcı arabirimi kullanarak çerçevelerin yerleşik HTTPS seçeneği ve yerel olarak güvenilir bir sertifika belirtme mkcert veya benzeri bir sistem kullanılarak oluşturulur. Daha fazla bilgi için React ile mkcert örneği.
Yerel olarak çalışan sitenizi tarayıcınızda HTTPS kullanarak açarsanız tarayıcı, yerel geliştirme sunucunuzun sertifikasını kontrol eder. Zaman sizin imzaladığınızı görür. Sertifika, sertifikanın güvenilir bir sertifika yetkilisi olarak kayıtlı olmanız gerekir. Çünkü tarayıcınız sertifikaya güvenemez ve uyarı gösterilir. bağlantınızın güvenli olmadığını söyleyen bir e-posta alırsınız. Yine de HTTPS oluşturuyor. bağlamayı kabul edersiniz ancak bunu yapmakla ilgili riskler size aittir.
Normal bir sertifika yetkilisi tarafından imzalanan sertifika
Resmi bir CA tarafından imzalanmış bir sertifika da kullanabilirsiniz. Bu özellik, aşağıdaki komplikasyonlar vardır:
- Kurulum için yapmanız gereken, aşağıdaki gibi yerel bir CA tekniğini kullanmaya kıyasla daha fazla işlem vardır: mkcert.
- Kendi kontrolünüzdeki geçerli bir alan adını kullanmanız gerekir. Bu demek oluyor ki
Aşağıdakiler için resmi CA'ları kullanın:
localhost
ve diğer ayrılmışexample
veyatest
gibi alan adları için geçerlidir.- Kontrol etmediğiniz herhangi bir alan adı.
- Geçersiz üst düzey alanlar. Daha fazla bilgi için geçerli üst düzey alanlar listesine bakın.
Ters proxy
Yerel olarak çalışan bir siteye HTTPS ile erişmenin diğer bir seçeneği de ters proxy: ngrok ifadesidir. Bu durum aşağıdaki riskleri beraberinde getirir:
- Ters proxy URL'sini paylaştığınız herkes yerel geliştirme uygulamanıza erişebilir girin. Bu, projenizi müşterilere göstermek için yararlı olabilir hassas bilgileri paylaşmasına izin vermez.
- Bazı ters proxy hizmetleri kullanım için ücret alır. Bu nedenle fiyatlandırma, bağlı olarak ayarlayabilirsiniz.
- Tarayıcılardaki yeni güvenlik önlemleri, nasıl çalıştığını açıklayacağım.
İşaretle (önerilmez)
Chrome'da mysite.example
gibi özel bir ana makine adı kullanıyorsanız
işaretini kaldırın.mysite.example
Bunu yapmaktan kaçının
şu nedenlerle:
mysite.example
öğesinin her zaman yerel bir kullanıcıya çözümlediğinden% 100 emin olmanız gerekir girin. Aksi takdirde, üretim kimlik bilgilerinin sızdırılması riskiyle karşı karşıya kalırsınız.- Bu işaret yalnızca Chrome'da çalıştığından farklı tarayıcılarda hata ayıklayamazsınız.
Tüm yorumculara ve katkıda bulunanlara, özellikle de Ryan Sleevi'ye, katkıları ve geri bildirimleri için Filippo Valsorda, Milica Mihajlija ve Rowan Merewood. 🙌
@anandu tarafından Unsplash'teki hero resim arka planı düzenlendi.