eShopOnWeb

แอปพลิเคชันอ้างอิง Microsoft eShopOnWeb ASP.NET Core

แอปพลิเคชันตัวอย่าง eShop ได้รับการอัปเดตและย้ายไปยัง https://github.com/dotnet/eShop การพัฒนาเชิงรุกจะดำเนินต่อไปที่นั่น นอกจากนี้เรายังแนะนำคำแนะนำเกี่ยวกับรูปแบบเว็บแอปที่เชื่อถือได้สำหรับการสร้างเว็บแอปด้วยรูปแบบแอประดับองค์กร

ตัวอย่างแอปพลิเคชันอ้างอิง ASP.NET Core ที่ขับเคลื่อนโดย Microsoft สาธิตสถาปัตยกรรมแอปพลิเคชันแบบกระบวนการเดียว (เสาหิน) และโมเดลการปรับใช้ หากคุณยังใหม่ต่อการพัฒนา .NET โปรดอ่านคู่มือการเริ่มต้นใช้งานสำหรับผู้เริ่มต้น

รายการคำถามที่พบบ่อยเกี่ยวกับพื้นที่เก็บข้อมูลนี้สามารถพบได้ที่นี่

วิดีโอภาพรวม

Steve "ardalis" Smith บันทึกสตรีมสดโดยให้ภาพรวมของแอปอ้างอิง eShopOnWeb ในเดือนตุลาคม 2020

อีบุ๊ค

แอปพลิเคชันอ้างอิงนี้มีไว้เพื่อรองรับ ebook ดาวน์โหลด .PDF ฟรี: การสร้างสถาปัตยกรรมแอปพลิเคชันเว็บสมัยใหม่ด้วย ASP.NET Core และ Azure อัปเดตเป็น ASP.NET Core 8.0 มีให้ใช้งานในรูปแบบ ePub/mobi ด้วย

คุณยังสามารถอ่านหนังสือในหน้าออนไลน์ได้ที่เอกสาร .NET ที่นี่: https://docs.microsoft.com/dotnet/architecture/modern-web-apps-azure/

ตัวอย่าง eShopOnWeb เกี่ยวข้องกับแอปพลิเคชันตัวอย่าง eShopOnContainers ซึ่งในกรณีนี้จะมุ่งเน้นไปที่สถาปัตยกรรมแอปพลิเคชันแบบไมโครเซอร์วิส/คอนเทนเนอร์ อย่างไรก็ตาม eShopOnWeb นั้นง่ายกว่ามากในแง่ของฟังก์ชันการทำงานในปัจจุบัน และมุ่งเน้นไปที่การพัฒนาแอปพลิเคชันเว็บแบบดั้งเดิมด้วยการปรับใช้เพียงครั้งเดียว

เป้าหมายสำหรับตัวอย่างนี้คือเพื่อสาธิตหลักการและรูปแบบบางอย่างที่อธิบายไว้ใน eBook มันไม่ได้ถูกกำหนดให้เป็นแอปพลิเคชันอ้างอิงอีคอมเมิร์ซ และด้วยเหตุนี้จึงไม่ได้ใช้คุณสมบัติมากมายที่ชัดเจนและ/หรือจำเป็นต่อแอปพลิเคชันอีคอมเมิร์ซจริง

รุ่นต่างๆ

สาขา main กำลังใช้งาน ASP.NET Core 8.0 อยู่ในขณะนี้

เวอร์ชันเก่าจะถูกแท็ก

หัวข้อ (eBook TOC)

• การแนะนำ
• ลักษณะของแอปพลิเคชั่นเว็บสมัยใหม่
• การเลือกระหว่างเว็บแอปแบบดั้งเดิมและสปา
• หลักการทางสถาปัตยกรรม
• สถาปัตยกรรมแอปพลิเคชันเว็บทั่วไป
• เทคโนโลยีฝั่งไคลเอ็นต์ทั่วไป
• การพัฒนาแอป ASP.NET Core MVC
• การทำงานกับข้อมูลใน ASP.NET Core Apps
• การทดสอบแอป ASP.NET Core MVC
• กระบวนการพัฒนาสำหรับแอป ASP.NET Core ที่โฮสต์โดย Azure
• คำแนะนำโฮสติ้ง Azure สำหรับ ASP.NET Core Web Apps

เรียกใช้ตัวอย่างโดยใช้เทมเพลต Azd

หน้าแรกของร้านค้าควรมีลักษณะดังนี้:

Azure Developer CLI ( azd ) เป็นเครื่องมืออินเทอร์เฟซบรรทัดคำสั่ง (CLI) ที่เน้นนักพัฒนาเป็นศูนย์กลางสำหรับการสร้างแอปพลิเคชัน Azure

คุณต้องติดตั้งก่อนใช้งานและปรับใช้กับ Azure Developer CLI

หน้าต่าง

powershell - ex AllSigned - c " Invoke-RestMethod 'https://aka.ms/install-azd.ps1' | Invoke-Expression "

ลินุกซ์/แมคโอเอส

 curl -fsSL https://aka.ms/install-azd.sh | bash

และคุณยังสามารถติดตั้งด้วยตัวจัดการแพ็คเกจ เช่น winget, choco และ brew สำหรับรายละเอียดเพิ่มเติม คุณสามารถปฏิบัติตามเอกสารประกอบ: https://aka.ms/azure-dev/install

หลังจากเข้าสู่ระบบด้วยคำสั่งต่อไปนี้ คุณจะสามารถใช้ azd cli เพื่อจัดเตรียมและปรับใช้แอปพลิเคชันได้อย่างรวดเร็ว

 azd auth login

จากนั้น รันคำสั่ง azd init เพื่อเริ่มต้นสภาพแวดล้อม

 azd init -t dotnet-architecture/eShopOnWeb 

เรียกใช้ azd up เพื่อจัดเตรียมทรัพยากรทั้งหมดให้กับ Azure และปรับใช้โค้ดกับทรัพยากรเหล่านั้น

 azd up 

ตามพร้อมท์ ให้ป้อน env name และเลือก subscription และ location สิ่งเหล่านี้คือพารามิเตอร์ที่จำเป็นเมื่อคุณสร้างทรัพยากร รอสักครู่เพื่อให้การปรับใช้ทรัพยากรเสร็จสิ้น คลิกจุดสิ้นสุดเว็บ แล้วคุณจะเห็นหน้าแรก

หมายเหตุ:

1. เมื่อคำนึงถึงความปลอดภัย เราจะจัดเก็บข้อมูลที่เกี่ยวข้อง (id, รหัสผ่าน) ไว้ใน Azure Key Vault เมื่อเราสร้างฐานข้อมูล และรับมาจาก Key Vault เมื่อเราใช้งาน สิ่งนี้แตกต่างจากการปรับใช้แอปพลิเคชันภายในเครื่องโดยตรง
2. ชื่อกลุ่มทรัพยากรที่สร้างในพอร์ทัล Azure จะเป็น rg-{env name}

คุณยังสามารถเรียกใช้ตัวอย่างได้โดยตรงในเครื่อง (ดูด้านล่าง)

เรียกใช้ตัวอย่างภายในเครื่อง

ฟังก์ชันการทำงานส่วนใหญ่ของไซต์ใช้งานได้กับเว็บแอปพลิเคชันที่ทำงานอยู่เท่านั้น อย่างไรก็ตาม หน้าผู้ดูแลระบบของเว็บไซต์อาศัย Blazor WebAssembly ที่ทำงานอยู่ในเบราว์เซอร์ และจะต้องสื่อสารกับเซิร์ฟเวอร์โดยใช้เว็บแอปพลิเคชัน PublicApi ของเว็บไซต์ คุณจะต้องดำเนินโครงการนี้ด้วย คุณสามารถกำหนดค่า Visual Studio เพื่อเริ่มหลายโครงการ หรือเพียงไปที่โฟลเดอร์ PublicApi ในหน้าต่างเทอร์มินัลแล้วเรียกใช้ dotnet run จากที่นั่น หลังจากนั้นจากโฟลเดอร์ Web คุณควรรัน dotnet run --launch-profile Web ตอนนี้คุณควรจะสามารถเรียกดู https://localhost:5001/ ได้ ส่วนผู้ดูแลระบบใน Blazor สามารถเข้าถึงได้โดย https://localhost:5001/admin

โปรดทราบว่าหากคุณใช้แนวทางนี้ คุณจะต้องหยุดแอปพลิเคชันด้วยตนเองเพื่อสร้างโซลูชัน (ไม่เช่นนั้นคุณจะได้รับข้อผิดพลาดในการล็อกไฟล์)

หลังจากการโคลนหรือดาวน์โหลดตัวอย่าง คุณต้องตั้งค่าฐานข้อมูลของคุณ หากต้องการใช้ตัวอย่างกับฐานข้อมูลถาวร คุณจะต้องเรียกใช้การย้ายข้อมูล Entity Framework Core ก่อนจึงจะสามารถเรียกใช้แอปได้

คุณยังสามารถเรียกใช้ตัวอย่างใน Docker ได้อีกด้วย (ดูด้านล่าง)

การกำหนดค่าตัวอย่างเพื่อใช้ SQL Server

1. ตามค่าเริ่มต้น โครงการจะใช้ฐานข้อมูลจริง หากคุณต้องการฐานข้อมูลในหน่วยความจำ คุณสามารถเพิ่มไฟล์ appsettings.json ในโฟลเดอร์ Web ได้

   {
      "UseOnlyInMemoryDatabase" : true
   }

2. ตรวจสอบให้แน่ใจว่าสตริงการเชื่อมต่อของคุณใน appsettings.json ชี้ไปที่อินสแตนซ์ SQL Server ในเครื่อง

3. ตรวจสอบให้แน่ใจว่าได้ติดตั้งเครื่องมือ EF แล้ว คุณสามารถขอความช่วยเหลือได้ที่นี่

    dotnet tool update --global dotnet-ef
   

4. เปิดพรอมต์คำสั่งในโฟลเดอร์เว็บและดำเนินการคำสั่งต่อไปนี้:

    dotnet restore
   dotnet tool restore
   dotnet ef database update -c catalogcontext -p ../Infrastructure/Infrastructure.csproj -s Web.csproj
   dotnet ef database update -c appidentitydbcontext -p ../Infrastructure/Infrastructure.csproj -s Web.csproj
   

   คำสั่งเหล่านี้จะสร้างฐานข้อมูลสองฐานข้อมูลแยกกัน ฐานข้อมูลหนึ่งสำหรับข้อมูลแคตตาล็อกของร้านค้าและข้อมูลรถเข็นช็อปปิ้ง และอีกฐานข้อมูลหนึ่งสำหรับข้อมูลประจำตัวผู้ใช้และข้อมูลประจำตัวของแอป

5. เรียกใช้แอปพลิเคชัน

   ครั้งแรกที่คุณเรียกใช้แอปพลิเคชัน แอปพลิเคชันจะทำการ seed ฐานข้อมูลทั้งสองพร้อมข้อมูลในลักษณะที่คุณควรเห็นผลิตภัณฑ์ในร้านค้า และคุณควรจะสามารถเข้าสู่ระบบโดยใช้บัญชี [email protected]

   หมายเหตุ: หากคุณต้องการสร้างการย้ายข้อมูล คุณสามารถใช้คำสั่งเหล่านี้ได้

    -- create migration (from Web folder CLI)
   dotnet ef migrations add InitialModel --context catalogcontext -p ../Infrastructure/Infrastructure.csproj -s Web.csproj -o Data/Migrations
   
   dotnet ef migrations add InitialIdentityModel --context appidentitydbcontext -p ../Infrastructure/Infrastructure.csproj -s Web.csproj -o Identity/Migrations
   

เรียกใช้ตัวอย่างในคอนเทนเนอร์ dev

โปรเจ็กต์นี้มีโฟลเดอร์ .devcontainer ที่มีการกำหนดค่าคอนเทนเนอร์ dev ซึ่งช่วยให้คุณใช้คอนเทนเนอร์เป็นสภาพแวดล้อม dev ที่มีคุณลักษณะครบถ้วนได้

คุณสามารถใช้คอนเทนเนอร์ dev เพื่อสร้างและรันแอปได้โดยไม่จำเป็นต้องติดตั้งเครื่องมือใดๆ ในเครื่อง! คุณสามารถทำงานใน GitHub Codespaces หรือส่วนขยาย VS Code Dev Containers

เรียนรู้เพิ่มเติมเกี่ยวกับการใช้คอนเทนเนอร์ dev ใน readme

เรียกใช้ตัวอย่างโดยใช้ Docker

คุณสามารถเรียกใช้ตัวอย่างเว็บได้โดยการรันคำสั่งเหล่านี้จากโฟลเดอร์รูท (ซึ่งมีไฟล์ .sln อยู่):

 docker-compose build
docker-compose up

คุณควรจะสามารถส่งคำขอไปยัง localhost:5106 สำหรับโครงการเว็บ และ localhost:5200 สำหรับโครงการ Public API เมื่อคำสั่งเหล่านี้เสร็จสิ้น หากคุณมีปัญหาใดๆ โดยเฉพาะอย่างยิ่งเกี่ยวกับการเข้าสู่ระบบ ให้ลองจากผู้เยี่ยมชมใหม่หรืออินสแตนซ์ของเบราว์เซอร์ที่ไม่ระบุตัวตน

คุณยังสามารถเรียกใช้แอปพลิเคชันได้โดยใช้คำแนะนำที่อยู่ในไฟล์ Dockerfile ในรูทของแต่ละโปรเจ็กต์ อีกครั้ง ให้รันคำสั่งเหล่านี้จากรากของโซลูชัน (ซึ่งมีไฟล์ .sln อยู่)

ส่วนขยายชุมชน

เราได้รับการสนับสนุนที่ดีเยี่ยมจากชุมชน และแม้ว่าสิ่งเหล่านี้จะไม่ได้รับการดูแลโดย Microsoft แต่เราก็ยังต้องการเน้นย้ำถึงสิ่งเหล่านั้น

eShopOnWeb VB.NET โดย Mohammad Hamdy Ghanem

FShopOnWeb การแข่งขัน F# กับ eShopOnWeb โดย Sean G. Wright และ Kyle McMaster