Açısal uygulamaları nasıl dağıtırsınız?

Açısal uygulamaları üretim aşamasına ulaştıklarında nasıl dağıtırsınız?

(Hatta üzerinde şimdiye kadar gördüğüm tüm kılavuzlar angular.io ) değişiklikleri yansıtacak şekilde sunma ve browserSync için lite-sunucuya güveniyor - ama gelişmesiyle bitirmek zaman, nasıl Uygulamayı yayınlarım?

Sayfadaki derlenmiş tüm .jsdosyaları içe index.htmlaktarır mıyım yoksa yudum kullanarak küçültebilir miyim? Çalışacaklar mı? Üretim versiyonunda SystemJS'ye ihtiyacım var mı?

Aslında burada bir soruda iki soruya dokunuyorsunuz.

İlki olan başvurunuzu barındırmak için nasıl? .
@Toskv'nin de belirttiği gibi, cevaplanması gerçekten çok geniş bir soru ve sayısız farklı şeye bağlı.

İkincisi ise uygulamanın dağıtım versiyonunu hazırlamak nasıl? .
Burada birkaç seçeneğiniz var:

1. Olduğu gibi konuşlandırın. Sadece bu - hiçbir minimizasyon, birleştirme, isim mangling, vb Transpile tüm ts proje tüm ortaya çıkan js / css / ... kaynakları + barındırma sunucusuna bağımlılıkları kopyalayın ve gitmek için iyidir.

2. Gibi özel paket uygulaması araçlarını kullanarak dağıtma webpackveya systemjsoluşturucu.
   # 1'de eksik olan tüm olasılıklarla birlikte gelirler.
   Tüm uygulama kodunuzu HTML'nizde başvurduğunuz birkaç js / css / ... dosyasına paketleyebilirsiniz. systemjsbuilder bile systemjsdağıtım paketinizin bir parçası olarak dahil etme ihtiyacından kurtulmanızı sağlar .

3. Sen kullanabilirsiniz ng deploysenin CLI uygulamanızı dağıtmak için açısal 8 olarak. ng deployseçtiğiniz platformunuzla (örneğin @angular/fire) birlikte kullanılması gerekir . Sizin için en iyi olanı görmek için resmi belgeler kontrol edebilirsiniz burada

Evet, büyük olasılıkla systemjspaketinizin bir parçası olarak diğer harici kütüphaneleri dağıtmanız ve bir sürü grup kullanmanız gerekecektir . Ve evet, bunları HTML sayfanızdan referans verdiğiniz birkaç js dosyası halinde paketleyebileceksiniz.

systemjsBir modül yükleyici bununla ilgileneceğinden, derlenmiş tüm js dosyalarınıza sayfadan başvurmanız gerekmez .

Kulağa çamurlu geldiğini biliyorum - # 2 ile başlamanıza yardımcı olmak için iki iyi örnek uygulama:

SystemJS oluşturucu: angular2 seed

WebPack: angular2 webpack starter

Basit cevap. Açısal CLI'yi kullanın ve

ng build 

projenizin kök dizinindeki komut. Site dağıtım dizininde oluşturulacaktır ve bunu herhangi bir web sunucusuna dağıtabilirsiniz.

Bu test için oluşturulacak, uygulamanızda üretim ayarları varsa kullanmalısınız

ng build --prod

Bu, projeyi distdizinde oluşturur ve sunucuya gönderilebilir.

Bu cevabı ilk gönderdiğimden beri çok şey oldu. CLI nihayet bir 1.0.0'da bu yüzden bu kılavuzu izleyerek geliştirmeye çalışmadan önce projenizi yükseltmelisiniz https://github.com/angular/angular-cli/wiki/stories-rc-update

Açısal CLI ile kolaydır. Heroku için bir örnek:

1. Bir Heroku hesabı oluşturun ve CLI'yi yükleyin

2. Taşı angular-cliiçin dep dependenciesin package.jsonsize Heroku için itmek zaman yüklü alır böylece (.

3. Ekle postinstallng buildKod Heroku'ya aktarıldığında çalışacak komut dosyası ekleyin. Ayrıca, aşağıdaki adımda oluşturulacak bir Düğüm sunucusu için bir başlatma komutu ekleyin. Bu, uygulamanın statik dosyalarını distsunucudaki bir dizine yerleştirir ve daha sonra uygulamayı başlatır.

"scripts": {
  // ...
  "start": "node server.js",
  "postinstall": "ng build --aot -prod"
}

4. Uygulamayı sunmak için bir Express sunucusu oluşturun.

// 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);

5. Bir Heroku uzaktan kumandası oluşturun ve uygulamayı depolamak için itin.

heroku create
git add .
git commit -m "first deploy"
git push heroku master

İşte HTTPS kullanmak için isteklerin nasıl zorlanacağı ve nasıl ele alınacağı da dahil olmak üzere daha fazla ayrıntıya sahip yaptığım hızlı bir yazmaPathLocationStrategy :

Ben ile kullanmak sonsuza :

1. Angular-uygulamanızı angular-cli to dist klasörüne göre oluşturunng build --prod --output-path ./dist

2. Açısal uygulama yolunuzda server.js dosyası oluşturun :

   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. Sonsuza dek başla forever start server.js

Bu kadar! uygulamanız çalışıyor olmalı!

Umarım bu yardımcı olabilir ve umarım bunu hafta boyunca deneyeceğim.

1. Azure'da Web uygulaması oluşturma
2. Vs kodu Açısal 2 uygulaması oluşturun.
3. Web paketini bundle.js'ye.
4. Azure sitesinde yayınlanan profili xml indir
5. Https://www.npmjs.com/package/azure-deploy kullanarak Azure dağıtımını yapılandırma Site profiliyle .
6. Dağıtmak.
7. Kremayı tadın.

Localhost benim gibi uygulamayı test ederseniz veya boş beyaz sayfa ile bazı sorunlar olacak ben bunu kullanın:

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

Açıklama:

ng build

Uygulama oluşturun ancak kodda, kodun insan tarafından okunmasını sağlayan birçok boşluk, sekme ve diğer şeyler var. Sunucu için kodun nasıl göründüğü önemli değildir. Bu yüzden kullanıyorum:

ng build --prod --build-optimizer 

Bu üretim için kod yapmak ve boyutunu azaltmak [ --build-optimizer] daha fazla kod azaltmak için izin].

Böylece sonunda --base-href="http://127.0.0.1/my-app/"'ana çerçeve' [basit kelimelerle] nerede uygulama göstermek için ekleyin . Bununla birlikte Herhangi bir klasörde birden çok açısal uygulamaya bile sahip olabilirsiniz.

Angular2 uygulamanızı bir üretim sunucusuna dağıtmak için, her şeyden önce, uygulamanızın makinenizde yerel olarak çalıştığından emin olun.

Angular2 uygulaması ayrıca bir düğüm uygulaması olarak da dağıtılabilir.

Bu nedenle, server.js / app.js bir düğüm giriş noktası dosyası oluşturun (örneğim ekspres kullanır)

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'));
});

Ayrıca eklemek ekspres sizin package.json dosyasında bir bağımlılık olarak.

Ardından tercih ettiğiniz ortama dağıtın.

IIS'de dağıtım için küçük bir blog oluşturdum. bağlantıyı takip et

Uygulamanızı IIS'de dağıtmak için aşağıdaki adımları izleyin.

Adım 1: build - prod komutunu kullanarak Açısal uygulamanızı oluşturun

Adım 2: Derlemeden sonra tüm dosyalar uygulama yolunuzun dağıtım klasöründe saklanır.

Adım 3: C: \ inetpub \ wwwroot içinde QRCode adıyla bir klasör oluşturun .

Adım 4: Dist klasörünün içeriğini C: \ inetpub \ wwwroot \ QRCode klasörüne kopyalayın.

Adım 5: Komutu (Window + R) kullanarak IIS Yöneticisi'ni açın ve inetmgr yazın Tamam'ı tıklatın.

Adım 6: Varsayılan Web Sitesine sağ tıklayın ve Uygulama Ekle'ye tıklayın .

Adım 7: Diğer ad 'QRCode' girin ve fiziksel yolu C: \ inetpub \ wwwroot \ QRCode olarak ayarlayın .

Adım 8: index.html dosyasını açın ve href = "\" satırını bulun ve '\' öğesini kaldırın.

Adım 9: Şimdi herhangi bir tarayıcıda uygulamaya göz atın.

Daha iyi anlamak için videoyu da takip edebilirsiniz.

Video URL'si: https://youtu.be/F8EI-8XUNZc

Aşağıdaki adımları uygulayabilmeniz için uygulamanızı Apache'de (Linux sunucusu) dağıtıyorsanız: Aşağıdaki adımları izleyin :

Adım 1 : ng build --prod --env=prod

Adım 2 . (Dist sunucusuna kopyala) sonra dist klasörü oluşturuldu, dist klasörünü kopyala ve sunucunun kök dizinine konuşlandır.

Adım 3 . .htaccessKök klasörde dosya oluşturur ve bunu.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>

Ahead of Time derleyicisiyle derleyerek en küçük ve en hızlı yükleme üretim paketini alırsınız ve buradaki açısal AOT yemek kitabında gösterildiği gibi topla salla / küçült: https://angular.io/docs/ts/latest/cookbook /aot-compiler.html

Bu, önceki yanıtlarda belirtildiği gibi Angular-CLI ile de kullanılabilir, ancak uygulamanızı CLI kullanarak yapmadıysanız, yemek kitabını takip etmelisiniz.

Ayrıca AOT yemek kitabı ile oluşturulan bir paket içeren malzeme ve SVG grafikleriyle (Angular2 tarafından desteklenen) bir çalışma örneğim var. Paketi oluşturmak için gereken tüm yapılandırma ve komut dosyalarını da bulabilirsiniz. Buradan kontrol edin: https://github.com/fintechneo/angular2-templates/

AoT derlemeli bir yapının geliştirme ortamı ile dosya sayısı arasındaki farkı gösteren hızlı bir video hazırladım. Yukarıdaki github deposundan projeyi gösterir. Burada görebilirsiniz: https://youtu.be/ZoZDCgQwnmQ

Github Sayfalarında Açısal 2 Dağıtımı

Ghpages'te Angular2 Webpack Uygulamasının Test Edilmesi

Öncelikle ilgili tüm dosyaları dist uygulamanızın klasöründen alın, benim için: + css dosyaları varlıklar klasöründe + main.bundle.js + polyfills.bundle.js + vendor.bundle.js

Ardından, bu dosyaları oluşturduğunuz depoya aktarın.

1 - Uygulamanın kök dizinde çalışmasını istiyorsanız - [yourgithubusername] .github.io adıyla özel bir repo oluşturun ve bu dosyaları ana şubeye aktarın

2 - Bu sayfayı alt dizinde veya kök dışında farklı bir dalda oluşturmak istediğinizde, bir gh-sayfaları dal oluşturun ve bu dosyaları o dalda itin.

Her iki durumda da bu konuşlandırılmış sayfalara erişme şeklimiz farklı olacaktır.

İlk durumda https: // [yourgithubusername] .github.io ve ikinci durumda [yourgithubusername] .github.io / [Repo adı] olacaktır .

İkinci durumu kullanarak dağıtmak istediğinizi varsayalım, tüm rota eşlemeleri verdiğiniz yola bağlı olduğundan ve [/ branchname] olarak ayarlanması gerektiğinden, index.html dosyasının temel URL'sini dist olarak değiştirdiğinizden emin olun.

Bu sayfaya bağlantı

https://rahulrsingh09.github.io/Deployment

Git Repo

https://github.com/rahulrsingh09/Deployment

Açısal bir uygulamayı barındırmanın hızlı ve ucuz bir yolu için Firbase barındırma kullanıyorum. İlk katmanda ücretsiz ve Firebase CLI kullanarak yeni sürümleri dağıtmak çok kolay. Bu makalede, üretim açısal 2 uygulamanızı Firebase'e dağıtmak için gerekli adımlar açıklanmaktadır: https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d

Kısacası, ng build --prodhangi paketin içinde bir dist klasörü oluşturur ve Firebase Hosting'e dağıtılan klasör çalıştırılır.

Açısal 2'yi azure'da dağıtmak kolaydır

1. İndex.html dahil olmak üzere birkaç dosyanın içinde paketlenmiş her şeyi içeren bir dist klasörü oluşturacak olan build ng --prod dosyasını çalıştırın .

2. İçinde bir kaynak grubu ve bir web uygulaması oluşturun.

3. Dist klasör dosyalarınızı FTP kullanarak yerleştirin. Azure'da uygulamayı çalıştırmak için index.html dosyasını arar.

Bu kadar. Uygulamanız çalışıyor!

2017 itibarıyla açısal projeniz için açısal-cli (v1.4.4) kullanmanın en iyi yolu .

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

--Prod ile varsayılan olarak açık olduğu gibi - açık olarak eklemenize gerek yoktur ve --output-hashing kullanımı önbellek patlaması ile ilgili kişisel tercihinize göre yapılır.

Aşağıdakileri ekleyerek açıkça CDN desteği ekleyebilirsiniz:

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

oldukça hızlı barındırma için CDN kullanmayı planlıyorsanız.

Açısal CLI ile aşağıdaki komutu kullanabilirsiniz:

ng build --prod

Uygulamayı dağıtmak için ihtiyacınız olan tüm dosyaları içeren bir dist klasörü oluşturur.

Web sunucuları ile ilgili bir uygulamanız yoksa Angular to Cloud kullanmanızı öneririz . Dist klasörünü zip dosyası olarak sıkıştırmanız ve platforma yüklemeniz yeterlidir.

Açısaldan önce Web deneyimi olan birçok insan, web eserlerini bir savaşta (yani bir Java / Bahar projesi içinde jquery ve html) dağıtmak için kullanıldığını söyleyebilirim. Açısal ve REST projelerimi ayrı tutmaya çalıştıktan sonra CORS sorununu çözmek için bunu yaptım.

Benim çözümüm CLI ile oluşturulan tüm açısal (4) içeriği uygulamamdan MyJavaApplication / angular 'a taşımaktı. Daha sonra Maven derlememi içeriği / açısal / dist'den dağıtımımın köküne taşımak için maven-resources-plugin kullanacak şekilde değiştirdim (yani $ project.build.directory} / MyJavaApplication). Açısal, kaynakları varsayılan olarak savaşın kökünden yükler.

Açısal projeme yönlendirme eklemeye başladığımda, maven yapısını index.html dosyasını / dist'den WEB-INF / uygulamasına kopyalamak için değiştirdim. Ve tüm sunucu tarafı dinlenme çağrılarını dizine yönlendiren bir Java denetleyicisi eklendi.

Sadece aşağıdaki bağlantıyı takip edin,

Index.html sayfanızı değiştirin Komut Dosyası dosya yolları Konumu bulamayan hata alıyorsanız component.html yolunuzu değiştirin

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