AngularOps. Automatyzacja i dobre praktyki dostarczania aplikacji Angular

DevOps - termin, o którym każdy słyszał, ale jakie to ma znaczenie w pracy programisty Angular? Podczas prezentacji przedstawię podstawowe założenia DevOps i odpowiedzialności zespołów pracujących w tej kulturze. Przykładowy pipeline CI/CD posłuży do omówienia koncepcji wytwarzania oprogramowania wysokiej jakości z niskim długiem technologicznym. Poznasz dobre praktyki i narzędzia usprawniające deployment aplikacji Angular.

WWW: https://softwaretalks.pl/wydarzenia/angular-week/

Transcript

1. AngularOps Automatyzacja i dobre praktyki dostarczania aplikacji Angular Kamil Zasada Senior Frontend Developer Frontend Architect / Team Leader
2. DevOps
3. DevOps is the combination of cultural philosophies, practices, and tools that increases an organization’s ability to deliver applications and services at high velocity. https://aws.amazon.com/devops/what-is-devops/
4. AngularOps
5. CI/CD
6. Continuous Development
7. TSLint tslint.json { "rules": { "no-unused-variable": true, "ordered-imports": [ true, { "import-sources-order": "case-insensitive", "grouped-imports": true, "named-imports-order": "case-insensitive" } ], "typedef": [true, "call-signature"] } }
8. Prettier .prettierrc { "arrowParens": "always", "printWidth": 140, "quoteProps": "consistent", "singleQuote": true, "trailingComma": "all", "endOfLine": "crlf" }
9. Husky .huskyrc | .lintstagedrc.js module.exports = { '*': 'npm run prettier:fix', '*.ts': (files) => `npm run lint:fix -- ${files.map((file) => `-- files ${file.substring(file.indexOf('src'))}`).join(' ')}`, }; { "hooks": { "pre-commit": "lint-staged" } }
10. CI/CD
11. Continuous Integration is a practice where developers regularly merge their code changes into a central repository, after which automated builds and tests are run. https://aws.amazon.com/devops/continuous-integration/
12. Continuous Integration AWS CodePipeline
13. GitHub Actions ci-workflow.yml name: CI on: push: branches: [ main ] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 with: node-version: '14' - run: npm ci - run: npm run build -- --prod
14. npm ci vs. npm install • package-lock.json • npm ci nie aktualizuje package-lock.json • npm ci szybszy w środowisku CI/CD (nawet 2x)
15. Continuous Integration – Pobieranie tłumaczeń aplikacji z zewnętrznego serwisu – Budowanie zoptymalizowanego artefaktu aplikacji – Testowanie aplikacji za pomocą Unit Tests, Integration Tests, End2End Tests – Budowanie aktualnej biblioteki komponentów w Storybook – Analiza kodu pod kątem bezpieczeństwa i wielkości długu technologicznego
17. SonarQube – Jakość kodu pod kątem błedów i niezgodności z wytycznymi (SonarWay) – Bezpieczeństwo kodu źródłowego i bibliotek trzecich – Raport na temat wykonania testów jednostkowych i pokrycia
18. SonarQube SonarQube przeprowadza statyczną analizę kodz aplikacji. Zestaw reguł definiujących jakość projektu. Można dowolnie modyfikować pod projekt. SonarQube może być zasilany raportami z zewnętrznych narzędzi, np. TSLint, Code Coverage, OWASP Dependency Track. Czas potrzebny do usunięciea wszystkich błędów i code smells. Analyzer Quality Profile Reports / Plugins Technical Debt
19. SonarQube package.json | sonar-project.properties { "scripts": { "sonar:audit": "npm audit --json | npm-audit-html --output .scannerreports/npmaudit.html", "sonar:coverage": "npm run test:ci -- --code-coverage", "sonar:lint": "npm run lint --silent -- --format=json > .scannerreports/tsreport.json", "sonar:outdated": "npm outdated --long --json | npm-outdated-html -- output .scannerreports/npmoutdated.html", } } sonar.sources=src sonar.exclusions=**/node_modules/**,**/*.spec.ts sonar.tests=src sonar.test.inclusions=**/*.spec.ts sonar.testExecutionReportPaths=.scannerreports/utreport.xml sonar.javascript.lcov.reportPaths=coverage/cip/lcov.info sonar.typescript.exclusions=**/node_modules/**,**/typings.d.ts sonar.typescript.tslint.reportPaths=.scannerreports/tsreport.json
20. SonarQube
21. CI/CD
22. Continuous Delivery is a practice where code changes are automatically prepared for a release to production https://aws.amazon.com/devops/continuous-delivery/
23. Angular & RESTful API dev.myapp.com stage.myapp.com myapp.com environments/environment.ts
24. Build Once, Deploy Everywhere! Someone. Somewhen.
25. APP_INITIALIZER app.module.ts import { APP_INITIALIZER } from '@angular/core'; import { AppConfigService } from './app-config.service'; const appConfigFactory = (appConfigService: AppConfigService) => { return () => appConfigService.initialize(); }; @NgModule({ providers: [ { provide: APP_INITIALIZER, useFactory: appConfigFactory, deps: [AppConfigService], multi: true } ], }) export class AppModule {}
26. APP_INITIALIZER app-config.service.ts @Injectable({ providedIn: 'root' }) export class AppConfigService { initialize() { return new Promise((resolve, reject) => { this.httpClient.get('assets/appconfig.json') .toPromise() .then((config) => { resolve(); }) .catch(() => { reject('Could not load appconfig file'); }); }); } }
27. Dbaj o jakość kodu, który trafia do repozytorium. Pamiętaj o optymalizacji wersji produkcyjnej, m.in. --prod i npm ci. Monitoruj dług technologiczny projektu sprawdzając, m.in. test coverage i code smells. Build Once, Deploy Everywhere! Konfiguracja w runtime – nie podczas Build. Code Build Technical Debt Deploy
28. Dziękuję! Zapraszam na sesję pytań i odpowiedzi Kamil Zasada Senior Frontend Developer Frontend Architect / Team Leader linkedin.com/in/kamil-zasada kzasada@pgs-soft.com