[#AZURE] HowTo: Publicar una aplicacion ClickOnce en un website de Azure

image

Buenas,

hoy toca un tutorial de esos rápidos que espero que te ahorre un poco de tiempo, en lugar de investigar como hacerlo. Lo que queremos hacer es simple: publicar una aplicacion WPF con ClickOnce, utilizando un website de Azure como nuestro punto de distribución y actualización. Vamos con el paso a paso.

1. En el portal de AZURE (www.azure.com) creamos un nuevo elemento de tipo “COMPUTE // WEB SITE / QUICK CREATE”.

image

2. Para esta demo el website creado se identifica con http://elbrunoclickonce.azurewebsites.net.

3. Listo AZURE, ahora vamos a Visual Studio 2012 y creamos un nuevo proyecto de tipo WPF Application. En este caso la he llamado “ElBrunoClickOnce”.

image

4. Este paso es opcional pero viene bien para probar nuestros despliegues, mostraremos el número de versión del despliegue de ClickOnce en el título del MainWindow.

5. Agregamos una referencia a System.Deployment.

6. Modificamos el código del MainWindow

   1: using System.Windows;

   2:  

   3: namespace ElBrunoClickOnce

   4: {

   5:     public partial class MainWindow : Window

   6:     {

   7:         public MainWindow()

   8:         {

   9:             InitializeComponent();

  10:             DisplayVersion();

  11:         }

  12:  

  13:         private void DisplayVersion()

  14:         {

  15:             var version = string.Format("assembly: {0}", ((System.Reflection.AssemblyFileVersionAttribute)

  16: (System.Reflection.Assembly.GetExecutingAssembly().

  17: GetCustomAttributes(typeof(System.Reflection.AssemblyFileVersionAttribute), 

  18: false)[0])).Version);

  19:  

  20:             if (System.Deployment.Application.ApplicationDeployment.IsNetworkDeployed)

  21:             {

  22:                 System.Deployment.Application.ApplicationDeployment ad =

  23:                 System.Deployment.Application.ApplicationDeployment.CurrentDeployment;

  24:                 version = string.Format("ClickOnce: {0}", ad.CurrentVersion.ToString());

  25:             }

  26:             Title = version;

  27:         }

  28:     }

  29: }

7. Si ejecutamos la aplicación veremos el número de versión por defecto del ensamblado

image

8. Ahora que tenemos nuestra aplicación, procederemos a publicar la misma en website de Azure. Para esto primero agregaremos un proyecto de tipo ASP.Net MVC 4 a nuestra solución. En este caso lo he llamado “ElBrunoClickOncePublish”.

image

9. Dentro del nuevo proyecto creamos una carpeta llamada “install”

image

10. Ahora publicaremos nuestro proyecto web a Azure. Por suerte los amigos de Microsoft lo han hecho cada vez más fácil, con cada nuevo upgrade de AZURE. Vamos por el camino más fácil de todos: seleccionamos nuestro proyecto Web, deplegamos el context menu y seleccionamos “Publish”

image

11. A continuación debemos seleccionar un perfil para la publicación. Podemos descargar este perfil desde la consola de administración de AZURE de nuestro website.

image

12. Un método más simple, disponible desde el último update de AZURE, es seleccionar “Import” y con nuestras credenciales de AZURE, seleccionar el website de target.

image 

13. Una vez importado el perfil podemos seguir el asistente paso a paso para la publicación. El paso final nos permite hacer un preview de los elementos a publicar y lanzar la publicación.

image

14. Una vez publicado podemos ver el site online

15. Ahora vamos a configurar el despliegue de ClickOnce. Accedemos a las propiedades del proyecto WPF y en la sección Publish completamos los siguientes valores:

Publishing Folder: ..ElBrunoClickOncePublishinstall (Esta configuración publica los archivos de ClickOnce directamente al directorio de proyecto del website)

Installation Folder: http://elbrunoclickonce.azurewebsites.net/install/

image

16. En la sección updates, definimos que nuestra aplicación deberá validar por nuevas versiones antes de lanzarse y definimos una vez más la ruta de actualización.

image 

17. Completamos los valores de la sección “Options”

image

18. Es importante definir una página de publicación para nuestro proyecto, en este caso > publish.htm

image

19. Y ya estamos listos, presionamos “Publish Now” y lanzamos una publicación.

20. Cuando ha terminado la publicación, en el proyecto web seleccionamos la opción de mostrar todos los archivos y vemos que los elementos de la publicación de ClickOnce están dentro de la carpeta “install”

image

21. Los agregamos como parte del website y lanzamos una publicación a AZURE de nuestro website.

image

22. Nuestra url de publicación ya está lista, en este caso es http://elbrunoclickonce.azurewebsites.net/install/publish.htm, si navegamos la misma veremos que tenemos la página de instalación de nuestra app.

image

23. Un detalle importante. Como no he utilizado ningún certificado “bueno” para la publicación, al momento de instalar Win8 nos avisa que este puede ser un software de procedencia dudosa. Como en este caso procede de mi mismo, seleccionamos la opción ”more info” y luego “run anyway”

image

24. Luego ya podemos instalar la aplicación.

image

25. Luego de validar nuevamente la seguridad, ya podemos ver nuestra aplicación funcionando y mostrando el nro de versión de ClickOnce.

image

26. Ahora vamos a generar una nueva versión de la app WPF. Hacemos un publish de la misma nuevamente y veremos que en el proyecto web, tenemos las 2 versiones

image

27. Ahora agregamos al proyecto la versión generada y yo aconsejor eliminar la versión anterior. (Esto es AZURE, el espacio se paga!)

image

28. Publicamos nuevamente nuestro proyecto web a AZURE y si navegamos la página de instalación veremos que la misma se ha actualizado.

image

29. Ahora bien, probemos ClickOnce. Lanzamos la aplicación y vemos que tenemos un update disponible.

image

30. Aplicamos el update, un par de warnings de seguridad y listo !!! tenemos la versión actualizada

image

Y solo en 30 pasos Risa

Saludos @ Home

El Bruno

image image image

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *