使用多阶段构建创建高效的 Angular Docker 镜像
先决条件
计划
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
本文将介绍如何使用 Docker 的多阶段构建功能高效地将 Angular 应用容器化。
撰写本文时，我使用的是 Angular v7。
先决条件
- NodeJS +8
- Angular CLI（
npm i -g @angular/cli@latest） - Docker +17.05
- 对 Docker 和 Angular CLI 命令有基本的了解
计划
要将使用 Angular CLI 构建的基本 Angular 应用容器化，我们需要执行以下操作：
- 使用 npm 安装依赖项（包括开发依赖项）
- 使用 --prod 标志运行 ng build 命令
- 将工件从
dist文件夹移动到可公开访问的文件夹（通过 nginx 服务器）。 - 配置 nginx 配置文件，并启动 HTTP 服务器
我们将分两个阶段进行：
- 构建阶段：将依赖于 Node Alpine Docker 镜像
- 设置阶段：将依赖于 NGINX alpine Docker 镜像，并使用构建阶段的产物以及我们项目中的 nginx 配置。
初始化一个空的 Angular 项目
$ ng new myapp
添加默认的 nginx 配置
在 Angular 项目的根目录下，创建 nginx 文件夹，并创建一个名为 default.conf 的文件，内容如下（./nginx/default.conf）：
server {
listen 80;
sendfile on;
default_type application/octet-stream;
gzip on;
gzip_http_version 1.1;
gzip_disable "MSIE [1-6]\.";
gzip_min_length 1100;
gzip_vary on;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_comp_level 9;
root /usr/share/nginx/html;
location / {
try_files $uri $uri/ /index.html =404;
}
}
创建 Docker 文件
### STAGE 1: Build ###
# We label our stage as ‘builder’
FROM node:10-alpine as builder
COPY package.json package-lock.json ./
## Storing node modules on a separate layer will prevent unnecessary npm installs at each build
RUN npm ci && mkdir /ng-app && mv ./node_modules ./ng-app
WORKDIR /ng-app
COPY . .
## Build the angular app in production mode and store the artifacts in dist folder
RUN npm run ng build -- --prod --output-path=dist
### STAGE 2: Setup ###
FROM nginx:1.14.1-alpine
## Copy our default nginx config
COPY nginx/default.conf /etc/nginx/conf.d/
## Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*
## From ‘builder’ stage copy over the artifacts in dist folder to default nginx public folder
COPY --from=builder /ng-app/dist /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]
构建图像
$ docker build -t myapp .
运行容器
$ docker run -p 8080:80 myapp
完成！您的 Docker 化应用程序将可以通过http://localhost:8080访问。
镜像大小仅为约 15.8MB，推送到 Docker 仓库后还会更小。
您可以在此 GitHub 仓库中查看完整示例：https://github.com/avatsaev/angular-contacts-app-example
文章来源：https://dev.to/avatsaev/create-efficient-angular-docker-images-with-multi-stage-builds-1f3n