實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
3 likes729 views
本文介绍了如何使用 Angular、Docker 和 Kubernetes 实现持续部署，包括环境准备、建立 Kubernetes 集群、安装 Nginx Ingress Controller 以及将 Angular 应用部署到 Kubernetes 的基本步骤。涵盖了所需工具和命令，强调了 CI/CD 流程。文档还提供了相关链接和联系方式。
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
- 1. Continuous Deployment with Angular, Docker and Kubernetes 實現 Angular, Docker 與 Kubernetes 持續部署 多奇數位創意有限公司 技術總監 黃保翕（Will 保哥） https://blog.miniasp.com
- 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
- 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!