很多人反應很難訪問 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 統一在反向代理層上完成，畢竟容器化后的應用不可能在一臺機器上只部署一個應用。