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

目录

• 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

1. environment.ts: 针对开发环境使用的环境文件
2. 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目录下便可。

基本步骤：

1. 准备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中的目标目录

2. 编译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. 总结

1. 为生产环境编译，必定要加参数--prod
2. 若是要部署到二级目录，编译时加参数。如部署到/demo二级目录下，加参数： --deploy-url /demo/ --base-href /demo/
3. 使用docker发布,能够选择基本的nginx docker， 而后将编译好的angular文件copy到nginx目录下便可。

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

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