আপনি কৌনিক অ্যাপ্লিকেশন কীভাবে স্থাপন করবেন?


194

কৌণিক অ্যাপ্লিকেশনগুলি যখন উত্পাদন পর্যায়ে পৌঁছে যায় তখন আপনি কীভাবে তাকে স্থাপন করবেন?

আমি এখনও অবধি দেখানো সমস্ত গাইড (এমনকি কৌণিক.আইও তেও ) পরিবেশন করার জন্য একটি লাইট-সার্ভার এবং ব্রাউজারসাইঙ্কের পরিবর্তনগুলি প্রতিফলিত করার জন্য গণনা করছে - তবে আপনি যখন বিকাশ শেষ করেন, আপনি কীভাবে অ্যাপটি প্রকাশ করতে পারবেন?

আমি কি পৃষ্ঠায় সমস্ত সংকলিত .jsফাইল আমদানি করব index.htmlবা আমি গুল্প ব্যবহার করে এগুলি ছোট করব? তারা কি কাজ করবে? আমার কি প্রযোজনা সংস্করণে সিস্টেমজেএস দরকার?

উত্তর:


91

আপনি এখানে আসলে একটিতে দুটি প্রশ্ন স্পর্শ করছেন।

প্রথমটি হ'ল কীভাবে আপনার অ্যাপ্লিকেশনটি হোস্ট করবেন?
এবং যেমন @ টসকভিভ তার উত্তর দেওয়ার মতো সত্যই বিস্তৃত প্রশ্নের উল্লেখ করেছে এবং এটি বিভিন্ন বিভিন্ন বিষয়ের উপর নির্ভর করে।

দ্বিতীয়টি হ'ল আপনি কীভাবে অ্যাপ্লিকেশনটির ডিপ্লোয়মেন্ট সংস্করণ প্রস্তুত করবেন?
আপনার এখানে বেশ কয়েকটি বিকল্প রয়েছে:

  1. এটি যেমন স্থাপন করুন। কেবল এটি - কোনও ক্ষুদ্রকরণ, কনটেনটেশন, নাম ম্যাংলিং ইত্যাদি your
  2. পছন্দসই webpackবা systemjsনির্মাতা বিশেষ বান্ডিলিং সরঞ্জাম ব্যবহার করে স্থাপন করুন ।
    তারা # 1 এর অভাবযুক্ত সমস্ত সম্ভাবনা নিয়ে আসে।
    আপনি আপনার সমস্ত অ্যাপ্লিকেশন কোডটি আপনার এইচটিএমএলে উল্লেখ করেছেন এমন মাত্র দু'টি জেএস / সিএসএস / ... ফাইলগুলিতে প্যাক করতে পারেন। systemjsএমনকি বিল্ডার আপনাকে systemjsআপনার মোড়ক প্যাকেজের অংশ হিসাবে অন্তর্ভুক্ত করার প্রয়োজনীয়তা থেকে মুক্তি দিতে দেয় ।

  3. ng deployআপনার সিএলআই থেকে আপনার অ্যাপ্লিকেশন মোতায়েন করতে আপনি কৌনিক 8 হিসাবে ব্যবহার করতে পারেন । ng deployআপনার পছন্দের প্ল্যাটফর্মের সাথে একযোগে ব্যবহার করা প্রয়োজন (যেমন @angular/fire)। আপনার জন্য এখানে সর্বোত্তম কী কাজ করে তা দেখতে আপনি সরকারী দস্তাবেজগুলি পরীক্ষা করতে পারেন

হ্যাঁ আপনার সম্ভবত মোতায়েন করা প্রয়োজন systemjs আপনার প্যাকেজের অংশ হিসাবে অন্যান্য বাহ্যিক গ্রন্থাগার ও গুচ্ছএবং হ্যাঁ আপনি আপনার এইচটিএমএল পৃষ্ঠা থেকে উল্লেখ করেছেন এমন কয়েকটি জেএস ফাইলের মধ্যে সেগুলি বান্ডেল করতে সক্ষম হবেন।

পৃষ্ঠা থেকে আপনার সমস্ত সংকলিত জেএস ফাইলগুলি আপনাকে রেফারেন্স করতে হবে না - systemjsমডিউল লোডার হিসাবে এটি যত্ন নেবে।

আমি জানি এটি কর্দমাক্ত মনে হচ্ছে - আপনাকে # 2 দিয়ে শুরু করতে সহায়তা করতে এখানে দুটি সত্যিই ভাল নমুনার অ্যাপ্লিকেশন রয়েছে:

সিস্টেমজেএস নির্মাতা: কৌণিক 2 বীজ

ওয়েবপ্যাক: কৌণিক 2 ওয়েবপ্যাক স্টার্টার


1
আমি জেএসপিএম ( jspm.io ) সুপারিশ করব : তথ্য এখানে gist.github.com/robwormald/429e01c6d802767441ec এবং বীজ প্রকল্প এখানে github.com/madhukard/angular2-jspm-seed
হ্যারি

Months মাস পরে যখন Angular2 আরসি 5 এ রয়েছে এবং শীঘ্রই মুক্তি পাবে, এই উত্তরটি এখনও প্রাসঙ্গিক কারণ এটি কৌণিক 2 বীজ প্রকল্পের উল্লেখ করে। দুর্দান্ত প্রকল্প, অনেক অবদানকারী!
লম্বা_ কোডার

3
আমি এখনও পয়েন্ট (1) দিয়ে ব্যাপকভাবে বিভ্রান্ত হয়েছি। 'এএস আইএস' মোতায়েনের অর্থ কী? এর অর্থ কি সমস্ত 50000 নোড_মডিউল ফাইলগুলি অনুলিপি করা উচিত? আমি হিরোস উদাহরণ স্থাপন করার চেষ্টা করছি এবং সূচী ফাইলে স্ক্রিপ্ট উত্স হিসাবে কী যুক্ত করব তা নিশ্চিত নই।
অলিভার ওয়াটকিন্স

1
হ্যাঁ - এর অর্থ আপনার সমস্ত নির্ভরতা অনুলিপি করা, এর মধ্যে এটিও অন্তর্ভুক্ত রয়েছে node_modules। দ্রষ্টব্য - আপনার প্রোগ্রামটি চালনার জন্য প্রয়োজনীয় নির্ভরতাগুলি অনুলিপি করা উচিত। কেবল উন্নয়নের জন্য ব্যবহৃত ডিপগুলি অনুলিপি করবেন না (উদাহরণস্বরূপ গল্প / গ্রান্ট / ইত্যাদি)।
মাঝে

1
হ্যাঁ. সেই ফাইলটিতে system.js নির্দেশিত হয় আপনার সমস্ত নির্ভরতা থেকে কী এবং কোথায় লোড করতে হবে।
মাঝে

88

সহজ উত্তর। কৌণিক সিএলআই ব্যবহার করুন এবং ইস্যু করুন

ng build 

আপনার প্রকল্পের মূল ডিরেক্টরিতে কমান্ড। সাইটটি ডিস্ট ডিরেক্টরিতে তৈরি করা হবে এবং আপনি এটি কোনও ওয়েব সার্ভারে স্থাপন করতে পারেন।

এটি পরীক্ষার জন্য তৈরি করবে, যদি আপনার অ্যাপ্লিকেশনটিতে প্রোডাকশন সেটিংস থাকে তবে আপনার ব্যবহার করা উচিত

ng build --prod

এটি distডিরেক্টরিতে প্রকল্পটি তৈরি করবে এবং এটি সার্ভারে ঠেলা যাবে।

আমি প্রথম এই উত্তরটি পোস্ট করার পর থেকে অনেক কিছু ঘটেছে। সিএলআই শেষ পর্যন্ত একটি 1.0.0 এ রয়েছে তাই এই নির্দেশিকাটি অনুসরণ করে আপনার প্রকল্পটি তৈরির চেষ্টা করার আগেই হওয়া উচিত upgrade https://github.com/angular/angular-cli/wiki/stories-rc-update


তুমি এটা কিভাবে করলে? কৌণিক 2 দ্রুত শুরু করার পরে, আমি 'এনপিএম স্টার্ট' এর পরিবর্তে সেই কমান্ডটি চালাই, এবং আমি 'এনজি কমান্ডটি খুঁজে পাইনি'
রাহলি

1
@ নেটবুনি আমি ওয়েব দেব দৃশ্যে নতুন। আমি দ্বিধান্বিত. এনজি বিল্ড ডিস্ট ফোল্ডারে অনেকগুলি ফাইল তৈরি করে। বলুন যে আপনি বসন্ত বুটটি ওয়েব সার্ভার হিসাবে ব্যবহার করছেন, আপনি কি কেবল সেই ফাইলগুলি বসন্ত বুটে সর্বজনীন ওয়েব-ইনফ ফোল্ডারে আটকান? অথবা আপনার এনজি 2 ডিস্ট পরিবেশন করার জন্য স্প্রিং বুটের সামনে নোডেজ সার্ভারের দরকার আছে?
শ্রীকান্ত

3
এটি নথিতে কেন নয়? মনে হচ্ছে এক বিশাল বাদ!
কোকোডোকো

মনে রাখবেন অ্যাঙ্গুলার 2 এর প্রথম সংস্করণটি এখন সবেমাত্র এক মাস পুরানো।
নাট বুন্নি

1
@ ব্যবহারকারী 1460043, হ্যাঁ, তবে আপনার সমস্যার সহজ সমাধান রয়েছে। কেবলমাত্র একটি নতুন কৌণিক সিএলআই প্রকল্প রোল করুন এবং আপনার এসআরসি ডিরেক্টরিটি সিএলআই প্রকল্পে অনুলিপি করুন।
নাট বুনি

21

কৌণিক সিএলআই সহ এটি সহজ। হেরোকুর জন্য উদাহরণ:

  1. একটি হেরোকু অ্যাকাউন্ট তৈরি করুন এবং সিএলআই ইনস্টল করুন

  2. সরান angular-cliকরার প্রস্থাঃ dependenciesমধ্যে package.json(এটা ইনস্টল পরার যাতে যখন আপনি Heroku করার ধাক্কা।

  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 create
git add .
git commit -m "first deploy"
git push heroku master

এইচটিটিপিএস ব্যবহারের জন্য অনুরোধগুলি কীভাবে প্রয়োগ করতে হয় এবং কীভাবে পরিচালনা করতে হয় তার সহ আরও একটি বিশদ রাইটিংআপ আমি এখানে করেছি PathLocationStrategy:)


নির্ভরতাগুলিতে কৌনিক-ক্লাইম যুক্ত করা কীভাবে এটি পরিচালনা করতে হবে তার আকার বাড়িয়ে তোলে
জনক ভট্ট

7

আমি চিরকালের সাথে ব্যবহার :

  1. ডিস্ট ফোল্ডারে কৌণিক-ক্লিমে আপনার কৌণিক অ্যাপ্লিকেশন তৈরি করুনng build --prod --output-path ./dist
  2. আপনার কৌণিক অ্যাপ্লিকেশন পথে সার্ভার.জেএস ফাইল তৈরি করুন :

    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

এখানেই শেষ! আপনার আবেদন চলমান করা উচিত!


6

আশা করি এটি সাহায্য করতে পারে এবং আশা করি আমি সপ্তাহের মধ্যে এটি চেষ্টা করে দেখব।

  1. অ্যাজুরে ওয়েব অ্যাপ তৈরি করুন
  2. বনাম কোডে কৌণিক 2 অ্যাপ তৈরি করুন।
  3. বান্ডেল.জেএস তে ওয়েবপ্যাক।
  4. অ্যাজুরে সাইট প্রকাশিত প্রোফাইল এক্সএমএল ডাউনলোড করুন
  5. Https://www.npmjs.com/package/azure-deploy সাইট প্রোফাইল ব্যবহার করে অ্যাজুর-মোতায়েন কনফিগার করুন ।
  6. স্থাপন।
  7. ক্রিম স্বাদ।

58
মাইক্রোসফ্ট-ইফাই এই ধরণের জিনিস ব্যবহার করবেন না কারণ এটি কেবল অ্যাজুরের সাথে সামঞ্জস্যপূর্ণ। এটি বলার মতো যে আপনি যদি কৌণিক ব্যবহার করছেন তবে আপনার কেবলমাত্র গুগল ক্লাউড পরিষেবা ব্যবহার করতে সক্ষম হওয়া উচিত।
ওজনমুয়েস

2
অ্যাজুরেতে মোতায়েন করার জন্য একটি এনপিএম মডিউল রয়েছে তা জেনে রাখা কার্যকর।
অ্যান্থনি ব্রেনেলিয়ার

1
ক্রিমটি স্বাদ দেওয়ার জন্য @ ব্যবহারকারী 6402762 +1।
লিওনার্দো ওয়াইল্ড

আমি এই উত্তরটি ব্যবহার করে আমার কৌণিক 4 ওয়েব অ্যাপ্লিকেশন মোতায়েন করার চেষ্টা করছি তবে আমি এর মতো ত্রুটি পেতে থাকি Can't resolve 'node-uuid' in path\azure-deploy\lib। এটা কি এখনও সম্ভব? আমি 5 ধাপে কনফিগার করেছি app.moduleএবং আমি নিশ্চিত নই যে আমি 3 এবং 4 পদক্ষেপটি সঠিকভাবে করেছি। আপনি কি তাদের পরিষ্কার করতে পারেন?
ওয়াউটার ভ্যানহের্ক

6

আপনি যদি লোকালহোস্টে আমার মতো অ্যাপটি পরীক্ষা করেন বা ফাঁকা সাদা পৃষ্ঠাতে আপনার কিছু সমস্যা হয় আমি এটি ব্যবহার করি:

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/"অ্যাপ্লিকেশনটি যুক্ত করতে যুক্ত করব যেখানে 'মূল ফ্রেম' রয়েছে [সাধারণ কথায়]। এটির সাথে আপনার যে কোনও ফোল্ডারে একাধিক কৌনিক অ্যাপ্লিকেশন থাকতে পারে।


5

আপনার অ্যাঙ্গুলার 2 অ্যাপ্লিকেশনটিকে প্রথম এবং সর্বাগ্রে প্রোডাকশন সার্ভারে স্থাপন করার জন্য আপনার অ্যাপটি আপনার মেশিনে স্থানীয়ভাবে চলমান রয়েছে তা নিশ্চিত করুন।

অ্যাঙ্গুলার 2 অ্যাপটি নোড অ্যাপ হিসাবেও স্থাপন করা যেতে পারে।

সুতরাং, নোড এন্ট্রি পয়েন্ট ফাইল সার্ভার.js / app.js তৈরি করুন (আমার উদাহরণটি এক্সপ্রেস ব্যবহার করে)

var express = require('express'),
    path = require('path'),
    fs = require('fs');

var app = express();
var staticRoot = __dirname + '/';

app.set('port', (process.env.PORT || 3000));

app.use(express.static(staticRoot));

app.use(function(req, res, next){

    // if the request is not html then move along
    var accept = req.accepts('html', 'json', 'xml');
    if(accept !== 'html'){
        return next();
    }

    // if the request has a '.' assume that it's for a file, move along
    var ext = path.extname(req.path);
    if (ext !== ''){
        return next();
    }

    fs.createReadStream(staticRoot + 'index.html').pipe(res);

}); 

app.listen(app.get('port'), function() {
    console.log('app running on port', app.get('port'));
});

আপনার প্যাকেজ.জসন ফাইলে নির্ভরতা হিসাবে এক্সপ্রেস যুক্ত করুন।

তারপরে এটি আপনার পছন্দসই পরিবেশে স্থাপন করুন।

আইআইএস-এ মোতায়েনের জন্য আমি একটি ছোট ব্লগ রেখেছি। লিঙ্ক অনুসরণ করুন


5

আপনার অ্যাপ্লিকেশনটি আইআইএস-এ স্থাপন করতে নীচের পদক্ষেপগুলি অনুসরণ করুন।

পদক্ষেপ 1: এনজি বিল্ড - প্রোড কমান্ড ব্যবহার করে আপনার কৌণিক অ্যাপ্লিকেশন তৈরি করুন

পদক্ষেপ 2: বিল্ড করার পরে সমস্ত ফাইল আপনার অ্যাপ্লিকেশন পাথের ডিস্ট ফোল্ডারে সংরক্ষণ করা হয়।

পদক্ষেপ 3: একটি ফোল্ডার তৈরি করুন \ inetpub \ wwwroot: সি নামে QRCode

পদক্ষেপ 4: ডি ফোল্ডারের সামগ্রীগুলি সি: \ ইনটপব \ wwwroot \ QRCode ফোল্ডারে অনুলিপি করুন ।

পদক্ষেপ 5: কমান্ড (উইন্ডো + আর) ব্যবহার করে আইআইএস ম্যানেজারটি খুলুন এবং ইনটেমগ্রার টাইপ করুন ঠিক আছে।

পদক্ষেপ:: ডিফল্ট ওয়েব সাইটে রাইট ক্লিক করুন এবং অ্যাড অ্যাপ্লিকেশন ক্লিক করুন ।

পদক্ষেপ 7: এলিয়াসের নাম 'কিউআর কোড' লিখুন এবং সি: \ ইনপপব \ wwwroot \ কিউআর কোডে শারীরিক পথ সেট করুন ।

পদক্ষেপ 8: সূচক html ফাইলটি খুলুন এবং href = "\" লাইনটি সন্ধান করুন এবং '\' সরান।

পদক্ষেপ 9: এখন যে কোনও ব্রাউজারে অ্যাপ্লিকেশন ব্রাউজ করুন।

আরও ভাল বোঝার জন্য আপনি ভিডিওটি অনুসরণ করতে পারেন।

ভিডিও url: https://youtu.be/F8EI-8XUNZc


4

আপনি যদি অ্যাপ্লিকেশন অ্যাপাচি (লিনাক্স সার্ভার) এ স্থাপন করেন যাতে আপনি নিম্নলিখিত পদক্ষেপগুলি অনুসরণ করতে পারেন: নিম্নলিখিত পদক্ষেপগুলি অনুসরণ করুন :

পদক্ষেপ 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>

কি ধরনের সার্ভার? একটি
এনজিন্স

টমকেট হতে পারে, আপনার পছন্দ। আমি বলব আপনি যা জানেন তার সাথে ব্যবহার করুন।
ওয়ালেস হাওয়ারি

যে কোনও অ্যাপাচি লিনাক্স বা অন্যান্য সার্ভার, whr .htaccess বিধি ব্যবহৃত হয়।
সুমিত জয়সওয়াল

@ তমঘনাবাণার্জি, সার্ভার পুনরায় লেখার মোডটি সক্ষম হয়েছে কিনা তা পরীক্ষা করে দেখুন?
সুমিত জয়সওয়াল

3

আপনি এগিয়ে সময়ের সংকলক সংকলন করে সবচেয়ে ছোট এবং দ্রুত লোডিং প্রোডাকশন বান্ডেলটি পাবেন এবং কৌণিক এওটি কুকবুকটিতে এখানে রোলআপের সাথে ট্রি-শেক / মিনিফাই করুন: https://angular.io/docs/ts/latest/cookbook /aot-compiler.html

এটি পূর্ববর্তী উত্তরে যেমনটি বলেছিল তেমন কৌণিক-সিএলআইয়ের সাথেও উপলব্ধ, তবে আপনি যদি সিএলআই ব্যবহার করে আপনার অ্যাপটি তৈরি না করে থাকেন তবে আপনার রান্না বইটি অনুসরণ করা উচিত।

আমার কাছে উপকরণ এবং এসভিজি চার্ট (অ্যাঙ্গুলার 2 দ্বারা সমর্থনযুক্ত) সহ একটি কার্যকারী উদাহরণ রয়েছে যা এটিটি কুকবুকের সাহায্যে তৈরি একটি বান্ডিল অন্তর্ভুক্ত করে। বান্ডেলটি তৈরি করতে প্রয়োজনীয় সমস্ত কনফিগারেশন এবং স্ক্রিপ্টগুলিও আপনি খুঁজে পেতে পারেন। এটি এখানে দেখুন: https://github.com/fintechneo/angular2-templates/

উন্নয়নের পরিবেশ বনাম বনাম একটি এওটি সংকলিত ফাইলের সংখ্যা এবং আকারের মধ্যে পার্থক্য প্রদর্শন করে আমি একটি দ্রুত ভিডিও তৈরি করেছি demonst এটি উপরের গিথুব সংগ্রহশালা থেকে প্রকল্পটি দেখায়। আপনি এটি এখানে দেখতে পাবেন: https://youtu.be/ZoZDCgQwnmQ


দস্তাবেজের একটি রেফারেন্সের জন্য এবং এওটি সংকলন উল্লেখ করার জন্য ধন্যবাদ। মান শব্দসমূহ বাস্তব,"This cookbook describes how to radically improve performance by compiling Ahead of Time (AOT) during a build process."
Aero

1
প্রতিক্রিয়াটির জন্য ধন্যবাদ - যদি আপনি নিজেই এওটি সংকলনটি পরীক্ষা করার সময় না পেয়ে থাকেন তবে আমি একটি ভিডিও যুক্ত করেছি যা ফাইলের আকার এবং আকারের পার্থক্য দেখায় (উত্তরে গিথুব প্রকল্পটি ব্যবহার করে)।
পিটার সালমনসন

অসাধারণ! পিটার এত সহায়ক হওয়ার জন্য ধন্যবাদ!
এয়ারো

2

গিথুব পৃষ্ঠায় কৌণিক 2 মোতায়েন

অস্থায়ী 2 ওয়েবপ্যাকের পরীক্ষাটি নিখরচায় পরীক্ষা করা হচ্ছে

প্রথমে distআপনার অ্যাপ্লিকেশনটির ফোল্ডার থেকে সমস্ত প্রাসঙ্গিক ফাইলগুলি পান , আমার জন্য এটি ছিল: সম্পদ ফোল্ডারে + + CSS ফাইলগুলি + main.bundle.js + polyfills.bundle.js + vendor.bundle.js

তারপরে আপনার তৈরি করা রেপোগুলিতে এই ফাইলগুলিকে চাপ দিন।

1 - আপনি যদি অ্যাপ্লিকেশনটি রুট ডিরেক্টরিতে চালিত করতে চান - [yourgithubusername] .github.io নামের একটি বিশেষ রেপো তৈরি করুন এবং এই ফাইলগুলি মাস্টার শাখায় ঠেকান

2 - যেখানে আপনি এই পৃষ্ঠাটি উপ ডিরেক্টরিতে বা মূল ব্যতীত অন্য কোনও শাখায় তৈরি করতে চান সেখানে একটি শাখা জিএইচ-পৃষ্ঠা তৈরি করুন এবং এই ফাইলগুলিকে সেই শাখায় ঠেকান

উভয় ক্ষেত্রেই আমরা এই মোতায়েন করা পৃষ্ঠাগুলি অ্যাক্সেস করার পদ্ধতিটি আলাদা হবে।

প্রথম ক্ষেত্রে এটি হবে https: // [yourgithubusername] .github.io এবং দ্বিতীয় ক্ষেত্রে এটি হবে [yourgithubusername] .github.io / [রেপো নাম]

ধরুন আপনি যদি দ্বিতীয় কেসটি ব্যবহার করে এটি স্থাপন করতে চান তবে নিশ্চিত করুন যে সমস্ত রুট ম্যাপিংগুলি আপনি যে পথে দিয়েছেন তার উপর নির্ভর করে এবং এটি [/ ব্র্যাঙ্কনাম] এ সেট করা উচিত কারণ দূরবর্তী অবস্থানের সূচক html ফাইলের বেস url পরিবর্তন করা নিশ্চিত করুন change

এই পৃষ্ঠায় লিঙ্ক

https://rahulrsingh09.github.io/Deployment

গিট রেপো

https://github.com/rahulrsingh09/Deployment


1

একটি কৌণিক অ্যাপ্লিকেশনটি হোস্ট করার দ্রুত এবং সস্তার পদ্ধতির জন্য, আমি ফিরবেস হোস্টিং ব্যবহার করে যাচ্ছি। এটি প্রথম স্তরে বিনামূল্যে এবং ফায়ারবেস সিএলআই ব্যবহার করে নতুন সংস্করণ স্থাপন করা খুব সহজ। এই নিবন্ধটি এখানে ফায়ারবেসে আপনার উত্পাদন কৌণিক 2 অ্যাপ স্থাপন করার প্রয়োজনীয় পদক্ষেপগুলি ব্যাখ্যা করে: https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d

সংক্ষেপে, আপনি রান করুন ng build --prodযা প্যাকেজে একটি ডিস্টিওর ফোল্ডার তৈরি করে এবং এটি ফোল্ডার যা ফায়ারবেস হোস্টিংয়ের জন্য স্থাপন করা হয়।


ধন্যবাদ - এটি আমার সন্ধানের সহজতম উপায় ছিল।
ব্রায়ান বার্নস

1

অ্যাজুলারে অ্যাংুলার 2 স্থাপন করা সহজ

  1. এনজি বিল্ড - প্রড চালান , যা সূচিপত্র। HTML সহ কয়েকটি ফাইলের মধ্যে বান্ডিল করা সমস্ত কিছু দিয়ে একটি ডিস্ট ফোল্ডার জেনারেট করে।

  2. এর অভ্যন্তরে একটি সংস্থান গ্রুপ এবং একটি ওয়েব অ্যাপ্লিকেশন তৈরি করুন।

  3. আপনার ডিস্ট ফোল্ডার ফাইলগুলি এফটিপি ব্যবহার করে রাখুন। অ্যাজুরিতে এটি অ্যাপ্লিকেশন চালানোর জন্য সূচি html অনুসন্ধান করবে।

এটাই. আপনার অ্যাপ চলছে!


আপনি যদি কেবল কৌনিক-ক্লাই নং দিয়ে আপনার প্রকল্পটি শুরু করেন?
পোর্তেকোই

ওরকম না. আপনি যদি কৌণিক-ক্লাইটি ব্যবহার করে আপনার কৌণিক 2 প্রকল্প শুরু না করে থাকেন তবে আপনি প্রকল্পটি উত্পাদনের জন্য তৈরি করতে পারেন। বিল্ডিংয়ের সময় আপনার মেশিনে কেবল কৌণিক-ক্লিপ ইনস্টল করা দরকার। বিশ্বব্যাপী কৌণিক-ক্লিপ ইনস্টল করতে এনপিএম ইনস্টল -g @ কৌণিক / ক্লিপ ব্যবহার করুন।
মালতেশ পাতিল

1

২০১ of সালের সবচেয়ে ভাল উপায় হল আপনার কৌণিক প্রকল্পের জন্য কৌণিক- ক্লিপ (v1.4.4) ব্যবহার করা।

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

আপনাকে --aot স্পষ্টতই এটির - ডিগ্রি হিসাবে - প্রোড দিয়ে যুক্ত করা উচিত নয় nd

আপনি স্পষ্টভাবে যোগ করে সিডিএন সমর্থন যুক্ত করতে পারেন:

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

যদি আপনি হোস্টিংয়ের জন্য সিডিএন ব্যবহার করার পরিকল্পনা করেন যা যথেষ্ট দ্রুত।


1

সঙ্গে কৌণিক CLI , আপনি নিম্নলিখিত কমান্ড ব্যবহার করতে পারেন:

ng build --prod

এটি আপনাকে অ্যাপ্লিকেশন মোতায়েনের জন্য প্রয়োজনীয় সমস্ত ডিস্ট ফোল্ডার তৈরি করে।

ওয়েব সার্ভারগুলির সাথে আপনার যদি অনুশীলন না হয় তবে আমি আপনাকে কৌনিক থেকে মেঘ ব্যবহার করার পরামর্শ দিচ্ছি । আপনাকে কেবল ডিপ ফোল্ডারটি জিপ ফাইল হিসাবে সংকুচিত করতে হবে এবং প্ল্যাটফর্মে এটি আপলোড করতে হবে।


1

আমি কৌণিকর আগে ওয়েব অভিজ্ঞতার সাথে অনেক লোকই বলতে পারি, তারা একটি ওয়েবের মধ্যে তাদের ওয়েব শিল্পকর্মগুলি স্থাপন করার জন্য ব্যবহার করছেন (অর্থাত্ জাভা / স্প্রিং প্রজেক্টের অভ্যন্তরে জ্যাকুয়ারি এবং এইচটিএমএল)। আমার কৌণিক এবং REST প্রকল্পগুলি পৃথক রাখার চেষ্টা করার পরে আমি কর্স ইস্যুটি পেতে এই কাজটি শেষ করেছি।

আমার সমাধানটি হ'ল মাই-অ্যাপ্লিকেশন থেকে মাইজাভা অ্যাপ্লিকেশন / কৌণিক, সিএলআই দিয়ে তৈরি সমস্ত কৌণিক (4) বিষয়বস্তু সরানো। তারপরে আমি আমার মেভেন বিল্ডটি ম্যাভেন-রিসোর্স-প্লাগইনটি ব্যবহার করতে / কৌণিক / ডিস্ট থেকে আমার বিতরণের মূলের (যেমন $ প্রজেক্ট.বিল্ড.ডাইরেক্টরি} / মাইজাভা অ্যাপ্লিকেশন) মূলের দিকে সরানোর জন্য ব্যবহার করেছি। কৌণিক ডিফল্টরূপে যুদ্ধের মূল থেকে সংস্থানগুলি লোড করে।

যখন আমি আমার কৌণিক প্রকল্পে রাউটিং যুক্ত করতে শুরু করেছি, তখন আমি ওয়েবে-আইএনএফ / অ্যাপ্লিকেশনটিতে / ডিস্ট থেকে সূচককপিটি অনুলিপি করার জন্য মাভেন বিল্ডটি সংশোধন করেছি। এবং, একটি জাভা নিয়ামক যুক্ত করেছেন যা সমস্ত সার্ভারের সাইড রেস্ট কলের সূচকে পুনঃনির্দেশ করে।


-1

কেবল নীচের লিঙ্কটি অনুসরণ করুন,

আপনার সূচিপত্রের html পৃষ্ঠার স্ক্রিপ্ট ফাইলের পাথগুলি পরিবর্তন করুন আপনার উপাদানটি html পাথ পরিবর্তন করুন যাতে স্থানটি খুঁজে পাওয়া যায়নি getting

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

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.