一旦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>

其他回答

Angular 2在Github Pages中的部署

测试Angular2 Webpack在ghpages中的部署

首先从dist文件夹中获取所有相关文件,对我来说是: + CSS文件在资产文件夹 + main.bundle.js + polyfills.bundle.js + vendor.bundle.js

然后将这些文件推入您创建的repo中。

1 -如果你想让应用程序在根目录上运行-创建一个特殊的repo,名称为[yourgithubusername].github。IO并将这些文件推到主分支中

2——如果你想在子目录或根目录以外的不同分支中创建这些页面,创建一个分支gh-pages并将这些文件推到该分支中。

在这两种情况下,我们访问这些部署页面的方式将是不同的。

对于第一种情况,它将是https://[yourgithubusername].github.io,对于第二种情况,它将是[yourgithubusername].github。io /(回购的名字)。

如果你想使用第二种情况部署它,请确保在dist中更改index.html文件的基本url,因为所有的路由映射都依赖于你给出的路径,它应该设置为[/branchname]。

链接到本页

https://rahulrsingh09.github.io/Deployment

去回购

https://github.com/rahulrsingh09/Deployment

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

在Angular CLI中,你可以使用以下命令:

ng build --prod

它生成一个dist文件夹,其中包含部署应用程序所需的所有内容。

如果你没有使用web服务器的经验,我建议你使用Angular to Cloud。你只需要把dist文件夹压缩成zip文件,然后上传到平台上。

你其实是在同时回答两个问题。

第一个问题是如何托管应用程序。 正如@toskv提到的,这个问题太宽泛了,无法回答,取决于许多不同的事情。

第二个问题是如何准备应用程序的部署版本? 这里有几个选项:

Deploy as it is. Just that - no minification, concatenation, name mangling, etc. Transpile all your ts project copy all your resulting js/css/... sources + dependencies to the hosting server and you are good to go. Deploy using special bundling tools, like webpack or systemjs builder. They come with all the possibilities that are lacking in #1. You can pack all your app code into just a couple of js/css/... files that you reference in your HTML. systemjs builder even allows you to get rid of the need to include systemjs as part of your deployment package. You can use ng deploy as of Angular 8 to deploy your app from your CLI. ng deploy will need to be used in conjunction with your platform of choice (such as @angular/fire). You can check the official docs to see what works best for you here

是的,你很可能需要将systemjs和其他一些外部库部署到你的包中。是的,你可以将它们捆绑到你从HTML页面引用的几个js文件中。

你不需要从页面中引用所有已编译的js文件——systemjs作为模块加载器会处理这些。

我知道这听起来很模糊——为了帮助你开始第2点,这里有两个非常好的示例应用程序:

SystemJS构建器:angular2种子

安检检测器

我用永远:

使用Angular -cli到dist文件夹ng Build——prod——output-path ./dist来构建你的Angular应用 在你的Angular应用程序路径下创建server.js文件: Const express = require('express'); Const path = require('path'); Const app = express(); app.use(表达。Static (__dirname + '/dist')); App.get ('/*', function(req,res) { res.sendFile(路径。Join (__dirname + '/dist/index.html')); }); app.listen (80); 永远启动server.js

这是所有!您的应用程序应该正在运行!