Dodaj bazę danych MongoDB do aplikacji SaaS MVP, którą zbudowaliśmy w pierwszej części tej serii blogów.

Początkowa baza kodu, którą ustawiliśmy dla SaaS MVP przy użyciu NextJS, TypeScript, MaterialUI, Storybook, Jest i SWR, jest opisana na:

W tym poście połączymy naszą aplikację z bazą danych MongoDB.

Wykorzystaliśmy trasy API NextJS (https://nextjs.org/docs/api-routes/introduction), aby mieć backend HTTP API działający w tej samej bazie kodu, oczywiście przy użyciu TypeScript.

Najpierw utwórz bazę danych MongoDB

Istnieje kilka rozwiązań MongoDB opartych na chmurze, jednym z nich (jeśli nie najlepszym) jest MongoDB Atlas (https://www.mongodb.com/cloud/atlas). MongoDB Atlas ma hojną darmową warstwę 500 MB DB za darmo.

Utwórz bazę danych MongoDB w Atlasie. W pierwszym kroku utwórz projekt :

W drugim kroku utwórz Klaster Bazy Danych, wybierając Plan (bezpłatny) i Host (chmura):

Trzeci krok, utwórz użytkownika klastra baz danych:

Uwaga: Wpisz gdzieś hasło użytkownika, będziemy go potrzebować w późniejszych krokach.

Po utworzeniu użytkownika klastra bazy danych możemy utworzyć bazę danych za pomocą funkcji connect.

Kompas MongoDB (https://www.mongodb.com/products/compass) to desktopowy klient MongoDB. Pobierz go i zainstaluj na swoim lokalnym pudełku. Wykorzystamy go do stworzenia naszej Bazy Danych na klastrze oraz do tworzenia Kolekcji i przeszukiwania danych na nich.

Naszą nazwą bazy danych będzie: saas-dbi pierwsza kolekcjaregistrations

Użyj MongoDB z NextJS API Routes

Zaczynając od repozytorium, które stworzyliśmy w części 1, zmodyfikujmy je tak, abyśmy mogli przechowywać i odpytywać zarejestrowanych użytkowników w/z bazy danych.

W tym repozytorium użyliśmy zmiennej in-memory do przechowywania rejestracji e-maili pochodzących ze strony. Zmodyfikujemy ten punkt końcowy, aby registrationszamiast tego używał kolekcji MongoDB .

Zainstaluj zależności

mongodb to jedyna zależność, której potrzebujemy

$ yarn add mongodb
yarn add v1.22.11
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 9 new dependencies.
info Direct dependencies
└─ [email protected]
info All dependencies
├─ @types/[email protected]
├─ @types/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
✨  Done in 7.90s.

Do łączenia się z MongoDB ponownie wykorzystujemy „funkcję połączenia” z folderu przykładów repozytorium NextJS (https://github.com/vercel/next.js/tree/canary/examples/with-mongodb) i opakuj go ogólną funkcją, która zapewnia bezpośredni dostęp do bazy danych, dzięki czemu nie musimy się martwić o łączenie się z bazą danych za każdym razem, gdy potrzebujemy do niej zapytania.

Funkcja withMongoasynchroniczna jest ogólna, <T>aby umożliwić zwrócenie wpisanej wartości T. Były:

const registrations = await withMongo(async (db: Db) => {
  const collection = db.collection<User>('registrations')
  return await collection.find().toArray()
})

Kolejnym ważnym szczegółem jest ustawienie zmiennych środowiska wykonawczego:

• MONGO_DB_URL : Adres URL połączenia MongoDB (jest to ten sam, którego używaliśmy do łączenia się z naszym klastrem bazy danych MongoDB za pomocą kompasu)
• MONGO_DB_NAME: Nazwa MongoDB (ustawiamy ją na saas-db)

MONGO_DB_URL=mongodb+srv://<user>:<pass>@<server-url>
MONGO_DB_NAME=saas-db

Uruchom swoją aplikację. Ma teraz backend MongoDB.

Wnioski

• Skonfigurowanie bazy danych dla SaaS MVP nie powinno kosztować dużo czasu i pieniędzy. Istnieją bezpłatne warstwy, dzięki czemu możesz załadować swoją aplikację. Jeśli Twoja aplikacja się rozrasta, możesz kupić więcej miejsca na żądanie, korzystając z planu bezserwerowego (https://www.mongodb.com/pricing)
• Bezpłatna warstwa MongoDB Atlas zapewnia 500 MB miejsca na bazę danych. Tylko pamiętaj, aby chronić jego dostęp silnym hasłem i, jeśli to możliwe, zezwolić na listy adresów IP, peering (https://docs.atlas.mongodb.com/security-vpc-peering/) lub Prywatne punkty końcowe (https://docs.atlas.mongodb.com/security-private-endpoint/)
• Typy TypeScript znacznie ułatwiają wszystko. mongodbpakiet jest w pełni napisany. Użyj tego.
• Pełny kod można znaleźć na: https://github.com/outsrc/next-mui/tree/efg/with-mongodb
• Uruchamiam demo o: https://next-mui-r3ranh7al-outsrc.vercel.app/( Ponieważ nie ma przycisku usuwania, a e-maile są widoczne na stronie, usuwamy wszystkie dane co kilka godzin. )