Ön Uç: Statik Site Güncellemeleri için Gatsby.js ve Node.js'yi Kullanma

Bazı proje gereksinimleri için statik sayfa oluşturma yalnızca yeterli olmakla kalmaz, aynı zamanda hız ve ölçeklenebilirlik açısından da en verimli olanıdır.

Bu dizinin ilk yarısında Node.js, Express, MongoDB, cron ve Heroku'yu birleştirerek GitHub'ın API'sini günlük bir programa göre kullanan CI'ye hazır bir arka uç sağladık. Artık statik sayfa oluşturma projemizi tamamlamak için karışıma Gatsby'yi eklemeye hazırız.

Ön Uç Geliştirme: Bir Gatsby Web Sitesi Yapın

Gatsby web siteleri React'i temel aldığından, React ile nasıl web sitesi oluşturulacağını zaten biliyorsanız bu yararlıdır.

Stil için Bootstrap, reactstrap ve react-markdown seçeneklerini tercih ettim. GitHub'daki sürüm notlarının Markdown formatında saklandığını biliyor olabilirsiniz, bu nedenle bir dönüştürücü ihtiyacımız var.

Statik Web Sitesi Proje Yapısı

Dosya/klasör yapımız şu şekilde olacaktır:

Bu dosyalar ne için? Bakalım:

• env.development ve env.production , ortam değişkeni yapılandırma dosyalarıdır.
• all-repositories.js şablonu, bir depo listesi içeren ana sayfamız için kullanılacaktır.
• repository.js şablonu, belirli bir havuzun ayrıntılarını göstermek için kullanılacaktır.
• gatsby-node.js , arka uç uç noktamızı kullandığımız ve createPage yöntemlerimizi çalıştırdığımız yerdir.
• package.json , her zaman olduğu gibi bağımlılıkları ve proje özelliklerini içerir.
• global.css ana stil sayfası dosyamızdır.

Gatsby Web Sitesi Uygulaması

Arka ucumuzda olduğu gibi, ön ucun package.json dosyasına gerekli bağımlılıkları ekledikten sonra yarn npm install (veya Yarn kuruluysa thread ) komutunu çalıştırın:

 { // ... "dependencies": { "axios": "^0.18.0", "bootstrap": "^4.3.1", "gatsby": "^2.0.0", "react": "^16.5.1", "react-dom": "^16.5.1", "react-markdown": "^4.0.6", "reactstrap": "^7.1.0" } // ... }

env.development ve env.production dosyaları, ilgili ortamları için yalnızca arka uç URL'sine sahiptir. Eski vardır:

 API_URL=http://localhost:3000

…üretim varken:

 API_URL=https://[YOUR_UNIQUE_APP_NAME].herokuapp.com

gatsby-node.js , kodunuzu oluştururken yalnızca bir kez çalıştırılacaktır. Bu yüzden gerekli tüm bilgileri burada arka uçtan toplamamız gerekiyor. Ardından yanıt, uygun statik sayfaları oluşturmak için şablonlarımızla birlikte kullanılacaktır.

Bizim durumumuzda, all-repositories.js tüm depolara ihtiyaç duyar ve repository.js , her yineleme için karşılık gelen depoya ihtiyaç duyar. Son olarak, path alanının bir parçası olarak depo owner ve name parametrelerini geçirerek dinamik olarak sayfa yolları oluşturabiliriz:

 const axios = require('axios'); require("dotenv").config({ path: `.env.${process.env.NODE_ENV}` }); const getRepositoryData = async () => { console.log(process.env.API_URL); return axios.get(`${process.env.API_URL}/repositories`); }; exports.createPages = async ({ actions: { createPage } }) => { let repositories = await getRepositoryData(); repositories = repositories.data; // Create a page that lists all repositories. createPage({ path: `/`, component: require.resolve('./src/templates/all-repositories.js'), context: { repositories } }); // Create a page for each repository. repositories.forEach(repository => { createPage({ path: `/repository/${repository.owner}/${repository.name}`, component: require.resolve('./src/templates/repository.js'), context: { repository } }); }); };

all-repositories.js ve repository.js için, stili atlarsak, basitçe pageContext'ten veri topluyoruz ve pageContext parametreleri kullandığımız gibi kullanıyoruz.

all-repositories.js 'de pageContext repositories alanını şu şekilde kullanacağız:

 export default ({pageContext: {repositories}}) => ( // ... <ListGroup> {/* Because the repositories parameter is a list, we are iterating over all items and using their fields */} {repositories.map(repository => (repository.tagName && <ListGroupItem className="repository-list-item"> // ... <Row> {`${repository.repositoryDescription}`} </Row> // ... </ListGroupItem> ))} </ListGroup> // ... );

repository.js için bunun yerine pageContext repository alanını kullanacağız:

 export default ({pageContext: {repository}}) => ( <div className="layout"> {repository.tagName && <ListGroupItem className="repository-list-item"> // ... <h1 className="release-notes">{`Release notes`}</h1> <hr/> {/* This the place where we will use Markdown-formatted release notes */} <ReactMarkdown source={`${repository.releaseDescription}`}/> </ListGroupItem> } // ... </div> );

Şimdi, arka ucunuzun çalışır durumda olduğundan emin olun. http://localhost:3000 olarak belirlediğimiz bu proje için hatırlayacaksınız.

Ardından, ön uç projenizin kökünden gatsby develop çalıştırın ve http://localhost:8000'i açın.

Arka ucunuza bazı depolar (sahip/ad) eklediyseniz ve GitHub-API aracılığıyla güncelleme özelliğini en az bir kez çalıştırdıysanız, şöyle bir şey görmelisiniz:

Depolardan birine tıkladıktan sonra şöyle bir şey görmelisiniz:

Yukarıdaki değişikliklerimizden sonra front-end uygulamamız yapılmıştır.

Harika! Şimdi sadece dağıtmamız gerekiyor.

Ön Ucu Dağıtma

Bu kısımda front-end uygulamamızda herhangi bir değişiklik yapmamıza gerek kalmıyor. Netlify'a basitçe dağıtacağız - orada bir hesaba ihtiyacınız olacak.

Ama önce kodumuzu GitHub, GitLab veya Bitbucket'e dağıtmamız gerekiyor. Arka uçta olduğu gibi kodumu GitHub'a dağıttım.

Ardından, Netlify'a giriş yapın ve gösterge tablonuzdaki "Git'ten yeni site" düğmesini tıklayın. Git sağlayıcınızı seçmek ve deponuzu bulmak için ekrandaki adımları izleyin.

Son adım için, kodunuzu doğru yapılandırdıysanız, Netlify otomatik olarak build komutunu ayarlayacak ve dizini aşağıdaki gibi doğru şekilde yayınlayacaktır:

Ardından "Siteyi dağıt" ı tıklayın. Sitenizi rastgele oluşturulmuş bir Netlify alt etki alanına dağıtacak, ancak bunu istediğiniz zaman değiştirebilirsiniz—Dağıtımımı canlı bir demo bulabileceğiniz https://sample-create-page-api-gatsby.netlify.com olarak değiştirdim tamamlanan uygulamanın

Çok uzak çok iyi. Ancak statik bir sayfa uygulaması olduğundan, güncel tutmak için her gün yeniden oluşturmamız gerekiyor.

Bir Yapı Kancası Kullanarak Günlük Güncelleme

Netlify'da derleme kancaları derleme tetikleyicileri olarak çalışır, böylece cron işi bittikten sonra bunları arka ucunuzdan tetikleyebilirsiniz. Bunu yapmak için önce Netlify'da bir derleme kancası oluşturun.

"Oluştur ve konuşlandır → Sürekli Dağıtım" bölümünün altında, "Kancalar oluştur"u bulabilirsiniz. "Yapı kancası ekle"yi tıklayın.

Bir isim verin ve kaydedin. (benimki build-from-backend adını verdim.) Ardından oluşturduğu bağlantıyı kopyalayın.

Şimdi back-end projemizi açalım ve bu birkaç satırı cron.controller.js dosyasına ekleyelim. Netlify'ın build-hook URL'sine bir POST isteği gönderiyoruz.

 const Axios = require('axios'); const Config = require('../config/env.config'); const NETLIFY_BUILD_HOOK_URI = Config.netlifyEndpoint; function updateGatsby() { if (NETLIFY_BUILD_HOOK_URI) { console.log('Gatsby build request will be send'); Axios.post(NETLIFY_BUILD_HOOK_URI).then(() => { console.log('Gatsby build request was successful'); }); } }

Ardından updateDaily işlevimizi güncelleyin:

 function updateDaily() { RepositoryController.updateRepositories().then(() => { updateGatsby(); }); }

Son olarak, ortam değişkenlerinden toplanacak netlifyEndpoint özelliğini ayarlamak için env.config.js güncelleyin:

 "netlifyEndpoint": process.env.NETLIFY_BUILD_HOOK || ""

Şimdi, bir an önce Netlify'dan kopyaladığınız NETLIFY_BUILD_HOOK ortam değişkenini ayarlamanız gerekecek. Heroku'da, uygulamanızın “ayarlar” bölümünden ortam değişkenlerini ayarlayabilirsiniz.

Taahhüdünüzü zorladıktan sonra, arka uç uygulaması Netlify'a bir derleme isteği gönderecek ve sayfalarınız cron işinizin sonunda günlük olarak güncellenecektir. Arka uç deposunun ve ön uç deposunun son sürümleriyle birlikte derleme kancası işlevselliğini ekledikten sonra deponun nasıl görünmesi gerektiği aşağıda açıklanmıştır.

Projedeki son rötuş olarak, her günlük güncelleme için arka uçunuzu zamanında uyandıracak AWS CloudWatch tarafından tetiklenen bir AWS Lambda işlevinin nasıl kullanılacağını göstereceğiz.

AWS Lambda ve AWS CloudWatch Basit İstek

AWS Lambda, sunucusuz bir bilgi işlem platformudur. Buradaki amaçlarımız için yalnızca bu platformun temellerine ihtiyacımız var. Bir AWS hesabına ihtiyacınız olacak.

Öncelikle hesabınızla AWS'ye giriş yapın ve Lambda Yönetim Konsolunu bulun. Örneğin, us-east-2 için https://us-east-2.console.aws.amazon.com/lambda/home adresinde bulunabilir.

Henüz seçili değilse, “İşlevler” bölümüne gidin:

Burada “Create function”a tıklayarak fonksiyonumuzu sıfırdan oluşturacağız. Açıklayıcı bir isim verelim. Çalışma zamanı dili olarak Node.js kullanacağız. Ardından, sonlandırmak için bir sonraki “İşlev oluştur” düğmesine tıklayın.

index.js içine yazabileceğimiz yeni fonksiyonun sayfasına yönlendirecektir.

İlk lambda fonksiyonumuzu uygulayalım. Herhangi bir üçüncü taraf bağımlılığımız olmadığı için Node.js'nin çekirdek modüllerini kullanmamız gerekiyor. (Bunun yerine üçüncü taraf bağımlılıklarını etkinleştirmek istiyorsanız lütfen AWS'deki bu kılavuzu izleyin.)

Dışa aktarılan yöntem adının (bu durumda handler ) sayfadaki "İşleyici" parametresiyle eşleştiğinden emin olun:

Geri kalanı, arka ucunuz için basit bir GET isteğidir:

 const https = require('https'); exports.handler = async (event) => { return new Promise((resolve, reject) => { https.get(process.env.HEROKU_APP_URL, (resp) => { let data = ''; resp.on('data', (chunk) => { data += chunk; }); resp.on('end', () => { resolve(JSON.parse(data)); }); }).on("error", (err) => { reject("Error: " + err.message); }); }); };

HEROKU_APP_URL ortam değişkenini ayarladığınızdan emin olun ve yapılandırmanızı kaydedin:

Son bir adım, her günlük güncellemeden on dakika önce bu işlevi çalıştırmak için bir CloudWatch tetikleme kuralı eklemektir - bu makale serisinde, 23:50'ye kadar çalışır:

CloudWatch tetikleyici kural türümüz bir "Schedule ifadesi" olacak ve kabul edilen formata göre cron ifademiz cron(50 23 * * ? *) olacaktır.

Artık AWS Lambda işlevimizi CloudWatch kuralımız tarafından tetiklenecek şekilde yapılandırdık.

Şimdi Statik Web Sayfalarımıza Güç Veriyoruz: Gatsby/React ve Netlify

Node.js/MongoDB/Heroku arka uçumuza eklenen bir dizi AWS Lambda/CloudWatch ve Gatsby ve Netlify'ın ön uçumuzu oluşturup barındırmasıyla uygulamamız tamamlandı!

Daha önce canlı bir demo bağlantısı paylaştım, ancak prototipimin gelişmiş bir sürümüne de göz atmaktan çekinmeyin; seveceğinizi bildiğim bazı ekstra değişiklikler var.

Bunu benzer projeler için bir plan olarak kullanabilirsiniz—Umarım bu makaleler uygulamalarınızı daha hızlı ve daha uygun maliyetli bir şekilde prototiplemenize yardımcı olur. Okuduğunuz için teşekkürler!