Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

優化 Angular 團隊開發流程:實現 DevOps 開發維運一體化

2.867 visualizaciones

Publicado el

這是 Will 保哥在 2017/6/24 台灣 Angular 社群小聚中的演講簡報。
https://2017.angular.tw/

在多人的開發團隊中建構一個 Angular 網站,需考慮彼此之間如何分工合作,對模組與元件也須進行適當的架構規劃,開發習慣與程式碼樣式也需建立規範,這樣才能提高應用程式的可維護性。當系統需要進行整合時,又該如何實現持續整合與部署?又該如何監控線上 Angular 應用程的執行效能與問題分析?本次演說將帶大家細說從頭,了解在 Angular 如何實踐 DevOps 流程。

Publicado en: Tecnología
  • Sé el primero en comentar

優化 Angular 團隊開發流程:實現 DevOps 開發維運一體化

  1. 1. AngularJS User Group Taiwan 優化 Angular 團隊開發流程: 實現 DevOps 開發維運一體化 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) 部落格:http://blog.miniasp.com/
  2. 2. AngularJS User Group Taiwan 關於 DevOps 的不同階段
  3. 3. AngularJS User Group Taiwan 優化 Angular 開發流程 Plan  Create  Verify
  4. 4. AngularJS User Group Taiwan 妥善規劃 Angular 應用程式 • 規劃功能清單 ( Function List ) • 規劃網站地圖 ( Sitemap ) • 規劃網頁線稿 ( Wireframe ) • 網頁設計提案 ( Visual Design ) • 網頁前端切版 ( Front-end Design )
  5. 5. AngularJS User Group Taiwan • 建立 Angular 專案 ( Angular CLI ) • ng new myapp --routing • 建立 Angular 模組 (依據網站地圖分組) • ng g m module1 --routing -m=app • 建立 Angular 元件 (依據網站地圖中的每個頁面) • ng g c module1/page1 -m=module1 開始打造 Angular 應用程式雛形
  6. 6. AngularJS User Group Taiwan • 依據實際需求建立必要的 Angular 元件 (每個模組都切乾淨) • cd src/app/module1 • ng g c page1 • ng g d diretive1 • ng g p pipe1 • ng g s common -m=module1 • 定義模組下的路由、子路由、路由守門員 • 所有模組都擁有自己的路由、子路由、路由守門員 • ng g g login -m=module1 • 先將所有頁面都串起來 • 共通的版型都先套用在 AppComponent 下,最後再來調整整體版面 • 全站的路由連結都先套用完成 依據模組進行工作切割與專案分工
  7. 7. AngularJS User Group Taiwan • 程式碼風格檢查 • codelyzer (GitHub) • ng lint • TSLint (Visual Studio Code) • npm install --save-dev codelyzer@latest • 單元測試開發 • Karma • Jasmine v.s. Jest • Protractor • https://angular.io/guide/testing 驗證 Angular 專案品質
  8. 8. AngularJS User Group Taiwan 優化 Angular 部署流程 Package  Release  Configuration
  9. 9. AngularJS User Group Taiwan • 切換建置環境 • npm run build • npm run build -- --prod • npm run build-prod (需自訂 package.json 的 scripts 命令) • 多重應用程式 • ng build --app 0 (須配合調整 .angular-cli.json 設定檔) • 佈署虛擬目錄 • ng build --prod --base-href /myapp/ • ng build --prod --base-href /myapp/ --deploy-url=/myapp/ 建置 Angular 部署檔案
  10. 10. AngularJS User Group Taiwan • 準備一個 Visual Studio Team Services 專案 (Git 儲存庫) • 建立一個 Azure Web App 網站 • 透過 Git 上傳 Angular 專案到 Visual Studio Team Services • 設定 Builds 持續整合 (CI) • 設定 Releases 持續部署 (CD) 實現 Angular 持續整合/持續部署
  11. 11. AngularJS User Group Taiwan • npm install • npm run lint • npm run build • Publish Build Artifact • Path to Publish: dist • Artifact Name: drop • Artifact Type: Server 在 VSTS 設定 Builds 持續整合 (CI)
  12. 12. AngularJS User Group Taiwan • Azure App Service Deployment • Azure subscription: • App Service name: • Package or folder: $(System.DefaultWorkingDirectory)/ngdevops-CI/drop 在 VSTS 設定 Releases 持續部署 (CD)
  13. 13. AngularJS User Group Taiwan 優化 Angular 監控作業 Monitoring
  14. 14. AngularJS User Group Taiwan import { ErrorHandler } from '@angular/core'; class MyErrorHandler implements ErrorHandler { handleError(error) { // do something with the exception } } @NgModule({ providers: [{provide: ErrorHandler, useClass: MyErrorHandler}] }) class MyModule {} 自訂 Angular 錯誤處理器 ( ErrorHandler )
  15. 15. AngularJS User Group Taiwan • Angular CLI • TSLint - An extensible linter for the TypeScript language. ( Rules ) • codelyzer (GitHub) • Angular - Testing • Setting up a CI pipeline for deploying your Angular application to Azure using Visual Studio Team Services and GitHub • Angular - ErrorHandler 相關連結
  16. 16. AngularJS User Group Taiwan • The Will Will Web 記載著 Will 在網路世界的學習心得與技術分享 • http://blog.miniasp.com/ • Will 保哥的技術交流中心 (臉書粉絲專頁) • http://www.facebook.com/will.fans • Will 保哥的噗浪 • http://www.plurk.com/willh/invite • Will 保哥的推特 • https://twitter.com/Will_Huang 聯絡資訊
  17. 17. AngularJS User Group Taiwan Thank you

×