http://localhost
, geliştirme amacıyla çoğu zaman HTTPS gibi davranır. Ancak, özel ana makine adları veya tarayıcılarda güvenli çerezler kullanma gibi bazı özel durumlar vardır. Bu durumlarda, sitenizin üretimde çalışma şeklini doğru bir şekilde temsil etmek için geliştirme sitenizi HTTPS gibi davranacak şekilde açıkça ayarlamanız gerekir. (Üretim web siteniz HTTPS kullanmıyorsa HTTPS'ye geçmeyi öncelikli hale getirin).
Bu sayfada, sitenizi yerel olarak HTTPS ile nasıl çalıştıracağınız açıklanmaktadır.
Kısa talimatlar için mkcert hızlı başvuru bölümünü inceleyin.**
mkcert kullanarak sitenizi yerel olarak HTTPS ile çalıştırma (önerilir)
HTTPS'yi yerel geliştirme sitenizle kullanmak ve https://localhost
veya https://mysite.example
'a (özel ana makine adı) erişmek için cihazınız ve tarayıcınızın güvendiği bir varlık tarafından imzalanmış, güvenilir sertifika yetkilisi (CA) olarak adlandırılan bir TLS sertifikasına ihtiyacınız vardır.
Tarayıcı, HTTPS bağlantısı oluşturmadan önce geliştirme sunucunuzun sertifikasının güvenilir bir CA tarafından imzalanıp imzalanmadığını kontrol eder.
Sertifikanızı oluşturmak ve imzalamak için platformlar arası bir CA olan mkcert kullanmanızı öneririz. Diğer faydalı seçenekler için Sitenizi HTTPS ile yerel olarak çalıştırma: diğer seçenekler bölümüne bakın.
Birçok işletim sisteminde, sertifika oluşturmak için openssl gibi kitaplıklar bulunur. Ancak bu uygulamalar mkcert'ten daha karmaşık ve daha az güvenilirdir. Ayrıca platformlar arası olmayabilirler. Bu nedenle, daha büyük geliştirici ekipleri tarafından daha az erişilebilir olurlar.
Kurulum
mkcert'i yükleyin (yalnızca bir kez).
İşletim sisteminize mkcert yükleme instructions uygulayın. Örneğin, macOS'te:
brew install mkcert brew install nss # if you use Firefox
mkcert'i yerel kök CA'larınıza ekleyin.
Terminalinizde aşağıdaki komutu çalıştırın:
mkcert -install
Bu işlem, yerel sertifika yetkilisi (CA) oluşturur. mkcert tarafından oluşturulan yerel CA'nıza cihazınızda yalnızca yerel olarak güvenilir.
Siteniz için mkcert tarafından imzalanmış bir sertifika oluşturun.
Terminalinizde sitenizin kök dizinine veya sertifikanızı tutmak istediğiniz dizine gidin.
Ardından şu komutu çalıştırın:
mkcert localhost
mysite.example
gibi bir özel ana makine adı kullanıyorsanız şunu çalıştırın:mkcert mysite.example
Bu komut iki şey yapar:
- Belirttiğiniz ana makine adı için bir sertifika oluşturur.
- mkcert'in sertifikayı imzalamasını sağlar.
Sertifikanız artık hazır ve tarayıcınızın yerel olarak güvendiği bir sertifika yetkilisi tarafından imzalanır.
Sunucunuzu, az önce oluşturduğunuz TLS sertifikasını 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 var:
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...}
sunucuyu 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ı,-K
ise anahtarı ayarlar.👩🏻 💻, React geliştirme sunucusuyla:
package.json
öğenizi aşağıdaki gibi düzenleyin ve{PATH/TO/CERTIFICATE...}
öğesini 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, sitenizin kök dizininde
localhost
için bir sertifika oluşturduysanız:|-- my-react-app |-- package.json |-- localhost.pem |-- localhost-key.pem |--...
Bu durumda
start
komut dosyanız aşağıdaki gibi görünmelidir:"scripts": { "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"
👩🏻 💻 Diğer örnekler:
Sitenizi yerel olarak HTTPS ile çalıştırdığınızdan emin olmak için tarayıcınızda
https://localhost
veyahttps://mysite.example
uygulamasını açın. Tarayıcınız mkcert'e yerel sertifika yetkilisi olarak güvendiğinden tarayıcı uyarısı görmezsiniz.
mkcert hızlı başvuru
Yerel geliştirme sitenizi HTTPS ile çalıştırmak için:
-
mkcert ayarlarını yapın.
Henüz yapmadıysanız mkcert'i yükleyin (örneğin macOS'e):
brew install mkcert
Windows ve Linux talimatları için mkcert'i yükleme bölümünü kontrol edin.
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 2. adımda oluşturduğunuz sertifikayı kullanacak şekilde yapılandırın.
Artık tarayıcınızdan https://{YOUR HOSTNAME}
uygulamasına uyarılar 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 mkcert kullanmaktan daha karmaşık veya daha risklidir.
Kendinden imzalı sertifika
mkcert gibi yerel bir sertifika yetkilisi kullanmamaya, bunun yerine sertifikanızı kendiniz imzalamaya da karar verebilirsiniz. Bu yaklaşımın bazı tehlikeleri vardır:
- Tarayıcılar sertifika yetkilisi olarak size güvenmezler. Bu yüzden manuel olarak atlamanız gereken uyarılar gösterirler. Chrome'da,
localhost
tarihinde bu uyarıyı otomatik olarak atlamak için#allow-insecure-localhost
işaretini kullanabilirsiniz. - Güvenli olmayan bir ağda çalışıyorsanız bu yöntem güvenli değildir.
- Bu işlem, mkcert gibi yerel bir CA kullanmaktan daha kolay veya hızlı değildir.
- Kendinden imzalı sertifikalar, güvenilir sertifikalarla tam olarak aynı şekilde çalışmaz.
- Bu tekniği bir tarayıcı bağlamında kullanmıyorsanız sunucunuz için sertifika doğrulamasını devre dışı bırakmanız gerekir. Üretimde yeniden etkinleştirmeyi unutmak güvenlik sorunlarına neden olur.
Sertifika belirtmezseniz React ve Vue's geliştirme sunucusu HTTPS seçenekleri, arka planda kendinden imzalı bir sertifika oluşturur. Bu işlem hızlıdır, ancak tarayıcı uyarıları ve kendinden imzalı sertifikaların diğer tehlikeleriyle birlikte gelir. Neyse ki, ön uç çerçevelerinin yerleşik HTTPS seçeneğini kullanabilir ve mkcert veya benzer bir sertifika kullanılarak oluşturulmuş yerel olarak güvenilen bir sertifika belirtebilirsiniz. Daha fazla bilgi için React ile mkcert örneğine bakın.
Yerel olarak çalışan sitenizi tarayıcınızda HTTPS kullanarak açarsanız tarayıcınız yerel geliştirme sunucunuzun sertifikasını kontrol eder. Sertifikayı kendiniz imzaladığınızı tespit ettiğinde, güvenilir sertifika yetkilisi olarak kayıtlı olup olmadığınızı kontrol eder. Siz olmadığınız için tarayıcınız sertifikaya güvenemez ve bağlantınızın güvenli olmadığını belirten bir uyarı gösterir. Devam ederseniz HTTPS bağlantısı yine de oluşturulur, ancak bunun sorumluluğu size aittir.
Normal bir sertifika yetkilisi tarafından imzalanmış sertifika
Resmi bir CA tarafından imzalanmış bir sertifika da kullanabilirsiniz. Bu durum aşağıdaki komplikasyonları beraberinde getirir:
- Kurulum işlemi için mkcert gibi yerel bir CA tekniğini kullanmanıza kıyasla daha fazla işlem yapmanız gerekir.
- Sizin kontrolünüzde olan geçerli bir alan adı kullanmanız gerekir. Bu, aşağıdakiler için resmi CA'lar kullanamayacağınız anlamına gelir:
localhost
veexample
veyatest
gibi diğer ayrılmış alan adları.- 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
HTTPS ile yerel olarak çalışan bir siteye erişmenin diğer bir yolu da ngrok gibi bir ters proxy kullanmaktır. Bu durum, şu riskleri beraberinde getirir:
- Ters proxy URL'sini paylaştığınız herkes yerel geliştirme sitenize erişebilir. Bu, projenizin müşterilere tanıtılmasına yardımcı olabilir ancak yetkisiz kişilerin hassas bilgileri paylaşmasına da izin verebilir.
- Bazı tersine proxy hizmetleri kullanım için ücretlendirilir. Bu nedenle fiyatlandırma, hizmet seçiminizde etkili olabilir.
- Tarayıcılardaki yeni güvenlik önlemleri, bu araçların çalışma şeklini etkileyebilir.
İşaretle (önerilmez)
Chrome'da mysite.example
gibi özel bir ana makine adı kullanıyorsanız tarayıcının mysite.example
ürününü güvenli olarak kabul etmesini sağlamak için bir bayrak kullanabilirsiniz. Aşağıdaki nedenlerden dolayı bunu yapmaktan kaçının:
mysite.example
politikasının her zaman yerel bir adrese çözümlendiğinden% 100 emin olmanız gerekir. Aksi takdirde üretim kimlik bilgilerinin sızdırılması riskiyle karşı karşıya kalırsınız.- Bu bayrak yalnızca Chrome'da çalışır, dolayısıyla tarayıcılarda hata ayıklama yapamazsınız.
Özellikle Ryan Sleevi, Filippo Valsorda, Milica Mihajlija ve Rowan Merewood başta olmak üzere tüm yorumculara ve katkıda bulunanlara, katkıları ve geri bildirimleri için çok teşekkür ederiz. 🙌
@anandu tarafından Unsplash'ta yayınlanan lokomotif resim arka planı düzenlendi.