atlas search mongoflix
1.0.0
MongoFlix - การสาธิตเชิงโต้ตอบสำหรับ MongoDB Atlas Search, MongoDB App Services, GraphQL และอื่นๆ อีกมากมาย
นี่คือสิ่งที่เราจะสร้าง!
มีอยู่ใน App Services ในรูปแบบไซต์คงที่ด้วย!
แน่นอนคุณสามารถโคลน repo และรันโปรเจ็กต์ในเครื่องได้ npm install && npm run build หรือคุณสามารถเปิดโปรเจ็กต์ในเบราว์เซอร์ของคุณโดยไม่ต้องติดตั้งใดๆ บนเครื่องของคุณ
เปิดโครงการสดบน StackBlitz:
ทำซ้ำไฟล์ .env.local.example-add-app-id-here และตั้งชื่อ: .env.local คุณจะต้องเปลี่ยนค่า <APP_ID> เป็นรหัสแอปของแอป MongoDB App Services ซึ่งจะถูกสร้างขึ้นในขั้นตอนต่อไป คุณต้องอัปเดตค่า NEXT_PUBLIC_REALM_BASE_URL หากคุณมี URL พื้นฐานอื่นสำหรับแอป MongoDB App Services ของคุณ ค่านี้จะขึ้นอยู่กับภูมิภาคการปรับใช้ของแอป MongoDB App Services ของคุณ
หากต้องการติดตามการสาธิต คุณจะต้องสร้างคลัสเตอร์ MongoDB Atlas และโหลดชุดข้อมูลตัวอย่างลงในคลัสเตอร์ของคุณ โปรดสร้างบัญชีบน MongoDB Atlas และปฏิบัติตามคำแนะนำ หากนี่เป็นครั้งแรกที่คุณใช้ Atlas คุณจะต้องสร้างองค์กรและโครงการ หลังจากคุณตั้งค่าบัญชีเสร็จแล้ว คุณจะเห็น Atlas UI หากคุณไม่มีคลัสเตอร์ใด ๆ ให้คลิกปุ่ม สร้างฐานข้อมูล
ในกล่องโต้ตอบต่อไปนี้ ให้เลือก แบ่งปัน และคลิก สร้าง หน้าจอต่อไปนี้จะจัดเตรียมอินเทอร์เฟซสำหรับกำหนดค่าคลัสเตอร์
หากคุณเลือกภูมิภาคอื่นที่ไม่ใช่แฟรงก์เฟิร์ต คุณจะต้องอัปเดตตำแหน่งข้อมูลในแอปใน .env.local เพื่อให้ตรงกับภูมิภาค
นี่คือการตั้งค่าสำหรับคลัสเตอร์:
AWS, Frankfurt (eu-central-1)MO Sandbox (Shared RAM, 512 MB Storage)Cluster0 
หลังจากที่คลัสเตอร์ของคุณถูกปรับใช้ในภูมิภาคที่คุณเลือกแล้ว คุณจะต้องโหลดชุดข้อมูลตัวอย่างลงในคลัสเตอร์ของคุณ คลิกเมนู 3 จุดในบรรทัดแรกด้านบนของการ์ดคลัสเตอร์ คลิก โหลดชุดข้อมูลตัวอย่าง คลิกปุ่ม โหลดชุดข้อมูลตัวอย่าง ในการซ้อนทับเพื่อเริ่มกระบวนการ (ควรใช้เวลาประมาณ 5-10 นาที ☕️ ?)
คลิกชื่อคลัสเตอร์เพื่อเปิด ในคลัสเตอร์ของคุณบน Atlas คลิกแท็บ ค้นหา คลิกปุ่ม สร้างดัชนีการค้นหา เพื่อสร้างดัชนี
sample_mflix และเลือก moviesdefault และวาง JSON ต่อไปนี้
{
"mappings" : {
"dynamic" : true ,
"fields" : {
"title" : [
{
"dynamic" : true ,
"type" : " document "
},
{
"type" : " autocomplete "
}
]
}
}
} การสร้างดัชนีควรใช้เวลาน้อยกว่าหนึ่งนาที มาทดสอบกันดูว่าใช้งานได้จริงหรือไม่ ยังอยู่ในแท็บ ค้นหา ให้คลิกปุ่ม แบบสอบถาม ข้างดัชนีที่สร้างขึ้นใหม่ ป้อนแบบสอบถามต่อไปนี้เพื่อค้นหาภาพยนตร์ทั้งหมดที่มี time ข้อความในค่าข้อความใดๆ
{ "$search" : { "text" : " time travel " } }ใน Atlas UI ให้คลิกแท็บ บริการแอพ ที่ด้านบน หากคุณใช้บริการแอพเป็นครั้งแรก คุณจะเห็นกล่องโต้ตอบพร้อมคำแนะนำเพิ่มเติม คุณสามารถเลือก สร้างแอปของคุณเอง ได้อย่างปลอดภัยแล้วคลิกปุ่ม ถัดไป ข้อมูลควรได้รับการเติมโดยอัตโนมัติ ตรวจสอบให้แน่ใจว่าใช้ชื่อเดียวกันเพื่อความเรียบง่าย
ในกล่องโต้ตอบต่อไปนี้ ให้ตั้งชื่อ App Services App เชื่อมต่อกับคลัสเตอร์ที่สร้างขึ้นใหม่ และเลือกโมเดลการปรับใช้ภายในเครื่อง (ภูมิภาคเดียว) ควรใช้ภูมิภาคที่ใกล้กับภูมิภาคคลัสเตอร์ของคุณมากที่สุด
หากต้องการสร้างแอป ให้คลิก สร้างแอปพลิเคชันบริการแอป
คำแนะนำ: ขณะนี้เมื่อสร้างแอปแล้ว คุณสามารถอัปเดตไฟล์ .env.local เพื่อรวมค่า App ID จากแอป Services ของคุณได้
ที่แถบด้านซ้ายของ Atlas UI ภายใน Data Access ให้คลิก Authentication ดังที่คุณเห็นว่า App Services มีวิธีการตรวจสอบความถูกต้องหลายวิธี เราจะใช้ Anonymous สำหรับการสาธิตนี้ คลิกที่ปุ่ม แก้ไข และตั้งค่าช่องทำเครื่องหมายเป็น เปิด สำหรับวิธีการตรวจสอบสิทธิ์นี้
ที่แถบด้านซ้ายของ Atlas UI ภายใน Data Access ให้คลิก กฎ กฎ มีหลายวิธีในการจำกัดและกำหนดค่าการเข้าถึงข้อมูลต่อคอลเลกชันและบทบาทของผู้ใช้ ลึกลงไปถึงระดับเอกสาร สำหรับการสาธิตนี้ เราจะอนุญาตให้ผู้ใช้ทุกคน read เฉพาะเอกสารทั้งหมดในกลุ่มภาพยนตร์เท่านั้น App Services มีเทมเพลตสำหรับหลาย ๆ สถานการณ์และเราจะใช้ ผู้ใช้สามารถอ่านเทมเพลตข้อมูลทั้งหมดได้เท่านั้น
ที่แถบด้านซ้ายของ Atlas UI ภายใน Data Access ให้คลิก Schema Schema กำหนดโครงสร้างข้อมูลและประเภทของเอกสารในแต่ละคอลเลกชันในฐานข้อมูล เลือกคอลเลกชัน ภาพยนตร์ ภายในฐานข้อมูล example_mflix คลิกปุ่มสร้างสคีมา เลือกเฉพาะคอลเลกชัน ภาพยนตร์ ปล่อยให้ขนาดสุ่มตัวอย่างเป็นค่าเริ่มต้น แล้วคลิกปุ่ม สร้างสคีมา สิ่งนี้จะสร้างประเภทและการสืบค้นที่จำเป็นทั้งหมดสำหรับสคีมา GraphQL ซึ่งสามารถใช้งานได้ทันทีเพื่อเข้าถึงข้อมูลผ่านจุดสิ้นสุด GraphQL ที่จัดการโดย App Services
คลิกปุ่ม ตรวจสอบแบบร่างและปรับใช้ ที่ด้านบนของหน้าและ ปรับใช้ การเปลี่ยนแปลงของคุณ
คำแนะนำ: เมื่อสร้างสคีมาแล้ว คุณสามารถอัปเดตไฟล์ .env.local เพื่อรวม URL พื้นฐานต่อไปนี้จากแอปบริการแอปของคุณได้
มาทดสอบว่า GraphQL ทำงานอย่างไร ในแท็บ GraphQL ภายในโปรแกรมแก้ไข GraphQL ให้วางโค้ดต่อไปนี้เพื่อทดสอบโครงร่างที่สร้างขึ้น
query {
movie ( query : { title : " The Godfather " }) {
_id
title
metacritic
num_mflix_comments
fullplot
}
}ขณะนี้เมื่อมีกฎและสคีมาที่ถูกต้องแล้ว เราก็สามารถเริ่มสร้างฟังก์ชันสำหรับแอปได้ สำหรับฟีเจอร์แรก เราจะสร้างฟังก์ชันที่จะส่งคืนรายการภาพยนตร์ที่ตรงกับคำค้นหาตามชื่อเรื่อง โดยจะใช้ดัชนีไดนามิกของเราที่สร้างขึ้นในขั้นตอนก่อนหน้าพร้อมกับฟังก์ชันเติมข้อความอัตโนมัติ ซึ่งช่วยให้เราสามารถให้การค้นหาการเอียงภาพยนตร์ที่เติมข้อความอัตโนมัติและไม่ชัดเจนในแถบค้นหาของแอปส่วนหน้า
ที่แถบด้านซ้ายของ Atlas UI ภายใน Build ให้คลิก Functions ฟังก์ชัน จัดเตรียมวิธีดำเนินการตรรกะฝั่งเซิร์ฟเวอร์บน App Services ที่รวมข้อมูลจากคลัสเตอร์ที่เชื่อมต่อ ด้วย Aggregation Framework คุณสามารถสร้างการรวมกลุ่มที่ทรงพลังได้ แม้จะไม่มีไดรเวอร์ก็ตาม
คลิกปุ่ม สร้างฟังก์ชันใหม่ แล้วป้อน autocompleteTitle เป็นชื่อของฟังก์ชัน
ตอนนี้คลิกแท็บ ตัวแก้ไขฟังก์ชัน
วางโค้ดต่อไปนี้ลงใน Function Editor :
exports = async ( title ) => {
const collection = context . services . get ( "mongodb-atlas" ) . db ( "sample_mflix" ) . collection ( "movies" ) ;
return await collection
. aggregate ( [
{
$search : {
autocomplete : {
path : "title" ,
query : title ,
fuzzy : { maxEdits : 1 } ,
} ,
} ,
} ,
{
$project : {
title : 1 ,
} ,
} ,
{
$limit : 10 ,
} ,
] )
. toArray ( ) ;
} ;คลิกปุ่ม บันทึกร่าง เพื่อบันทึกฟังก์ชัน
เราต้องการใช้ฟังก์ชันเติมข้อความอัตโนมัติในสคีมา GraphQL ของเรา ในการดำเนินการนี้ เราจำเป็นต้องสร้างตัวแก้ไขแบบกำหนดเอง ตัวแก้ไขแบบกำหนดเองช่วยให้เรากำหนดการสืบค้นและการเปลี่ยนแปลงแบบกำหนดเองสำหรับสคีมา GraphQL ของเรา ซึ่งสนับสนุนโดย ฟังก์ชัน ที่สร้างขึ้นบน App Services
ที่แถบด้านซ้ายของ Atlas UI ภายใน Build ให้คลิก GraphQL คลิกแท็บ ตัวแก้ไขแบบกำหนดเอง และคลิกปุ่ม เพิ่มตัวแก้ไขแบบกำหนดเอง สำหรับ ชื่อฟิลด์ GraphQL ให้ป้อน autocompleteTitle สำหรับ ประเภทผู้ปกครอง ให้เลือก Query และสำหรับ ชื่อฟังก์ชัน ให้เลือกฟังก์ชันที่สร้างขึ้นใหม่ autocompleteTitle
ประเภทอินพุตจะกำหนดประเภทข้อมูลที่จะส่งไปยัง GraphQL API เป็นอินพุตสำหรับตัวแก้ไขนี้ ประเภทการส่งคืนจะกำหนดประเภทข้อมูลของสิ่งที่ API จะถูกส่งกลับ เราจะส่งสตริงเป็นอินพุตและคาดว่าจะมีรายการออบเจ็กต์ภาพยนตร์เป็นเอาต์พุต
Scalar Type , String Existing Type (List) , [Movie]คลิกปุ่ม บันทึกแบบร่าง เพื่อบันทึกตัวแก้ไขแบบกำหนดเอง
คลิกปุ่ม ตรวจสอบแบบร่างและปรับใช้ ที่ด้านบนของหน้าและ ปรับใช้ การเปลี่ยนแปลงของคุณ
ขณะนี้การตั้งค่าฟีเจอร์แรกต้องใช้เวลาในการทดสอบแอป ป้อนชื่อภาพยนตร์บางเรื่องลงในแถบค้นหาและดูผลลัพธ์การเติมข้อความอัตโนมัติ
ขณะนี้มีฟังก์ชันเติมข้อความอัตโนมัติแล้ว เราจึงสามารถสร้างฟังก์ชันใหม่สำหรับไฮไลต์และการให้คะแนนได้ ฟังก์ชั่นนี้จะส่งคืนรายการภาพยนตร์ที่ตรงกับคำค้นหาตามชื่อเรื่อง ประเภทที่เลือก และประเทศที่ผลิตภาพยนตร์บางเรื่อง นอกจากนี้ยังส่งคืนไฮไลท์และคะแนนการค้นหาสำหรับผลลัพธ์อีกด้วย ไฮไลท์ประกอบด้วยสตริงย่อยที่ตรงกันทั้งหมดภายในชื่อเรื่องและสตริงการลงจุด ซึ่งมีคำค้นหาที่ตรงกัน สิ่งนี้จะทำให้เราสามารถเน้นข้อความค้นหาที่พบภายใน UI ส่วนหน้าได้
คล้ายกับฟังก์ชันก่อนหน้านี้ เราจะสร้างฟังก์ชันใหม่สำหรับไฮไลท์และการให้คะแนน
ที่แถบด้านซ้ายของ Atlas UI ภายใน Build ให้คลิก Functions คลิกปุ่ม สร้างฟังก์ชันใหม่ และป้อน filteredMovies เป็นชื่อของฟังก์ชัน
ตอนนี้คลิกแท็บ ตัวแก้ไขฟังก์ชัน
วางโค้ดต่อไปนี้ลงใน Function Editor :
exports = async ( input ) => {
const collection = context . services . get ( "mongodb-atlas" ) . db ( "sample_mflix" ) . collection ( "movies" ) ;
const { term , genres , countries } = input ;
const searchShould = [ ] ;
const searchMust = [ ] ;
if ( term . length > 0 ) {
const termStage = {
autocomplete : {
path : "title" ,
query : term ,
fuzzy : { maxEdits : 1.0 } ,
score : {
boost : {
path : "imdb.rating" ,
undefined : 1 ,
} ,
} ,
} ,
} ;
searchMust . push ( termStage ) ;
const plotStage = {
text : {
query : term ,
path : "plot" ,
} ,
} ;
searchShould . push ( plotStage ) ;
}
if ( genres . length > 0 ) {
const genresStage = {
text : {
query : genres ,
path : "genres" ,
} ,
} ;
searchMust . push ( genresStage ) ;
}
if ( countries . length > 0 ) {
const countryStage = {
text : {
query : countries ,
path : "countries" ,
} ,
} ;
searchMust . push ( countryStage ) ;
}
const searchQuery = [
{
$search : {
compound : {
should : searchShould ,
must : searchMust ,
} ,
highlight : { path : [ "title" , "genres" , "countries" , "plot" ] } ,
} ,
} ,
{
$project : {
_id : 1 ,
title : 1 ,
poster : 1 ,
cast : 1 ,
directors : 1 ,
plot : 1 ,
fullplot : 1 ,
year : 1 ,
genres : 1 ,
countries : 1 ,
imdb : 1 ,
score : { $meta : "searchScore" } ,
highlights : { $meta : "searchHighlights" } ,
} ,
} ,
{ $limit : 20 } ,
] ;
return await collection . aggregate ( searchQuery ) . toArray ( ) ;
} ; ที่แถบด้านซ้ายของ Atlas UI ภายใน Build ให้คลิก GraphQL คลิกแท็บ ตัวแก้ไขแบบกำหนดเอง และคลิกปุ่ม เพิ่มตัวแก้ไขแบบกำหนดเอง สำหรับ ชื่อฟิลด์ GraphQL ให้ป้อน filteredMovies สำหรับ ประเภทพาเรนต์ ให้เลือก Query และสำหรับ ชื่อฟังก์ชัน ให้เลือกฟังก์ชันที่สร้างขึ้นใหม่ filteredMovies
เราจะส่งสตริงเป็นอินพุตและคาดว่าจะมีรายการออบเจ็กต์ภาพยนตร์ที่กำหนดเอง ซึ่งมีคะแนนและไฮไลท์สำหรับภาพยนตร์แต่ละเรื่องเป็นเอาต์พุต
Custom Type {
"type" : " object " ,
"title" : " FilteredMoviesInput " ,
"properties" : {
"term" : {
"bsonType" : " string "
},
"genres" : {
"bsonType" : " array " ,
"items" : {
"bsonType" : " string "
}
},
"countries" : {
"bsonType" : " array " ,
"items" : {
"bsonType" : " string "
}
}
}
}Custom Type {
"items" : {
"bsonType" : " object " ,
"properties" : {
"_id" : {
"bsonType" : " objectId "
},
"cast" : {
"bsonType" : " array " ,
"items" : {
"bsonType" : " string "
}
},
"countries" : {
"bsonType" : " array " ,
"items" : {
"bsonType" : " string "
}
},
"directors" : {
"bsonType" : " array " ,
"items" : {
"bsonType" : " string "
}
},
"fullplot" : {
"bsonType" : " string "
},
"genres" : {
"bsonType" : " array " ,
"items" : {
"bsonType" : " string "
}
},
"highlights" : {
"bsonType" : " array " ,
"items" : {
"bsonType" : " object " ,
"properties" : {
"path" : {
"bsonType" : " string "
},
"score" : {
"bsonType" : " double "
},
"texts" : {
"bsonType" : " array " ,
"items" : {
"bsonType" : " object " ,
"properties" : {
"type" : {
"bsonType" : " string "
},
"value" : {
"bsonType" : " string "
}
}
}
}
}
}
},
"imdb" : {
"bsonType" : " object " ,
"properties" : {
"id" : {
"bsonType" : " int "
},
"rating" : {
"bsonType" : " double "
},
"votes" : {
"bsonType" : " int "
}
}
},
"plot" : {
"bsonType" : " string "
},
"poster" : {
"bsonType" : " string "
},
"score" : {
"bsonType" : " double "
},
"title" : {
"bsonType" : " string "
},
"year" : {
"bsonType" : " int "
}
}
},
"title" : " FilteredMovies " ,
"type" : " array "
}คลิกปุ่ม บันทึกแบบร่าง เพื่อบันทึกตัวแก้ไขแบบกำหนดเอง
คลิกปุ่ม ตรวจสอบแบบร่างและปรับใช้ ที่ด้านบนของหน้าและ ปรับใช้ การเปลี่ยนแปลงของคุณ
ขณะนี้การตั้งค่าคุณสมบัติไฮไลท์ต้องใช้เวลาในการทดสอบแอป ป้อนชื่อภาพยนตร์บางเรื่องลงในแถบค้นหาเลื่อนในรายการผลลัพธ์และตรวจสอบว่าคำค้นหาที่ตรงกันคลุมเครือนั้นถูกเน้นไว้ภายในชื่อภาพยนตร์และโครงเรื่องสั้นเมื่อมีการจับคู่ .
แง่มุมเปิดกรณีการใช้งานที่มีประสิทธิภาพมากมายสำหรับการจัดกลุ่มผลการค้นหาของคุณ คุณลักษณะต่อไปนี้แสดงวิธีเรียกใช้คำค้นหา Atlas เพื่อรับผลลัพธ์ที่จัดกลุ่มตามค่าสำหรับประเภทของภาพยนตร์แต่ละเรื่องในคอลเลกชัน ภาพยนตร์ รวมถึงการนับสำหรับแต่ละกลุ่มเหล่านั้น
ในคลัสเตอร์ของคุณบน Atlas ในแท็บ ค้นหา ให้สร้างดัชนีใหม่ด้วยชื่อ facets และ JSON ต่อไปนี้สำหรับคอลเลกชั่น ภาพยนตร์
{
"mappings" : {
"dynamic" : false ,
"fields" : {
"genres" : [
{
"dynamic" : true ,
"type" : " document "
},
{
"type" : " stringFacet "
}
],
"year" : [
{
"dynamic" : true ,
"type" : " document "
},
{
"representation" : " int64 " ,
"type" : " number "
}
]
}
}
} ขณะนี้ เมื่อสร้างดัชนีแล้ว ใน Atlas UI ให้คลิกแท็บ App Services คลิก Application-0 ใน UI ที่แถบด้านซ้ายของ Atlas UI ภายใน Build ให้คลิก Functions คลิกปุ่ม สร้างฟังก์ชันใหม่ แล้วป้อน facetsGenres เป็นชื่อของฟังก์ชัน
ตอนนี้คลิกแท็บ ตัวแก้ไขฟังก์ชัน
วางโค้ดต่อไปนี้ลงใน Function Editor :
exports = async ( arg ) => {
const collection = context . services . get ( "mongodb-atlas" ) . db ( "sample_mflix" ) . collection ( "movies" ) ;
return await collection
. aggregate ( [
{
$searchMeta : {
index : "facets" ,
facet : {
operator : {
range : {
path : "year" ,
gte : 1900 ,
} ,
} ,
facets : {
genresFacet : {
type : "string" ,
path : "genres" ,
} ,
} ,
} ,
} ,
} ,
] )
. toArray ( ) ;
} ; ที่แถบด้านซ้ายของ Atlas UI ภายใน Build ให้คลิก GraphQL คลิกแท็บ ตัวแก้ไขแบบกำหนดเอง และคลิกปุ่ม เพิ่มตัวแก้ไขแบบกำหนดเอง สำหรับ ชื่อฟิลด์ GraphQL ให้ป้อน facetsGenres สำหรับ ประเภทพาเรนต์ ให้เลือก Query และสำหรับ ชื่อฟังก์ชัน ให้เลือกฟังก์ชัน facetsGenres ที่สร้างขึ้นใหม่
เราจะไม่ส่งข้อมูลไปยังคำค้นหานี้ และคาดหวังรายการออบเจ็กต์ที่กำหนดเองซึ่งแสดงถึงแง่มุมสำหรับแต่ละประเภท โดยมีจำนวนภาพยนตร์สำหรับแต่ละประเภท
None Custom Type {
"title" : " GenresMeta " ,
"type" : " array " ,
"items" : {
"bsonType" : " object " ,
"properties" : {
"count" : {
"bsonType" : " double "
},
"facet" : {
"bsonType" : " object " ,
"properties" : {
"genresFacet" : {
"bsonType" : " object " ,
"properties" : {
"buckets" : {
"bsonType" : " array " ,
"items" : {
"bsonType" : " object " ,
"properties" : {
"_id" : {
"bsonType" : " string "
},
"count" : {
"bsonType" : " double "
}
}
}
}
}
}
}
}
}
}
}คลิกปุ่ม บันทึกแบบร่าง เพื่อบันทึกตัวแก้ไขแบบกำหนดเอง
คลิกปุ่ม ตรวจสอบแบบร่างและปรับใช้ ที่ด้านบนของหน้าและ ปรับใช้ การเปลี่ยนแปลงของคุณ
ขณะนี้มีการตั้งค่าแง่มุมให้ทดสอบแอปและเปิดเมนูแบบเลื่อนลงสำหรับ ประเภท โปรดสังเกตว่าขณะนี้มีตัวเลขนอกเหนือจากแต่ละประเภทที่แสดงถึงจำนวนภาพยนตร์ทั้งหมดสำหรับประเภทนั้น
MongoDB App Services Hosting ช่วยให้คุณสามารถโฮสต์ จัดการ และให้บริการไฟล์สื่อและเอกสารแบบคงที่ของแอปพลิเคชันของคุณ คุณสามารถใช้โฮสติ้งเพื่อจัดเก็บเนื้อหาแต่ละส่วนหรืออัปโหลดและให้บริการแอปพลิเคชันไคลเอนต์ทั้งหมดของคุณ
แอปส่วนหน้าของเรามีการเรียกที่จำเป็นทั้งหมดไปยัง GraphQL API บน App Services เราสามารถส่งออกแอปส่วนหน้าทั้งหมดเป็นไซต์คงที่และโฮสต์บน MongoDB App Services
สำหรับสิ่งนี้ คุณจะต้องรันโค้ดต่อไปนี้ในโฟลเดอร์รูทของโปรเจ็กต์ ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งการอ้างอิงด้วย
npm installจากนั้นสร้างและส่งออกไซต์ด้วยสคริปต์ npm โดยใช้ nextjs
npm run build && npm run export สิ่งนี้จะสร้างโฟลเดอร์ที่เรียก out ในโฟลเดอร์รูทของโปรเจ็กต์
บน MongoDB Atlas UI บนแท็บ บริการแอพ ที่แถบด้านซ้ายของ Atlas UI ภายใน Manage ให้คลิก โฮสติ้ง คลิกปุ่ม เปิดใช้งานโฮสติ้ง ลากและวางเนื้อหาของโฟลเดอร์ out ในแท็บ โฮสติ้ง เพื่ออัปโหลดไฟล์ทั้งหมด
คลิกปุ่ม ตรวจสอบแบบร่างและปรับใช้ ที่ด้านบนของหน้าและ ปรับใช้ การเปลี่ยนแปลงของคุณ
คลิกแท็บ การตั้งค่า คัดลอก โดเมนบริการแอป แล้ววางลงในเบราว์เซอร์ที่คุณเลือกแล้วกด Enter เพื่อดูไซต์ -
