typescript - आप कोणीय एप्लिकेशन को कैसे तैनात करते हैं?




angular production (12)

उत्पादन के चरण में पहुंचने के बाद आप कोणीय एप्लिकेशन को कैसे तैनात करते हैं?

सभी गाइड जो मैंने अब तक (यहां तक ​​कि angular.io पर) angular.io हैं, वे परिवर्तन को प्रतिबिंबित करने के लिए सेवारत और ब्राउज़र सिंक के लिए एक लाइट-सर्वर पर गिन रहे हैं - लेकिन जब आप विकास के साथ समाप्त हो जाते हैं, तो आप ऐप को कैसे प्रकाशित कर सकते हैं?

क्या मैं सभी संकलित .js फाइलों को index.html पेज पर आयात करता हूं या क्या मैं उन्हें gulp का उपयोग करके छोटा करता हूं? क्या वे काम करेंगे? क्या मुझे उत्पादन संस्करण में SystemJS की आवश्यकता है?


2017 के रूप में सबसे अच्छा तरीका है अपने कोणीय परियोजना के लिए angular-cli (v1.4.4) का उपयोग करना।

ng build --prod --env=prod --aot --build-optimizer --output-hashing none

आपको इसके बारे में स्पष्ट रूप से जोड़ने की जरूरत नहीं है - जैसे कि डिफ़ॉल्ट रूप से --prod के साथ चालू हो जाता है। और --output-hashing का उपयोग कैश के फटने के बारे में आपकी व्यक्तिगत पसंद के अनुसार है।

आप स्पष्ट रूप से जोड़कर CDN समर्थन जोड़ सकते हैं:

 --deploy-url "https://<your-cdn-key>.cloudfront.net/"

यदि आप होस्टिंग के लिए सीडीएन का उपयोग करने की योजना बना रहे हैं जो काफी तेज है।


Azure में कोणीय 2 को तैनात करना आसान है

  1. एनजी बिल्ड -प्रोड चलाएं , जो इंडेक्स.एचआई सहित कुछ फाइलों के अंदर बंडल किए गए सब कुछ के साथ एक डिस्टर्ब फोल्डर उत्पन्न करेगा।

  2. इसके अंदर एक संसाधन समूह और एक वेब ऐप बनाएं।

  3. एफ़टीपी का उपयोग करके अपने डिस्ट फ़ोल्डर फ़ाइलों को रखें। Azure में यह एप्लिकेशन चलाने के लिए index.html की तलाश करेगा।

बस। आपका ऐप चल रहा है!


आप वास्तव में एक में दो सवालों को छू रहे हैं। पहला यह है कि अपने आवेदन की मेजबानी कैसे करें। और जैसा कि @toskv ने उत्तर देने के लिए अपने वास्तव में बहुत व्यापक प्रश्न का उल्लेख किया और कई अलग-अलग चीजों पर निर्भर करता है। दूसरा एक और अधिक विशिष्ट है - आप आवेदन के परिनियोजन संस्करण को कैसे तैयार करते हैं। आपके पास यहां कई विकल्प हैं:

  1. जैसा है वैसा ही तैनात रहें। बस इतना ही - कोई भी मिनिमाइजेशन, कॉन्टेक्नेशन, नेम मैनबलिंग आदि अपने सभी ts प्रोजेक्ट को ट्रांसपाइल करें, अपने सभी रिजल्ट js / css / को कॉपी करें ... होस्टिंग सर्वर को सोर्स + डिपेंडेंसी और आपका जाना अच्छा है।
  2. विशेष बंडलिंग टूल्स का उपयोग कर तैनात करें। जैसे webpack या systemjs बिल्डर। वे उन सभी संभावनाओं के साथ आते हैं जिनकी # 1 में कमी है। आप अपने सभी ऐप कोड को सिर्फ js / css / ... फाइलों में पैक कर सकते हैं जिन्हें आप अपने html में संदर्भित करते हैं। Systemjs buider यहां तक ​​कि आपको अपने तैनाती पैकेज के हिस्से के रूप में systemjs को शामिल करने की आवश्यकता से छुटकारा पाने की अनुमति देता है।

हां, आपको अपने पैकेज के हिस्से के रूप में अन्य बाहरी पुस्तकालयों के सिस्टमज और बंच को तैनात करने की आवश्यकता होगी। और हाँ आप उन्हें अपने html पेज से रेफरेंस के लिए सिर्फ दो js फाइलों में ही बंडल कर पाएंगे। आपको अपनी सभी संकलित js फ़ाइलों को पृष्ठ से संदर्भित करने की आवश्यकता नहीं है, हालांकि - एक मॉड्यूल लोडर के रूप में सिस्टमजेस इस बात का ध्यान रखेगा।

मुझे पता है कि यह मैला लगता है - आपको यहां # 2 के साथ शुरू करने में मदद करने के लिए दो बहुत अच्छे नमूना अनुप्रयोग हैं:

SystemJS बिल्डर: कोणीय 2 बीज

वेबपैक: कोणीय 2 वेबपैक स्टार्टर

देखो कि वे इसे कैसे करते हैं - और उम्मीद है कि यह आपको आपके द्वारा किए जाने वाले ऐप्स को बंडल करने के तरीके को खोजने में मदद करेगा।


आपको समय-समय पर संकलक के साथ संकलित करके सबसे छोटा और तेज लोडिंग उत्पादन बंडल मिलता है, और रोल-अप के साथ ट्री-शेक / मिनिफ़ाई करें जैसा कि कोणीय एओटी कुकबुक में दिखाया गया है: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

यह पिछले उत्तरों में बताए अनुसार कोणीय-सीएलआई के साथ भी उपलब्ध है, लेकिन अगर आपने सीएलआई का उपयोग करके अपना ऐप नहीं बनाया है तो आपको कुकबुक का पालन करना चाहिए।

मेरे पास सामग्री और एसवीजी चार्ट (एंगुलर 2 द्वारा समर्थित) के साथ एक कार्यशील उदाहरण है कि इसमें एओटी कुकबुक के साथ बनाया गया बंडल शामिल है। बंडल बनाने के लिए आपको सभी कॉन्फ़िगरेशन और स्क्रिप्ट की आवश्यकता होती है। इसे यहाँ देखें: https://github.com/fintechneo/angular2-templates/

मैंने एक त्वरित वीडियो बनाया जिसमें एओटी संकलित बिल्ड बनाम एक विकास पर्यावरण की फ़ाइलों और आकार के बीच के अंतर को प्रदर्शित किया गया। यह ऊपर github भंडार से परियोजना को दर्शाता है। आप इसे यहाँ देख सकते हैं: https://youtu.be/ZoZDCgQwnmQ


एक कोणीय ऐप को होस्ट करने के त्वरित और सस्ते तरीके के लिए, मैं फ़र्बेस होस्टिंग का उपयोग कर रहा हूं। यह फ़र्स्ट टियर पर मुफ़्त है और फायरबेस सीएलआई का उपयोग करके नए संस्करणों को तैनात करना बहुत आसान है। यह लेख यहां आपके प्रोडक्शन कोणीय 2 ऐप को फायरबेस पर तैनात करने के लिए आवश्यक कदम बताता है: https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d

संक्षेप में, आप ng build --prod जो पैकेज में एक ng build --prod फोल्डर बनाता है और यह वह फोल्डर है जो फायरबेस होस्टिंग पर तैनात हो जाता है।


कोणीय सीएलआई के साथ यह आसान है। हरोकू के लिए एक उदाहरण:

  1. एक Heroku खाता बनाएँ और CLI स्थापित करें

  2. Package.json में dependencies लिए कोणीय- angular-cli dep को स्थानांतरित करें (ताकि यह तब स्थापित हो जाए जब आप हरोकू को धक्का देते हैं।

  3. एक पोस्ट postinstall स्क्रिप्ट जोड़ें जो कोड को हेरोकू में धकेलने पर ng build चलाएगा। एक नोड सर्वर के लिए एक स्टार्ट कमांड भी जोड़ें जो निम्नलिखित चरण में बनाया जाएगा। यह सर्वर पर dist डायरेक्टरी में ऐप के लिए स्टैटिक फाइल्स को रखेगा और बाद में ऐप को शुरू करेगा।

"scripts": {
  // ...
  "start": "node server.js",
  "postinstall": "ng build --aot -prod"
}
  1. एप्लिकेशन की सेवा के लिए एक एक्सप्रेस सर्वर बनाएं।
// server.js
const express = require('express');
const app = express();
// Run the app by serving the static files
// in the dist directory
app.use(express.static(__dirname + '/dist'));
// Start the app by listening on the default
// Heroku port
app.listen(process.env.PORT || 8080);
  1. एक Heroku रिमोट बनाएं और ऐप को डिपो करने के लिए पुश करें।
heroku create
git add .
git commit -m "first deploy"
git push heroku master

यहाँ एक त्वरित writeup मैंने किया है जिसमें अधिक विवरण हैं, जिसमें HTTPS का उपयोग करने के लिए अनुरोध करने के लिए मजबूर करने और PathLocationStrategy को कैसे हैंडल PathLocationStrategy :)


बस नीचे दिए गए लिंक का पालन करें,

अपना Index.html पृष्ठ स्क्रिप्ट फ़ाइल पथ परिवर्तित करें अपने घटक को बदलें। पथ को आपकी त्रुटि मिल रही है जो स्थान नहीं ढूँढ सका

https://angular.io/docs/ts/latest/guide/deployment.html#!#dev-deploy


मैं forever उपयोग:

  1. बिल्ड ng build --prod --output-path ./dist dist के लिए फ़ोल्डर को ng build --prod --output-path ./dist करने के लिए angular-cli ng build --prod --output-path ./dist साथ अपने कोणीय अनुप्रयोग ng build --prod --output-path ./dist
  2. अपने कोणीय अनुप्रयोग पथ में server.js फ़ाइल बनाएँ:

    const express = require('express');
    const path = require('path');
    
    const app = express();
    
    app.use(express.static(__dirname + '/dist'));
    
    app.get('/*', function(req,res) {
        res.sendFile(path.join(__dirname + '/dist/index.html'));
    });
    app.listen(80);
  3. हमेशा के forever start server.js हमेशा के forever start server.js

बस इतना ही! आपका आवेदन चालू होना चाहिए!


यदि आप लोकलहोस्ट पर मेरे जैसे ऐप का परीक्षण करते हैं या आपको रिक्त सफेद पृष्ठ के साथ कुछ समस्याएं होंगी, तो मैं इसका उपयोग करता हूं:

ng build --prod --build-optimizer --base-href="http://127.0.0.1/my-app/"

स्पष्टीकरण:

ng build

ऐप बनाएं लेकिन कई जगह, टैब और अन्य सामान है। सर्वर के लिए यह महत्वपूर्ण नहीं है कि कोड कैसा दिखता है। यही कारण है कि मैं का उपयोग करें:

ng build --prod --build-optimizer 

यह उत्पादन के लिए कोड बनाता है और आकार कम करता है [ --build-optimizer ] अधिक कोड को कम करने की अनुमति देता है]।

इसलिए अंत में मैं एप्लिकेशन को दिखाने के लिए --base-href="http://127.0.0.1/my-app/" जोड़ रहा --base-href="http://127.0.0.1/my-app/" जहां 'मुख्य फ्रेम' [सरल शब्दों में] है। इसके साथ आप किसी भी फ़ोल्डर में कई कोणीय एप्लिकेशन रख सकते हैं।


यदि आप अपाचे (लिनक्स सर्वर) में अपने आवेदन को तैनात करते हैं तो आप निम्न चरणों का पालन कर सकते हैं: निम्नलिखित चरणों का पालन करें :

चरण 1 : ng build --prod --env=prod

चरण 2 । (सर्वर में डिस्टर्ब कॉपी करें) फिर डिस्टर्ब फोल्डर बनाया गया, डिस्टर्ब फोल्डर को कॉपी करें और इसे सर्वर की रूट डायरेक्टरी में तैनात करें।

चरण 3 । रूट फ़ोल्डर में .htaccess फ़ाइल बनाता है और .htaccess में इसे पेस्ट करता है

 <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

angular-cli साथ, आप निम्नलिखित कमांड का उपयोग कर सकते हैं:

ng build --prod

यह एक डिस्टर्ब फोल्डर उत्पन्न करता है जिसके साथ आपको एप्लिकेशन को तैनात करना होगा।

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


IIS में अपने एप्लिकेशन को नियुक्त करने के लिए नीचे दिए गए चरणों का पालन करें।

चरण 1: अपने एनगुलर एप्लिकेशन को कमांड एनजी बिल्ड --प्रोड का उपयोग करके बनाएँ

चरण 2: निर्माण के बाद सभी फाइलें आपके एप्लिकेशन पथ के डिस्ट फ़ोल्डर में जमा हो जाती हैं।

चरण 3: QR: कोड नाम से C: \ inetpub \ wwwroot में एक फ़ोल्डर बनाएँ।

चरण 4: डिस्ट फ़ोल्डर की सामग्री को C: \ inetpub \ wwwroot \ QRCode फ़ोल्डर में कॉपी करें।

चरण 5: कमांड (विंडो + आर) का उपयोग करके IIS प्रबंधक खोलें और टाइप करें inetmgr ठीक क्लिक करें।

स्टेप 6: डिफॉल्ट वेब साइट पर राइट क्लिक करें और ऐड एप्लिकेशन पर क्लिक करें।

चरण 7: उपनाम नाम 'QRCode' दर्ज करें और C: \ inetpub \ wwwroot \ QRCode में भौतिक पथ सेट करें

चरण 8: index.html फ़ाइल खोलें और लाइन href = "\" ढूंढें और '\' निकालें।

चरण 9: अब किसी भी ब्राउज़र में एप्लिकेशन ब्राउज़ करें।

बेहतर समझ के लिए आप वीडियो का अनुसरण भी कर सकते हैं।

वीडियो url: https://youtu.be/F8EI-8XUNZc





systemjs