大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章给大家分享的是有关Angular怎么编译打包并使用Docker发布的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
目前成都创新互联公司已为成百上千家的企业提供了网站建设、域名、网页空间、成都网站托管、企业网站设计、鼓楼网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
环境:
Angular CLI: 11.0.6
Angular: 11.0.7
Node: 12.18.3
npm : 6.14.6
IDE: Visual Studio Code
当我们完成angular的开发后,如何部署到服务器呢?【相关教程推荐:《angular教程》】
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因为目录级别问题找不到。
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到目标机器。
为生产环境编译,一定要加参数--prod
如果要部署到二级目录,编译时加参数。如部署到/demo二级目录下,加参数: --deploy-url /demo/ --base-href /demo/
使用docker发布,可以选择基本的nginx docker, 然后将编译好的angular文件copy到nginx目录下即可。
感谢各位的阅读!关于“Angular怎么编译打包并使用Docker发布”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!