Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)

1 114 vues

Publié le

本簡報是 Will 保哥在 NG+ 2020 的演講簡報,本次演講將分享如何將 Angular 部署至 Kubernetes 的完整過程。

Continuous Deployment with Angular, Docker and Kubernetes

Publié dans : Technologie
  • Soyez le premier à commenter

實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)

  1. 1. Continuous Deployment with Angular, Docker and Kubernetes 實現 Angular, Docker 與 Kubernetes 持續部署 多奇數位創意有限公司 技術總監 黃保翕(Will 保哥) https://blog.miniasp.com
  2. 2. 環境準備 Prerequisite
  3. 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. 4. 安裝好用的 VSCode 擴充套件 • Angular Extension Pack • Docker • Kubernetes / Kubernetes Snippets / Kubernetes Kind • YAML • DotENV (Support for dotenv file syntax) • Encode Decode 4
  5. 5. 建立 Kubernetes 叢集 Create Kubernetes Cluster
  6. 6. 準備含有 Ingress 的 kind 叢集定義檔 kind-2nodes-ingress.yaml 6
  7. 7. 使用 kind 建立 Kubernetes 叢集 kind create cluster --config ./kind-2nodes-ingress.yaml 7
  8. 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. 9. 將 Angular 應用程式部署至 Kubernetes Deploy Angular application on Kubernetes
  10. 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. 網路架構 11 NGINX Ingress Controller https://host/ api Service Pod Pod Deployment web Service Pod Pod Deployment Angular SPA .NET Core Web API
  12. 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. 13. 相關連結 • Ingress | Kubernetes • NGINX Ingress Controller ( GitHub ) • Understanding kubernetes networking: ingress • Kubernetes Ingress with Nginx Example 13
  14. 14. The Will Will Web 網路世界的學習心得與技術分享 http://blog.miniasp.com/ Facebook Will 保哥的技術交流中心 http://www.facebook.com/will.fans Twitter https://twitter.com/Will_Huang 聯絡資訊
  15. 15. THANK YOU!

×