摘要：很多人反應(yīng)很難訪問，所以轉(zhuǎn)移到阿里云服務(wù)器上，因此做了一次完整的容器部署。在容器化過程中，我們并未配置任何等，只是保留服務(wù)所需的配置項(xiàng)而已，而這一部分我們可以放在反向代理層完成。
很多人反應(yīng)很難訪問 Github Page，所以 ng-alain.com 轉(zhuǎn)移到阿里云服務(wù)器上，因此做了一次完整的 Angular 容器部署。
以下我會闡述 ng-alain 整個過程，其中包括 Docker、Nginx、Let"s Sencrypt 證書等范濤，我無法保證新手可以很好的閱讀她，不過你可以通過一些文章關(guān)鍵字在搜索引擎獲得更多資料。
我們知道Docker有兩個很重要的概念：鏡像、容器。而Anguar容器部署只需要把Angular構(gòu)建的生產(chǎn)環(huán)境（例如：ng build -prod）產(chǎn)生的目錄 dist 寫入至一個靜態(tài)服務(wù)器鏡像（例如：Nginx），最后實(shí)例這個鏡像。
一、構(gòu)建Angular鏡像
1、編譯Angular
一般而言會把 Angular 構(gòu)建也在一個容器內(nèi)完成，在 Angular 項(xiàng)目根目錄下創(chuàng)建 Dockerfile.compile 文件：
FROM node:8
LABEL authors="cipchk "
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 基礎(chǔ)鏡像，這是構(gòu)建 Angular 項(xiàng)目的最簡的基本
LABEL 鏡像元數(shù)據(jù)，例如 authors 作者信息
WORKDIR 指定鏡像內(nèi)工作目錄
COPY 復(fù)制項(xiàng)目 package.json 并安裝依賴包
RUN 復(fù)制項(xiàng)目文件后并執(zhí)行 ng build 命令
最后，執(zhí)行構(gòu)建鏡像命令：
docker build -f Dockerfile.build -t ng-app-build .
其中 ng-app-build 表示鏡像名稱。
2、Angular 運(yùn)行環(huán)境
我們并不會基于編譯 Angular 鏡像基礎(chǔ)上構(gòu)建 Angualr 運(yùn)行環(huán)境鏡像，因此里頭包括很多無意義的文件，例如 npm i 產(chǎn)生的 node_modules。而是從上述鏡像提取 dist 目錄，并產(chǎn)生一個新鏡像；Angular 運(yùn)行環(huán)境應(yīng)該是一個干凈、簡單的。
因此，從編譯 Angular 鏡像提取 dist：
# 運(yùn)行編譯 Angular 鏡像
docker run --name ng-app-build ng-app-build
# 將 `dist` 復(fù)制到項(xiàng)目根目錄下
docker cp ng-app-build:/usr/src/app/dist ./dist/
# 刪除編譯 Angular 鏡像實(shí)例
docker rm -f ng-app-build
注意： 容器路徑必須上一步 Angular 編譯的 WORKDIR 路徑
最后，在 Angular 項(xiàng)目根目錄下創(chuàng)建 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;"]
參數(shù)和上一節(jié)略同，只是將提取的 dist 寫入到鏡像內(nèi)的 Nginx 默認(rèn)運(yùn)行目錄里。
同時(shí)把 Angular 項(xiàng)目的 _nginx/default.conf 作為 Nginx 的配置文件，在項(xiàng)目里包括 Nginx 配置，像使用HTML5路由策略時(shí)需要處理 404 問題、GZip等。
但是我比較建設(shè)這里的 Nginx 配置應(yīng)該極簡單化，把一些 GZip、SSL 統(tǒng)一在反向代理層上完成，畢竟容器化后的應(yīng)用不可能在一臺機(jī)器上只部署一個應(yīng)用。
以下是一個 Angular 應(yīng)用最簡化的配置信息：
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 可以保證當(dāng)訪問的路徑未找到文件時(shí)直接使用 index.html 文件替代，這也就是 Angular HTML5 路由策略很重要的一環(huán)。
最后，構(gòu)建生產(chǎn)環(huán)境鏡像：
docker build -f Dockerfile -t ng-app .
當(dāng)然，這個時(shí)候的編譯 Angular 鏡像已經(jīng)沒有存在的意義了。
docker rmi -f ng-app-build
二、運(yùn)行Angular
我們可以查看已經(jīng)存在的鏡像：
docker images
當(dāng)然，上述在 Nginx 配置采用的是一個 80 端口，因此可以直接使用：
docker run -d -p 80:80
--name web
ng-app
若你域名綁定了該主機(jī)，則可以直接訪問。至此，已經(jīng)是 Angular 容器化后所有內(nèi)容，下面是關(guān)于 Nginx 反向代理 Docker 應(yīng)用的部分，若你已經(jīng)這么做，那直接忽略下一章節(jié)。
Nginx 反向代理
絕大多數(shù)情況下會利用一個代理服務(wù)器容器，來轉(zhuǎn)發(fā)多個站點(diǎn)，因此很少會直接在一個 Angular 站點(diǎn)里直接使用 80 端口，而是透過另一個代理層進(jìn)行轉(zhuǎn)發(fā)。
在之前我嘗試使用 jwilder/nginx-proxy 鏡像來處理，它真的非常方便，但是在SSL環(huán)節(jié)讓我吃了很多苦頭，最后放棄之，而改用直接在主機(jī)上安裝 Nginx 作為反向代理。
在Angular容器化過程中，我們并未配置任何 SSL、GZip 等，只是保留 Nginx 服務(wù)所需的配置項(xiàng)而已，而這一部分我們可以放在反向代理層完成。
這個過程包括三個步驟：安裝 Nginx、安裝 acme.sh 簽發(fā) Let"s Sencrypt 證書、配置并運(yùn)行 Nginx。
1、安裝Nginx
以 CenOS7 為例，更多系統(tǒng)請自行Google：
sudo yum install epel-release
sudo yum install nginx
# 啟動Nginx
sudo systemctl start nginx
2、通過acme.sh簽發(fā)證書
acme.sh 是國內(nèi)一大牛寫的用于簡化申請 Let"s Sencrypt 證書，并自動續(xù)簽證書，幾乎上第一次安裝完全后，后續(xù)都無須人工干預(yù)。
Let"s Sencrypt 不久前發(fā)布支持泛域，因此這一次也是申請了 *.ng-alain.com 泛域證書。
安裝 acem.sh：
curl https://get.acme.sh | sh
這里我使用DNS來簽發(fā)證書，目前支持幾十種服務(wù)商，當(dāng)然包括阿里云：
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 是對應(yīng)的阿里云的 Access key，注意要給予 DNS 授權(quán)。
最后，利用 --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 會紀(jì)錄這行命令的所有細(xì)節(jié)，并且當(dāng)自動續(xù)簽觸發(fā)后再一次執(zhí)行它們。其中 service nginx force-reload 是指命令執(zhí)行完成后重啟 nginx 使啟證書立刻生效。
整個過程我非常順利，沒有任何錯誤，acme.sh 也有很多說明文檔，包括中文，有關(guān)更多細(xì)節(jié)請自行閱讀。
3、運(yùn)行 Nginx
之前在安裝 Nginx 時(shí)我們就已經(jīng)啟動了，那么，我們只需要對 /etc/nginx/nginx.conf 編寫一些 Nginx 配置即可。
有兩個主要細(xì)節(jié)：SSL配置和代理轉(zhuǎn)化Angular容器實(shí)例端口的配置。
對于前者，若你在運(yùn)行上述命令時(shí)依然保持路徑的話，則：
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;
而對于代理轉(zhuǎn)化，這其決于你映射Angular容器的端口，例如上述在運(yùn)行容器的命令是這樣：
docker run -d -p 80:80
--name web
ng-app
我們可以重新?lián)Q另一個映射端口，例如：8001。
docker kill web
docker run -d -p 8001:80
--name web
ng-app
然后在 Nginx 配置相應(yīng)的代理轉(zhuǎn)化：
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/;
}
}
server 這里有兩個分別對 80 和 443，前者強(qiáng)制跳轉(zhuǎn) https，當(dāng)你不希望用戶使用 http 訪問你站點(diǎn)時(shí)。
server_name 指定監(jiān)聽的域名
proxy_pass 指定代理轉(zhuǎn)發(fā)域，8001 端口就是上述 Angular 應(yīng)用所處容器所映射的端口
配置文件保持后，你可以先執(zhí)行 nginx -t 來校驗(yàn)配置文件是否正確。
最后，重啟 Nginx。
service nginx force-reload
三、持續(xù)部署
上述有系列的 Docker 命令甚是繁瑣，應(yīng)該把這一切自動化，有個專業(yè)名稱叫：持續(xù)部署（簡稱：cd）；ng-alain.com 現(xiàn)在是使用 DaoCloud 完成這項(xiàng)工作。
DaoCloud 提供一種叫【安全鏡像】的構(gòu)建功能，分為三個步驟——編譯、提取、打包；等同上述 Angular 項(xiàng)目的編譯、提供和發(fā)布。
只需要在項(xiàng)目下創(chuàng)建 daocloud.yml；它是 DaoCloud 提供的一種自定義項(xiàng)目流程的定義文件，若你對上述已經(jīng)了解，再來看它就不會非常陌生。以下是 ng-alain.com 完整的 daocloud.yml 內(nèi)容：
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 務(wù)必包含完整路徑。
四、總結(jié)
將生產(chǎn)環(huán)境容器化已經(jīng)是一種架構(gòu)標(biāo)準(zhǔn)，上述只是在部署 ng-alain.com 的一些總結(jié)，實(shí)際可能遇到的問題會更多，大家可以通過以下找到答案：
Docker — 從入門到實(shí)踐
Docker 問答錄（100 問）
DaoCloud Services 文檔
當(dāng)然，未來Angular cli 也將會內(nèi)置 Docker 部署，這里有一份來自 Angular 的相關(guān) ng docker 命令的設(shè)計(jì)文檔。
以上所有代碼可以在 delon 上找得到，可能存在個人路徑不同罷了。
（完）
