一旦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>
其他回答
在azure中部署Angular 2很简单
运行ng build——prod,它将生成一个dist文件夹,其中所有内容都捆绑在几个文件中,包括index.html。 创建一个资源组和其中的web应用程序。 使用FTP放置dist文件夹文件。在azure中,它将寻找index.html来运行应用程序。
就是这样。你的应用程序正在运行!
要在IIS中部署应用程序,请遵循以下步骤。
第一步:使用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。
第八步:打开index.html文件,找到行href="\"并删除'\'。
步骤9:现在在任何浏览器中浏览应用程序。
你也可以跟着视频更好地理解。
视频网址:https://youtu.be/F8EI-8XUNZc
简单的答案。使用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与网站简介。 部署。 尝尝奶油。
你可以通过使用Ahead of Time编译器编译来获得最小和最快的加载产品包,并使用rollup来进行树摇/缩小,如angular AOT烹饪书中所示:https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
在之前的回答中说过,这也可以用Angular-CLI来实现,但如果你还没有使用CLI来制作你的应用,你应该按照食谱来做。
我还有一个材料和SVG图表的工作示例(由Angular2支持),它包括一个用AOT烹饪书创建的包。您还可以找到创建bundle所需的所有配置和脚本。点击这里查看:https://github.com/fintechneo/angular2-templates/
我制作了一个快速视频,演示了AoT编译构建与开发环境的文件数量和大小之间的区别。它显示了上面github存储库中的项目。你可以在这里看到:https://youtu.be/ZoZDCgQwnmQ