จะใส่แอป Angular ในโซลูชัน ASP.NET Web API ได้ที่ไหน

ฉันเริ่มแอพกรีนฟิลด์และฉันต้องการใช้ ASP.NET (4.6) และ Angular 2 สำหรับแบ็กเอนด์ฉันได้สร้างโครงการใน Visual Studio และตอนนี้ฉันสงสัยว่าจะวางแอพ Angular ไว้ที่ไหน ฉันต้องการใช้ npm และ node-tools สำหรับ front-end แต่ท้ายที่สุดมันจะถูกโฮสต์ในอินสแตนซ์ Azure App Service เดียวกันกับแอป Angular ที่domain.com/และ api ภายใต้domain.com/api/หรือเช่นนั้น

ฉันจะแยกแอพต่าง ๆ ใน Visual Studio ได้อย่างไร? แอพเชิงมุมควรอยู่ในโครงการของตัวเองหรือไม่ ฉันควรมีแอปพลิเคชัน Angular ในโครงการเดียวกันกับ API หรือไม่ แม้ว่าฉันไม่ต้องการใช้ nuget และเครื่องมือ VS อื่น ๆ (สำหรับส่วนหน้า VS จะเป็นตัวแก้ไขรหัสที่ได้รับเกียรติมากขึ้นหรือน้อยลง) ฉันไม่พบวิธีปฏิบัติที่ดีที่สุดสำหรับชุดค่าผสมนี้

คุณมีสองตัวเลือก

สร้าง mywebsite.api แยกต่างหากและโครงการ mywebsite.app ในโซลูชันของคุณ

ข้อดี

• การแยกข้อกังวลอย่างเหมาะสม
• คุณสามารถปรับใช้การอัปเดตกับ api และส่วนหน้าได้อย่างอิสระ
• สถาปัตยกรรมของไซต์สามารถเปลี่ยนแปลงได้อย่างอิสระ (เช่นคุณสามารถอัปเดต api ของคุณให้ทำงานบน asp.net 5 โดยไม่กระทบต่อเว็บไซต์)
• ทำความสะอาด

สร้างโครงการเดียวที่มีทั้งแอปไคลเอ็นต์และ API ในหนึ่งโครงการ

ข้อดี

• ปรับใช้การปรับปรุงได้ง่ายขึ้น
• ไม่จำเป็นต้องกำหนดค่าให้ทำงานกับ CORS

วิธีการโฮสต์และพัฒนาแอปพลิเคชันในพื้นที่

โซลูชันที่มีประสิทธิภาพสำหรับการพัฒนาคือการใช้เซิร์ฟเวอร์ lite เพื่อเรียกใช้แอปพลิเคชันไคลเอนต์ (Angular 2) และ IIS / Casini เพื่อโฮสต์รหัสเว็บ API ของคุณ ตัวอย่างที่ดีเกี่ยวกับวิธีการใช้งานนั้นมีให้ในบทช่วยสอนการเริ่มต้นอย่างรวดเร็ว Angular 2 (เชื่อมโยงกับด้านล่าง) กระบวนการพัฒนาของฉันคือการเรียกใช้ api ผ่าน Visual Studio และทำงานกับการเข้ารหัสไซต์ลูกค้าโดยใช้ Visual Studio Code และ lite-server (Atom เป็นอีกตัวเลือกที่ดี)

จากเอกสารเซิร์ฟเวอร์ lite การพัฒนาแบบเบาเพียงโหนดเซิร์ฟเวอร์ที่ให้บริการเว็บแอปเปิดในเบราว์เซอร์รีเฟรชเมื่อ HTML หรือจาวาสคริปต์เปลี่ยนการแทรกการเปลี่ยนแปลง CSS โดยใช้ซ็อกเก็ตและมีหน้าสำรองเมื่อไม่พบเส้นทาง

https://code.visualstudio.com/

https://angular.io/docs/js/latest/quickstart.html

https://www.youtube.com/watch?v=e_FVeYWUF3s

https://github.com/johnpapa/lite-server

มุมมองของฉัน

ไม่มีปัญหาในการใช้ Nuget / NPM ทั้งในโซลูชันเดียวกันและสิ่งนี้ไม่ควรแจ้งให้คุณเลือกโครงสร้างโครงการ

ฉันใช้วิธีการโปรเจคเดียวเพื่อสาธิต / พิสูจน์การใช้งานแนวคิด สำหรับการเปิดตัวการผลิตฉันจะแยกข้อกังวลของฉันอย่างถูกต้องและมีโครงการ API เฉพาะ

ฉันได้พบโครงการ seeder นี้https://github.com/damienbod/AngularWebpackVisualStudio/ซึ่งช่วยให้คุณพัฒนาและโฮสต์ไคลเอ็นต์และเซิร์ฟเวอร์ในโครงการ Visual Studio (2017) เดียว

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

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

IMHO หากคุณต้องการใช้ประโยชน์จากเซสชันใน IIS และ / หรือซ่อนกระบวนการตรวจสอบสิทธิ์ภายใน API ให้เขียนเชิงมุมใน Visual Studio เช่นกัน VS2015 มีการรวมที่ดี (Intellisense) กับเชิงมุมถ้าคุณติดตั้งส่วนขยายการพัฒนาเว็บ ฉันต้องบอกว่าวิธีนี้จะกะทัดรัดและพกพาได้มากกว่า

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

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

ใน VS 2015 คุณมีตัวเลือกให้เริ่มโครงการมากกว่าหนึ่งโครงการในโซลูชันของคุณเมื่อทำการดีบั๊กตราบใดที่คุณตั้งค่า URL โครงการที่แตกต่างกันสำหรับแต่ละโครงการ

ตัวอย่างเช่นคุณจะต้องตั้งค่าแอปพลิเคชัน Angular ของคุณให้ทำงานhttp://localhost:55000/และโครงการ API สามารถตั้งค่าให้ทำงานhttp://localhost:55000/apiได้ คุณตั้งค่าคุณสมบัติ URL โครงการในกล่องโต้ตอบคุณสมบัติของโครงการบนแท็บเว็บ

จากนั้นเมื่อต้องการตั้งค่าหลายโครงการเริ่มต้นในกล่องโต้ตอบคุณสมบัติโซลูชันภายใต้คุณสมบัติทั่วไปให้เลือกโหนดโครงการเริ่มต้น ไปทางขวาที่คุณจะได้พบกับตัวเลือกสำหรับการและSingle startup project Multiple startup projectsเลือกปุ่มตัวเลือกโครงการเริ่มต้นหลายรายการ จากนั้นเลือกการกระทำที่เหมาะสมถัดจากโครงการแองกูลาร์ของคุณ (เริ่มโดยไม่มีการดีบักเนื่องจากเป็นแองกูลาร์และคุณน่าจะทำการดีบั๊กในเบราว์เซอร์) จากนั้นถัดจากโครงการ API ของคุณเลือกเริ่ม

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