Bir Angular web sitesini çevrimiçi olarak barındırırken, mevcut birçok platform arasından seçim yapabilirsiniz. Ücretsiz olarak kullanabileceğiniz bunlardan biri de Netlify.
Web sitenizin kaynak kodunun bir kopyasını bir GitHub deposunda saklıyorsanız, o siteyi barındırmak için Netlify’ı kullanabilirsiniz.
Netlify ayrıca, barındırdığınız veri havuzu dalında herhangi bir yeni değişiklik yaptığınızda sitenizi otomatik olarak yeniden konuşlandırır.
Temel Örnek Açısal Uygulama Nasıl Oluşturulur
Visual Studio Code gibi bir düzenleyici kullanarak basit bir Angular uygulaması oluşturabilirsiniz. Daha sonra bu web sitesini Netlify kullanarak barındırabilirsiniz.
Yeni bir Açısal uygulama oluşturun .
Basit bir ana sayfa oluşturun. app.component.html dosyasındaki kodu aşağıdaki açılış sayfası içeriğiyle değiştirin:
<div class=”container-dark header”>
<h2>Our Business Website</h2>
</div>
<div class=”container-white”>
<div class=”content”>
<h2>Our Business Website</h2>
<p>Learn how to design, develop, and maintain your professional website in no time.</p>
</div>
</div>
<div class=”container-orange”>
<div class=”content”>
<h2>What We Do</h2>
<p>We give you the tools to develop websites and unique solutions for your customers. We also provide training for
maintenance and other website related topics.</p>
</div>
</div>
<div class=”container-white”>
<div class=”content”>
<h2>About Us</h2>
<p>We are a small business operating from Melbourne, Australia. Our spaces are uniquely crafted so clients can also
visit us in person.</p>
</div>
</div>
<div class=”container-dark footer”>
<p>Copyright 2022</p>
</div>
app.component.css dosyasına biraz CSS ekleyerek Angular uygulamasına biraz stil ekleyin :
* {
font-family: “Arial”, sans-serif;
}
.header {
padding: 30px 50px;
}
.footer {
padding: 5px 50px;
text-align: center;
}
.container-dark {
background-color: #202C39;
color: white;
display: flex;
align-items: center;
}
.container-orange {
background-color: #FFD091;
color: #202C39;
}
.container-white {
background-color: whitesmoke;
color: #202C39;
}
.content {
padding: 100px 25%;
display: flex;
flex-direction: column;
line-height: 2rem;
font-size: 1.2em;
align-items: center;
text-align: center;
}
Styles.css dosyasındaki genel Angular uygulaması için biraz stil ekleyin :
body {
margin: 0;
padding: 0;
}
Uygulamayı test etmek için bir terminal veya komut satırı kullanarak uygulamanın kök klasörüne gidin. ng serve komutunu yazın :
ng serve
Kodunuzun derlenmesini bekleyin ve uygulamanızı görüntülemek için bir web tarayıcısında http://localhost:4200/ adresini ziyaret edin.
Chrome’da işletme web sitemiz Angular uygulaması
.browserslistrc dosyasında, iOS safari sürüm 15.2-15.3’ü kaldırın . Bu, projeyi oluşturduğunuzda uyumluluk hatalarının konsolda gösterilmesini engelleyecektir.
last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not ios_saf 15.2-15.3
not safari 15.2-15.3
Terminaldeki ng build komutunu kullanarak kodunuzu oluşturun :
ng build
.gitignore dosyasında, /dist satırını kaldırın veya yorumlayın . Bunu kaldırmak, dist klasörünün GitHub deponuza gönderdiğiniz dosya kümesinde olmasını sağlar.
# /dist
gitignore dosyası Görsel Kodda açılır
Açısal Kodunuzu GitHub’a Nasıl Aktarırsınız?
Netlify’ın kaynak koduna erişmesi için kodunuzu uzak bir havuzda saklamanız gerekecektir.
GitHub’da yeni bir depo oluşturabilir ve web sitenizin kodunu bu depoya gönderebilirsiniz. GitHub’a aşina değilseniz, önce GitHub’ın bazı temel özelliklerini anlamak faydalı olabilir .
GitHub’da yeni bir havuz oluşturun . Bunu GitHub’da oturum açıp Yeni’ye tıklayarak yapabilirsiniz .
GitHub’da yeni depo oluştur düğmesi
Yeni deponuz için ayrıntıları girin. Ona “netlify-app” gibi bir ad ve bir açıklama verin. Depoyu bir README dosyası, .gitignore dosyası veya lisansla başlatmayın.
Yeni GitHub deposu ayrıntıları oluşturun
Bilgisayarınızdaki bir terminalde, Angular uygulamanızı sakladığınız dizine gidin. Klasörünüzü bir git deposu olarak başlatmak için aşağıdaki komutları çalıştırın:
git init
git add .
git commit -m “first commit”
Git bash init repo komutları
Bu klasörün içindeki kodu GitHub’da oluşturduğunuz yeni uzak depoya gönderin. Uzak depo sayfanızda GitHub tarafından sağlanan git remote add original , git Branch ve git Push komutlarını izleyin :
git remote add original <Your GitHub repo link>
git branch -M main
git push -u origin main
GitHub uzak repo komutlarına gönder
GitHub deposu sayfasını yenileyerek Angular uygulama kodunuzun artık uzak GitHub deponuzda olduğunu onaylayabilirsiniz.
GitHub’daki web sitesi için uzak depo sayfası
Kodunuzu Barındırmak için Netlify Nasıl Kullanılır?
Netlify kullanarak kodunuzu barındırmak için GitHub kaynak kodunuza erişmesine izin vermeniz gerekir. Netlify , kodunuzun oluşturulmuş sürümünü yayınlamak için Angular projenizin dist klasörünü kullanacaktır .
Yeni bir site oluştururken yapılandırma adımlarını izleyerek tüm bu ayarları yapılandırabilirsiniz:
- Netlify’a giriş yapın veya kaydolun . GitHub kimlik bilgilerinizi kullanarak bunu yapabilirsiniz.
- Tarayıcıda Netlify sayfasına hoş geldiniz
- Ana pano ve site listesi sayfasından Yeni site ekle öğesini genişletin ve Mevcut bir projeyi içe aktar öğesini seçin .
- Netlify’daki mevcut projeyi içe aktarın
- GitHub’ı seçin .
- Netlify’da Git deposunu ve diğer seçenekleri içe aktarın
- GitHub’da Netlify’ı Yapılandır’a tıklayın .
- Netlify’ı GitHub düğmesinde yapılandırın
- Kur’a tıklayın .
- GitHub sayfası için Netlify’ı yükleyin
Netlify, GitHub depolarınızın bir listesini görüntüler. Barındırmak istediğinizi seçin. Örneğin, deponuzu “netlify-app” olarak adlandırdıysanız, listeden “netlify-app” öğesini seçin.
Barındırabileceğiniz mevcut GitHub depolarının listesi
Yapılandırma ekranında Sahip, Dağıtılacak Şube ve Temel dizin alanlarını varsayılan değerlerinde bırakın. Ayrı bir “Üretim” dalı gibi belirli bir dalı yayınlıyorsanız, bunu Dağıtılacak Şube alanına ekleyebilirsiniz. Build komut alanını “ng build” olarak değiştirin.
Netlify’da site ayarları ve dağıtım
Yayınlama dizini alanına dist/<proje adınız> yazın. Proje adının ne olduğunu bilmiyorsanız, projenizin dist klasörüne gidip orada bulabilirsiniz. Örneğin, “dist/netlify-app”.
GitHub depo sitesindeki dist klasörü
Siteyi dağıt seçeneğine tıklayın .
Dağıtımın tamamlanmasını bekleyin. Bu işlem birkaç dakika sürebilir ve sayfayı yenilemeniz gerekebilir. Her şey yolunda giderse, dağıtım listesinde başarılı dağıtımı görebileceksiniz. Yayınlanmış dağıtımınıza tıklayın, örneğin, Üretim: main@HEAD .
Netlify’daki site ayrıntıları sayfası
Üretim dağıtımını aç düğmesine tıklayın .
Netlify’daki site ayrıntıları sayfası
Artık web sitenizi <generated-subdomain>.netlify.app biçiminde bir URL kullanarak başka bir sekmede görüntüleyebilirsiniz. Birden fazla yönlendirme içeren bir web sitesi barındırıyorsanız, diğer sayfalara yönlendirme yapamayabilirsiniz. Bu durumda, Netlify’da başarısız olan bir yönlendirmeyi düzeltmenin bir yolu vardır . Dilerseniz ücretsiz alan adınızı da değiştirebilirsiniz .
Tarayıcıda Netlify’da barındırılan web sitesi
Web Sitenizi GitHub ve Netlify Kullanarak Barındırma
Umarız artık GitHub ve Netlify kullanarak bir web sitesini başarıyla barındırabilirsiniz. Bir GitHub deposunun belirli dallarına otomatik dağıtımlar ayarlayabilirsiniz. Bu şekilde, web sitenizin dağıtımını otomatikleştirebilir ve kolaylaştırabilirsiniz.
Ancak Netlify, bir Angular uygulamasını çevrimiçi dağıtmanın tek yolu değildir. GitHub Pages gibi diğer platformları da kullanabilirsiniz.