Angular 容器部署的方法

很多人反应很难访问 github page，所以 转移到阿里云服务器上，因此做了一次完整的 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 <[e-mail]>"

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

1. from 指定一个 node 基础镜像，这是构建 angular 项目的最简的基本
2. label 镜像元数据，例如 authors 作者信息
3. workdir 指定镜像内工作目录
4. copy 复制项目 package.json 并安装依赖包
5. 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 端口，而是透过另一个代理层进行转发。

在之前我尝试使用镜像来处理，它真的非常方便，但是在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签发证书

acme.sh 是国内一大牛写的用于简化申请 let's sencrypt 证书，并自动续签证书，几乎上第一次安装完全后，后续都无须人工干预。

let's sencrypt 不久前发布支持泛域，因此这一次也是申请了 *.ng-alain.com 泛域证书。

安装 acem.sh：

curl https://get.acme.sh | sh

这里我使用dns来签发证书，目前支持几十种服务商，当然包括阿里云：

export ali_key="aaaaaaaaaaa"
export ali_secret="xxxxxxxxxxxxxxxx"
acme.sh --issue --dns dns_ali -d ng-alain.com -d *.ng-alain.com

ali_key 和 ali_secret 是对应的阿里云的 access key，注意要给予 dns 授权。

最后，利用 --installcert 来提取 nginx 所需要的证书文件。

acme.sh --installcert \
  -d ng-alain.com \
  --key-file $(pwd)/proxy/certs/ng-alain.com.key \
  --fullchain-file $(pwd)/proxy/certs/fullchain.cer \
  --reloadcmd "service nginx force-reload"

acme.sh 会纪录这行命令的所有细节，并且当自动续签触发后再一次执行它们。其中 service nginx force-reload 是指命令执行完成后重启 nginx 使启证书立刻生效。

整个过程我非常顺利，没有任何错误，acme.sh 也有很多说明文档，包括中文，有关更多细节请自行阅读。

3、运行 nginx

之前在安装 nginx 时我们就已经启动了，那么，我们只需要对 /etc/nginx/nginx.conf 编写一些 nginx 配置即可。

有两个主要细节：ssl配置和代理转化angular容器实例端口的配置。

对于前者，若你在运行上述命令时依然保持路径的话，则：

ssl_certificate /root/proxy/certs/fullchain.cer;
ssl_certificate_key /root/proxy/certs/ng-alain.com.key;
ssl_session_timeout 30m;
ssl_protocols tlsv1 tlsv1.1 tlsv1.2;
ssl_ciphers ecdh+aesgcm:dh+aesgcm:ecdh+aes256:dh+aes256:ecdh+aes128:dh+aes:ecdh+3des:dh+3des:rsa+aesgcm:rsa+aes:rsa+3des:!anull:!md5:!dss;
ssl_session_cache shared:ssl:10m;
ssl_prefer_server_ciphers on;

而对于代理转化，这其决于你映射angular容器的端口，例如上述在运行容器的命令是这样：

docker run -d -p 80:80 \
  --name web \
  ng-app

我们可以重新换另一个映射端口，例如：8001。

docker kill web
docker run -d -p 8001:80 \
  --name web \
  ng-app

然后在 nginx 配置相应的代理转化：

server {
  listen 80;
  server_name ng-alain.com www.ng-alain.com;
  return 301 https://$server_name$request_uri;
}

server {
  listen 443 ssl http2;
  server_name ng-alain.com www.ng-alain.com;

  location / {
    proxy_pass http://127.0.0.1:8001/;
  }
}

1. server 这里有两个分别对 80 和 443，前者强制跳转 https，当你不希望用户使用 http 访问你站点时。
2. server_name 指定监听的域名
3. proxy_pass 指定代理转发域，8001 端口就是上述 angular 应用所处容器所映射的端口

配置文件保持后，你可以先执行 nginx -t 来校验配置文件是否正确。

最后，重启 nginx。

service nginx force-reload

三、持续部署

上述有系列的 docker 命令甚是繁琐，应该把这一切自动化，有个专业名称叫：持续部署（简称：cd）；ng-alain.com 现在是使用daocloud 完成这项工作。

daocloud 提供一种叫【安全镜像】的构建功能，分为三个步骤——编译、提取、打包；等同上述 angular 项目的编译、提供和发布。

只需要在项目下创建 daocloud.yml；它是 daocloud 提供的一种自定义项目流程的定义文件，若你对上述已经了解，再来看它就不会非常陌生。以下是 ng-alain.com 完整的 daocloud.yml 内容：

version: 3
stages:
- compile
- deploy
release:
 stage: compile
 job_type: lite_image_build
 only:
  branches:
  - master
 allow_failure: false
 compile:
  build_dir: /
  cache: false
  dockerfile_path: /dockerfile.compile
 extract:
 - /usr/src/app/dist
 - /usr/src/app/_nginx/default.conf
 package:
  build_dir: /
  cache: false
  dockerfile_path: /dockerfile.package
self:
 stage: deploy
 job_type: dcs_deploy
 only:
  branches:
  - master
 allow_failure: false
 dependencies:
 - release
 app_name: web
 cluster_id: ""

注意： 其中 extract 务必包含完整路径。

四、总结

将生产环境容器化已经是一种架构标准，上述只是在部署的一些总结，实际可能遇到的问题会更多，大家可以通过以下找到答案：

docker — 从入门到实践
docker 问答录（100 问）
daocloud services 文档

当然，未来angular cli 也将会内置 docker 部署，这里有一份来自 angular 的相关命令的设计文档。

以上所有代码可以在 上找得到，可能存在个人路径不同罢了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。