你如何部署Angular应用程序？

Question

你如何部署Angular应用程序？

typescriptangularproductionsystemjs

226

Angular应用程序在达到生产阶段后，如何进行部署？

到目前为止，我看到的所有指南（甚至在angular.io上）都依靠lite-server提供服务和browserSync反映更改 - 但是当您完成开发之后，如何发布应用程序？

我是否应该在index.html页面上导入所有编译好的.js文件，还是使用gulp进行缩小？它们会工作吗？在生产版本中是否需要SystemJS？

- Joseph Girgis

19个回答

96

您实际上正在触及两个问题。

第一个问题是如何托管您的应用程序？
正如@toskv所提到的，这是一个非常广泛的问题，需要考虑许多不同的事情。

第二个问题是如何准备应用程序的部署版本？
您有几个选项：

按原样部署。只要这样 - 没有缩小、连接、命名混淆等。将所有ts项目转译，复制所有生成的js/css/...源代码 + 依赖项到托管服务器，就可以开始了。
使用特殊的打包工具，如webpack或systemjs构建器。
它们具备#1中缺乏的所有可能性。
您可以将所有应用程序代码打包成只有几个js/css/...文件，在HTML中引用这些文件。 systemjs构建器甚至允许您摆脱将systemjs作为部署包的一部分的需要。
您可以使用自Angular 8以来的ng deploy从CLI部署您的应用程序。 ng deploy将需要与您选择的平台（例如@angular/fire）配合使用。您可以查看官方文档以了解最适合您的内容这里

是的，您很可能需要部署systemjs和许多其他外部库作为包的一部分。是的，您将能够将它们捆绑成只有几个js文件，并从HTML页面引用它们。

您不必从页面引用所有编译好的js文件 - systemjs作为一个模块加载器会处理这个问题。

我知道听起来很复杂 - 为了帮助您开始进行#2，这里提供两个非常好的示例应用程序：

SystemJS构建器: Angular2种子

WebPack: Angular2 WebPack起始器

- Amid

1

我还建议使用JSPM（http://jspm.io/）：这里有信息https://gist.github.com/robwormald/429e01c6d802767441ec，种子项目在这里https://github.com/madhukard/angular2-jspm-seed。 - Harry

4

我对第一点仍然非常困惑。"AS IS" 部署是什么意思？这是否意味着也要复制所有的 50000 个 node_module 文件？我正试图部署 HEROES 示例，不确定在 index 文件中应该添加什么作为脚本来源。 - Oliver Watkins

1

是的——它意味着复制所有依赖项，包括 node_modules 中的依赖项。请注意——您应该仅复制程序运行所需的依赖项。不要复制仅用于开发的依赖项（例如 gulp/grunt 等）。 - Amid

1

是的。在那个文件中，system.js指示了你的所有依赖项是什么以及从哪里加载它们。 - Amid

您的第一点和第二点存在冲突。Angular CLI创建了一个单文件捆绑包。其次，懒加载由于使用Webpack（CLI使用Webpack）打包为单个捆绑JS文件而无法实现。如果我不使用供应商捆绑选项，则仍将整个应用程序组合为一个单个应用程序文件。Angular2在构建生产方面有时候会有些问题。 - Gary

显示剩余6条评论

22

使用Angular CLI很容易。以下是Heroku的示例：

创建Heroku帐户并安装CLI。
将angular-cli依赖项移动到package.json中的dependencies（这样当您推送到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。如果需要，请查看此文。

- cienki

将angular-cli添加到依赖项中会增加dist文件夹的大小，如何处理？ - Janak Bhatta

我需要遵循相同的策略来部署它作为前端吗？ - Lord-shiv

11

我使用 forever：

使用 angular-cli 构建你的 Angular 应用到 dist 文件夹中 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

就这些！您的应用程序现在应该正在运行中！

- Yakir Tsuberi

7

为了将您的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上部署提供了一个小博客。请点击链接

- Oduwole Oluwasegun

6

如果你和我一样在本地测试应用程序，或者你遇到了空白白屏幕的问题，我会使用以下方法：

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应用程序。

- WatchTanis

6

希望这可以帮到您，也希望我能在本周尝试这个。

在Azure中创建Web应用程序。
在vs code中创建Angular 2应用程序。
使用Webpack打包成bundle.js文件。
下载Azure网站发布配置文件xml。
使用https://www.npmjs.com/package/azure-deploy和网站配置文件配置Azure-deploy。
部署。
品尝奶油。

- Falcon78

62

请不要微软化这些事情，因为这只与Azure兼容。这就像说如果你使用Angular，你只能使用Google Cloud服务。 - ozanmuyes

2

有用的是要知道有一个npm模块可以在Azure中部署。 - Anthony Brenelière

1

@user6402762 Taste the cream 真不错，点个赞。 - Leonardo Wildt

我正在尝试使用这个答案部署我的Angular 4 Web应用程序，但我一直收到像Can't resolve 'node-uuid' in path\azure-deploy\lib这样的错误。这仍然可能吗？我已经在app.module中配置了第5步，但我不确定我是否正确执行了第3和第4步。您能澄清一下吗？ - Wouter Vanherck

5

在IIS中部署你的应用程序，按以下步骤操作：

步骤1：使用命令ng build --prod构建你的Angular应用程序。

步骤2：构建后，所有文件存储在应用程序路径的dist文件夹中。

步骤3：在C:\inetpub\wwwroot文件夹下创建一个名为QRCode的文件夹。

步骤4：将dist文件夹的内容复制到C:\inetpub\wwwroot\QRCode文件夹中。

步骤5：使用命令(Window + R)打开IIS Manager，并输入inetmgr，点击OK。

步骤6：右键单击“Default Web Site”，然后单击Add Application。

步骤7：输入别名'QRCode'，并将物理路径设置为C:\inetpub\wwwroot\QRCode。

步骤8：打开index.html文件，找到href="\"行，并删除'\'。

步骤9：现在可以在任何浏览器中浏览应用程序了。

你也可以观看视频以获得更好的理解。

视频网址：https://youtu.be/F8EI-8XUNZc

- Avadhesh Maurya

4

如果你想在 Apache (Linux 服务器) 上部署你的应用程序，可以按照以下步骤进行操作： 步骤 1： 输入以下命令：ng build --prod --env=prod 步骤 2： 复制 dist 文件夹到服务器，并将其部署到服务器的根目录中。 步骤 3： 在根目录中创建 .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>

- Sumit Jaiswal

什么样的服务器？应该是一个Nginx服务器还是包含dist的其他服务器？ - famas23

可以使用Tomcat，这取决于你自己。我会建议使用你熟悉的。 - Wallace Howery

任何使用 .htaccess 规则的 Apache Linux 或其他服务器。 - Sumit Jaiswal

@TamaghnaBanerjee，请检查服务器重写模式是否已启用？ - Sumit Jaiswal

3

通过使用Ahead of Time编译器进行编译，并像angular AOT cookbook中所示的那样使用rollup进行树摇和缩小，您可以获得最小且加载最快的生产包：https://angular.io/docs/ts/latest/cookbook/aot-compiler.html。如先前答案中所述，这也可在Angular-CLI中使用，但如果您尚未使用CLI创建应用程序，则应遵循该食谱。

我还有一个工作示例，其中包括使用AOT cookbook创建的包的材料和SVG图表（由Angular2支持）。您还可以找到创建包所需的所有配置和脚本。在此处查看：https://github.com/fintechneo/angular2-templates/ 我制作了一个快速视频，演示了AoT编译构建与开发环境文件数量和大小之间的差异。它显示来自上述GitHub存储库的项目。您可以在此处查看：https://youtu.be/ZoZDCgQwnmQ

- Peter Salomonsen

感谢提供文档参考，并提到AOT编译。这个价值听起来很实际，"该食谱描述了如何通过在构建过程中编译Ahead of Time（AOT）来彻底改善性能。" - aero

1

感谢您的反馈 - 如果您还没有找到时间自己测试AoT编译，我已经添加了一个视频，展示了文件数量和大小的差异（使用答案中提到的github项目）。 - Peter Salomonsen

太棒了！感谢你这么有帮助，彼得！ - aero

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nate Bunney · Accepted Answer

简单回答。使用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