一旦Angular应用进入生产阶段,你该如何部署它们呢?
到目前为止我看到的所有指南(甚至在angular.io上)都依赖于一个lite-server来服务和browserSync来反映变化——但是当你完成开发时,你如何发布应用程序呢?
我是否导入index.html页面上所有已编译的.js文件,还是使用gulp缩小它们?它们会起作用吗?在生产版本中,我是否需要SystemJS ?
一旦Angular应用进入生产阶段,你该如何部署它们呢?
到目前为止我看到的所有指南(甚至在angular.io上)都依赖于一个lite-server来服务和browserSync来反映变化——但是当你完成开发时,你如何发布应用程序呢?
我是否导入index.html页面上所有已编译的.js文件,还是使用gulp缩小它们?它们会起作用吗?在生产版本中,我是否需要SystemJS ?
当前回答
如果你在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>
其他回答
如果你像我一样在localhost上测试应用程序,或者你会有一些空白白页的问题,我使用这个:
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/"来显示应用程序在哪里是'主框架'[简单的话]。有了它,你甚至可以在任何文件夹中拥有多个angular应用。
简单的答案。使用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
希望这能有所帮助,希望我能在这周尝试一下。
在Azure上创建Web应用程序 在vs code中创建Angular 2应用。 Webpack到bundle.js。 下载Azure站点发布的概要文件xml 配置Azure-deploy using https://www.npmjs.com/package/azure-deploy与网站简介。 部署。 尝尝奶油。
为了将你的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部署的小博客。按照链接
我想说的是,很多在使用angular之前就有Web经验的人,都习惯于在战争中部署他们的Web构件(例如,在Java/Spring项目中部署jquery和html)。在试图将我的angular项目和REST项目分开后,我最终这样做是为了解决CORS问题。
我的解决方案是将所有用CLI生成的angular(4)内容从My -app移到MyJavaApplication/angular。然后我修改了我的Maven构建,使用Maven -resources-plugin将内容从/angular/dist移动到我的发行版的根目录(即$project.build.directory}/MyJavaApplication)。Angular默认从war的根目录加载资源。
当我开始在我的angular项目中添加路由时,我进一步修改了maven build,将index.html从/dist复制到WEB-INF/app。并且,添加了一个Java控制器,将所有服务器端rest调用重定向到索引。