कोणीय 2 और वसंत बूट। फ्रंट एंड कैसे सेवा करें?

Question

मेरे पास Spring Boot बैक-एंड और Angular2 फ्रंट-एंड के रूप में है। मैं दोनों को अलग से विकसित करना चाहता हूं और Heroku पर तैनात करना चाहता हूं।

वे किसी भी आम निर्भरता नहीं होना चाहिए और अलग Git-रेपोस में होना चाहिए।

मैं समझता हूँ, वहाँ लागू करने के लिए दो मुख्य तरीके हैं:

1. रन npm build और Spring आवेदन तो पिछले एक स्थिर सामग्री

2. रन के रूप में यह संभाल लेंगे की resource फ़ोल्डर में dist फ़ोल्डर की प्रतिलिपि सर्वर Angular ऐप की सेवा के लिए सर्वर जो Spring ऐप (सीओआरएस समस्या यहां दिखाई देता है) के साथ संवाद करेगा, इसलिए

पर दो सर्वर हैं

मुझे लगता है कि पहला तरीका थोड़ा "गंदे" है क्योंकि मुझे नहीं लगता कि एक परियोजना से दूसरी परियोजना में कॉपी फ़ोल्डर कोई अच्छा है।

और दूसरा तरीका ओवरकिल है क्योंकि मेरे पास दो सर्वर हैं (Tomcat और Node.js, उदाहरण के लिए)। मुझे Angular ऐप के साथ सर्वर क्यों होना चाहिए यदि मैं Spring के अंदर बस रख सकता हूं?

वहाँ ऊपर उल्लिखित बनाने के लिए किसी भी अधिक सही तरीका है?

धन्यवाद।

Answer 1

मेरे संगठन में एक ब्लॉग पोस्ट है, हम वसंत बूट और कोणीय क्षुधा की एक बहुत कुछ है। जब दो सर्वर अनावश्यक होते हैं, तो स्प्रिंग बूट किसी भी समर्थित यूआरएल (जैसे "http:" या "file:") से स्थिर सामग्री को पूरा कर सकता है। सीधे शब्दों में स्टार्टअप पर अपने अनुप्रयोग को यह तर्क पारित:

--spring.resources.static-locations=<url> 

स्प्रिंग बूट भी निम्न वेब MVC विन्यास को शामिल करके कोणीय एकल पृष्ठ एप्लिकेशन मार्ग समर्थन कर सकते हैं। यह सुनिश्चित करता है कि उपयोगकर्ता ब्राउज़र में पृष्ठ को रीफ्रेश करता है, भले ही स्प्रिंग बूट अन्य कोणीय मार्गों के लिए index.html की सामग्री को पूरा करेगा।

public class SinglePageAppWebMvcConfigurer extends WebMvcConfigurerAdapter 
{ 
    @Autowired 
    private ResourceProperties resourceProperties; 

    private String apiPath = "/api"; 

    public SinglePageAppWebMvcConfigurer() 
    { 
    } 

    public SinglePageAppWebMvcConfigurer(String apiPath) 
    { 
     this.apiPath = apiPath; 
    } 

    protected String getApiPath() 
    { 
     return apiPath; 
    } 

    @Override 
    public void addResourceHandlers(ResourceHandlerRegistry registry) 
    { 
     registry.addResourceHandler("/**") 
      .addResourceLocations(resourceProperties.getStaticLocations()) 
      .setCachePeriod(resourceProperties.getCachePeriod()).resourceChain(true) 
      .addResolver(new SinglePageAppResourceResolver()); 
    } 

    private class SinglePageAppResourceResolver extends PathResourceResolver 
    { 
     @Override 
     protected Resource getResource(String resourcePath, Resource location) throws IOException 
     { 
      Resource resource = location.createRelative(resourcePath); 
      if (resource.exists() && resource.isReadable()) { 
       return resource; 
      } else if (getApiPath() != null && ("/" + resourcePath).startsWith(getApiPath())) { 
       return null; 
      } else { 
       LoggerFactory.getLogger(getClass()).info("Routing /" + resourcePath + " to /index.html"); 
       resource = location.createRelative("index.html"); 
       if (resource.exists() && resource.isReadable()) { 
        return resource; 
       } else { 
        return null; 
       } 
      } 
     } 
    } 
} 

Answer 2

अब तक मैंने एक गिट भंडार का उपयोग करके कोणीय और वसंत-बूट के साथ अनुप्रयोग बनाए हैं, लेकिन दो अलग-अलग मैवेन प्रोजेक्ट्स, बैकएंड के लिए एक, फ्रंटेंड के लिए एक।

मैवेन के साथ मैंने एक एम्बेडेड टोमकैट के साथ एक वसा जार बनाया और इसे अमेज़ॅन ईसी 2 पर तैनात किया।

मैं भी Heroku साथ प्रयोग किया और आप के लिए यकीन है कि वहाँ एक ही वसा जार को तैनात कर सकते हैं।

अगली परियोजना के लिए मैं एक और दृष्टिकोण लेता हूं और सभी स्थिर संसाधनों जैसे एचटीएमएल, जावास्क्रिप्ट इत्यादि को अमेज़ॅन एस 3 और केवल वसंत-बूट ऐप को हीोकू जैसे प्रदाता को तैनात करता हूं।

दृश्यपटल तैनाती इस तरह से लगता है बहुत तेजी से सस्ता आसान और किया जाना है।

वहाँ भी के बारे में Using AWS S3 to Store Static Assets and File Uploads

Answer 3

विकल्प 1 एक सर्वर प्रक्रिया की मेजबानी बाकी एपीआई और अन्य सर्वर प्रक्रिया की मेजबानी कोणीय यूआई

यह विकल्प MicroServices में अनुशंसित विकल्प आधारित वास्तुकला, जहां व्यक्तिगत API (या छोटे से संबंधित है एपीआई का समूह) अलग सर्वर प्रक्रियाओं में उन्हें होस्ट करके अलग-अलग चलाया जाता है और स्केल किया जाता है। ऐसे परिदृश्यों में, यदि एंगुलर यूआई को आरईएसटी एपीआई के साथ भी बंडल किया गया है, तो इसका मतलब यह होगा कि कोणीय यूआई में प्रत्येक बग-फिक्स या एन्हांसमेंट के लिए आपकी सेवाओं के पुनर्निर्माण और पुनर्निर्माण की आवश्यकता होगी। और जब हम ऐसा करना शुरू करते हैं, तो यह माइक्रोस्कोर्सेस आधारित वास्तुकला के उद्देश्य को हरा देगा।

इसलिए, इस तरह के एक आर्किटेक्चर में एक या अधिक सर्वर उदाहरण केवल कोणीय यूआई होस्ट करेंगे। एंगुलर यूआई कुछ सेवा खोज तंत्र का उपयोग करके एपीआई गेटवे के माध्यम से अलग-अलग एपीआई को कॉल करेगा। हालांकि, माइक्रोसर्विसेज आधारित आर्किटेक्चर छोटा नहीं है - यह बहुत सारे चलने वाले हिस्सों के साथ जटिल है। बड़ी परियोजनाओं के लिए जटिलता के इस स्तर को उचित ठहराया जा सकता है।

विकल्प 2 एक सर्वर प्रक्रिया दोनों बाकी एपीआई और कोणीय यूआई

यह विकल्प मध्यम आकार परियोजनाओं जहां उपयोगकर्ता आधार कुछ सौ उपयोगकर्ताओं है करने के लिए छोटे के लिए अनुशंसित विकल्प है होस्टिंग।

ऐसी परियोजनाओं में, एक एकल भंडार बनाएं जहां एक मेवेन प्रोजेक्ट में दो उप-मॉड्यूल होंगे - एक आरईएसटी एपीआई के लिए और दूसरा कोणीय यूआई के लिए।

यूआई भाग बनाने के लिए मेवेन प्लगइन "फ्रंटेंड-मेवेन-प्लगइन" का उपयोग करें। यह स्वचालित रूप से निर्दिष्ट नोडजे संस्करण डाउनलोड करेगा और कोणीय परियोजना बनाने के लिए उपयुक्त एनपीएम कमांड का आह्वान करेगा। अंत में, मैवेन तत्व का उपयोग संसाधन फ़ोल्डर के तहत वसंत बूट स्थिर फ़ोल्डर में कोणीय dist फ़ोल्डर की प्रतिलिपि बनाएँ। (.gitignore फ़ाइल में स्थिर फ़ोल्डर को बाहर कर दें ताकि कोणीय वितरण फ़ाइलों को आरईएसटी एपीआई के साथ स्रोत नियंत्रण में चेक नहीं किया जा सके)।

अब, जैसा कि जावा बिल्ड शुरू होगा, यह स्वचालित रूप से वसा जार में स्थिर फ़ोल्डर शामिल करेगा जो अब एपीआई और कोणीय यूआई दोनों की सेवा करेगा।