Angular 容器部署的方法

很多人反应很难访问 Github Page，所以 ng-alain.com 转移到阿里云服务器上，因此做了一次完整的 Angular 容器部署。

以下我会阐述 ng-alain 整个过程，其中包括 Docker、Nginx、Let's Sencrypt 证书等范涛，我无法保证新手可以很好的阅读她，不过你可以通过一些文章关键字在搜索引擎获得更多资料。

我们知道Docker有两个很重要的概念：镜像、容器。而Anguar容器部署只需要把Angular构建的生产环境（例如：ng build -prod）产生的目录 dist 写入至一个静态服务器镜像（例如：Nginx），最后实例这个镜像。

一、构建Angular镜像

1、编译Angular

一般而言会把 Angular 构建也在一个容器内完成，在 Angular 项目根目录下创建 Dockerfile.compile 文件：

FROM node:8LABEL authors="cipchk <cipchk@qq.com>"WORKDIR /usr/src/appCOPY package.json package.jsonRUN npm config set registry https://registry.npm.taobao.org /  && npm iCOPY . .RUN ng build --prod

FROM 指定一个 node 基础镜像，这是构建 Angular 项目的最简的基本 LABEL 镜像元数据，例如 authors 作者信息 WORKDIR 指定镜像内工作目录 COPY 复制项目 package.json 并安装依赖包 RUN 复制项目文件后并执行 ng build 命令

最后，执行构建镜像命令：

docker build -f Dockerfile.build -t ng-app-build .

其中 ng-app-build 表示镜像名称。

2、Angular 运行环境

我们并不会基于编译 Angular 镜像基础上构建 Angualr 运行环境镜像，因此里头包括很多无意义的文件，例如 npm i 产生的 node_modules。而是从上述镜像提取 dist 目录，并产生一个新镜像；Angular 运行环境应该是一个干净、简单的。

因此，从编译 Angular 镜像提取 dist：

# 运行编译 Angular 镜像docker run --name ng-app-build ng-app-build# 将 `dist` 复制到项目根目录下docker cp ng-app-build:/usr/src/app/dist ./dist/# 删除编译 Angular 镜像实例docker rm -f ng-app-build

注意： 容器路径必须上一步 Angular 编译的 WORKDIR 路径

最后，在 Angular 项目根目录下创建 Dockerfile.package 文件：

FROM nginxCOPY _nginx/default.conf /etc/nginx/conf.d/RUN rm -rf /usr/share/nginx/html/*COPY /dist /usr/share/nginx/htmlCMD ["nginx", "-g", "daemon off;"]

参数和上一节略同，只是将提取的 dist 写入到镜像内的 Nginx 默认运行目录里。

同时把 Angular 项目的 _nginx/default.conf 作为 Nginx 的配置文件，在项目里包括 Nginx 配置，像使用HTML5路由策略时需要处理 404 问题、GZip等。

但是我比较建设这里的 Nginx 配置应该极简单化，把一些 GZip、SSL 统一在反向代理层上完成，毕竟容器化后的应用不可能在一台机器上只部署一个应用。