Bulut, daha yüksek soyutlama derecelerine doğru gelişmeye devam ediyor. Otomatik dağıtım ve barındırma platformları, ön uç çerçeveler ve arka uç veritabanları giderek daha güçlü ve karmaşık hale geliyor ve bunları entegre etmek her zamankinden daha kolay. Bu makale, tam yığın sunucusuz geliştirme için Vercel, SvelteKit ve MongoDB’yi nasıl entegre edeceğinizi gösterir. Bu teknolojilerin her biri kendi alanında liderdir. Geliştiriciler bunları birlikte kullanarak, mütevazı bir çalışma miktarıyla etkileyici yetenekler elde edebilir.
Isırık büyüklüğünde bitler: Örnek uygulama
Bu gösterim için, bir veritabanında saklanacak iki alanlı bir varlık oluşturan bir uygulama oluşturacağız. Kullanıcı açısından bakıldığında, uygulama, biri özdeyiş, diğeri ise yazarı olan iki alanlı bir form sunar. (Bir özlü söz bir ısırık büyüklüğünde bilgeliktir.)
Buradaki odak noktamız, örnek uygulamayı geliştirmeden üretime kadar götürmek için bu güçlü bulmacanın öğelerini (Vercel, SvelteKit ve MongoDB) bir araya getirmektir.
Başlamak için, Svelte’de bir ön uç görünümü oluşturmak için SvelteKit’i kullanacağız. Bu görünüm, istekleri bir arka uç uç noktasına gönderir. Express.js’ye benzer şekilde SvelteKit, uç noktaları istek-yanıt bağlamının soyutlamaları olarak ele alır.
Soyutlama, Vercel’e sunucusuz bir bağlam olarak dağıtmayı kolaylaştıracaktır. Vercel uç noktası, alınan verileri hizmet olarak bulutta yerel bir veritabanı olan MongoDB Atlas’taki bir koleksiyona yerleştirir.
Bu kurulum, geliştirme ihtiyaçlarımız için iyi çalışacaktır. Ön uca sahip olduğumuzda GitHub’da bir havuz oluşturacağız ve projeyi teslim edeceğiz. Ardından, projemizi çekmek ve onu herkese açık bir IP’ye dağıtmak için Vercel’i kullanabiliriz.
Tam yığın geliştirme: SvelteKit
Geliştirme ortamımız SvelteKit ile başlayalım. Bir Svelte uygulamasını, çerçevenin yönergelerinde açıklandığı gibi SvelteKit komut satırından başlatabilirsiniz. belgeler. Uygulama yerel olarak çalışmaya başladığında, onu ziyaret edebilecek ve SvelteKit karşılama ekranını görebileceksiniz.
Başlamak için, uygulamanın ana sayfasını basit bir form içerecek şekilde değiştirelim. Düzenlemek /src/routes/index.svelte Liste 1’de görülen değişikliklerle.
Liste 1. Uygulama ana sayfasını değiştirin (index.svelte)
<script context="module">
// export const prerender = true; Comment this out - this is now a dynamic page
</script>
<script>
import Counter from '$lib/Counter.svelte';
async function onSubmit(e) {
const formData = new FormData(e.target);
const data = {};
for (let field of formData) {
const [key, value] = field;
data[key] = value;
}
console.log("formData: " + formData);
const res = await fetch(" {
method: 'POST',
body: JSON.stringify(data)
})
const json = await res.json()
result = JSON.stringify(json)
}
</script>
<svelte:head>
<title>Home</title>
</svelte:head>
<section>
<h1>
<!-- remains the same ... -->
</h1>
<form on:submit|preventDefault={onSubmit}>
<label for="apothegm">Apothegm</label>
<input type="text" name="apothegm" id="apothegm"/>
<label for="author">Author</label>
<input type="text" name="author" id="author"/>
<button type="submit">Submit</button>
</form>
<h2>
try editing <strong>src/routes/index.svelte</strong>
<!-- rest is the same ... -->
Çok index.svelte aynı kalmak. Modül dışa aktarımını artık önceden oluşturulmaması için sayfa başlığında yorumladığımı unutmayın. (SvelteKit’in süper güçlerinden biri, arka uca ulaşmayan sayfaları tamamen önceden oluşturma yeteneğidir. Sayfamız arka uca ulaşacağı için bu işlevi devre dışı bırakmak zorundayız.)
Değişikliklerin geri kalanı şunlara ayrılmıştır: iki alanlı bir form öğesi sağlama. Form gönderildiğinde, onu JSON’da sıralarız ve bir POST aracılığıyla getirme yoluyla kök uç noktasına (“/”) göndeririz.
Gönderi işlevinin ele alınması
POST API çağrısı, arka uçta şu şekilde ele alınacaktır: src/routes/index.js, “post” adı altında hangi işlev olursa olsun. Şimdi buna dönelim. Liste 2’nin gövdesini gösterir index.js.
Liste 2. index.js
import clientPromise from '../lib/mongo';
export async function post ({request}) {
const dbConnection = await clientPromise;
const db = dbConnection.db();
const collection = db.collection('apothegm');
let apothegm = await request.json();
const dbApothegm = await collection.insertOne(apothegm);
return { status: 200, body: { dbApothegm } }
}
Liste 2’de gördüğümüz ilk şey, birazdan keşfedeceğimiz bir yardımcı kitaplığın içe aktarılmasıdır. Sırada, SvelteKit çerçevesinden yıkım yoluyla bir istek argümanı alan post işlevinin kendisi gelir. Bu istek nesnesi, bir HTTP isteğiyle ilgilenmek için ihtiyacımız olan her şeyi tutar.
Bizim durumumuzda, veritabanı yardımcısını kullanarak bir veritabanı bağlantısı açarız, “özet” koleksiyonuna bir işaretçi alırız, ardından ön uç gövdesinin içeriğini şu şekilde alırız: await request.json() yöntem.
Son olarak, yöntem istek gövdesini veritabanı koleksiyonuna yerleştirir ve 200 “tamamen iyi” durumunu geri gönderir.
MongoDB bağlayıcısı
Şimdi, şuna bakalım /src/lib/mongo.js Veritabanına ulaşmak için kullandığımız Liste 3’te gösterilen dosya. Büyük ölçüde tarafından verilen kanonik yardımcıdır. MongoDB belgeleriBirlikte Hafif değişiklik. Ayrıca, gösteri amacıyla veritabanı URL’sini doğrudan dosyaya dahil etmeyi seçtiğimi unutmayın. Bunu gerçek hayatta yapmayın! Bu bariz bir güvenlik açığı. Gerçek bir dünya uygulaması için, URL’yi bir ortam değişkenine dönüştürmeniz gerekir.
Liste 3. MongoDB’ye bağlanın (mongo.js)
import dotenv from 'dotenv';
dotenv.config();
import { MongoClient } from 'mongodb';
//const uri = process.env['MONGODB_URI'];
// **Don’t do this in real life**:
const uri = "mongodb+srv://<username>:<password>@cluster0.foobar.mongodb.net/myFirstDatabase?retryWrites=true&w=majority";
const options = {
useUnifiedTopology: true,
useNewUrlParser: true,
}
let client
let clientPromise
if (!uri) {
throw new Error('Please add your Mongo URI to .env.local')
}
if (process.env['NODE_ENV'] === 'development') {
// In development mode, use a global variable
// so that the value is preserved across module reloads
// caused by HMR (Hot Module Replacement).
if (!global._mongoClientPromise) {
client = new MongoClient(uri, options)
global._mongoClientPromise = client.connect()
}
clientPromise = global._mongoClientPromise
} else {
// In production mode, it's best to
// not use a global variable.
client = new MongoClient(uri, options)
clientPromise = client.connect()
}
// Export a module-scoped MongoClient promise.
// By doing this in a separate module,
// the client can be shared across functions.
export default clientPromise;
Bu yardımcı oldukça basittir. En büyük karmaşıklık, geliştirme ve üretim ortamlarının ele alınmasıdır. Şimdi veri tabanının kurulumuna geçelim.
MongoDB Atlas: Hizmet olarak veritabanı
MongoDB, ilk ve en önde gelen NoSQL veri depolarından biri olan belge odaklı bir veritabanıdır. Atlas, MongoDB’nin yönetilen bulut hizmeti veya hizmet olarak veritabanıdır (DBaaS). MongoDB Atlas, MongoDB tarafından barındırılan bir veritabanına erişmenizi ve onu bir API aracılığıyla kullanmanızı sağlar.
Bu sonraki adım için şunları yapmanız gerekeceğini unutmayın: ücretsiz bir MongoDB Atlas hesabı oluşturun. Kaydolmak basit ve hızlıdır. Yeni bir hesaba sahip olduğunuzda, kontrol paneline yönlendirileceksiniz, burada aşağıdaki tuşa basarak yeni bir proje oluşturacaksınız. Yeni proje buton.
Ardından, aradığım yeni projeyi adlandırmanız istenecek. apothegm-foundry. Ayrıca size kullanıcı ve izin ekleme şansı sunulacak, ancak otomatik olarak eklendiğiniz için bu teklifi görmezden gelebilirsiniz. Vurarak projeyi onaylayın Proje Oluştur.
Veritabanı ekle
Proje, veritabanları için bir pakettir. Şimdi, tıklayarak bir veritabanı ekleyelim Veritabanı Oluştur. Burada size bir kademe seçeneği sunulacak. Ücretsiz, paylaşılan bir veritabanı kullanmak bizim amaçlarımıza uygundur. Hazır olduğunda vur Oluşturmak.
Ardından, bulut sağlayıcıları ve bölgeleriyle ilgili bir dizi seçenek sunulacak. Şimdilik varsayılanı kabul edebilirsiniz, ancak Amazon Web Services (AWS), Google Cloud Platform (GCP) veya Microsoft Azure arasından seçim yapabildiğimizi görmek güzel. Tıklamak Küme Oluştur.
Ardından, veritabanı için bir kullanıcı oluşturmaya davet edilirsiniz. Bir kullanıcı adı-şifre kombinasyonu veya sertifika tabanlı bir kullanıcı oluşturabilirsiniz. Kolaylık için kullanıcı adını ve şifreyi alacağız. Hatırlayacağın ve vuracağın bir kombinasyon seç Kullanıcı oluştur. Bu, gireceğiniz kullanıcı adı ve şifredir. mongo.js.
Şimdi, aşağı kaydırın nereden bağlanmak istersin. Yerel IP adresinizi kullanabilirsiniz ancak bu demonun amacı için sadece 0.0.0.0/0 girebilirsiniz. Yine, burada işleri basit tutuyoruz, ancak gerçek dünyadaki bir uygulama için rastgele bir IP adresi girmezsiniz. Gerçek IP adresini veya IP adresleri aralığını girmeniz gerekir.
Ana MongoDB Atlas konsolundan, bağlantı dizinizi her zaman veritabanına tıklayarak ve Bağlamak buton. Bunu yapmak size aşağıdakileri seçebileceğiniz bir açılır pencere açar. Uygulama ile Bağlanın seçenek. Bu seçenek, aşağıdaki gibi bir formun dizesini sağlar:
mongodb+srv://<username>:<password>@cluster0.foobar.mongodb.net/myFirstDatabase?retryWrites=true&w=majority
Seçtiğiniz kullanıcı adını ve şifreyi ekleyin, ardından mongo.js dosya ve dizeyi oraya ekleyin. Şimdi, Svelte uygulamasındaki formu kullandığınızda ve GöndermekMongoDB Atlas konsoluna gidip bir Koleksiyona Gözat buton.
Liste 4’tekine benzer şekilde, forma girdiğinizi yansıtan bir giriş görmelisiniz.
Liste 4. MongoDB’de Özdeyiş girişi
1. _id:6228f438e294d2c79754b64f
2. apothegm:"Form and emptiness are one"
3. author:"Unknown"
Yani, geliştirme ortamı çalışıyor. Sıradaki dağıtım.
Uygulamayı dağıtın: GitHub ve Vercel
Uygulamayı Vercel ile dağıtmadan önce GitHub’da bir kaynak deposu oluşturmamız gerekiyor. Ücretsiz ihtiyacınız olacak GitHub hesabı. Buna sahip olduğunuzu varsayarak, yeni bir depo oluşturmak için adımları izleyin. Ardından, komut satırına dönün ve depoyu uygulama kodunuzla doldurun. (SvelteKit başlatıcının zaten bir .gitignore dosya.) Uygulama kaynağı ana dalda kontrol edildikten sonra Vercel’i ziyaret etmeye hazırsınız.
Vercel, ücretsiz bir “Hobi” hesabına kaydolmayı kolaylaştırır. Vercel’e SSO (tek oturum açma) erişimi için GitHub hesabımı kullandım. Hesabınız olduğunda GitHub hesabınızı bağlama ve Vercel’e izin verme adımlarını izleyin.
Ayrıca, belirli bir havuz veya kod barındırdığınız tüm havuzlar için GitHub içinde Vercel’e izin vermeniz gerekir. Hesap profilinizdeki açılır menüyü açın ve Ayarlarardından sola doğru aşağı kaydırın Entegrasyonlar -> Uygulamalar seçeneğini seçin ve tıklayın. Şimdi, ana sayfada aşağı kaydırın Depo Erişimi bölüm. Orada, belirli bir depoya (Şekil 1’de gösterildiği gibi) veya tümüne Vercel’e erişim verebilirsiniz.
IDGŞekil 1. GitHub üzerinden Vercel’e erişim izni verilmesi.
Ardından, Vercel’e gidin ve depoyu içe aktarın. Vercel’in uygulamayı bir SvelteKit uygulaması olarak nasıl algıladığına dikkat edin. Uygulamayı sorunsuz bir şekilde içe aktarmalı ve dağıtmalıdır.
Şimdi Vercel’e gidin ve uygulamanızı kontrol panelinde görmelisiniz. Üzerine tıklayın ve Şekil 2’deki ekrana benzer görünmesi gereken özeti açacaktır.
IDGŞekil 2. Vercel’deki uygulamaya genel bakış.
Çalışan uygulamayı aşağıdaki gibi bir URL’de tıklayıp açabilirsiniz. sveltekit-vercel-mongo.vercel.app.
Yeni bir özdeyiş ve yazar girerseniz, MongoDB Atlas veritabanı koleksiyonu görünümünü kullanarak konsolu yeniden yükleyebilmeli ve orada yansıtıldığını görmelisiniz. Üretim uygulamanız artık hazır ve bir veritabanına karşı çalışıyor.
Çözüm
Bu yığının üç bileşeni vardır ve hepsi oldukça sorunsuz bir şekilde birlikte çalışır. Vercel, prodüksiyon dağıtımını gerçekleştirmek için perde arkasında çok şey yaptı. Diğer şeylerin yanı sıra, ana şubeye yeni pushları otomatik olarak dağıtacak şekilde yapılandırılabileceğine dikkat edin.
Ayrıca, çalışan uygulamanın günlüklerinin yanı sıra derleme günlüklerinin de mevcut olduğuna dikkat edin. SvelteKit uygulamasının arka uç kısmı sunucusuz bir işlev olarak dağıtıldı, bu nedenle günlüklerine tıklanarak erişilebilir Dağıtımlar -> İşlevler.
Açıkçası, bu demo uygulamasını gerçekten kullanabileceğiniz bir şeye dönüştürmek için yapılması gereken işler var (örneğin, geliştirme ve üretim için farklı veritabanları istersiniz). İlginç olan, halihazırda güçlü bir tam yığın çerçeveye (SvelteKit), dağıtım hattına (Vercel) ve veri deposuna (MongoDB) sahip olmanızdır. Ve her şey, büyük ölçüde ölçeklenebilen altyapı üzerinde çalışır.
Telif Hakkı © 2022 IDG Communications, Inc.
Kaynak : https://www.infoworld.com/article/3655952/go-serverless-with-vercel-sveltekit-and-mongodb.html#tk.rss_all