React Uygulamasını DigitalOcean App Platform’a Dağıtma Rehberi
Modern web geliştirmenin vazgeçilmez bir parçası haline gelen React, bileşen tabanlı mimarisi ve güçlü ekosistemi ile geliştiricilere esnek ve ölçeklenebilir uygulamalar oluşturma imkanı sunar. Ancak, bir React uygulamasını geliştirmiş olmak, onu canlıya almak ve geniş kitlelere ulaştırmak için yeterli değildir. Bu noktada, güvenilir ve ölçeklenebilir bir barındırma çözümü devreye girer. DigitalOcean App Platform, geliştiricilerin uygulamalarını hızla dağıtmalarına, yönetmelerine ve ölçeklendirmelerine olanak tanıyan, kullanıcı dostu bir bulut platformudur. Bu makalede, bir React uygulamasını DigitalOcean App Platform’a nasıl dağıtabileceğinizi adım adım inceleyeceğiz.
DigitalOcean App Platform’a Genel Bakış
DigitalOcean App Platform, kodunuzu doğrudan Git deponuzdan alarak otomatik olarak derleyen, dağıtan ve ölçeklendiren yönetilen bir hizmettir. Geliştiricilerin altyapı yönetimiyle uğraşmak yerine, kodlarına odaklanmalarını sağlar. App Platform, çeşitli programlama dilleri ve çerçeveleri için yerleşik desteğe sahiptir ve Docker konteynerlerini de destekler. Bu, React gibi popüler ön yüz (frontend) çerçeveleriyle oluşturulmuş uygulamaların dağıtımı için ideal bir çözüm haline getirir.
App Platform’un sunduğu temel avantajlar şunlardır:
* Otomatik Dağıtım (CI/CD): Git deponuzdaki değişiklikleri izler ve otomatik olarak yeni sürümleri dağıtır.
* Yönetilen Altyapı: Sunucu yönetimi, yamalama, güvenlik ve ölçeklendirme gibi altyapısal görevleri DigitalOcean üstlenir.
* Ölçeklenebilirlik: Trafik artışlarına göre uygulamanızı otomatik veya manuel olarak ölçeklendirebilirsiniz.
* Veritabanı ve Bellek İçi Veri Yapıları Entegrasyonu: App Platform, PostgreSQL, Redis gibi popüler veritabanı ve bellek içi veri yapılarını kolayca entegre etmenizi sağlar.
* SSL Sertifikaları: Otomatik olarak ücretsiz SSL sertifikaları sağlar ve yönetir.
* Kullanıcı Dostu Arayüz: Karmaşık komut satırı işlemleri yerine web tabanlı bir arayüz sunar.
Ön Gereksinimler
DigitalOcean App Platform’a bir React uygulamasını dağıtmadan önce aşağıdaki ön gereksinimlere sahip olmanız gerekir:
1. DigitalOcean Hesabı: Henüz bir hesabınız yoksa, [https://www.digitalocean.com/](https://www.digitalocean.com/) adresinden ücretsiz bir hesap oluşturabilirsiniz.
2. Git Deposu: React uygulamanızın kaynak kodunun bulunduğu bir Git deposu (GitHub, GitLab, Bitbucket vb.).
3. React Uygulaması: Dağıtmak istediğiniz, çalışır durumda bir React uygulaması. Uygulamanızın bir package.json dosyasına sahip olması ve build işlemini desteklemesi önemlidir.
4. Node.js ve npm/Yarn: Lokal ortamınızda Node.js ve paket yöneticilerinden (npm veya Yarn) birine sahip olmanız, uygulamanızı test etmek ve build etmek için faydalı olacaktır.
React Uygulamasını Hazırlama
DigitalOcean App Platform’a dağıtım yapmadan önce React uygulamanızın bazı temel yapılandırmalara sahip olduğundan emin olmalısınız.
1. Build Komutunu Yapılandırma
React uygulamaları genellikle create-react-app gibi araçlarla oluşturulur ve bu araçlar varsayılan olarak bir build komutu içerir. package.json dosyanızda scripts bölümünde build anahtarına karşılık gelen komutun doğru olduğundan emin olun. Genellikle bu komut şöyledir:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}npm run build veya yarn build komutu çalıştırıldığında, uygulamanızın statik dosyalarını (HTML, CSS, JavaScript) build klasörüne oluşturacaktır. App Platform bu klasörü kullanarak uygulamanızı sunacaktır.
2. Statik Dosyaların Sunulması
React uygulamaları tek sayfa uygulamaları (SPA) olduğu için, sunucu tarafında doğru şekilde yönlendirilmesi gerekir. Eğer uygulamanızı bir Node.js sunucusu (örneğin Express.js) ile sunuyorsanız, bu yönlendirmeyi sunucu tarafında yapmanız gerekir. Ancak, DigitalOcean App Platform, statik siteleri doğrudan sunabilme yeteneğine sahiptir.
Eğer uygulamanız yalnızca statik dosyalar olarak dağıtılacaksa, herhangi bir ek sunucu yapılandırmasına gerek yoktur. App Platform, build klasöründeki dosyaları otomatik olarak algılar ve sunar.
Eğer uygulamanız bir Node.js arka ucu ile birlikte geliyorsa veya özel bir sunucu yapılandırması gerekiyorsa, Procfile kullanmanız gerekebilir.
3. Procfile (İsteğe Bağlı ama Önemli)
Eğer uygulamanız bir Node.js sunucusu ile çalışacaksa veya App Platform’un uygulamanızı nasıl başlatacağını belirtmeniz gerekiyorsa, projenizin kök dizinine Procfile adında bir dosya eklemelisiniz. Bu dosya, uygulamanızın hangi komutla çalıştırılacağını DigitalOcean’a bildirir.
Örneğin, Express.js tabanlı bir Node.js uygulamanız varsa ve ana dosyanız server.js ise, Procfile şöyle görünebilir:
web: node server.jsEğer create-react-app ile oluşturulmuş bir uygulamayı statik olarak değil de bir Node.js sunucusu ile sunmak istiyorsanız, package.json‘da start script’ini kullanabilirsiniz:
"scripts": {
"start": "node server.js", // Veya başka bir başlangıç komutu
"build": "react-scripts build"
}Ve Procfile şöyle olur:
web: npm startVeya Yarn kullanıyorsanız:
web: yarn startProcfile‘ı oluşturduktan sonra, bu dosyayı da Git deponuza commit etmeyi unutmayın.
4. Ortam Değişkenleri (Environment Variables)
Uygulamanızın hassas bilgileri (API anahtarları, veritabanı kimlik bilgileri vb.) veya yapılandırma ayarları için ortam değişkenleri kullanmanız önemlidir. Bu değişkenleri doğrudan kodunuza gömmek yerine, DigitalOcean App Platform üzerinden tanımlayabilirsiniz. Bu, güvenliği artırır ve farklı ortamlar (geliştirme, üretim) için kolayca yapılandırma yapmanızı sağlar.
DigitalOcean App Platform’a Dağıtım Adımları
Artık React uygulamanız hazır olduğuna göre, onu DigitalOcean App Platform’a dağıtma adımlarına geçebiliriz.
Adım 1: DigitalOcean Hesabınıza Giriş Yapın ve Yeni Bir Uygulama Oluşturun
1. DigitalOcean kontrol panelinize giriş yapın.
2. Sol menüden “Apps” seçeneğine tıklayın.
3. “Create App” düğmesine tıklayın.
Adım 2: Kaynak Kod Deponuzu Bağlayın
DigitalOcean sizden uygulamanızın kaynak kodunu nereden çekeceğini belirtmenizi isteyecektir.
1. GitHub, GitLab veya Bitbucket gibi Git sağlayıcınızı seçin.
2. Hesabınızı DigitalOcean ile yetkilendirin.
3. Dağıtmak istediğiniz React uygulamasının bulunduğu depoyu seçin.
4. Deponuzda birden fazla branch varsa, dağıtmak istediğiniz branch’i seçin. Genellikle main veya master branch’i kullanılır.
5. “Next” düğmesine tıklayın.
Adım 3: Yapılandırma (Build and Deploy)
Bu adımda DigitalOcean, deponuzdaki kodu analiz edecek ve uygulamanızın türünü algılayacaktır.
* Detect automatically: DigitalOcean genellikle uygulamanızı otomatik olarak algılar. React uygulamaları için genellikle bir “Frontend” veya “Static Site” türü seçeneği sunulur. Eğer Node.js sunucusu kullanıyorsanız, “Web Service” olarak algılanabilir.
* Build Command: Eğer otomatik algılama doğru değilse veya özel bir build komutu kullanıyorsanız, buraya npm run build veya yarn build gibi komutu girebilirsiniz.
* Output Directory: Build işlemi sonucunda oluşan statik dosyaların bulunduğu dizini belirtin. Genellikle build klasörüdür.
* Run Command: Eğer uygulamanız bir Node.js sunucusu ile çalışacaksa, Procfile‘da belirttiğiniz komut burada otomatik olarak doldurulacaktır. Eğer Procfile kullanmıyorsanız, uygulamanızı başlatacak komutu (örneğin npm start) buraya girebilirsiniz.
* Environment Variables: Uygulamanızın gerektirdiği ortam değişkenlerini buradan ekleyebilirsiniz. “New Variable” düğmesine tıklayarak değişken adını ve değerini girin.
Herhangi bir değişiklik yaptıktan sonra “Next” düğmesine tıklayın.
Adım 4: Plan ve Ölçeklendirme Ayarları
Bu adımda, uygulamanız için bir plan seçmeniz ve ölçeklendirme ayarlarını yapılandırmanız istenir.
* Plan: DigitalOcean, ücretsiz bir “Free” katmanının yanı sıra farklı özelliklere sahip ücretli planlar sunar. Uygulamanızın ihtiyaçlarına göre bir plan seçin. Ücretsiz katman, küçük projeler ve denemeler için yeterli olabilir.
* Auto-scaling: Uygulamanızın trafiğine göre otomatik olarak ölçeklenmesini veya manuel olarak ölçeklendirme ayarlarını buradan yapabilirsiniz.
* Database (İsteğe Bağlı): Eğer uygulamanız bir veritabanı gerektiriyorsa, bu adımda bir PostgreSQL veya Redis veritabanı ekleyebilirsiniz. “Add Database” düğmesine tıklayarak veritabanı türünü ve planını seçin.
Ayarlarınızı gözden geçirdikten sonra “Next” düğmesine tıklayın.
Adım 5: Gözden Geçirme ve Dağıtma
Son adımda, yaptığınız tüm yapılandırmaların bir özetini göreceksiniz. Her şey doğruysa, “Create Resources” düğmesine tıklayarak uygulamanızı dağıtmaya başlayabilirsiniz.
DigitalOcean, deponuzdaki kodu çekecek, build işlemini gerçekleştirecek ve uygulamanızı canlıya alacaktır. Bu işlem birkaç dakika sürebilir.
Dağıtım tamamlandıktan sonra, uygulamanızın canlı URL’sini göreceksiniz. Bu URL’ye tıklayarak uygulamanızı ziyaret edebilirsiniz.
CI/CD (Sürekli Entegrasyon / Sürekli Dağıtım) Ayarları
DigitalOcean App Platform’un en güçlü özelliklerinden biri otomatik CI/CD akışıdır. Deponuzdaki belirli bir branch’e her yeni commit gönderdiğinizde, App Platform bu değişikliği algılar, uygulamanızı yeniden build eder ve canlıya dağıtır.
Bu özelliği etkinleştirmek için, uygulamanızı ilk oluştururken deponuzu bağladığınızda zaten yapılmış olmalıdır. Eğer değilse, uygulamanızın ayarlarından “Deployments” sekmesine giderek CI/CD ayarlarını yapılandırabilirsiniz.
* Branch: Hangi branch’teki değişikliklerin otomatik olarak dağıtılacağını belirtin.
* Build on push: Bu seçeneği etkinleştirerek her commit’te otomatik dağıtımı sağlayın.
Bu ayarlar sayesinde, her geliştirdiğiniz özelliği veya hata düzeltmesini hızla canlıya alabilirsiniz.
Ortam Değişkenleri Yönetimi
Uygulamanızın güvenliği ve esnekliği için ortam değişkenlerini doğru yönetmek kritiktir. DigitalOcean App Platform, bu konuda size yardımcı olur.
1. Dağıttığınız uygulamanın kontrol paneline gidin.
2. “Settings” sekmesine tıklayın.
3. “Environment Variables” bölümüne gidin.
4. Burada mevcut ortam değişkenlerini görebilir, yeni değişkenler ekleyebilir, mevcut değişkenleri düzenleyebilir veya silebilirsiniz.
Ortam değişkenleri, uygulamanızın farklı ortamlar için (geliştirme, test, üretim) farklı ayarlara sahip olmasını sağlar. Örneğin, bir geliştirme ortamında farklı bir API anahtarı kullanırken, üretim ortamında farklı bir anahtar kullanabilirsiniz.
Veritabanı Entegrasyonu
Eğer React uygulamanız bir veritabanına ihtiyaç duyuyorsa, DigitalOcean App Platform bunu kolaylaştırır.
1. Uygulamanızı oluştururken veya daha sonra “Resources” sekmesinden bir veritabanı ekleyebilirsiniz.
2. Desteklenen veritabanı türleri arasında PostgreSQL, MySQL, Redis bulunur.
3. Veritabanı seçimi yaptıktan sonra, DigitalOcean size veritabanı bağlantı bilgilerini (host, port, kullanıcı adı, şifre, veritabanı adı) sağlayacaktır.
4. Bu bilgileri uygulamanızın ortam değişkenlerine ekleyerek veritabanınıza erişebilirsiniz.
Örneğin, PostgreSQL veritabanı için ortam değişkenleri şöyle olabilir:
* POSTGRES_HOST
* POSTGRES_PORT
* POSTGRES_USER
* POSTGRES_PASSWORD
* POSTGRES_DB
Uygulamanızın arka ucunda bu değişkenleri kullanarak veritabanı bağlantısını kurabilirsiniz.
Sorun Giderme ve Loglar
Herhangi bir dağıtım sorununda veya uygulamanızın çalışma zamanında karşılaşılan hatalarda, DigitalOcean App Platform’un loglama yetenekleri çok değerlidir.
1. Uygulamanızın kontrol paneline gidin.
2. “Logs” sekmesine tıklayın.
3. Burada, uygulamanızın çıktısını, hatalarını ve diğer log mesajlarını görebilirsiniz. Bu loglar, sorunun kaynağını tespit etmek ve çözmek için kritik öneme sahiptir.
4. Build sırasında oluşan hataları görmek için de “Deployments” sekmesindeki ilgili dağıtımın detaylarına bakabilirsiniz.
Performans Optimizasyonu ve Ölçeklendirme
Uygulamanız canlıya alındıktan sonra, performansını izlemek ve gerektiğinde ölçeklendirmek önemlidir.
* Ölçeklendirme: “Resources” sekmesinden veya dağıtım sırasında belirlediğiniz ölçeklendirme ayarlarını yönetebilirsiniz. Uygulamanızın trafiği arttığında, daha fazla kaynak (CPU, RAM) atayarak veya daha fazla örnek (instance) çalıştırarak ölçeklendirebilirsiniz.
* Caching: React uygulamalarında önbellekleme (caching) performansın artırılmasında önemli bir rol oynar. CDN (Content Delivery Network) kullanımı, statik dosyalarınızın daha hızlı yüklenmesini sağlar. DigitalOcean App Platform, varsayılan olarak CDN desteği sunar.
* Kod Optimizasyonu: React kodunuzu optimize etmek (örneğin, React.memo, useCallback, useMemo kullanımı, code splitting) uygulamanızın daha hızlı yüklenmesini ve daha akıcı çalışmasını sağlar.
Sonuç
DigitalOcean App Platform, React uygulamalarını canlıya almak için güçlü, esnek ve kullanıcı dostu bir çözüm sunar. Otomatik CI/CD akışı, yönetilen altyapı ve ölçeklenebilirlik özellikleri sayesinde geliştiriciler, altyapı yönetimiyle uğraşmak yerine kodlarına odaklanabilirler. Bu rehberde, bir React uygulamasını DigitalOcean App Platform’a dağıtmak için gereken adımları, ön gereksinimleri ve önemli yapılandırma noktalarını detaylı bir şekilde ele aldık. Bu adımları takip ederek, React uygulamanızı hızla ve güvenle canlıya alabilirsiniz.