• 技术文章 >web前端 >js教程

    浅谈Angular如何编译打包?如何使用Docker发布?

    青灯夜游青灯夜游2021-06-07 11:08:48转载132
    本篇文章给大家介绍一下Angular编译打包&Docker发布的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    环境:

    • Angular CLI: 11.0.6
    • Angular: 11.0.7
    • Node: 12.18.3
    • npm : 6.14.6
    • IDE: Visual Studio Code

    1. 概要

    当我们完成angular的开发后,如何部署到服务器呢?【相关教程推荐:《angular教程》】

    2. 编译打包

    2.1. 基本打包命令

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

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

    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目录下即可。

    基本步骤:

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

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

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

    三条命令分别为:

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

    4. 总结

    更多编程相关知识,请访问:编程视频!!

    以上就是浅谈Angular如何编译打包?如何使用Docker发布?的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    上一篇:浅谈Angular中父子组件间相互传参的方法 下一篇:深入了解Nodejs中的mongoose工具
    第16期线上培训班

    相关文章推荐

    • Angular CLI中的在线和离线安装• 一文带你深入解析Angular 10• 详解Angular DOM的更新机制• angular7中如何引用ng zorro antd?• 详解Angular中的根模板和特性模板• 浅谈Angular中父子组件间相互传参的方法

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网