你如何部署 Angular 应用程序？

Posted 2023-03-13

【中文标题】你如何部署 Angular 应用程序？

【英文标题】：How do you deploy Angular apps?

【发布时间】：2016-06-03 01:14:40

【问题描述】：

一旦 Angular 应用程序进入生产阶段，您将如何部署它们？

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

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

【参考方案1】：

您实际上是在将两个问题合二为一。

第一个是如何托管您的应用程序？。 正如@toskv 提到的那样，它的问题实在是太宽泛了，无法回答，并且取决于许多不同的事情。

第二个是如何准备应用程序的部署版本？。 你有几个选择：

按原样部署。就是这样 - 没有缩小、连接、名称修改等。转译所有 ts 项目，将所有生成的 js/css/... 源 + 依赖项复制到托管服务器，一切顺利。

使用特殊的捆绑工具进行部署，例如 webpack 或 systemjs builder。 它们具有 #1 中缺少的所有可能性。 您可以将所有应用程序代码打包到您在 HTML 中引用的几个 js/css/... 文件中。 systemjs builder 甚至允许您摆脱将 systemjs 作为部署包的一部分包含在内的需要。

从 Angular 8 开始，您可以使用 ng deploy 从 CLI 部署您的应用程序。 ng deploy 需要与您选择的平台一起使用（例如@angular/fire）。您可以查看官方文档以了解最适合您的方法here

是的，您很可能需要将systemjs 和一堆其他外部库作为您的包的一部分进行部署。是的，您将能够将它们捆绑到您从 HTML 页面引用的几个 js 文件中。

您不必从页面中引用所有已编译的 js 文件 - systemjs，因为模块加载器会处理这些问题。

我知道这听起来很混乱 - 为了帮助您开始使用 #2，这里有两个非常好的示例应用程序：

SystemJS 构建器：angular2 seed

WebPack：angular2 webpack starter

【讨论】：

我也会推荐 JSPM (jspm.io)：这里是信息 gist.github.com/robwormald/429e01c6d802767441ec，这里是种子项目 github.com/madhukard/angular2-jspm-seed

在 Angular2 进入 rc5 并即将发布 6 个月后，这个答案仍然相关，因为它引用了 angular2 种子项目。很棒的项目，很多贡献者！

我仍然对第 (1) 点感到困惑。 “按原样”部署是什么意思？这是否意味着也要复制所有 50000 个 node_module 文件？我正在尝试部署 HEROES 示例，但不确定要在索引文件中添加什么作为脚本源。

是的 - 这意味着复制所有依赖项，这也包括来自node_modules 的那些。注意 - 您应该只复制程序运行所需的依赖项。不要复制仅用于开发的 deps（例如 gulp/grunt/etc）。

是的。在该文件中 system.js 被指示从所有依赖项中加载什么以及从哪里加载。

【参考方案2】：

希望这可能会有所帮助，并希望我能在这周内尝试一下。

在 Azure 上创建 Web 应用 在 vs 代码中创建 Angular 2 应用。 Webpack 到 bundle.js。 下载 Azure 站点发布的配置文件 xml 配置 Azure 部署使用 https://www.npmjs.com/package/azure-deploy 带有网站简介。 部署。 尝尝奶油。

【讨论】：

请不要微软化这些东西，因为它只是与 Azure 兼容。这就像说如果您使用的是 Angular，那么您应该只能使用 Google Cloud 服务。

了解在 Azure 中部署了一个 npm 模块很有用。

@user6402762 +1 品尝奶油。

我正在尝试使用此答案部署我的 Angular 4 webapp，但我不断收到类似Can't resolve 'node-uuid' in path\azure-deploy\lib 的错误。这还有可能吗？我在app.module 中配置了第 5 步，但我不确定第 3 步和第 4 步是否正确。你能澄清一下吗？

【参考方案3】：

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

【讨论】：

你是怎么做到的？在 Angular 2 快速启动之后，我运行该命令而不是“npm start”，我得到“未找到 ng 命令”

@NateBunney 我是网络开发领域的新手。我很迷惑。 ng build 在 dist 文件夹中生成一堆文件。假设您使用 Spring Boot 作为 Web 服务器，您是否只是将这些文件复制粘贴到 Spring Boot 中的公共 web-inf 文件夹中？或者你需要一个 nodejs 服务器在 spring boot 之前为 ng2 dist 服务？

为什么文档中没有这个？这似乎是一个巨大的遗漏！

@user1460043，是的，但是有一个简单的解决方案可以解决您的问题。只需滚动一个新的 Angular CLI 项目并将您的 src 目录复制到 CLI 项目中。

只是更新Option "--prod" is deprecated: Use "--configuration production" instead.

【参考方案4】：

使用 Angular CLI 很容易。 Heroku 的一个例子：

创建 Heroku 帐户并安装 CLI

将 angular-cli dep 移动到 package.json 中的 dependencies（以便在推送到 Heroku 时安装它。

添加一个postinstall 脚本，该脚本将在代码推送到 Heroku 时运行 ng build。还要为将在以下步骤中创建的节点服务器添加启动命令。这会将应用的静态文件放在服务器上的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

这里有一个快速的writeup 我做了更详细的，包括如何强制请求使用 HTTPS 以及如何处理PathLocationStrategy :)

【讨论】：

在依赖项中添加 angular-cli 会增加 dist 的大小如何处理

我是否需要遵循相同的策略将其部署为前端？

【参考方案5】：

通过使用 Ahead of Time 编译器进行编译，您可以获得最小和最快的加载生产包，并使用汇总进行 tree-shake/minify，如 Angular AOT 食谱所示：https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

如之前的答案所述，Angular-CLI 也可以使用此功能，但如果您尚未使用 CLI 制作应用，则应遵循说明书。

我还有一个包含材料和 SVG 图表（由 Angular2 支持）的工作示例，其中包含使用 AOT 食谱创建的捆绑包。您还可以找到创建捆绑包所需的所有配置和脚本。在这里查看：https://github.com/fintechneo/angular2-templates/

我制作了一个简短的视频，展示了 AoT 编译构建与开发环境的文件数量和大小之间的差异。它显示了上面 github 存储库中的项目。你可以在这里看到它：https://youtu.be/ZoZDCgQwnmQ

【讨论】：

感谢您参考文档并提及 AOT 编译。价值听起来很真实，"This cookbook describes how to radically improve performance by compiling Ahead of Time (AOT) during a build process."

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

太棒了！感谢彼得如此乐于助人！

【参考方案6】：

为了将您的 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 上进行部署。关注link

【参考方案7】：

点击下面的链接，

更改您的 Index.html 页面脚本文件路径 更改您的 component.html 路径，以防出现找不到位置的错误

https://angular.io/docs/ts/latest/guide/deployment.html#!#dev-deploy

【参考方案8】：

在 Github 页面中部署 Angular 2

在 ghpages 中测试 Angular2 Webpack 的部署

首先从应用程序的dist 文件夹中获取所有相关文件，对我来说是： +资产文件夹中的css文件 + main.bundle.js + polyfills.bundle.js + vendor.bundle.js

然后将此文件推送到您创建的存储库中。

1 -- 如果您希望应用程序在根目录上运行 - 创建一个名为 [yourgithubusername].github.io 的特殊 repo 并将这些文件推送到 master 分支中

2 -- 如果您想在子目录或根以外的其他分支中创建这些页面，请创建一个分支 gh-pages 并将这些文件推送到该分支中.

在这两种情况下，我们访问这些已部署页面的方式会有所不同。

对于第一种情况，它将是 https://[yourgithubusername].github.io，对于第二种情况，它将是 [yourgithubusername].github.io/[Repo name ].

如果您想使用第二种情况部署它，请确保更改 dist 中 index.html 文件的基本 url，因为所有路由映射都取决于您提供的路径，并且应该设置为 [/branchname ].

链接到这个页面

https://rahulrsingh09.github.io/Deployment

Git 仓库

https://github.com/rahulrsingh09/Deployment

【参考方案9】：

为了以一种快速且廉价的方式来托管 Angular 应用程序，我一直在使用 Firbase 托管。它在第一层是免费的，并且非常容易使用 Firebase CLI 部署新版本。本文解释了将生产 Angular 2 应用程序部署到 Firebase 的必要步骤：https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d

简而言之，您运行 ng build --prod 在包中创建一个 dist 文件夹，该文件夹将部署到 Firebase 托管。

【讨论】：

谢谢 - 这是我能找到的最简单的方法。

【参考方案10】：

在 Azure 中部署 Angular 2 很容易

运行 ng build --prod ，它将生成一个 dist 文件夹，其中所有内容都捆绑在几个文件中，包括 index.html。

在其中创建一个资源组和一个 Web 应用程序。

使用 FTP 放置您的 dist 文件夹文件。在 azure 中，它会查找 index.html 来运行应用程序。

就是这样。您的应用正在运行！

【讨论】：

仅当您使用 angular-cli no 启动项目时？

不是这样的。如果您尚未使用 angular-cli 启动 angular2 项目，则可以构建项目以进行生产。只有您需要在构建时在您的机器上安装 angular-cli。使用 npm install -g @angular/cli 全局安装 angular-cli。

【参考方案11】：

截至 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 进行托管，这相当快。

【参考方案12】：

使用Angular CLI，您可以使用以下命令：

ng build --prod

它会生成一个 dist 文件夹，其中包含部署应用程序所需的一切。

如果您没有使用 Web 服务器的经验，我建议您使用 Angular to Cloud。您只需要将 dist 文件夹压缩为 zip 文件并上传到平台即可。

【参考方案13】：

我想说很多在使用 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 默认从战争的根目录加载资源。

当我开始为我的 Angular 项目添加路由时，我进一步修改了 maven build 以将 index.html 从 /dist 复制到 WEB-INF/app。并且，添加了一个 Java 控制器，将所有服务器端的 rest 调用重定向到 index。

【参考方案14】：

要在 IIS 中部署您的应用程序，请按照以下步骤操作。

第 1 步：使用命令 ng build --prod

构建您的 Angular 应用程序

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

第 3 步：在 C:\inetpub\wwwroot 中创建一个文件夹，名称为 QRCode。

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

第 5 步：使用命令 (Window + R) 打开 IIS 管理器并输入 inetmgr 点击确定。

第 6 步：右键单击默认网站，然后单击 添加应用程序。

第七步：输入别名'QRCode'，设置物理路径为C:\inetpub\wwwroot\QRCode。

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

第 9 步：现在在任何浏览器中浏览应用程序。

您也可以关注视频以获得更好的理解。

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

【参考方案15】：

如果您在 Apache（Linux 服务器）中部署您的应用程序，那么您可以按照以下步骤操作： 按照以下步骤操作：

第 1 步： ng build --prod --env=prod

第 2 步。 （复制 dist 到服务器） 然后创建 dist 文件夹，复制 dist 文件夹并将其部署在服务器的根目录中。

第 3 步。在根文件夹中创建.htaccess 文件并将其粘贴到.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>

【讨论】：

什么样的服务器？应该是 nginx 服务器或包含 dist 的服务器

可能是 Tomcat，你的选择。我会说使用你熟悉的东西。

任何 Apache linux 或其他服务器，使用 .htaccess 规则。

@TamaghnaBanerjee，检查服务器重写模式是否启用？

【参考方案16】：

我用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

就是这样！您的应用程序应该正在运行！

【参考方案17】：

如果您像我一样在 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 应用程序。

【参考方案18】：

您可以使用

构建您的生产应用程序

ng build --configuration=production

然后您可以检查您 angular.json 的键 outputPath ，它通常具有值 dist 但也可能不同。

"build": 
          "options": 
            "outputPath": "dist"

使用dist 作为值，构建的输出文件将放置在文件夹/dist 下

在构建您的 Angular 项目时，将由 仅来自静态文件 Html、javascript、Css 和图像或其他资产。因此，您需要的只是一个可以为客户端提供静态文件的 Web 服务器。就那么简单。可以是 nginx、tomcat 任何可以将这些静态文件提供给客户端的东西。这在angular doc中也有说明

因为这些文件是静态的，您可以将它们托管在任何网络服务器上 能够提供文件

您在 outputPath 下构建的项目将已经包含一个 index.html，它将自动包含所有必要的导入，因此当 index.html 交付给客户端时，浏览器还将获取所有其他必要的文件。 index.html 中已包含必要的信息。

问题的第二部分

我是否使用 gulp 缩小它们

官方方式

angular.json 将包含每个环境的特定配置，其中之一将是 optimization

optimization 可以是布尔值（真、假）

"configurations": 
            "production": 
              "optimization": true  --> will mean true for all properties of the next custom object

optimization也可以是自定义对象

 "configurations": 
    "optimization": 
      "scripts": true,
      "styles": 
        "minify": true,
        "inlineCritical": true
      ,
      "fonts": true
    

切换到"scripts": false 将导致.js 文件不会被缩小

也切换到样式 -> "minify": false 也将避免样式缩小。

无论您在 angular.json 中有什么配置进行优化，如果您在构建期间提供参数，它都可以被覆盖。因此，通过执行ng build --configuration=production --optimization=false，它将构建您的生产项目并将optimization 对象的值应用于false 的每个属性，这实际上将禁用所有内容的缩小。