Netlify'de React Ortamı Değişkenlerine Erişim

En son React uygulamanızın geliştirilmesini henüz tamamladınız ve bunu dünyanın geri kalanıyla paylaşmaya hazırsınız. Önünüzde duran tek şey uygulamayı dağıtmaktır. Bunu başarmanın düzinelerce yolu vardır, ancak bu makale, uygulamanızı Netlify'de nasıl barındıracağınızın yanı sıra herhangi bir ön uç Ortam Değişkenini nasıl doğru şekilde yapılandıracağınız konusunda size yol gösterecektir.

Çevre Değişkeni nedir?

Ortam Değişkenleri, programınızın dışında tanımlanan ve bir ad / değer çiftinden oluşan değişkenlerdir. Ardından, değerine erişmek için kodunuzun herhangi bir yerinde değişkenin adına başvurabilirsiniz.

Önkoşullar

• Yükleme react-dotenvnpm paketi
• Uygulamanız bir Github deposuyla düzgün bir şekilde senkronize edildi
• Bir var Netlify hesabı

Devam edin ve Netlify hesabınıza giriş yapın, ardından Ekibe Genel Bakış sekmesine gidin. Git'ten Yeni bir site eklemek için düğmeye tıklayın . Mevcut sağlayıcılardan GitHub'ı seçin ve bu, GitHub'ın kimlik bilgilerinize erişmesine izin vermenizi istemelidir. Oturum açtıktan sonra, deponuzu arayabilir, dağıtılacak şubeyi seçebilir ve yapı ayarlarını yapılandırabilirsiniz. Şimdilik, derleme ayarlarını bırakıp Siteyi dağıt'ı tıklayabiliriz , ancak react-dotenvuygulamamızda uygun şekilde yapılandırdıktan sonra buna biraz sonra döneceğiz .

React uygulamanızda 'react-dotenv' kitaplığını yapılandırın

İle react-dotenvyüklü, en doğru gidelim package.jsondosya ve aşağıdaki düzenlemeleri yapın. "scripts"Anahtar içermelidir react-dotenvbir parçası olarak "start"ve "build"aşağıda gösterildiği gibi, komutların:

"scripts": {
"start": "react-dotenv && react-scripts start",
"build": "react-dotenv && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}

"react-dotenv": {
"whitelist": [
"ENV_VAR_1",
"ENV_VAR_2"
]
}

.envDosyayı dinamik olarak oluşturun

.envDosyamızı asla GitHub depomuza göndermediğimizden, Netlify derlememizi dağıttığında bu dosyayı oluşturacak küçük bir betik yazabiliriz. Bu komut dosyası için, aşağıdaki gibi görünen kütüphaneden JavaScript'in writeFileSync()işlevini kullanacağız fs:

const fs = require('fs')
const path = `./.env`
const vars = `
 ENV_VAR_1=${process.env.ENV_VAR_1_NETLIFY}\n
 ENV_VAR_2=${process.env.ENV_VAR_2_NETLIFY}
`
fs.writeFileSync(path, vars)

Netlify Site Ayarlarını Yapılandırın

Ardından, Netlify hesabımıza giriş yapalım ve yeni sitemiz için Site Ayarları sekmesine gidelim . Build & Deploy> Environment altında , programımızda kullanmak istediğimiz, aşağıdaki gibi görünmesi gereken Ortam Değişkenlerini belirtebiliriz:

Çevre Değişkenlerimizin gerçek değerlerini belirlememiz gereken tek yer burasıdır. Daha sonra, Netlify'ye .envözel betiğimizi çalıştırarak dosyamızı oluşturmasını söylememiz gerekir :

Özet

Harika! Yapılandırılan her şeyle birlikte, Dağıt sekmesine gidelim ve uygulamamız için yeni bir dağıtım başlatalım. Build komutu .env, ortam değişkenlerimizi Netlify'de belirttiğimiz değerlerle tanımlayacak bir dosya oluşturmalı ve bu dosya, .react-dotenvbileşenlerimizdeki kitaplığı içe aktararak değerlerine erişmemize izin vermelidir . Mutlu kodlamalar!