Angular 发布应用

当你准备把 Angular 应用部署到远程服务器上时，有很多可选的部署方式。

最简单的部署选项

在完整部署应用之前，你可以先临时用一种技术来测试流程、构建配置和部署行为

• 从磁盘构建和提供服务
  在开发过程中，你通常会使用 ng serve 命令来借助 webpack-dev-server 在本地内存中构建、监控和提供服务。但是，当你打算部署它时，就必须使用 ng build 命令来构建应用并在其它地方部署这些构建成果。
  ng build 和 ng serve 在构建项目之前都会清除输出文件夹，但只有 ng build 命令会把生成的构建成果写入输出输出文件夹中。

默认情况下，输出目录是 dist/project-name/。要输出到其它文件夹，就要修改 angular.json 中的 outputPath。

当开发临近收尾时，让本地 Web 服务器使用输出文件夹中的内容提供服务可以让你更好地了解当应用部署到远程服务器时的行为。你需要用两个终端才能体验到实时刷新的特性。

• 在第一个终端上，在监控（watch）模式下执行 ng build 命令把该应用编译进 dist 文件夹。

   ng build --watch

与 ng serve 命令一样，当源文件发生变化时，就会重新生成输出文件。

• 在第二个终端上，安装一个 Web 服务器（比如 lite-server ），然后使用输出文件夹中的内容运行它。例如：

lite-server --baseDir="dist"

每当输出了新文件时，服务器就会自动刷新你的浏览器。

该方法只能用于开发和测试，在部署应用时，它不受支持，也不是安全的方式。

• 简化的部署方式
  最简化的部署方式就是为开发环境构建，并把其输出复制到 Web 服务器上。

  1. 使用开发环境进行构建

   ng build --prod
  

  2. 把输出目录（默认为 dist/）下的每个文件都复制到到服务器上的某个目录下。

  3. 配置服务器，让缺失的文件都重定向到 index.html 上。 欲知详情，参见稍后的服务端重定向部分。

这是对应用进行生产环境部署的最简方式。

• 发布到 GitHub pages（页面服务）

另一种发布 Angular 应用的简单途径是使用 GitHub Pages。

1. 你需要创建一个 GitHub 账号（如果没有的话），然后为你的项目创建一个仓库。记下 GitHub 中的用户名和项目名。

2. 使用 Angular CLI 命令 ng build 来构建这个 GitHub 项目，选项如下：

   ng build --prod --output-path docs --base-href //

3. 当构建完成时，把 docs/index.html 复制为 docs/404.html。

4. 提交你的更改，并推送。

5. 在 GitHub 的项目页中，把该项目配置为从 docs 目录下发布。

你可以到 https://<user_name>.github.io/<project_name>/ 中查看部署好的页面。

参见 angular-cli-ghpages，这个包用到了全部这些特性，还提供了一些额外功能。