一旦Angular应用进入生产阶段,你该如何部署它们呢?
到目前为止我看到的所有指南(甚至在angular.io上)都依赖于一个lite-server来服务和browserSync来反映变化——但是当你完成开发时,你如何发布应用程序呢?
我是否导入index.html页面上所有已编译的.js文件,还是使用gulp缩小它们?它们会起作用吗?在生产版本中,我是否需要SystemJS ?
一旦Angular应用进入生产阶段,你该如何部署它们呢?
到目前为止我看到的所有指南(甚至在angular.io上)都依赖于一个lite-server来服务和browserSync来反映变化——但是当你完成开发时,你如何发布应用程序呢?
我是否导入index.html页面上所有已编译的.js文件,还是使用gulp缩小它们?它们会起作用吗?在生产版本中,我是否需要SystemJS ?
当前回答
在azure中部署Angular 2很简单
运行ng build——prod,它将生成一个dist文件夹,其中所有内容都捆绑在几个文件中,包括index.html。 创建一个资源组和其中的web应用程序。 使用FTP放置dist文件夹文件。在azure中,它将寻找index.html来运行应用程序。
就是这样。你的应用程序正在运行!
其他回答
截至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进行托管,这是相当快的。
如果你在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>
使用Angular CLI,这很简单。以Heroku为例:
创建Heroku帐号并安装CLI 移动angular-cli dep到package中的依赖项。json(这样当你推送到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:)
如果你像我一样在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应用。
希望这能有所帮助,希望我能在这周尝试一下。
在Azure上创建Web应用程序 在vs code中创建Angular 2应用。 Webpack到bundle.js。 下载Azure站点发布的概要文件xml 配置Azure-deploy using https://www.npmjs.com/package/azure-deploy与网站简介。 部署。 尝尝奶油。