很多人反应很难访问 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:8 LABEL authors="cipchk <cipchk@qq.com>" WORKDIR /usr/src/app COPY package.json package.json RUN npm config set registry https://registry.npm.taobao.org \ && npm i COPY . . 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 nginx COPY _nginx/default.conf /etc/nginx/conf.d/ RUN rm -rf /usr/share/nginx/html/* COPY /dist /usr/share/nginx/html CMD ["nginx", "-g", "daemon off;"]
参数和上一节略同，只是将提取的 dist 写入到镜像内的 Nginx 默认运行目录里。
同时把 Angular 项目的 _nginx/default.conf 作为 Nginx 的配置文件，在项目里包括 Nginx 配置，像使用HTML5路由策略时需要处理 404 问题、GZip等。
但是我比较建设这里的 Nginx 配置应该极简单化，把一些 GZip、SSL 统一在反向代理层上完成，毕竟容器化后的应用不可能在一台机器上只部署一个应用。
以下是一个 Angular 应用最简化的配置信息：
server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } }
try_files 可以保证当访问的路径未找到文件时直接使用 index.html 文件替代，这也就是 Angular HTML5 路由策略很重要的一环。
最后，构建生产环境镜像：
docker build -f Dockerfile -t ng-app .
当然，这个时候的编译 Angular 镜像已经没有存在的意义了。
docker rmi -f ng-app-build
二、运行Angular
我们可以查看已经存在的镜像：
docker images
当然，上述在 Nginx 配置采用的是一个 80 端口，因此可以直接使用：
docker run -d -p 80:80 \ --name web \ ng-app
若你域名绑定了该主机，则可以直接访问。至此，已经是 Angular 容器化后所有内容，下面是关于 Nginx 反向代理 Docker 应用的部分，若你已经这么做，那直接忽略下一章节。
Nginx 反向代理
绝大多数情况下会利用一个代理服务器容器，来转发多个站点，因此很少会直接在一个 Angular 站点里直接使用 80 端口，而是透过另一个代理层进行转发。
在之前我尝试使用jwilder/nginx-proxy 镜像来处理，它真的非常方便，但是在SSL环节让我吃了很多苦头，最后放弃之，而改用直接在主机上安装 Nginx 作为反向代理。
在Angular容器化过程中，我们并未配置任何 SSL、GZip 等，只是保留 Nginx 服务所需的配置项而已，而这一部分我们可以放在反向代理层完成。
这个过程包括三个步骤：安装 Nginx、安装 acme.sh 签发 Let's Sencrypt 证书、配置并运行 Nginx。
1、安装Nginx
以 CenOS7 为例，更多系统请自行Google：
sudo yum install epel-release sudo yum install nginx # 启动Nginx sudo systemctl start nginx
2、通过acme.sh签发证书