一旦Angular应用进入生产阶段,你该如何部署它们呢?
到目前为止我看到的所有指南(甚至在angular.io上)都依赖于一个lite-server来服务和browserSync来反映变化——但是当你完成开发时,你如何发布应用程序呢?
我是否导入index.html页面上所有已编译的.js文件,还是使用gulp缩小它们?它们会起作用吗?在生产版本中,我是否需要SystemJS ?
一旦Angular应用进入生产阶段,你该如何部署它们呢?
到目前为止我看到的所有指南(甚至在angular.io上)都依赖于一个lite-server来服务和browserSync来反映变化——但是当你完成开发时,你如何发布应用程序呢?
我是否导入index.html页面上所有已编译的.js文件,还是使用gulp缩小它们?它们会起作用吗?在生产版本中,我是否需要SystemJS ?
当前回答
截至2017年,最好的方法是在你的angular项目中使用angular-cli (v1.4.4)。
ng build --prod --env=prod --aot --build-optimizer --output-hashing none
你不需要显式地添加——aot,因为它在默认情况下是打开的——prod。-output-hashing的使用取决于你对缓存爆破的个人偏好。
您可以通过添加以下内容显式添加CDN支持:
--deploy-url "https://<your-cdn-key>.cloudfront.net/"
如果你计划使用CDN进行托管,这是相当快的。
其他回答
为了将你的Angular2应用部署到生产服务器上,首先要确保你的应用在你的机器上本地运行。
Angular2应用也可以部署为节点应用。
因此,创建一个节点入口点文件server.js/app.js(我的例子使用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'));
});
还要在包中添加express作为依赖项。json文件。
然后将其部署到您喜欢的环境中。
我已经整理了一个关于IIS部署的小博客。按照链接
如果你在Apache (Linux服务器)上部署你的应用程序,那么你可以遵循以下步骤: 请遵循以下步骤:
步骤1: Ng build——prod——env=prod
步骤2。(复制区域到服务器) 然后创建dist文件夹,复制dist文件夹并部署到服务器根目录。
步骤3。在根文件夹中创建。htaccess文件,并将其粘贴到。htaccess . conf文件中
<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
命令在项目的根目录下。站点将在dist目录中创建,您可以将其部署到任何web服务器。
这将用于测试,如果你在你的应用程序中有生产设置,你应该使用
ng build --configuration production
这将在dist目录中构建项目,并且可以将其推送到服务器。
自从我第一次发布这个答案以来,发生了很多事情。CLI终于在1.0.0,所以按照这个指南去升级你的项目应该在你尝试构建之前发生。https://github.com/angular/angular-cli/wiki/stories-rc-update
您可以构建用于生产的应用程序
ng build --configuration=production
然后你可以检查你的角度。它的值通常是dist,但也可以是不同的。
"build": {
"options": {
"outputPath": "dist"
使用dist作为值,生成的输出文件将放在/dist文件夹下
在构建angular项目时,你的项目将只由静态文件Html、Javascript、Css和图像或其他资产组成。正因为如此,你所需要的只是一个可以向客户端提供静态文件的web服务器。就这么简单。可以是nginx, tomcat,任何可以将这些静态文件提供给客户端的东西。这在angular的文档中也有说明
因为这些文件是静态的,你可以把它们托管在任何web服务器上 具备文件服务能力
你在outputPath下构建的项目已经包含了一个index.html,它将自动导入所有必要的文件,所以当index.html被传递给客户端时,浏览器也将获取所有其他必要的文件。必要的信息已经包含在index.html中。
你的第二个问题
我用gulp缩小它们吗
官方的方式
角。Json将包含每个环境的特定配置,其中之一将是优化
优化可以是布尔值(true, false)
"configurations": {
"production": {
"optimization": true --> will mean true for all properties of the next custom object
优化也可以是一个自定义对象
"configurations": {
"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": true
},
"fonts": true
}
切换到"scripts": false将导致.js文件不会被缩小
同时切换到样式-> "minify": false也将避免样式缩小。
不管角的构型是什么。Json进行优化,它可以被覆盖,如果你在构建过程中提供一个参数。因此,通过执行ng build——configuration=production——optimization=false,它将构建用于生产的项目,并将值false应用到优化对象的每个属性,这实际上将禁用所有的最小化。
使用Angular CLI,这很简单。以Heroku为例:
创建Heroku帐号并安装CLI 移动angular-cli dep到package中的依赖项。json(这样当你推送到Heroku时它就会被安装。 添加一个postinstall脚本,当代码被推送到Heroku时将运行ng build。还要为将在下面的步骤中创建的Node服务器添加启动命令。这将把应用程序的静态文件放在服务器上的dist目录中,然后启动应用程序。
"scripts": {
// ...
"start": "node server.js",
"postinstall": "ng build --aot -prod"
}
创建一个Express服务器来服务应用程序。
// 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远程和推动部署应用程序。
heroku create
git add .
git commit -m "first deploy"
git push heroku master
下面是我做的一个快速的书写,有更多的细节,包括如何强制请求使用HTTPS,以及如何处理PathLocationStrategy:)