文章目录

1. 概要
2. 编译打包
- 2.1. 基本打包命令
- 2.2. 打包部署到二级目录
3. Angular站点的发布
- 3.1. web服务器发布
- 3.2. 使用docker发布
4. 总结

环境:

Angular CLI: 11.0.6

Angular: 11.0.7

Node: 12.18.3

npm : 6.14.6

IDE: Visual Studio Code

1. 概要

当我们完成angular的开发后，如何部署到服务器呢？

2. 编译打包

2.1. 基本打包命令

基于Angular CLI生成的Angular项目，默认会有2个环境配置文件

└──myProject/src/environments/└──environment.ts└──environment.prod.ts

environment.ts: 针对开发环境使用的环境文件
environment.prod.ts: 生产环境编译时，将替换原有的environment.ts，然后再打包。（根目录下的angular.json定义了这个默认行为，有需要，可以进行修改）

AngularCLI刚刚生成2个文件后，如果打开比较2个文件的区别，可以看到开发环境使用的environment.ts文件中，有这么一句production: false。因为，针对生产环境，angular在编译时需要核心考虑效率等问题，而开发环境，要考虑方便开发者进行调试，侧重点不同。

那么针对生产环境如何编译呢？Angular CLI同样提供了命令,

ng build --prod

其中，参数--prod 即告诉编译环境，编译为生产环境包。同样，angular.json中定义了默认的编译参数，如果需要，可以进行修改。主要配置参数如下

"configurations": {"production": {"fileReplacements": [{"replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"}],"optimization": true,"outputHashing": "all","sourceMap": false,"extractCss": true,"namedChunks": false,"aot": false,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": false,"budgets": [{"type": "initial","maximumWarning": "5mb","maximumError": "10mb"}]}
}

Angular默认打包到根目录下的dist目录下，生成的文件为纯静态文件（html, css, js)，以及图片文件。

2.2. 打包部署到二级目录

有不少情况，我们的angular web站点不能直接部署到网站的根目录下，需要部署到二级目录下。比如，不能部署到 http://abc.com下，要求部署到 http://abc.com/demo 这个二级目录下。针对这种情况，就需要修改一下我们的编译参数，修改为：

ng build --prod --deploy-url /demo/ --base-href /demo/

增加 --deploy-url 和 --base-href。

使用场景：比如我们有多个站点，希望使用同一个反向代理， http://site1, http://site2, 分别映射到 http://abc.com/site1, http://abc.com/site2/。那么为了方便配置，需要把site1， site2都部署到二级目录，如http://site1/site1, http://site2/site2。然后 http://site1/site1代理到http://abc.com/site1, http://site2/site2代理到http://abc.com/site2/，免得css、js因为目录级别问题找不到。

3. Angular站点的发布

Angular站点编译打包后，可以方便的发布到已有web服务器，或者打成docker image，然后发布。

3.1. web服务器发布

因为我们打包后，生成的文件为纯静态文件（html, css, js, 图片等)，所以打包后的问题，可以直接copy到iis， nginx , apache tomcat等web服务器，或者node.js， java等可以显示静态文件的程序的目录下即可。

3.2. 使用docker发布

如果部署到docker，我们可以基于一个基础的nginx docker，然后把编译好的angular项目，copy到docker 内的nginx目录下即可。

基本步骤：

准备Dockerfile 文件， docker可以基于nginx:alpine，将编译好的angular 站点文件复制到 docker 的nginx默认目录 /usr/share/nginx/html

FROM nginx:alpine
COPY . /usr/share/nginx/html

说明： 1) 假设angular打包后的文件，与Dockerfile文件在同一个目录
2) COPY . /usr/share/nginx/html, 两个参数 . 代表当前路径， /usr/share/nginx/html是docker中的目标目录

编译docker。在Dockerfile目录下，执行

docker build -t your-docker-name .
docker save your-docker-name > your-docker-name.tar
gzip your-docker-name.tar

三条命令分别为：

生成docker image，名字（name）为your-docker-name
导出docker image为本地文件，文件名为 your-docker-name.tar
压缩docker image

可以看到，因为angular编译后为纯静态文件，所以使用docker发布非常简单。部署时，只需要复制docker文件到目标机器，解压缩，然后执行 docker load < your-docker-name.tar 即可加载docker image到目标机器。

4. 总结

为生产环境编译，一定要加参数--prod
如果要部署到二级目录，编译时加参数。如部署到/demo二级目录下，加参数： --deploy-url /demo/ --base-href /demo/
使用docker发布,可以选择基本的nginx docker，然后将编译好的angular文件copy到nginx目录下即可。

---------------- END ----------------

======================

Angular入门到精通系列教程（14）- Angular 编译打包 Docker发布相关推荐

Angular入门到精通系列教程（5）- 第三方UI库（Angular Material）
文章目录 1. 第三方UI库的选择 2. Angular Material 2.1. 优缺点 2.1.1. 优点 2.1.2. 缺点 2.2. 引入到项目 3. 总结环境: Angular CLI: ...
Angular入门到精通系列教程（2） - Angular基本概念
1. Angular (Angular2)v.s. AngularJS 2. 检查本地环境的版本 3. TypeScript 4. Angular CLI 5. Angular 的版本 6. Angu ...
Angular入门到精通系列教程（6）- Angular的升级
文章目录 1. 摘要 2. https://update.angular.io/ 3. 总结环境: Angular CLI: 11.0.6 Angular: 11.0.7 Node: 12.18.3 ...
Angular入门到精通系列教程（15）- 目录结构（工程结构）推荐
文章目录 1. 概要 2. 目录结构(工程结构)推荐 2.1. 总的原则 2.2. 实例 2.3. 共享模块-SharedModule 3. 高级应用 - angular库.工作空间(workspac ...
Angular入门到精通系列教程（1） - Angular,Vue,React 选型
1. 概述总的来说一句话,如果你是老大,你可以选择用什么:如果你不是,那么,老大让用什么,你就用什么. 前端框架Angular,Vue,React三选一,没有第四种. (当然,如果只是一两个简单的页 ...
React从入门到精通系列之(14)refs和DOM元素
十四.refs和DOM元素在典型的React数据流中,props是父组件与其子组件交互的唯一方式. 要修改子组件,需要使用一个新的props进行重新渲染. 但是,在某些情况下,您需要在典型数据流之外 ...
SpringBoot入门到精通系列教程 - Filter/WebFilter
文章目录 1. Filter简介 1.1. SpringBoot 中Filter的作用 1.2. @WebFilter 2. 基于@WebFilter的实现 2.1. SpringbootApplic ...
ArcGIS10从入门到精通系列实验图文教程（附配套实验数据持续更新）
文章目录 1. 专栏简介 2. 专栏地址 3. 专栏目录 1. 专栏简介本教程<ArcGIS从入门到精通系列实验教程>内容包括:ArcGIS平台简介.ArcGIS应用基础.空间数据的采集 ...

Angular入门到精通系列教程（14）- Angular 编译打包 Docker发布