Angular编译打包后如何通过Docker容器化技术实现高效发布？

本文共计1599个文字，预计阅读时间需要7分钟。

本文介绍如何使用Angular CLI和Docker构建和打包Angular应用程序。以下是一定要参考的步骤：

1. 确保已安装Angular CLI版本11.0.6。

2.确保Angular版本为11.0.7。

3.使用Node.js 12.18.3和npm 6.14。

步骤：

1. 创建一个新的Angular项目：

ng new my-angular-app cd my-angular-app

2. 启动Docker守护进程： docker run -d -p 4200:4200 --name my-angular-app-node nginx:alpine

3. 在Docker容器中安装Node.js和npm： docker exec -it my-angular-app-node bash apk add nodejs npm

4. 在容器中安装Angular CLI： npm install -g @angular/cli@11.0.6

5. 在容器中克隆或创建你的Angular项目： git clone [你的GitHub仓库地址] my-angular-app cd my-angular-app

6. 在容器中安装项目依赖项： npm install

7. 构建项目： ng build --prod

8. 创建一个Dockerfile： Dockerfile FROM nginx:alpine

RUN apk add --no-cache nodejs npm

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build --prod

EXPOSE 80

COPY dist/my-angular-app /usr/share/nginx/

9. 构建Docker镜像： docker build -t my-angular-app .

10. 运行Docker容器： docker run -d -p 80:80 my-angular-app

现在，你的Angular应用程序应该可以通过访问`http://localhost`来访问。希望这对您有所帮助！

本篇文章给大家介绍一下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的开发后，如何部署到服务器呢？

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站点不能直接部署到网站的根目录下，需要部署到二级目录下。 比如，不能部署到 abc.com下，要求部署到 abc.com/demo 这个二级目录下。针对这种情况，就需要修改一下我们的编译参数，修改为：

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

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

使用场景：比如我们有多个站点，希望使用同一个反向代理， site1, site2, 分别映射到 abc.com/site1, abc.com/site2/。 那么为了方便配置，需要把site1， site2都部署到二级目录，如site1/site1, site2/site2。 然后 site1/site1代理到abc.com/site1, site2/site2代理到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目录下即可。

更多编程相关知识，请访问：编程视频！！

以上就是浅谈Angular如何编译打包？如何使用Docker发布？的详细内容，更多请关注自由互联其它相关文章！