GitHub’dan DigitalOcean App Platform ile Statik Site Dağıtımı [Hızlı Başlangıç]
Web geliştirme dünyasında statik siteler, hızları, güvenlikleri ve düşük maliyetleri sayesinde giderek daha popüler hale gelmektedir. Bu siteleri dağıtmak için birçok seçenek bulunsa da, DigitalOcean App Platform, GitHub ile entegrasyonu sayesinde geliştiricilere sorunsuz ve otomatik bir dağıtım deneyimi sunar. Bu makalede, bir statik siteyi GitHub deposundan DigitalOcean App Platform’a nasıl dağıtacağınızı adım adım, hızlı ve pratik bir şekilde öğreneceksiniz.
Giriş: Statik Sitelerin Yükselişi ve Neden DigitalOcean App Platform?
Statik siteler, sunucu tarafında herhangi bir işleme ihtiyaç duymayan, önceden oluşturulmuş HTML, CSS ve JavaScript dosyalarından oluşan web siteleridir. Dinamik sitelerin aksine (örneğin WordPress veya bir Node.js uygulaması), veritabanı sorguları veya sunucu tarafı kod yürütmesi gerektirmezler. Bu özellikleri onlara eşsiz avantajlar sağlar:
* Hız: Sunucu tarafı işlem olmadığı için sayfalar çok hızlı yüklenir.
* Güvenlik: Dinamik sitelerde görülen birçok güvenlik açığı (SQL enjeksiyonu, XSS vb.) statik sitelerde bulunmaz.
* Maliyet Etkinliği: Sunucu kaynaklarına daha az ihtiyaç duyulduğu için genellikle daha ucuz barındırma seçenekleri sunarlar.
* Ölçeklenebilirlik: İçerik Dağıtım Ağları (CDN) ile kolayca ölçeklenebilirler ve yüksek trafik durumlarında bile performanslarını korurlar.
DigitalOcean App Platform, geliştiricilerin uygulamalarını hızlı bir şekilde oluşturmasına, dağıtmasına ve ölçeklendirmesine olanak tanıyan tam olarak yönetilen bir Platform as a Service (PaaS) çözümüdür. GitHub ile derin entegrasyonu sayesinde, kodunuzu bir depoya ittiğinizde otomatik olarak uygulamanızın dağıtılmasını sağlayarak sürekli entegrasyon ve sürekli dağıtım (CI/CD) süreçlerini basitleştirir. Statik siteler için özellikle caziptir çünkü ücretsiz bir katman sunar ve otomatik SSL, küresel CDN ve özel alan adı desteği gibi özelliklerle birlikte gelir.
Bu makalede, basit bir HTML/CSS/JS projesinden, popüler statik site oluşturucularına (SSG’ler) kadar çeşitli senaryoları kapsayarak, projenizi GitHub’a yüklemekten DigitalOcean App Platform üzerinde canlıya almaya kadar tüm süreci ele alacağız.
Ön Gereklilikler
Bu kılavuzu takip etmek için aşağıdaki maddelere ihtiyacınız olacak:
* GitHub Hesabı: Projenizin kaynak kodunu barındırmak için.
* DigitalOcean Hesabı: Uygulamanızı dağıtmak için. (Yeni kullanıcılar genellikle kredi kazanır.)
* Statik Site Projesi: Dağıtmak istediğiniz bir statik site projesi (basit HTML/CSS/JS, Jekyll, Hugo, Astro, Next.js’in SSG modu vb.).
1. Statik Sitenizi Hazırlama ve GitHub’a Yükleme
Dağıtım sürecine başlamadan önce, statik sitenizin kodunun hazır olması ve bir GitHub deposunda bulunması gerekir.
Basit Bir Statik Site Örneği
Eğer henüz bir projeniz yoksa, basit bir index.html dosyası oluşturarak başlayabiliriz:
DigitalOcean App Platform Statik Site
Bu, GitHub'dan başarıyla dağıtılan ilk statik sitemizdir.
Otomatik dağıtımın keyfini çıkarın!
Bu dosyayı projenizin kök dizinine kaydedin.
Statik Site Oluşturucuları (SSG’ler) İçin Hazırlık
Eğer Jekyll, Hugo, Next.js (SSG modu), Gatsby, Astro veya benzeri bir SSG kullanıyorsanız, sitenizi geliştirme ortamınızda oluşturmanız (build etmeniz) gerekir. Bu işlem genellikle bir build komutu ile yapılır ve statik dosyaları belirli bir çıktı dizinine (örneğin public, _site, dist) yerleştirir. DigitalOcean App Platform bu komutu otomatik olarak çalıştıracak ve belirtilen çıktı dizinindeki dosyaları dağıtacaktır.
Örnek build komutları:
* Jekyll: jekyll build (çıktı dizini: _site)
* Hugo: hugo (çıktı dizini: public)
* Next.js (SSG): npm run build (çıktı dizini: out veya .next/static – App Platform genellikle out veya public gibi genel SSG çıktı dizinlerini otomatik olarak algılar, ancak belirtmek faydalıdır.)
* Gatsby: gatsby build (çıktı dizini: public)
* Astro: npm run build (çıktı dizini: dist)
* Vite/React/Vue: npm run build (çıktı dizini: dist)
GitHub’a Yükleme
Sitenizin dosyaları hazır olduğunda, bunları bir GitHub deposuna yüklemeniz gerekir.
1. Yeni Bir GitHub Deposu Oluşturun: GitHub hesabınıza giriş yapın ve yeni bir depo oluşturun. Deponuza anlamlı bir isim verin (örneğin my-static-site). README.md eklemeyi veya .gitignore oluşturmayı şimdilik atlayabilirsiniz.
2. Yerel Depoyu Başlatın: Proje dizininizde terminali açın ve aşağıdaki komutları çalıştırın:
git init
git add .
git commit -m "Initial static site commit"
git branch -M main
git remote add origin https://github.com/KULLANICI_ADINIZ/DEPO_ADINIZ.git
git push -u origin main KULLANICI_ADINIZ ve DEPO_ADINIZ kısımlarını kendi GitHub kullanıcı adınız ve depo adınızla değiştirin. Bu adımlar, yerel projenizi main dalına (branch) ilk kez yükleyecektir.
Artık statik sitenizin kodu GitHub’da. DigitalOcean App Platform’a geçmeye hazırız.
2. DigitalOcean App Platform’a Giriş
DigitalOcean App Platform, uygulamanızı yönetilen bir ortamda barındırmak için tasarlanmıştır. Sunucu yapılandırması, ölçeklendirme, güvenlik yamaları ve işletim sistemi güncellemeleri gibi karmaşık altyapı yönetiminden sizi kurtarır. Sadece kodunuzu verin, gerisini App Platform halleder.
Statik siteler için App Platform’un sunduğu bazı temel avantajlar:
* GitHub Entegrasyonu: Kodunuzu GitHub’a ittiğinizde otomatik olarak yeni dağıtımlar tetikler.
* Otomatik Derleme ve Dağıtım: Statik site oluşturucuları için gerekli derleme adımlarını otomatik olarak yürütür.
* Ücretsiz SSL Sertifikaları: Let’s Encrypt aracılığıyla tüm uygulamalar için otomatik HTTPS sağlar.
* Küresel CDN: İçeriğinizi son kullanıcılara daha hızlı ulaştırmak için yerleşik bir CDN kullanır.
* Özel Alan Adı Desteği: Kendi alan adınızı kolayca bağlayabilirsiniz.
* Uygun Fiyatlandırma: Statik siteler için genellikle “Starter” planı yeterlidir ve ücretsizdir.
3. DigitalOcean Hesabı Oluşturma ve Proje Başlatma
Eğer bir DigitalOcean hesabınız yoksa, öncelikle bir tane oluşturmanız gerekecektir.
1. DigitalOcean’a Kaydolun: DigitalOcean web sitesine gidin ve bir hesap oluşturun. Genellikle yeni kullanıcılar için ücretsiz kredi sunulur, bu da başlangıç için harika bir fırsattır.
2. Yeni Bir Uygulama Oluşturun: DigitalOcean kontrol paneline giriş yaptıktan sonra, sol menüde “Apps” bölümüne tıklayın veya sağ üst köşedeki “Create” düğmesine tıklayarak “Apps” seçeneğini seçin.
3. Kaynak Kodunu Bağlayın:
* “Create App” düğmesine tıkladıktan sonra, DigitalOcean sizden kaynak kodunuzu bağlamanızı isteyecektir. “GitHub” seçeneğini seçin.
* Eğer ilk kez yapıyorsanız, DigitalOcean’ın GitHub hesabınıza erişmesine izin vermeniz gerekecektir. “Install DigitalOcean GitHub App” veya “Authorize DigitalOcean” gibi bir düğme göreceksiniz. Bu adımı tamamlayın. Bu, DigitalOcean’ın depolarınızı okumasına ve web kancaları (webhooks) oluşturmasına izin verecektir.
* Erişim izni verdikten sonra, DigitalOcean size GitHub depolarınızın bir listesini gösterecektir. Daha önce oluşturduğunuz statik site deponuzu (örneğin my-static-site) seçin.
* “Branch” (dal) olarak main veya hangi dalda dağıtım yapmak istiyorsanız onu seçin.
* “Autodeploy” (otomatik dağıtım) seçeneğinin işaretli olduğundan emin olun. Bu, GitHub’a her itme yaptığınızda uygulamanızın otomatik olarak yeniden dağıtılmasını sağlayacaktır.
* “Next” düğmesine tıklayın.
4. Uygulamanızı Yapılandırma
Bu adım, uygulamanızın DigitalOcean App Platform üzerinde nasıl derleneceğini ve dağıtılacağını belirlediğiniz yerdir.
1. Kaynak Algılama: DigitalOcean, deponuzu tarayacak ve genellikle otomatik olarak bir “Static Site” bileşeni algılayacaktır. Eğer algılamazsa, manuel olarak ekleyebilirsiniz.
2. Bileşen Ayarları: Algılanan veya eklenen statik site bileşenine tıklayın. Burada aşağıdaki ayarları yapılandırmanız gerekecektir:
* Resource Type (Kaynak Türü): Static Site olarak ayarlandığından emin olun.
* Source Directory (Kaynak Dizini): Eğer projeniz deponun kök dizininde değil de bir alt dizinde (örneğin bir monorepo içinde) bulunuyorsa, bu dizini belirtmeniz gerekir. Çoğu statik site projesi için bu alan boş bırakılabilir veya / olarak ayarlanabilir.
* Build Command (Derleme Komutu): Bu, statik site oluşturucunuzu (SSG) çalıştırmak için kullanılan komuttur.
* Basit HTML/CSS/JS siteleri için: Bu alanı boş bırakın. Herhangi bir derleme adımına ihtiyaç yoktur.
* Jekyll: jekyll build
* Hugo: hugo
* Next.js (SSG), Astro, Gatsby, React, Vue, Svelte: npm run build veya yarn build (projenizin package.json dosyasındaki scripts bölümüne göre).
* DigitalOcean genellikle popüler SSG’ler için bu komutu otomatik olarak algılar.
* Output Directory (Çıktı Dizini): Derleme komutunuzun statik dosyaları oluşturduğu dizindir. App Platform, bu dizindeki içeriği web sunucusunda sunacaktır.
* Basit HTML/CSS/JS siteleri için: / (kök dizin)
* Jekyll: _site
* Hugo: public
* Next.js (SSG): out veya public (yapılandırmanıza bağlı olarak)
* Gatsby: public
* Astro, React, Vue, Svelte (Vite ile): dist
* Bu da genellikle otomatik olarak algılanır, ancak doğru olduğundan emin olun.
* HTTP Port (HTTP Portu): Statik siteler için genellikle 80 veya 443 (HTTPS) kullanılır ve bu App Platform tarafından otomatik olarak yönetilir. Bu ayar genellikle değiştirilmez.
* Environment Variables (Ortam Değişkenleri): Eğer uygulamanızda API anahtarları veya diğer hassas veriler gibi ortam değişkenleri kullanıyorsanız, bunları burada ekleyebilirsiniz. Statik siteler için genellikle daha az kullanılır, ancak frontend kodunuzda çalışma zamanında ihtiyaç duyulan bazı yapılandırmalar için faydalı olabilir.
3. Diğer Ayarlar:
* Region (Bölge): Uygulamanızın dağıtılacağı veri merkezi konumunu seçin. Hedef kitlenize en yakın bölgeyi seçmek, sitenizin daha hızlı yüklenmesini sağlar.
* Plan: Statik siteler için genellikle Starter planı yeterlidir ve bu plan, belirli bir kullanım limitine kadar ücretsizdir. Daha fazla kaynak veya özellik gerekiyorsa, Basic veya Professional planları düşünebilirsiniz. Ücretsiz katman, ayda 100 GB bant genişliği ve 10.000 derleme dakikası gibi cömert limitler sunar.
Tüm ayarları gözden geçirdikten sonra “Next” düğmesine tıklayın.
5. Dağıtım Süreci
Yapılandırma adımlarını tamamladıktan sonra, DigitalOcean size uygulamanızın bir özetini sunacaktır.
1. Özeti Gözden Geçirin: Yapılandırma ayarlarınızın doğru olduğundan emin olun.
2. Uygulamayı Başlatın: “Create Resources” veya “Launch App” düğmesine tıklayın.
DigitalOcean App Platform şimdi uygulamanızı dağıtmaya başlayacaktır. Bu süreç birkaç dakika sürebilir ve aşağıdaki adımları içerecektir:
* Kod Çekme: GitHub deponuzdan kaynak kodunu çeker.
* Derleme: Eğer bir derleme komutu belirttiyseniz (örneğin npm run build), bu komutu çalıştırır.
* Dağıtım: Çıktı dizinindeki statik dosyaları CDN’ye dağıtır ve uygulamanızı canlıya alır.
Dağıtım sürecini DigitalOcean kontrol panelindeki uygulamanızın “Deployments” (Dağıtımlar) sekmesinden takip edebilirsiniz. Logları görüntüleyerek herhangi bir sorun olup olmadığını kontrol edebilirsiniz.
Başarılı bir dağıtımın ardından, uygulamanızın genel bir URL’si (örneğin https://your-app-name.ondigitalocean.app) ile birlikte “Live” (Canlı) durumunu göreceksiniz. Bu URL’ye tıklayarak statik sitenizi tarayıcınızda görüntüleyebilirsiniz. Tebrikler, ilk statik sitenizi DigitalOcean App Platform’a dağıttınız!
6. Otomatik Dağıtımlar ve Güncellemeler
DigitalOcean App Platform’un en güçlü özelliklerinden biri, GitHub entegrasyonu sayesinde otomatik dağıtımlardır.
1. Değişiklik Yapın: GitHub’da bağlı olan dalınıza (örneğin main dalı) küçük bir değişiklik yapın. Örneğin, index.html dosyasındaki bir metni değiştirin:
Bu, GitHub'dan başarıyla dağıtılan ilk statik sitemizdir. Şimdi otomatik güncellemeleri test ediyoruz!
2. Değişiklikleri Kaydedin ve GitHub’a İtin:
git add .
git commit -m "Updated content for autodeploy test"
git push origin main3. Otomatik Dağıtımı Gözlemleyin: GitHub’a itme işlemini tamamladıktan kısa bir süre sonra DigitalOcean kontrol panelinize geri dönün. Uygulamanızın “Deployments” sekmesinde yeni bir dağıtımın otomatik olarak başladığını göreceksiniz. Bu dağıtım tamamlandığında, sitenizin genel URL’sini yenilediğinizde yaptığınız değişikliklerin yansıtıldığını göreceksiniz.
Bu özellik, geliştirme sürecinizi son derece hızlandırır ve manuel dağıtım adımlarına olan ihtiyacı ortadan kaldırır.
7. Özel Alan Adı ve SSL Yapılandırması
Uygulamanızın DigitalOcean tarafından sağlanan varsayılan URL yerine kendi özel alan adınızla erişilebilir olmasını isteyebilirsiniz. DigitalOcean App Platform, bu süreci de kolaylaştırır ve ücretsiz SSL sertifikaları sağlar.
1. Özel Alan Adı Ekleme:
* DigitalOcean kontrol panelinde uygulamanızın sayfasına gidin.
* Sol menüden “Settings” (Ayarlar) sekmesine tıklayın.
* “Domains” (Alan Adları) bölümüne gidin ve “Add Domain” (Alan Adı Ekle) düğmesine tıklayın.
* Kullanmak istediğiniz alan adını girin (örneğin example.com veya www.example.com).
* “Add Domain” düğmesine tıklayın.
2. DNS Kayıtlarını Yapılandırma:
* DigitalOcean size alan adınızı doğrulamak için yapmanız gereken DNS kayıtlarını gösterecektir. Genellikle iki tür kayıt istenir:
* CNAME Kaydı: www.example.com gibi alt alan adları için kullanılır. www ana bilgisayar adını, uygulamanızın varsayılan DigitalOcean URL’sine (örneğin your-app-name.ondigitalocean.app) işaret eden bir CNAME kaydı oluşturmanız gerekir.
* A Kaydı: Köksel alan adları (örneğin example.com) için kullanılır. @ ana bilgisayar adını (veya bazen boş bırakılır), DigitalOcean tarafından sağlanan bir IP adresine işaret eden bir A kaydı oluşturmanız gerekir.
* Bu kayıtları alan adınızı yönettiğiniz DNS sağlayıcınızın (örneğin GoDaddy, Namecheap, Cloudflare veya DigitalOcean DNS) kontrol paneline girmeniz gerekir.
* Kaydı ekledikten sonra, DNS değişikliklerinin yayılması biraz zaman alabilir (genellikle birkaç dakika ile birkaç saat arasında).
3. Ücretsiz SSL Sertifikası:
* Alan adınızı ekledikten ve DNS kayıtlarını doğru bir şekilde yapılandırdıktan sonra, DigitalOcean App Platform otomatik olarak Let’s Encrypt aracılığıyla siteniz için ücretsiz bir SSL sertifikası sağlayacaktır.
* Bu, sitenizin https:// ile güvenli bir şekilde erişilebilir olmasını sağlar. Sertifika yönetimi tamamen App Platform tarafından yapılır, yenileme ve kurulum gibi işlemlerle uğraşmanıza gerek kalmaz.
* Sertifika aktif hale geldiğinde, “Domains” bölümünde alan adınızın yanında “Verified” ve “HTTPS” durumunu göreceksiniz.
Artık statik sitenize kendi özel alan adınız üzerinden güvenli bir şekilde erişebilirsiniz.
8. Gelişmiş Özellikler ve İpuçları
DigitalOcean App Platform, statik siteler için bile bazı gelişmiş özellikler ve kullanışlı ipuçları sunar.
Ortam Değişkenleri
Statik siteler genellikle sunucu tarafı mantık içermese de, bazen istemci tarafı kodunuzda kullanılan API anahtarları veya yapılandırma ayarları gibi ortam değişkenlerine ihtiyaç duyabilirler. Bu değişkenleri doğrudan kodunuza yazmak yerine (özellikle hassas veriler için), App Platform’da ortam değişkenleri olarak tanımlayabilirsiniz.
* Uygulamanızın “Settings” (Ayarlar) sekmesine gidin.
* “Environment Variables” (Ortam Değişkenleri) bölümünde, “Add Variable” (Değişken Ekle) düğmesine tıklayın.
* Değişken adını ve değerini girin. “Scope” (Kapsam) olarak “Static Site” bileşenini seçtiğinizden emin olun.
* Önemli: İstemci tarafında erişilmesi gereken değişkenler için genellikle bir önek (örneğin NEXT_PUBLIC_, VITE_, GATSBY_) kullanılır. Bu, derleme sırasında bu değişkenlerin istemci tarafı koduna enjekte edilmesini sağlar.
Rollback (Geri Alma)
Yeni bir dağıtımın sorunlara yol açması durumunda, DigitalOcean App Platform önceki başarılı dağıtımlara geri dönmenize olanak tanır.
* Uygulamanızın “Deployments” (Dağıtımlar) sekmesine gidin.
* Önceki başarılı bir dağıtımın yanındaki “…” menüsüne tıklayın ve “Rollback to this deployment” (Bu dağıtıma geri al) seçeneğini seçin.
* Bu, sitenizi hızla çalışan bir önceki sürüme geri döndürür.
İzleme ve Günlükler (Monitoring and Logging)
App Platform, uygulamanızın performansını ve durumunu izlemek için araçlar sağlar.
* “Metrics” (Metrikler) sekmesi, bant genişliği kullanımı, istek sayısı ve hata oranları gibi önemli performans göstergelerini gösterir.
* “Logs” (Günlükler) sekmesi, derleme ve dağıtım süreçleri sırasında oluşan tüm günlükleri görüntüler. Hata ayıklama ve sorun giderme için çok faydalıdır.
CDN ve Performans
DigitalOcean App Platform, tüm uygulamalar için varsayılan olarak bir küresel İçerik Dağıtım Ağı (CDN) kullanır. Bu, statik dosyalarınızın dünya çapındaki farklı konumlarda önbelleğe alınmasını sağlar. Son kullanıcılar, içeriği kendilerine en yakın CDN sunucusundan alarak daha hızlı yükleme süreleri deneyimlerler. Bu özellik, statik sitelerin doğasında var olan hız avantajını daha da artırır.
Branch Dağıtımları (Staging Ortamları)
Geliştiriciler genellikle yeni özellikleri ana siteye dağıtmadan önce test etmek için hazırlık (staging) ortamlarına ihtiyaç duyarlar. DigitalOcean App Platform, farklı dallardan (branch) farklı uygulamalar dağıtarak veya aynı uygulama içinde farklı dalları farklı bileşenlere bağlayarak bu senaryoyu destekleyebilir. Örneğin, main dalını canlı siteye, develop dalını ise bir test sitesine dağıtabilirsiniz.
Monorepo Desteği
Eğer projeniz bir monorepo içindeyse (yani tek bir depoda birden fazla uygulama veya kütüphane bulunuyorsa), DigitalOcean App Platform’da her bir uygulamayı ayrı bir bileşen olarak yapılandırabilirsiniz. Source Directory (Kaynak Dizini) ayarı bu durumda kritik öneme sahiptir. Her bileşen için, ilgili uygulama kodunun bulunduğu alt dizini belirtmeniz gerekir.
Sonuç
DigitalOcean App Platform, GitHub ile entegrasyonu sayesinde statik siteleri dağıtmak için inanılmaz derecede güçlü, kullanıcı dostu ve uygun maliyetli bir çözüm sunar. Basit bir HTML sayfasından karmaşık bir statik site oluşturucu projesine kadar her türlü statik web uygulamasını sorunsuz bir şekilde dağıtabilirsiniz.
Bu kılavuzda ele aldığımız adımları takip ederek:
* Statik sitenizi hazırladınız ve GitHub’a yüklediniz.
* DigitalOcean App Platform’a bağlandınız ve uygulamanızı yapılandırdınız.
* Sitenizi canlıya aldınız ve otomatik dağıtımların keyfini çıkardınız.
* Özel alan adınızı bağladınız ve ücretsiz SSL sertifikası edindiniz.
* Gelişmiş özellikleri ve ipuçlarını keşfettiniz.
Artık bir sonraki statik web sitenizi veya portföyünüzü hızla dünyaya açmak için gerekli tüm araçlara sahipsiniz. DigitalOcean App Platform, geliştiricilerin altyapı yönetimi yerine kod yazmaya odaklanmasını sağlayarak modern web geliştirme süreçlerini basitleştirir. Deneyin ve bu güçlü platformun sunduğu kolaylığı kendiniz görün!