构建和发布

构建

当项目开发完毕，只需要运行一行命令就可以打包你的应用：

  1. npm run build

NG-ALAIN 本身是一个 Angular CLI 项目，因此也可以参照 Build 完成更复杂的构建需求。构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件，包含若干 *.js、*.css、index.html 等静态文件。

JavaScript heap out of memory

避免执行 ng build 时抛出 JavaScript heap out of memory：

  1. {
  2.   "scripts": {
  3.     "build": "node --max_old_space_size=5120 ./node_modules/@angular/cli/bin/ng build --prod"
  4.   }
  5. }

环境变量

当你需要区别开发和部署以及测试环境的时候，可以通过 src/environments 文件夹根据不同环境配置相应的参数，配置项同时也可以在应用当中直接调用它们。同时，还需要配置 angular.json 内的配置项，最后你可以透过命令改变环境配置。

分析构建文件体积

方法 1

如果构建文件很大，可以通过 analyze 命令构建并分析依赖模块的体积分布，从而优化你的代码。

  1. npm run analyze

受限于 #10589，需要安装全局 webpack-bundle-analyzer 包：

  1. npm i -g webpack-bundle-analyzer@latest
  2. cd dist/
  3. webpack-bundle-analyzer stats.json

构建和发布 - 图1

方法 2

使用以下命令打包：

  1. ng build --prod --sourcemaps

然后通过 source-map-explorer 帮你在生产环境构建之后探查 JavaScript 包，来分析每个模块所占的体积大小。

发布

对于发布来讲，只需要将最终生成的静态文件，也就是通常情况下 dist 文件夹的静态文件发布到你的 cdn 或者静态服务器即可，需要注意的是其中的 index.html 通常会是你后台服务的入口页面，在确定了 js 和 css 的静态之后可能需要改变页面的引入路径。

默认的静态资源引用路径直接指向 dist 文件夹发布所处应用的目录下，例如你将 dist 发布至 ng-alain.com 站点的根目录里则请求的网址是 //ng-alain.com/***.js、//ng-alain.com/***.css，若 dist 发布至某站点下某个目录如 v2 文件夹下，则请求的网址是 //ng-alain.com/v2/***.js、//ng-alain.com/v2/***.css。

如果你的静态资源是部署到其他域名（例如独立的 cdn 地址），你可以透过 -d 参数指定一个 cdn 地址。

  1. ng build --prod -d=//cdn.ng-alain.com/

这样生成的 index.html 内 *.js、*.css 会自动加上 //cdn.ng-alain.com/*.js。

路由策略

Angular 前端路由有两种不同策略 HashLocationStrategy 和 PathLocationStrategy。前者是以 # 后面的路径进行路由处理，通过 HTML5 History 进行前端路由管理，而后者则是类似页面访问路径并没有 #，通过服务端的配置，能够访问指定 URL 都定向到当前页面，从而能够进行前端路由管理。

如果你想采用 PathLocationStrategy 策略，则需要将 ./src/app/routes/routes.module.ts 的 RouterModule.forRoot(routes, { useHash: true }) 换成 RouterModule.forRoot(routes)。同时需要服务端做一个映射，比如：

express 的例子：

  1. app.use(express.static(path.join(__dirname, 'build')));
  3. app.get('/*', function (req, res) {
  4.   res.sendFile(path.join(__dirname, 'build', 'index.html'));
  5. });

egg 的例子：

  1. // controller
  2. exports.index = function* () {
  3.   yield this.render('App.jsx', {
  4.     context: {
  5.       user: this.session.user,
  6.     },
  7.   });
  8. };
  10. // router
  11. app.get('home', '/*', 'home.index');

有关更多 Angular 路由相当问题，请阅读官网。

Docker

NG-ALAIN 提供了一个基于 nginx WEB服务完整的构建Angular项目的镜像文件。其中 nginx 是采用 nginx:1.13.5-alpine 的镜像，基本上可以满足 NG-ALAIN 项目的良好运行环境，倘若有更多需求，你可以利用 docker run 轻易的指定 nginx.conf。

1、构建镜像

根据 Dockerfile 构建一个完整的 NG-ALAIN 所需要的运行环境的镜像。

  1. docker build -t ng-alain .

2、运行

基于compose（推荐）

  1. docker-compose up -d

其细节可以通过 docker-compose.yml 修改。

基于命令式

  1. docker run -d -p 80:80 --name alain ng-alain

最后你可以访问：http://localhost/

3、关于SSL

NG-ALAIN 提供的 Dockerfile 文件相对于比较简单，而实际项目中最常用的是对SSL的支持。

因此，默认情况下你可以将证书放置 _nginx/ssl 目录下，并开启 _nginx/default.conf 相关SSL配置项即可。

最后，增加 docker-compose.yml 的 ports 节点：

  1. - 443:443

容器部署

参考 Angular 容器部署。