• 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

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

其他 开心洋葱 2945次浏览 0个评论

目录

  • 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中的目标目录

  1. 编译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 —————-

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


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明Angular入门到精通系列教程(14)- Angular 编译打包 & Docker发布
喜欢 (0)

您必须 登录 才能发表评论!

加载中……