Cycle de vie d'un projet web
agile avec TFS 2013, Azure
VM et Monaco
Franck Farré
Architecte
ffarre@sqli.com
Fabrice Hauto...
Donnez votre avis !
Depuis votre smartphone sur :
http://notes.mstechdays.fr
De nombreux lots à gagner toute les heures !!...
SOMMAIRE

#mstechdays

Code/developpement
Sommaire
• Le contexte
• L’industrialisation
• La méthodologie agile
• Visual Studio Online et Azure

• La mise en place
•...
INDUSTRIALISATION

#mstechdays

Code/developpement
INDUSTRIALISATION

Intégration
Continue

La démarche
Source
Control

Portail
d’équipe

Suivi de projet
et indicateurs
proj...
MÉTHODOLOGIE AGILE
Basée sur Scrum

#mstechdays

Code/developpement
Cycle Agile

Source Wikipedia

#mstechdays

Code/developpement
VISUAL STUDIO ONLINE

#mstechdays

Code/developpement
VISUAL STUDIO ONLINE
• Étend les capacités de l’IDE
• Alternative à un TFS 2013 On Premise

#mstechdays

Code/developpemen...
WINDOWS AZURE
Le Cloud à notre service

#mstechdays

Code/developpement
WINDOWS AZURE

Source Microsoft

#mstechdays

Code/developpement
WINDOWS AZURE
• Toujours accessible (SLA 99,95%)
• Ouvert (API REST, commandlets
PowerShell…)
• Des solutions selon
les us...
WINDOWS AZURE

Source Microsoft

#mstechdays

Code/developpement
METTRE EN PLACE LE BACKLOG
Ecrire les exigences

#mstechdays

Code/developpement
METTRE EN PLACE LE BACKLOG

#mstechdays

Code/developpement
METTRE EN PLACE LE
BACKLOG
Elaboration d’un BackLog

#mstechdays

Code/developpement
PLANIFIER
Piloter son projet

#mstechdays

Code/developpement
PLANIFIER

#mstechdays

Code/developpement
PLANIFIER ET SUIVRE
Définition des itérations et création des tâches

#mstechdays

Code/developpement
MISE EN PLACE DU LOT #0
L’environnement de développement et le framework applicatif

#mstechdays

Code/developpement
LOT #0
• Création de la solution Visual Studio
– Liée à une tâche d’initialisation
– Création de l’arborescence projets
• ...
LOT #0
Le diagramme d’architecture (Layer Diagram)
• vision « macro »
• Source de documentation
• Validation à la compilat...
MISE EN PLACE DE LA
SOLUTION
Projets et diagramme de couches

#mstechdays

Code/developpement
AZURE WEB SITE

#mstechdays

Code/developpement
AZURE WEB SITE
Permet la mise en place rapide
• d’un environnement d’intégration
• d’une intégration continue
Idéal pour l...
AZURE WEB SITE
Actions à mener
• Création du web site windows azure
• Autoriser la connexion entre Azure et VS
Online
Un b...
CRÉATION DU PROJET VS /
AZURE
Mise en place de la liaison

#mstechdays

Code/developpement
REALISATION

#mstechdays

Code/developpement
REALISATION

#mstechdays

Code/developpement
SPRINT BOARD
Mise à jour des tâches

#mstechdays

Code/developpement
EDITION EN LIGNE : « MONACO »
Outil d’édition en ligne
• Solution de « fixing » rapide
• Option de « Staging »
• Permet le...
EDITION EN LIGNE : « MONACO »
Les raccourcis à connaitre
• « CTRL+E » pour trouver les options
• « ? » Rappel les commande...
EDITION D’UN PROJET AVEC
MONACO

#mstechdays

Code/developpement
TESTS

#mstechdays

Code/developpement
DECLENCHEMENT DU BUILD

#mstechdays

Code/developpement
COUTS DE MISE EN PLACE DE
CETTE USINE ??
0€
UNIQUEMENT DU TEMPS …

#mstechdays

Code/developpement
PACKAGING

#mstechdays

Code/developpement
PACKAGING

#mstechdays

Code/developpement
AZURE VM POUR LE BUILD
Quand le build Visual Studio Online ne suffit plus

#mstechdays

Code/developpement
LIMITE DU BUILD VISUAL STUDIO
ONLINE
Le build Visual Studio Online pose les
contraintes suivantes
• Build < 1h et <75Go
• ...
Azure VM est une option
pour avoir son propre
environnement de build /
intégration.
#mstechdays

Azure VM

Dans ce cas, no...
MISE EN PLACE D’UN BUILD
CONTROLLER
La cible
• Un Active Directory
• Un Serveur de Build

Active
Directory

#mstechdays

C...
MISE EN PLACE D’UN BUILD
CONTROLLER
Le IAAS

VM
1

VM
2

Subnet
Availability Set
Cloud Svc
Virtual Network

Storage Accoun...
MISE EN PLACE D’UN BUILD
CONTROLLER

## INITIALISATION DES COMMANDES POWERSHELL AZURE
$subcriptionLocation = "C:Users<User...
MISE EN PLACE D’UN BUILD
CONTROLLER à utiliser
# Définition de la subscription
Select-AzureSubscription -SubscriptionName ...
MISE EN PLACE D’UN BUILD
CONTROLLER
# Ajout d'un Vnet 10.0.0.0/8 & "Subnet-AD" 10.0.1.0/29 & "Subnet-BUILD" 10.0.2.0/24
Se...
MISE EN PLACE D’UN BUILD
CONTROLLER

# Ajout de compte de stockage
New-AzureStorageAccount -StorageAccountName $accountSto...
MISE EN PLACE D’UN BUILD
CONTROLLER
#Credentials pour WinRmHTTPs
$securePassword = ConvertTo-SecureString -String
$adminPa...
MISE EN PLACE D’UN BUILD
CONTROLLER

#Création de la Vm "BUILD-VSBUILD" et mise dans le domaine
$vmBUILD = New-AzureVMConf...
MISE EN PLACE D’UN BUILD
CONTROLLER

#mstechdays

Code/developpement
MISE EN PLACE D’UN BUILD
CONTROLLER

#mstechdays

Code/developpement
MISE EN PLACE D’UN BUILD
CONTROLLER

#mstechdays

Code/developpement
MISE EN PLACE D’UN BUILD
CONTROLLER

#mstechdays

Code/developpement
MISE EN PLACE D’UN BUILD
CONTROLLER

#mstechdays

Code/developpement
MISE EN PLACE D’UN BUILD
CONTROLLER

#mstechdays

Code/developpement
MISE EN PLACE D’UN BUILD
CONTROLLER

#mstechdays

Code/developpement
MISE EN PLACE D’UN BUILD
CONTROLLER

#mstechdays

Code/developpement
MISE EN PLACE D’UN BUILD
CONTROLLER

#mstechdays

Code/developpement
MISE EN PLACE D’UN BUILD
CONTROLLER

#mstechdays

Code/developpement
MISE EN PLACE D’UN BUILD
CONTROLLER

#mstechdays

Code/developpement
MISE EN PLACE DU BUILD
CONTROLLER

#mstechdays

Code/developpement
CONCLUSION

#mstechdays

Code/developpement
CONCLUSION
Nous avons mis en place
–
–
–
–
–
–

#mstechdays

un backlog projet
un source control
un serveur d’intégration ...
CONCLUSION
Visual Studio Online et Windows Azure
• Simplifie l’industrialisation
• Permet l’agilité
• Permet l’amélioratio...
CONCLUSION
Franck Farré
Architecte
ffarre@sqli.com
Fabrice Hautot
Chef de projet technique
fhautot@sqli.com

Ressources
ht...
Digital is
business
Cycle de vie d'un projet web agile avec TFS 2013, Azure VM et Monaco
Prochain SlideShare
Chargement dans…5
×

Cycle de vie d'un projet web agile avec TFS 2013, Azure VM et Monaco

1 359 vues

Publié le

Je réalise un projet web en mode agile. TFS 2013 et Visual Studio Online peuvent-ils m'aider ? Comment ? » Venez voir comment l'ensemble des possibilités de TFS 2013 combiné à Visual Studio 2013 supporte la réalisation d'un projet Web en Scrum grâce (entre autre) aux déploiements automatiques dans des VMs Azure et aux nouvelles capacités de Visual Studio Online. Le programme consistera en un jeu de rôle combinant les capacités de Visual Studio 2013, le pilotage projet grâce à TFS (organisation des scénarios et des tâches), comment faire le standup meeting avec l'interface web (planification et décomposition des scénarios / exigences), le code review, la création de tests unitaires, la création d’une infrastructure Azure pour gérer les déploiements automatiques, et enfin l'exécution des tests utilisateurs suite à la demande de revue par le client.

Speakers : Franck Farré (SQLI), Fabrice Hautot (SQLI)

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 359
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
36
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • 15mn
  • 1- Création du projet depuis Vstudio (WebAPi / Tests)2- Création du site Azure « Custom » (North Europe ou idéalement West Europe)
  • 1- Création du projet depuis Vstudio (WebAPi / Tests)2- Création du site Azure « Custom » (North Europe ou idéalement West Europe)
  • Attention à l’option « PublishFrom Source Control » car cela écrasera le code modifié 
  • 1- Création du projet depuis Vstudio (WebAPi / Tests)2- Création du site Azure « Custom » (North Europe ou idéalement West Europe)
  • 1- Création du projet depuis Vstudio (WebAPi / Tests)2- Création du site Azure « Custom » (North Europe ou idéalement West Europe)
  • 1- Création du projet depuis Vstudio (WebAPi / Tests)2- Création du site Azure « Custom » (North Europe ou idéalement West Europe)
  • Cycle de vie d'un projet web agile avec TFS 2013, Azure VM et Monaco

    1. 1. Cycle de vie d'un projet web agile avec TFS 2013, Azure VM et Monaco Franck Farré Architecte ffarre@sqli.com Fabrice Hautot Chef de projet technique fhautot@sqli.com SQLI www.sqli.com Code/Developpement
    2. 2. Donnez votre avis ! Depuis votre smartphone sur : http://notes.mstechdays.fr De nombreux lots à gagner toute les heures !!! Claviers, souris et jeux Microsoft… Merci de nous aider à améliorer les Techdays ! #mstechdays Code/developpement
    3. 3. SOMMAIRE #mstechdays Code/developpement
    4. 4. Sommaire • Le contexte • L’industrialisation • La méthodologie agile • Visual Studio Online et Azure • La mise en place • Backlog et Planification • Le lot #0 • L’infrastructure • Réalisation • Daily Scrum • Monaco • Tests et Build Automatique • Packaging • Azure VM et Virtual Network • Build Controller sur Azure #mstechdays Code/developpement
    5. 5. INDUSTRIALISATION #mstechdays Code/developpement
    6. 6. INDUSTRIALISATION Intégration Continue La démarche Source Control Portail d’équipe Suivi de projet et indicateurs projet TU, TUC, TUA et UAT - Pragmatique - Progressive - Amélioration Continue #mstechdays Indicateurs qualités Code/developpement
    7. 7. MÉTHODOLOGIE AGILE Basée sur Scrum #mstechdays Code/developpement
    8. 8. Cycle Agile Source Wikipedia #mstechdays Code/developpement
    9. 9. VISUAL STUDIO ONLINE #mstechdays Code/developpement
    10. 10. VISUAL STUDIO ONLINE • Étend les capacités de l’IDE • Alternative à un TFS 2013 On Premise #mstechdays Code/developpement
    11. 11. WINDOWS AZURE Le Cloud à notre service #mstechdays Code/developpement
    12. 12. WINDOWS AZURE Source Microsoft #mstechdays Code/developpement
    13. 13. WINDOWS AZURE • Toujours accessible (SLA 99,95%) • Ouvert (API REST, commandlets PowerShell…) • Des solutions selon les usages #mstechdays Code/developpement
    14. 14. WINDOWS AZURE Source Microsoft #mstechdays Code/developpement
    15. 15. METTRE EN PLACE LE BACKLOG Ecrire les exigences #mstechdays Code/developpement
    16. 16. METTRE EN PLACE LE BACKLOG #mstechdays Code/developpement
    17. 17. METTRE EN PLACE LE BACKLOG Elaboration d’un BackLog #mstechdays Code/developpement
    18. 18. PLANIFIER Piloter son projet #mstechdays Code/developpement
    19. 19. PLANIFIER #mstechdays Code/developpement
    20. 20. PLANIFIER ET SUIVRE Définition des itérations et création des tâches #mstechdays Code/developpement
    21. 21. MISE EN PLACE DU LOT #0 L’environnement de développement et le framework applicatif #mstechdays Code/developpement
    22. 22. LOT #0 • Création de la solution Visual Studio – Liée à une tâche d’initialisation – Création de l’arborescence projets • projets d’analyse • projets applicatifs • projets de documentation (ex: SHFB…) • projets de base de données • projets de tests • projets de déploiements #mstechdays Code/developpement
    23. 23. LOT #0 Le diagramme d’architecture (Layer Diagram) • vision « macro » • Source de documentation • Validation à la compilation Attention : validation assez longue sur les projets volumineux. #mstechdays Code/developpement
    24. 24. MISE EN PLACE DE LA SOLUTION Projets et diagramme de couches #mstechdays Code/developpement
    25. 25. AZURE WEB SITE #mstechdays Code/developpement
    26. 26. AZURE WEB SITE Permet la mise en place rapide • d’un environnement d’intégration • d’une intégration continue Idéal pour les projets configurables uniquement via le web.config #mstechdays Code/developpement
    27. 27. AZURE WEB SITE Actions à mener • Création du web site windows azure • Autoriser la connexion entre Azure et VS Online Un build est automatiquement créé. #mstechdays Code/developpement
    28. 28. CRÉATION DU PROJET VS / AZURE Mise en place de la liaison #mstechdays Code/developpement
    29. 29. REALISATION #mstechdays Code/developpement
    30. 30. REALISATION #mstechdays Code/developpement
    31. 31. SPRINT BOARD Mise à jour des tâches #mstechdays Code/developpement
    32. 32. EDITION EN LIGNE : « MONACO » Outil d’édition en ligne • Solution de « fixing » rapide • Option de « Staging » • Permet le maquettage HTML pure • Lié au source control Git pour le moment #mstechdays Code/developpement
    33. 33. EDITION EN LIGNE : « MONACO » Les raccourcis à connaitre • « CTRL+E » pour trouver les options • « ? » Rappel les commandes principales #mstechdays Code/developpement
    34. 34. EDITION D’UN PROJET AVEC MONACO #mstechdays Code/developpement
    35. 35. TESTS #mstechdays Code/developpement
    36. 36. DECLENCHEMENT DU BUILD #mstechdays Code/developpement
    37. 37. COUTS DE MISE EN PLACE DE CETTE USINE ?? 0€ UNIQUEMENT DU TEMPS … #mstechdays Code/developpement
    38. 38. PACKAGING #mstechdays Code/developpement
    39. 39. PACKAGING #mstechdays Code/developpement
    40. 40. AZURE VM POUR LE BUILD Quand le build Visual Studio Online ne suffit plus #mstechdays Code/developpement
    41. 41. LIMITE DU BUILD VISUAL STUDIO ONLINE Le build Visual Studio Online pose les contraintes suivantes • Build < 1h et <75Go • Interdit – – – – #mstechdays installation de composants droits administrateurs connexion RDP au serveur de build mode « interactive » Code/developpement
    42. 42. Azure VM est une option pour avoir son propre environnement de build / intégration. #mstechdays Azure VM Dans ce cas, nous utilisons un Build Controller interne et non hébergé par « Visual Studio Online ». Visual Studio Online DEFINIR UN BUILD CONTROLLER Code/developpement
    43. 43. MISE EN PLACE D’UN BUILD CONTROLLER La cible • Un Active Directory • Un Serveur de Build Active Directory #mstechdays Code/developpement Build Server
    44. 44. MISE EN PLACE D’UN BUILD CONTROLLER Le IAAS VM 1 VM 2 Subnet Availability Set Cloud Svc Virtual Network Storage Account Storage Account Affinity Group #mstechdays Code/developpement Region
    45. 45. MISE EN PLACE D’UN BUILD CONTROLLER ## INITIALISATION DES COMMANDES POWERSHELL AZURE $subcriptionLocation = "C:Users<UserProfile>Downloads<SubscriptionName>credentials.publishsettings" ## Préparation des services azures, récupération de la subscription Azure Get-AzurePublishSettingsFile Import-AzurePublishSettingsFile $subcriptionLocation ## Pour retrouver les abonnements associés Get-AzureSubscription | Format-Table -Property SubscriptionName,SubscriptionId #mstechdays Code/developpement
    46. 46. MISE EN PLACE D’UN BUILD CONTROLLER à utiliser # Définition de la subscription Select-AzureSubscription -SubscriptionName $subcriptionName # Création du groupe d'affinité New-AzureAffinityGroup -Name $affinity -Location $location -Description $descriptionAffinity #mstechdays Code/developpement
    47. 47. MISE EN PLACE D’UN BUILD CONTROLLER # Ajout d'un Vnet 10.0.0.0/8 & "Subnet-AD" 10.0.1.0/29 & "Subnet-BUILD" 10.0.2.0/24 Set-AzureVNetConfig -ConfigurationPath $networkConfigLocation # Ajout du service cloud (accès public) New-AzureService -AffinityGroup $affinity -ServiceName $serviceName -Description $descriptionService Exemple de fichier de configuration XML <NetworkConfiguration xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.microsoft.com/ServiceHosting/2011/07/NetworkConfiguration"> <VirtualNetworkConfiguration> <VirtualNetworkSites> <VirtualNetworkSite name="Vnet-TD2014" AffinityGroup="Affinity-TD2014"> <AddressSpace> <AddressPrefix>10.0.0.0/8</AddressPrefix> </AddressSpace> <Subnets> <Subnet name="Subnet-AD"> <AddressPrefix>10.0.1.0/29</AddressPrefix> </Subnet> <Subnet name="Subnet-BUILD"> <AddressPrefix>10.0.2.0/24</AddressPrefix> </Subnet> </Subnets> </VirtualNetworkSite> </VirtualNetworkSites> </VirtualNetworkConfiguration> </NetworkConfiguration> #mstechdays Code/developpement
    48. 48. MISE EN PLACE D’UN BUILD CONTROLLER # Ajout de compte de stockage New-AzureStorageAccount -StorageAccountName $accountStorage -AffinityGroup $affinity # Création de la VM AD Set-AzureSubscription -SubscriptionName $subcriptionName -CurrentStorageAccount $accountStorage # pour retrouver les images # Get-AzureVMImage | Where-Object {$_.OS -eq "Windows"} | Format-List -Property Label,ImageName,Description $vmAD = New-AzureVMConfig -name $vmNameAD -InstanceSize 'Small' -ImageName $image | Add-AzureProvisioningConfig -Windows -Password $adminPassword -AdminUsername $adminUserName | Set-AzureSubnet $vsubnetAD New-AzureVM -ServiceName $serviceName -VMs $vmAD -VNetName $vnet -DeploymentName Depl-BUILD WaitForBoot #Ajout disque pour du HDD pour l'AD "V" Get-AzureVM $serviceName -Name $vmNameAD | Add-AzureDataDisk -CreateNew -DiskLabel sysvol DiskSizeInGB 32 -LUN 2 -HostCaching None | Update-AzureVM #mstechdays Code/developpement
    49. 49. MISE EN PLACE D’UN BUILD CONTROLLER #Credentials pour WinRmHTTPs $securePassword = ConvertTo-SecureString -String $adminPassword -AsPlainText –Force #Configuration de l’AD Invoke-Command ` -ConnectionUri $uri ` -Credential $adminCredentials ` -SessionOption $option ` -ScriptBlock { $adminCredentials = New-Object ` -TypeName System.Management.Automation.PSCredential ` -ArgumentList "$vmNameAD$adminUserName", $securePassword Param($pdomNetbios, $pdomFQDN, $padminPassword) #Initialise le disque v et format Initialize-Disk -Number 2 -PartitionStyle MBR New-Partition -DiskNumber 2 -UseMaximumSize -DriveLetter v Format-Volume -DriveLetter v -FileSystem NTFS -Confirm:$false #Récupération des informations de communication WinRmHTTPs $uri = Get-AzureWinRMUri -ServiceName $serviceName -Name $vmNameAD Import-Module ADDSDeployment Install-ADDSForest ` -CreateDNSDelegation:$false ` -DatabasePath "v:windowsNTDS" ` -DomainMode "Win2012R2" ` -DomainName $pdomFQDN ` -DomainNetBiosName $pdomNetbios ` -ForestMode "Win2012R2" ` -InstallDns:$true ` -LogPath "v:windowsNTDS" ` -NoRebootOnCompletion:$false ` -SysvolPath "v:windowsSYSVOL" ` -SafeModeAdministratorPassword (convertto-securestring $padminPassword -asplaintext - #Setup AD Import-Module -Name ServerManager Install-WindowsFeature -Name AD-Domain-Services -IncludeManagementTools $option = New-PSSessionOption -SkipCACheck force) ` -Force:$true } ` -ArgumentList $domNetbios, $domFQDN, $adminPassword #mstechdays Code/developpement
    50. 50. MISE EN PLACE D’UN BUILD CONTROLLER #Création de la Vm "BUILD-VSBUILD" et mise dans le domaine $vmBUILD = New-AzureVMConfig -name $vmNameBUILD -InstanceSize 'Large' -ImageName $imageVS | Add-AzureProvisioningConfig -WindowsDomain -joindomain $domFQDN -Domain $domNetbios ` -DomainPassword $adminPassword -Password $adminPassword ` -DomainUserName $adminUserName -AdminUsername $adminUserName | Set-AzureSubnet $vsubnetBUILD New-AzureVM -ServiceName $serviceName -VMs $vmBUILD -VNetName $vnet -WaitForBoot #mstechdays Code/developpement
    51. 51. MISE EN PLACE D’UN BUILD CONTROLLER #mstechdays Code/developpement
    52. 52. MISE EN PLACE D’UN BUILD CONTROLLER #mstechdays Code/developpement
    53. 53. MISE EN PLACE D’UN BUILD CONTROLLER #mstechdays Code/developpement
    54. 54. MISE EN PLACE D’UN BUILD CONTROLLER #mstechdays Code/developpement
    55. 55. MISE EN PLACE D’UN BUILD CONTROLLER #mstechdays Code/developpement
    56. 56. MISE EN PLACE D’UN BUILD CONTROLLER #mstechdays Code/developpement
    57. 57. MISE EN PLACE D’UN BUILD CONTROLLER #mstechdays Code/developpement
    58. 58. MISE EN PLACE D’UN BUILD CONTROLLER #mstechdays Code/developpement
    59. 59. MISE EN PLACE D’UN BUILD CONTROLLER #mstechdays Code/developpement
    60. 60. MISE EN PLACE D’UN BUILD CONTROLLER #mstechdays Code/developpement
    61. 61. MISE EN PLACE D’UN BUILD CONTROLLER #mstechdays Code/developpement
    62. 62. MISE EN PLACE DU BUILD CONTROLLER #mstechdays Code/developpement
    63. 63. CONCLUSION #mstechdays Code/developpement
    64. 64. CONCLUSION Nous avons mis en place – – – – – – #mstechdays un backlog projet un source control un serveur d’intégration avec Azure Web Site un build d’intrégration continue un réseau Windows Azure un controlleur de builds personnalisé Code/developpement
    65. 65. CONCLUSION Visual Studio Online et Windows Azure • Simplifie l’industrialisation • Permet l’agilité • Permet l’amélioration continue des sites web (mais pas que…) #mstechdays Code/developpement
    66. 66. CONCLUSION Franck Farré Architecte ffarre@sqli.com Fabrice Hautot Chef de projet technique fhautot@sqli.com Ressources http://www.technologies-ebusiness.com/ #mstechdays Code/developpement
    67. 67. Digital is business

    ×