Jos*_*gis 182 production typescript systemjs angular
一旦Angular应用程序进入生产阶段,您如何部署它们？
到目前为止我所见过的所有指南(甚至在angular.io上)都指望服务器和browserSync的lite服务器反映变化 - 但是当你完成开发时,你如何发布应用程序？
我是否导入页面.js上的所有已编译文件index.html或使用gulp缩小它们？他们会工作吗？在生产版本中我是否完全需要SystemJS？
Ami*_*mid 89
你实际上在这里触及两个问题.第一个是如何托管您的应用程序.正如@toskv所提到的那样,它的答案确实过于宽泛,取决于许多不同的事情.第二个更具体 - 您如何准备应用程序的部署版本.你有几个选择:
是的,您很可能需要将systemjs和一堆其他外部库作为软件包的一部分进行部署.是的,您将能够将它们捆绑到您从html页面引用的几个js文件中.您不必从页面引用所有已编译的js文件 - 作为模块加载器的systemjs将负责这一点.
我知道这听起来很混乱 - 帮助你开始使用#2这里有两个非常好的示例应用程序:
SystemJS构建器:angular2种子
WebPack:angular2 webpack启动器
看看他们是如何做到的 - 希望这有助于您找到捆绑应用程序的方式.
Nat*_*ney 87
简单回答.使用Angular CLI并发出
ng build
命令在项目的根目录中.该站点将在dist目录中创建,您可以将其部署到任何Web服务器.
这将构建为测试,如果您在应用程序中有生产设置,您应该使用
ng build --prod
这将在dist目录中构建项目,并且可以将其推送到服务器.
自从我第一次发布这个答案以来发生了很多事情.CLI最终处于1.0.0,因此按照本指南进行升级,您的项目应该在您尝试构建之前进行. https://github.com/angular/angular-cli/wiki/stories-rc-update
cie*_*nki 21
使用Angular CLI很容易.Heroku的一个例子:
创建一个Heroku帐户并安装CLI
将angular-clidep 移动到dependenciesin package.json(以便在推送到Heroku时安装它.
添加postinstall将ng build在代码推送到Heroku时运行的脚本.还要为将在以下步骤中创建的节点服务器添加启动命令.这会将应用程序的静态文件dist放在服务器上的目录中,然后启动应用程序.
"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
这里有一个快速的书面记录我这样做,有更多详细信息,包括如何强制要求使用HTTPS,以及如何处理PathLocationStrategy:)
小智 6
希望这可能会有所帮助,希望我能在本周试一试.
我永远使用：
ng build --prod --output-path ./dist在Angular应用程序路径中创建server.js文件：
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);
永远开始 forever start server.js
就这样！您的应用程序应该正在运行！
如果您在本地主机上测试像我这样的应用程序，或者您会遇到空白页面的一些问题，我会使用它：
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 应用程序。
为了首先将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'));
});
还可以在package.json文件中添加express作为依赖项。
然后将其部署在您的首选环境中。
我整理了一个小博客，以便在IIS上进行部署。跟随链接
小智 5
要在 IIS 中部署您的应用程序，请按照以下步骤操作。
第 1 步：使用命令ng build --prod构建您的 Angular 应用程序
第 2 步：构建完成后，所有文件都存储在应用程序路径的 dist 文件夹中。
第 3 步：在C:\inetpub\wwwroot 中创建一个名为QRCode的文件夹。
第四步：将dist文件夹的内容复制到C:\inetpub\wwwroot\QRCode文件夹。
步骤 5：使用命令（Window + R）打开 IIS 管理器并键入inetmgr单击确定。
第 6 步：右键单击“默认网站”，然后单击“添加应用程序”。
步骤 7：输入别名“QRCode”并将物理路径设置为C:\inetpub\wwwroot\QRCode。
第 8 步：打开index.html文件，找到href="\" 行并删除 '\'。
第 9 步：现在在任何浏览器中浏览应用程序。
您也可以观看视频以获得更好的理解。
视频网址：https : //youtu.be/F8EI-8XUNZc
| 归档时间： |
|
| 查看次数： |
141452 次 |
| 最近记录： |