En ilginç MongoDB World 2022’den biri duyurular Vercel-MongoDB entegrasyonunun yayınlanmasıdır. Burada gördüğümüz, büyük altyapı bileşenlerini entegre etmenin kademeli olarak basitleştirilmesi ve standartlaştırılmasıdır. Minimum mimari karmaşa ile veri deponuzdaki ve sunucunuzdaki büyük miktarda güçten faydalanabilirsiniz.
Mimari ile daha az çekişmek, temel hedefleriniz üzerinde çalışmak için daha fazla zaman demektir. Yeni modern entegrasyona bir göz atalım.
MongoDB ve Vercel’i birlikte kullanmak zaten oldukça kolaydı. Bununla birlikte, yeni resmi entegrasyon, standart olan ve beraberinde pek çok inceliği getiren emredici bir yaklaşım sunuyor. üzerine inşa edelim bu proje Daha önce işlerin nasıl yürüdüğünü görmek için Vercel-MongoDB entegrasyonunun demosunu yapardım.
Vercel ve MongoDB Atlas altyapınız arasındaki bağlantı, MONGODB_URI çevresel değişken. Resmi entegrasyon, bunun tanımlanmasını ve sizin için gerekli izinlerle birlikte paylaşılmasını sağlar.
Buradaki demomuz için, yerel bir MongoDB veri deposuyla yerel olarak geliştirdiğimiz SvelteKit tabanlı bir uygulama elde etmek istiyoruz. Ardından bu uygulamayı Vercel’e dağıtmak ve veri deposu olarak otomatik olarak bir MongoDB Atlas kümesi kullanmasını sağlamak istiyoruz. Bu çok yaygın bir kurulumdur. Bu arada, bunların çoğu React/Next veya Vue/Nuxt için aynı şekilde çalışır. Temel kurulum Şekil 1’de görülmektedir.
Şekil 1. Vercel-MongoDB uygulaması için geliştirme ve ürün mimarileri
IDGSvelteKit demo uygulaması
Demo uygulamamız, metin ve yazar alanı içeren basit bir belge, bir özdeyiş oluşturmaya izin veren ve veritabanındaki özdeyişlerin listesini görüntüleyen bir SvelteKit uygulamasıdır. Belgelerimizin metni için bazı özlü özdeyişler kullanacağız.
SvelteKit tam yığın bir çerçevedir, bu nedenle arka uca ulaşmak ve Liste 1’deki gibi mevcut özdeyişleri yüklemek için kendi görüşümüze göre load yöntemini kullanacağız.
Liste 1. SvelteKit’in load() yöntemi
export async function load({ params, fetch, session, stuff }) {
const res = await fetch('/apothegm', {
method: "GET",
headers: { 'content-type': 'application/json' }
});
return {
props: {
apothegms: await res.json()
}
};
}
SvelteKit’in yükleme yöntemi hakkında daha fazla bilgi bulacaksınız buradaancak ana fikir, sayfa önyüklenmeden ve elde edilen JSON’u props.apothegms alan. Bu alan aynı zamanda normal bir komut dosyası öğesinde gösterilir, böylece sayfanın satırla birlikte ona erişimi olur. export let apothegms;.
Arka uçta, /apothegm get yöntemi Liste 2’ye benziyor.
Liste 2. Arka uçtan özdeyişlerin alınması
import clientPromise from '../lib/mongo';export async function get ({request}) {
const dbConnection = await clientPromise;
const db = dbConnection.db("apothegm");
const collection = db.collection("apothegm");
let apos = await collection.find({}).toArray();return {
status: 200,
headers: { 'content-type': 'application/json' },
body: { apos }
};
}
Liste 2, veri deposundan, yani özdeyiş veritabanından ve özdeyiş koleksiyonundan alınan özdeyişlerle dolu bir gövde döndürür. Bu yöntem büyük ölçüde şunlara dayanır: clientPromise lib/mongo’dan içe aktarılan nesne. Liste 3’teki bu modülün ilgili bitlerine bakalım.
Liste 3. MongoDB yardımcısı /lib/mongo.js
import 'dotenv/config';
import { MongoClient } from 'mongodb';const uri = process.env["MONGODB_URI"];
const options = {
useUnifiedTopology: true,
useNewUrlParser: true,
}let client;
let clientPromise;if (!uri) {
throw new Error('Please set Mongo URI')
}if (process.env['NODE_ENV'] === 'development') {
if (!global._mongoClientPromise) {
client = new MongoClient(uri, options)
global._mongoClientPromise = client.connect()
}
clientPromise = global._mongoClientPromise
} else {client = new MongoClient(uri, options)
clientPromise = client.connect()
}export default clientPromise
Liste 3, bir MongoDB örneğine bağlantı oluşturarak işini yapar. MONGODB_URI çevresel değişken. Bu değişken ile ortamdan çekilir. process.env["MONGODB_URI"] aramak.
Bu dosyanın ilk satırının içe aktarma çağrısı olduğuna dikkat edin. 'dotenv/config'. Bu içe aktarma, dotenv kitaplığının kendisini önyükleme yapmasına neden olur. Dotenv’in amacı, uygulama için ortam değişkenlerini yapılandırma dosyalarından (işletim sisteminden bağımsız bir şekilde) yüklemektir. Bununla ilgili daha fazla bilgi burada.
Uygulamamız için, geliştirme sırasında bu değişkeni yerel bir URI’ye ve üretim sırasında uzak bir MongoDB Atlas URL’sine ayarlamak istiyoruz. Bunu, yerel geliştirme sırasında dotenv’in bulacağı ancak prod’de bulamayacağı bir .env dosyası sağlayarak yapabiliriz. Bunu başarmak için, dosyayı sürüm kontrolünde kontrol etmiyoruz – onu .gitignore’a ekliyoruz. Her iki dosyadan ilgili bitler Liste 4’te gösterilmektedir.
Liste 4. .env ve .gitignore’a ekler
// .env
MONGODB_URI="mongodb://localhost:27017
// .gitignore
.env
.env.*
Bu, geliştirme sırasında uygulamamızın yerel MongoDB kurulumuna ulaşacağı anlamına gelir. Bu noktada, uygulamayı şu şekilde başlatabilirsiniz: npm run dev ve her şey çalışmalı.
Vercel-MongoDB üretim kurulumu
Artık dev çalışıyor ve çalışıyor, dikkatimizi prod kurulumuna veya prod dediğimiz şeye çevireceğiz. Gerçek dünya durumunda, test etme ve hazırlama adımlarını uygular ve ardından hazırlamadan üretime terfi edersiniz.
Her durumda, hem Vercel hem de MongoDB Atlas’ta hesaplara ihtiyacınız olacak. Her iki hizmet de kurulumu hızlı ve kolay olan hobi düzeyinde ücretsiz hesaplar sunar: MongoDB’ye kaydolma, Vercel’e kaydol.
Projeyi Vercel’e aktarın
Hesaplarınızı aldıktan sonra Vercel’de oturum açabilir, yeni bir proje oluşturabilir ve proje kodunu içe aktarabilirsiniz. İşte yine GitHub projesi: https://github.com/MTyson/sveltekit-vercel-mongo.
İçe aktarma işlemi tamamlandıktan sonra, Vercel projeyi otomatik olarak oluşturacak ve dağıtacaktır. (Rahat bir nefes: Fazladan altyapı çalışması yok.) Yapı başarılı olacak ancak projeyi görüntülediğinizde bir hata görüntüleyecek. Bunun nedeni, kullanılabilir veri deposu olmamasıdır.
MongoDB Atlas kümesi oluşturun
Şimdi, üretim verileriniz için bir ev olarak hizmet vermek üzere MongoDB Atlas’ta bir küme oluşturmak istiyorsunuz. MongoDB konsolunuzda ücretsiz bir küme oluşturmak kolaydır (talimatlar burada). Ayrıca yol boyunca bir veritabanı kullanıcısı oluşturacaksınız.
Entegrasyon eklemek için Vercel’e geri dönün
Kullanabileceğiniz bir kümeniz olduğunda, sonraki adım Vercel kullanıcı hesabınıza MongoDB entegrasyonunu eklemektir. (Kurumsal bir ortamda bunu Vercel ekibinize ekleyebilirsiniz.) Şuraya gidin: ve üst kısımdaki “Entegrasyon Ekle” düğmesine tıklayın. Açılır menü içeren bir modal ile karşılaşacaksınız ve kullanmak istediğiniz hesap, aşağıdaki Ekran 1’de olduğu gibi orada görünmelidir.
Ekran 1. Vercel’e MongoDB Atlas entegrasyonunu ekleyin
IDGArdından, entegrasyonu tüm projelere veya belirli bir projeye ekleme seçeneği sunulur. Bu demo için “Add to All”u seçip devam edelim.
Geçici olarak MongoDB Atlas’a geri döndü
Entegrasyonun eklenmesi, başka bir pencerede bir MongoDB kayıt sayfası açacaktır. Halihazırda bir MongoDB hesabınız yoksa, bir tane oluşturabilirsiniz. Aksi takdirde, mevcut hesabınıza giriş yapın.
Ardından, bir iletişim kutusu, entegrasyonun hangi MongoDB Atlas kuruluşuna ekleneceğini soracaktır. Kullanıcınız için ayarladığınız varsayılanı kullanın.
Son olarak, Ekran 2’de gösterildiği gibi, entegrasyonu kaldırmak istiyorsanız, entegrasyonu manuel olarak kaldırmanız gerektiğini kabul etmek için son ekrandaki Onay düğmesine basın.
Ekran 2. MongoDB Atlas’ta kuruluş erişimini onaylayın
IDGŞimdi seçtiğiniz MongoDB Atlas projesini ve içindeki kümeleri göreceksiniz. Soldaki açılır kutudaki bir kümeyi, sağdaki çoklu seçimdeki bir veya daha fazla Vercel projesiyle ilişkilendireceksiniz. Bizim durumumuzda, daha önce oluşturduğumuz Vercel projesini sağdaki seçime eklemek istiyoruz. Bunu Ekran 3’te görebilirsiniz.
Ekran 3. Vercel projesini MongoDB Atlas kümesiyle ilişkilendirin
IDGSonraki adım, MongoDB Atlas kümesi ile Vercel projesi arasındaki köprüyü oluşturmaktır. Vercel tarafında doğru projeyi seçtiğinizden emin olun!
Bu gerçekleştiğinde, Vercel projesi otomatik olarak ortam değişkenine (MONGODB_URL) veri deposuna kolaylıkla bağlanmamız gerekiyor.
Test etmek için Vercel’e geri dönün
Vercel’e döndüğünüzde, Ekran 4’teki gibi Entegrasyonlar sekmesinde MongoDB Atlas entegrasyonlarını göreceksiniz.
Ekran 4. Vercel’de MongoDB Atlas entegrasyonu
IDGBuradan entegrasyonun Vercel tarafında değişiklikler yapabilirsiniz (isterseniz Yönet -> Kaldır’ı seçerek kaldırma dahil).
Ardından, Vercel projesinin MongoDB Atlas kurulumuna atıfta bulunan yeni çevresel değişkeni aldığını doğrularız. Vercel projesini açın ve Ayarlar’a tıklayın. Ayarlar’da, soldaki menüden “Ortam Değişkenleri” ni tıklayın. o zaman bir görmelisin MONGODB_URI Ekran 5’teki gibi orada listelenen değişken.
Ekran 5. Vercel projesinde ortam değişkenleri
IDGDeğişken içindeki göz simgesine tıklarsanız, MongoDB Atlas kümenize işaret etmesi gereken değeri görebilirsiniz. Bu, dağıtıldığında ortam değişkeninin uygulama için kullanılabilir olduğunu doğrular.
Şimdi projeyi görüntülemek için tıklarsanız, Ekran 6’daki gibi Atlas kümesi tarafından yönlendirilen verilerle çalıştığını göreceksiniz.
Ekran 6. Vercel-MongoDB Atlas entegrasyonu ile üründe çalışıyor
IDGSonuç olarak, Vercel-MongoDB entegrasyonu bize, Vercel’de dağıtılan uygulamamızı MongoDB Atlas’ta çalışıyor olarak veri depomuza bağlamanın basit bir yolunu sunuyor. Uygulamaları, testten hazırlamaya ve üretime kadar farklı ortamlardaki verilerle ilişkilendirmek için benzer bir yaklaşım kullanılabilir.
Genel olarak, entegrasyon, küresel “sıfıra ölçeklendirme” altyapısından en az sorunla yararlanmaya yönelik daha standart bir yaklaşıma olanak tanır.
Telif Hakkı © 2022 IDG Communications, Inc.
Kaynak : https://www.infoworld.com/article/3664936/how-to-deploy-with-vercel-and-mongodb-atlas-without-even-trying.html#tk.rss_all