Làm thế nào để bạn triển khai các ứng dụng Angular khi chúng đạt đến giai đoạn sản xuất?
Tất cả các hướng dẫn tôi đã thấy cho đến nay (ngay cả trên angular.io ) đang tính trên một máy chủ lite để phục vụ và browserSync để phản ánh các thay đổi - nhưng khi bạn hoàn thành phát triển, làm thế nào bạn có thể xuất bản ứng dụng?
Tôi có nhập tất cả các .jstệp đã biên dịch trên index.htmltrang hay tôi thu nhỏ chúng bằng gulp? Họ sẽ làm việc chứ? Tôi có cần SystemJS ở phiên bản sản xuất không?
Câu trả lời:
Bạn thực sự ở đây chạm vào hai câu hỏi trong một.
Đầu tiên là làm thế nào để lưu trữ ứng dụng của bạn? .
Và như @toskv đã đề cập đến câu hỏi thực sự quá rộng của nó để được trả lời và phụ thuộc vào nhiều điều khác nhau.
Cách thứ hai là Làm thế nào để bạn chuẩn bị phiên bản triển khai của ứng dụng? .
Bạn có một vài lựa chọn ở đây:
Triển khai bằng cách sử dụng các công cụ bó đặc biệt, thích webpackhoặc systemjsxây dựng.
Chúng đi kèm với tất cả các khả năng còn thiếu trong # 1.
Bạn có thể đóng gói tất cả mã ứng dụng của mình vào một vài tệp js / css / ... mà bạn tham chiếu trong HTML của mình. systemjstrình xây dựng thậm chí cho phép bạn thoát khỏi nhu cầu đưa vào systemjsnhư một phần của gói triển khai.
Bạn có thể sử dụng ng deploykể từ Angular 8 để triển khai ứng dụng của mình từ CLI. ng deploysẽ cần được sử dụng cùng với nền tảng bạn chọn (chẳng hạn như @angular/fire). Bạn có thể kiểm tra các tài liệu chính thức để xem những gì phù hợp nhất với bạn ở đây
Có, rất có thể bạn sẽ cần triển khai systemjsvà tập hợp các thư viện bên ngoài khác như một phần của gói. Và vâng, bạn sẽ có thể gói chúng thành một vài tệp js mà bạn tham chiếu từ trang HTML của mình.
Mặc dù vậy, bạn không phải tham chiếu tất cả các tệp js đã biên dịch của mình từ trang - systemjsvì trình tải mô-đun sẽ đảm nhiệm việc đó.
Tôi biết nó nghe có vẻ lầy lội - để giúp bạn bắt đầu với # 2 đây là hai ứng dụng mẫu thực sự tốt:
Trình xây dựng SystemJS: hạt giống angular2
WebPack: khởi động gói web angular2
node_modules. Lưu ý - bạn chỉ nên sao chép các phụ thuộc cần thiết để chương trình chạy. Không sao chép deps chỉ được sử dụng để phát triển (ví dụ: gulp / grunt / etc).
Câu trả lời đơn giản. Sử dụng CLI góc và phát hành
ng build lệnh trong thư mục gốc của dự án của bạn. Trang web sẽ được tạo trong thư mục dist và bạn có thể triển khai nó đến bất kỳ máy chủ web nào.
Điều này sẽ được xây dựng để thử nghiệm, nếu bạn có cài đặt sản xuất trong ứng dụng của mình, bạn nên sử dụng
ng build --prodĐiều này sẽ xây dựng dự án trong distthư mục và điều này có thể được đẩy đến máy chủ.
Nhiều điều đã xảy ra kể từ lần đầu tiên tôi đăng câu trả lời này. CLI cuối cùng ở mức 1.0.0, vì vậy hãy làm theo hướng dẫn này để nâng cấp dự án của bạn trước khi bạn cố gắng xây dựng. https://github.com/angular/angular-cli/wiki/stories-rc-update
Với CLI góc, thật dễ dàng. Một ví dụ cho Heroku:
Tạo tài khoản Heroku và cài đặt CLI
Di chuyển angular-clidep vào dependenciestrong package.json(để nó được cài đặt khi bạn đẩy Heroku.
Thêm một postinstalltập lệnh sẽ chạy ng buildkhi mã được đẩy sang Heroku. Đồng thời thêm lệnh bắt đầu cho máy chủ Node sẽ được tạo trong bước sau. Điều này sẽ đặt các tệp tĩnh cho ứng dụng trong một distthư mục trên máy chủ và khởi động ứng dụng sau đó.
"scripts": {
// ...
"start": "node server.js",
"postinstall": "ng build --aot -prod"
}// 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);heroku create
git add .
git commit -m "first deploy"
git push heroku masterĐây là một bài viết nhanh tôi đã làm có nhiều chi tiết hơn, bao gồm cách buộc các yêu cầu sử dụng HTTPS và cách xử lý PathLocationStrategy:)
Tôi sử dụng mãi mãi :
ng build --prod --output-path ./distTạo tệp server.js trong đường dẫn ứng dụng Angular của bạn:
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);Bắt đầu mãi mãi forever start server.js
Đó là tất cả! ứng dụng của bạn sẽ được chạy!
Hy vọng rằng điều này có thể giúp ích, và hy vọng tôi sẽ thử điều này trong tuần.
Can't resolve 'node-uuid' in path\azure-deploy\lib. Điều này vẫn có thể? Tôi đã cấu hình bước 5 trong app.modulevà tôi không chắc chắn rằng mình đã thực hiện đúng bước 3 và 4. Bạn có thể làm rõ những điều đó?
Nếu bạn kiểm tra ứng dụng như tôi trên localhost hoặc Bạn sẽ gặp một số vấn đề với trang trắng trống, tôi sử dụng điều này:
ng build --prod --build-optimizer --base-href="http://127.0.0.1/my-app/"Giải trình:
ng buildXây dựng ứng dụng nhưng trong mã có nhiều khoảng trắng, tab và các thứ khác làm cho mã có thể được đọc bởi con người. Đối với máy chủ, nó không quan trọng như thế nào mã. Đây là lý do tại sao tôi sử dụng:
ng build --prod --build-optimizer Điều này làm cho mã ra cho sản xuất và giảm kích thước [ --build-optimizer] cho phép giảm thêm mã].
Vì vậy, cuối cùng tôi thêm --base-href="http://127.0.0.1/my-app/"vào để hiển thị ứng dụng trong đó 'khung chính' [nói một cách đơn giản]. Với nó Bạn có thể có nhiều ứng dụng góc cạnh trong bất kỳ thư mục nào.
Để triển khai ứng dụng Angular2 của bạn lên máy chủ sản xuất, trước hết, hãy đảm bảo ứng dụng của bạn chạy cục bộ trên máy của bạn.
Ứng dụng Angular2 cũng có thể được triển khai như một ứng dụng nút.
Vì vậy, hãy tạo một tệp điểm nhập nút server.js / app.js (ví dụ của tôi sử dụng express)
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'));
});Đồng thời thêm express dưới dạng phụ thuộc trong tệp pack.json của bạn.
Sau đó triển khai nó trên môi trường ưa thích của bạn.
Tôi đã lập một blog nhỏ để triển khai trên IIS. theo liên kết
Để triển khai ứng dụng của bạn trong IIS, hãy làm theo các bước dưới đây.
Bước 1: Xây dựng ứng dụng Angular của bạn bằng lệnh ng build --prod
Bước 2: Sau khi xây dựng tất cả các tệp được lưu trữ trong thư mục dist của đường dẫn ứng dụng của bạn.
Bước 3: Tạo thư mục trong C: \ inetpub \ wwwroot theo tên QRCode .
Bước 4: Sao chép nội dung của thư mục dist vào thư mục C: \ inetpub \ wwwroot \ QRCode .
Bước 5: Mở IIS Manager bằng lệnh (Window + R) và nhập inetmgr bấm OK.
Bước 6: Nhấp chuột phải vào Trang web mặc định và nhấp vào Thêm ứng dụng .
Bước 7: Nhập tên bí danh 'QRCode' và đặt đường dẫn vật lý thành C: \ inetpub \ wwwroot \ QRCode .
Bước 8: Mở tệp index.html và tìm dòng href = "\" và xóa '\'.
Bước 9: Bây giờ duyệt ứng dụng trong bất kỳ trình duyệt nào.
Bạn cũng có thể theo dõi video để hiểu rõ hơn.
Url video: https://youtu.be/F8EI-8XUNZc
Nếu bạn triển khai ứng dụng của mình trong Apache (máy chủ Linux) để bạn có thể làm theo các bước sau: Thực hiện theo các bước sau :
Bước 1 :
ng build --prod --env=prod
Bước 2 . (Sao chép dist vào máy chủ) sau đó tạo thư mục dist, sao chép thư mục dist và triển khai nó trong thư mục gốc của máy chủ.
Bước 3 . Tạo .htaccesstập tin trong thư mục gốc và dán nó vào.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>Bạn có được gói sản xuất tải nhỏ nhất và nhanh nhất bằng cách biên dịch với trình biên dịch Ahead of Time và lắc cây / thu nhỏ với rollup như trong sách hướng dẫn AOT góc cạnh ở đây: https://angular.io/docs/ts/latest/cookbook /aot-compiler.html
Điều này cũng có sẵn với Angular-CLI như đã nói trong các câu trả lời trước, nhưng nếu bạn chưa tạo ứng dụng của mình bằng CLI, bạn nên theo dõi sách dạy nấu ăn.
Tôi cũng có một ví dụ hoạt động với các tài liệu và biểu đồ SVG (được hỗ trợ bởi Angular2) rằng nó bao gồm một gói được tạo bằng sách nấu ăn AOT. Bạn cũng tìm thấy tất cả các cấu hình và tập lệnh cần thiết để tạo gói. Kiểm tra nó ở đây: https://github.com/fintechneo/angular2-tem mẫu /
Tôi đã tạo một video nhanh chóng chứng minh sự khác biệt giữa số lượng tệp và kích thước của bản dựng AoT được biên dịch so với môi trường phát triển. Nó cho thấy dự án từ kho github ở trên. Bạn có thể thấy nó ở đây: https://youtu.be/ZoZDCgQwnmQ
"This cookbook describes how to radically improve performance by compiling Ahead of Time (AOT) during a build process."
Triển khai góc 2 trong các trang Github
Kiểm tra triển khai Angular2 Webpack trong ghpages
Trước tiên, hãy lấy tất cả các tệp có liên quan từ distthư mục của ứng dụng của bạn, đối với tôi đó là: + css tệp trong thư mục tài sản + main.bundle.js + polyfills.bundle.js + eller.bundle.js
Sau đó đẩy tập tin này trong repo mà bạn đã tạo.
1 - Nếu bạn muốn ứng dụng chạy trên thư mục gốc - hãy tạo một repo đặc biệt với tên [yourgithubusername] .github.io và đẩy các tệp này trong nhánh chính
2 - Trường hợp nếu bạn muốn tạo các trang này trong thư mục con hoặc trong một nhánh khác ngoài gốc, hãy tạo một nhánh gh-page và đẩy các tệp này trong nhánh đó.
Trong cả hai trường hợp, cách chúng ta truy cập các trang được triển khai này sẽ khác nhau.
Đối với trường hợp đầu tiên, nó sẽ là https: // [yourgithubusername] .github.io và đối với trường hợp thứ hai, nó sẽ là [yourgithubusername] .github.io / [Tên Repo] .
Nếu giả sử bạn muốn triển khai nó bằng trường hợp thứ hai, hãy đảm bảo thay đổi url cơ sở của tệp index.html trong dist vì tất cả ánh xạ tuyến phụ thuộc vào đường dẫn bạn đưa ra và nó phải được đặt thành [/ tên nhánh].
Liên kết đến trang này
https://rahulrsingh09.github.io/ Triển khai
Git Repo
Để nhanh chóng và rẻ tiền để lưu trữ một ứng dụng góc cạnh, tôi đã sử dụng lưu trữ Firbase. Nó miễn phí ở tầng thứ nhất và rất dễ triển khai các phiên bản mới bằng Firebase CLI. Bài viết này ở đây giải thích các bước cần thiết để triển khai ứng dụng 2 góc sản xuất của bạn lên Firebase: https://medium.com/codingthesmartway-com-blog/hosting-angular-2-appluggest-on-firebase-f194688c978d
Nói tóm lại, bạn chạy ng build --prodđể tạo một thư mục dist trong gói và đó là thư mục được triển khai cho Firebase Hosting.
Triển khai Angular 2 trong azure rất dễ dàng
Chạy ng build --prod , sẽ tạo một thư mục dist với mọi thứ được gói trong vài tệp bao gồm index.html.
Tạo một nhóm tài nguyên và một ứng dụng web bên trong nó.
Đặt các tập tin thư mục dist của bạn bằng FTP. Trong azure, nó sẽ tìm index.html để chạy ứng dụng.
Đó là nó. Ứng dụng của bạn đang chạy!
Kể từ năm 2017, cách tốt nhất là sử dụng angular-cli (v1.4.4) cho dự án góc của bạn.
ng build --prod --env=prod --aot --build-optimizer --output-hashing noneBạn không cần thêm - không rõ ràng khi được bật theo mặc định với --prod. Và việc sử dụng --output-băm là theo sở thích cá nhân của bạn về việc phá vỡ bộ đệm.
Bạn rõ ràng có thể thêm hỗ trợ CDN bằng cách thêm:
--deploy-url "https://<your-cdn-key>.cloudfront.net/"nếu bạn có kế hoạch sử dụng CDN để lưu trữ nhanh chóng đáng kể.
Với Angular CLI , bạn có thể sử dụng lệnh sau:
ng build --prodNó tạo ra một thư mục dist với tất cả những gì bạn cần để triển khai ứng dụng.
Nếu bạn không có thực hành với máy chủ web, tôi khuyên bạn nên sử dụng Angular to Cloud . Bạn chỉ cần nén thư mục dist dưới dạng tệp zip và tải nó lên nền tảng.
Tôi muốn nói rằng rất nhiều người có kinh nghiệm Web trước khi góc cạnh, đang sử dụng để triển khai các tạo phẩm web của họ trong một cuộc chiến (tức là jquery và html trong một dự án Java / Spring). Tôi đã kết thúc việc này để giải quyết vấn đề CORS, sau khi cố gắng tách các dự án REST và góc cạnh của tôi.
Giải pháp của tôi là di chuyển tất cả các nội dung góc (4), được tạo bằng CLI, từ ứng dụng của tôi sang MyJavaApplication / angular. Sau đó, tôi đã sửa đổi bản dựng Maven của mình để sử dụng maven-resource-plugin để di chuyển nội dung từ / angular / dist sang gốc phân phối của tôi (ví dụ: $ project.build.directory} / MyJavaApplication). Angular tải tài nguyên từ gốc của cuộc chiến theo mặc định.
Khi tôi bắt đầu thêm định tuyến vào dự án góc của mình, tôi đã sửa đổi thêm bản dựng maven để sao chép index.html từ / dist sang WEB-INF / ứng dụng. Và, đã thêm một bộ điều khiển Java chuyển hướng tất cả các lệnh gọi phần còn lại của máy chủ đến chỉ mục.
Chỉ cần theo liên kết dưới đây,
Thay đổi trang Index.html trang Tập tin đường dẫn Tập tin Thay đổi thành phần.html của bạn dẫn đến lỗi bạn không thể tìm thấy vị trí
https://angular.io/docs/ts/latest/guide/deployment.html#!#dev-deploy