< BACK TO BLOG

วิธีใส่ MongoDB ใน Astro.js

2022-09-12T14:41:49.493Z

วิธีติดตั้ง MongoDB ใส่ Astro.js ง่ายๆ ดังนี้

1. ติดตั้ง library ด้านล่าง

npm install —save mongodb npm install —save-dev @astrojs/node npm run astro add react

2. ในหน้า astro.config.mjs ให้ config ตามตัวอย่าง

import { defineConfig } from 'astro/config';
import node from "@astrojs/node";
import react from "@astrojs/react";

// https://astro.build/config
export default defineConfig({
  output: "server",
  adapter: node(),
  integrations: [react()]
});

3. สร้างโฟลเดอร์และไฟล์ดังนี้ src/lib/mongodb.js เพื่อใช้สำหรับเป็น service เรียกฐานข้อมูลบนคลาวด์ 4.

import { MongoClient } from "mongodb"

if(!import.meta.env.MONGODB_URI){
    throw new Error('Invalid enviroment variable: "MONGODB_URI"');
}

const uri = import.meta.env.MONGODB_URI;
const options = {};
let cachedMongo;

const connectToDB = async () => {
    const mongo = await new MongoClient(uri, options).connect();
    return mongo.db("<ชื่อฐานข้อมูลส่วนตัว>");
};

export const getDB = async () => {
    if (import.meta.env.NODE_ENV === "development") {
        if (!global._mongoConnection) {
        global._mongoConnection = await connectToDB();
        cachedMongo = global._mongoConnection;
        }
        return cachedMongo;
    }
    const mongo = await connectToDB();
    return mongo;
};

อธิบายก็คือ เรียก library มาใช้งานผ่านการ import จากนั้นตรวจสอบว่า ข้อมูลในไฟล์ .env ของเรานั้นถูกต้องหรือไม่ในบรรทัดที่ 3-5

ไฟล์ .env นั้นได้มาจากการสร้างเอง และใส่ข้อมูลความลับของฐานข้อมูลเราลงไป และเวลา deploy รหัสลับนี้จะไม่แสดงในหน้าเว็บไซต์ โดยภายในไฟล์ให้ใส่ตามด้านล่างนี้

NODE_ENV="development"
MONGODB_URI="mongodb://localhost:27017"

บรรทัดที่ 11: connectToDB เป็น Arrow Function ทำการกรอกข้อมูลจาก .env มาเรียกใช้ในฟังชั่น MongoClient() และตามด้วย method connect() เพื่อทำการเชื่อมฐานข้อมูล แต่ method นี้ return ค่าเป็น null

แต่ข้อมูลที่ return จริงๆ มาจาก method ชื่อ db() ตรงนี้ให้เรากรอกชื่อฐานข้อมูลที่เราตั้งลงไป ส่วนการ return ค่านั้นเป็น instance ถ้าตรงนี้ไม่เข้าใจลองศึกษา mongosh มันจะทำให้เราสามารถเรียกใช้งาน ฟังชั่น หรืออะไรก็ตามใน database ชื่อดังกล่าว

ส่วนช่วงบรรทัดที่ 16: เป็นการ Cache ฐานข้อมูลเมื่อทำการพัฒนาในช่วง Development

สำหรับตัวอย่าง Get ข้อมูลสั้นๆ ตามตัวอย่างด้านล่างนี้ เรียก collection อะไรก็ตามที่เราสร้างในฐานข้อมูลมาแสดงผลได้

export const Users = async () => {
    const db = await getDB();
    return db.collection("users");
};

บทความนี้ขอจบไว้เท่านี้ก่อน ค่อยมาต่อในพาร์ทหน้าครับ หากสงสัยสามารถคอมเม้นท์สอบถามได้

Tags: astro.js, node.js, mongodb