Angular 容器部署

不少人反應很難訪問 Github Page，因此 ng-alain.com 轉移到阿里雲服務器上，所以作了一次完整的 Angular 容器部署。

如下我會闡述 ng-alain 整個過程，其中包括 Docker、Nginx、Let's Sencrypt 證書等範濤，我沒法保證新手能夠很好的閱讀她，不過你能夠經過一些文章關鍵字在搜索引擎得到更多資料。

咱們知道Docker有兩個很重要的概念：鏡像、容器。而Anguar容器部署只須要把Angular構建的生產環境（例如：ng build -prod）產生的目錄 dist 寫入至一個靜態服務器鏡像（例如：Nginx），最後實例這個鏡像。

1、構建Angular鏡像

一、編譯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 表示鏡像名稱。

二、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

2、運行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。

一、安裝Nginx

以 CenOS7 爲例，更多系統請自行Google：

sudo yum install epel-release
sudo yum install nginx
# 啓動Nginx
sudo systemctl start nginx

二、經過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 也有不少說明文檔，包括中文，有關更多細節請自行閱讀。

三、運行 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/;
    }
}

• server 這裏有兩個分別對 80 和 443，前者強制跳轉 https，當你不但願用戶使用 http 訪問你站點時。
• server_name 指定監聽的域名
• proxy_pass 指定代理轉發域，8001 端口就是上述 Angular 應用所處容器所映射的端口

配置文件保持後，你能夠先執行 nginx -t 來校驗配置文件是否正確。

最後，重啓 Nginx。

service nginx force-reload

3、持續部署

上述有系列的 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 務必包含完整路徑。

4、總結

將生產環境容器化已是一種架構標準，上述只是在部署 ng-alain.com 的一些總結，實際可能遇到的問題會更多，你們能夠經過如下找到答案：

• Docker — 從入門到實踐
• Docker 問答錄（100 問）
• DaoCloud Services 文檔

固然，將來Angular cli 也將會內置 Docker 部署，這裏有一份來自 Angular 的相關 ng docker 命令的設計文檔。

以上全部代碼能夠在 delon 上找獲得，可能存在我的路徑不一樣罷了。

（完）