1.
Continuous Deployment with Angular, Docker and Kubernetes
實現 Angular, Docker 與 Kubernetes 持續部署
多奇數位創意有限公司
技術總監 黃保翕（Will 保哥）
https://blog.miniasp.com

2.
環境準備
Prerequisite

3.
實作環境 The Environment
• Windows 10 Build 19041
• Node.js v15.1.0
• Angular CLI v10.2.0
• Docker Desktop 2.5.0.0 (49427)
• WSL 2
• kind 0.9.0 / Kubernetes v1.19.1
• kubectl / k9s
3

4.
安裝好用的 VSCode 擴充套件
• Angular Extension Pack
• Docker
• Kubernetes / Kubernetes Snippets / Kubernetes Kind
• YAML
• DotENV (Support for dotenv file syntax)
• Encode Decode
4

5.
建立 Kubernetes 叢集
Create Kubernetes Cluster

6.
準備含有 Ingress 的 kind 叢集定義檔
kind-2nodes-ingress.yaml
6

7.
使用 kind 建立 Kubernetes 叢集
kind create cluster --config ./kind-2nodes-ingress.yaml
7

8.
建立 NGINX Ingress Controller
• 安裝 NGINX Ingress Controller 控制器
• 等待 Controller 建立完畢
• 測試 Ingress 是否正常運作
8
kubectl apply -f https://bit.ly/k8s-ingress-nginx
kubectl wait --namespace ingress-nginx
--for=condition=ready pod
--selector=app.kubernetes.io/component=controller
--timeout=90s
kubectl apply -f https://bit.ly/k8s-ingress-usage
本機測試 http://localhost/foo 網站連線

9.
將 Angular 應用程式部署至 Kubernetes
Deploy Angular application on Kubernetes

10.
基本步驟 Basic Steps
• 準備前端與後端應用程式 (Angular + .NET Core)
• 準備好 NGINX 設定檔（用以裝載 Angular 應用程式）
• 撰寫 Dockerfile 並打包好 Docker Images
• 上傳 Docker Images 到 Container Registry
• 建立 TLS/SSL 憑證
• 撰寫 YAML 設定檔 ( Deployment, Service, Ingress )
• 套用 YAML 設定至 Kubernetes
10

11.
網路架構
11
NGINX
Ingress
Controller
https://host/
api
Service
Pod
Pod
Deployment
web
Service
Pod
Pod
Deployment
Angular
SPA
.NET Core
Web API

12.
CI / CD
• docker build -t willh/ngplus:web .
• docker push willh/ngplus:web
• docker build -t willh/ngplus:api .
• docker push willh/ngplus:api
• kubectl apply -f ./depoy.yaml
12

13.
相關連結
• Ingress | Kubernetes
• NGINX Ingress Controller ( GitHub )
• Understanding kubernetes networking: ingress
• Kubernetes Ingress with Nginx Example
13

14.
The Will Will Web
網路世界的學習心得與技術分享
http://blog.miniasp.com/
Facebook
Will 保哥的技術交流中心
http://www.facebook.com/will.fans
Twitter
https://twitter.com/Will_Huang
聯絡資訊

15.
THANK YOU!